/*
 * GemStore Style - Modern SaaS Design 2026
 * Ocean Blue theme - Optimized version
 */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */
:root {
  --gem-primary: #0ea5e9;
  --gem-primary-dark: #0284c7;
  --gem-primary-light: #38bdf8;
  --gem-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  --gem-text: #1f2937;
  --gem-text-muted: #6b7280;
  --gem-border: #e5e7eb;
  --gem-bg: #f3f4f6;
  --gem-radius: 12px;
  --gem-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

/* ============================================================================
   BASE
   ============================================================================ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--gem-bg) !important;
  color: var(--gem-text) !important;
}

a { color: var(--gem-primary) !important; text-decoration: none !important; }
a:hover { color: var(--gem-primary-dark) !important; }

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
  border-radius: var(--gem-radius) !important;
  border: 1px solid var(--gem-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ============================================================================
   BUTTONS - Only style cards/modals, not navbar
   ============================================================================ */
.card .btn,
.modal .btn,
.authentication-wrapper .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
}

/* Global btn-primary - NO shadow to avoid affecting navbar */
.btn-primary {
  background: var(--gem-gradient) !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-primary:focus {
  color: #fff !important;
}

/* Buttons in cards/modals get shadows */
.card .btn-primary,
.modal .btn-primary,
.authentication-wrapper .btn-primary {
  box-shadow: var(--gem-shadow) !important;
}

.card .btn-primary:hover,
.modal .btn-primary:hover,
.authentication-wrapper .btn-primary:hover {
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.45) !important;
}

.btn-outline-primary {
  background: #fff !important;
  color: var(--gem-primary) !important;
  border: 2px solid var(--gem-primary) !important;
}

.btn-outline-primary:hover {
  background: var(--gem-primary) !important;
  color: #fff !important;
}

.btn-secondary {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
  border: 1px solid var(--gem-border) !important;
}

.btn a, .btn > span > a {
  color: inherit !important;
  background: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.btn-label-primary {
  background: rgba(14, 165, 233, 0.1) !important;
  color: var(--gem-primary) !important;
}

.btn-label-primary:hover {
  background: var(--gem-gradient) !important;
  color: #fff !important;
}

/* ============================================================================
   FORMS - Only style in cards/modals
   ============================================================================ */
.card .form-control,
.card .form-select,
.modal .form-control,
.modal .form-select,
.authentication-wrapper .form-control {
  border-radius: 10px !important;
  border: 1px solid var(--gem-border) !important;
  padding: 10px 14px !important;
}

.card .form-control:focus,
.card .form-select:focus,
.modal .form-control:focus,
.authentication-wrapper .form-control:focus {
  border-color: var(--gem-primary) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

.form-check-input:checked {
  background: var(--gem-gradient) !important;
  border-color: var(--gem-primary) !important;
}

.form-switch .form-check-input:checked {
  background: var(--gem-gradient) !important;
}

/* ============================================================================
   SIDEBAR MENU - Dark Navy Style
   ============================================================================ */
.menu-vertical,
.layout-menu {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

.menu-inner > .menu-item > .menu-link {
  border-radius: 10px !important;
  margin: 2px 12px !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
  color: #94a3b8 !important;
}

.menu-inner > .menu-item > .menu-link .menu-icon {
  color: #64748b !important;
}

.menu-inner > .menu-item > .menu-link:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

.menu-inner > .menu-item > .menu-link:hover .menu-icon {
  color: var(--gem-primary-light) !important;
}

.menu-inner > .menu-item.active > .menu-link,
.menu-inner > .menu-item.open > .menu-link {
  background: var(--gem-gradient) !important;
  color: #fff !important;
  box-shadow: var(--gem-shadow) !important;
}

.menu-inner > .menu-item.active > .menu-link .menu-icon,
.menu-inner > .menu-item.open > .menu-link .menu-icon {
  color: #fff !important;
}

.menu-sub {
  background: transparent !important;
}

.menu-sub > .menu-item > .menu-link {
  color: #94a3b8 !important;
}

.menu-sub > .menu-item > .menu-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
}

.menu-sub > .menu-item.active > .menu-link {
  color: var(--gem-primary-light) !important;
  background: rgba(14, 165, 233, 0.15) !important;
}

.menu-header {
  color: #64748b !important;
}

/* App Brand in sidebar */
.app-brand .app-brand-text {
  color: #fff !important;
}

/* Hide sidebar toggle button */
.layout-menu-toggle,
.menu-toggle {
  display: none !important;
}

/* ============================================================================
   NAVBAR - Fixed height 38px
   ============================================================================ */
nav.layout-navbar,
.layout-navbar {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar.landing-navbar,
.landing-navbar {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 8px !important;
  margin: 0 !important;
}

.layout-navbar .container,
.landing-navbar .container,
nav.layout-navbar .container {
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Logo - scale to fit 38px */
.landing-navbar .app-brand img,
.landing-navbar img {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
}

/* Navbar links */
.navbar-nav .nav-link {
  padding: 8px 12px !important;
  line-height: 22px !important;
}

.navbar-nav .nav-link:hover { color: var(--gem-primary) !important; }

/* Buttons in navbar */
.layout-navbar .btn,
.landing-navbar .btn {
  padding: 4px 12px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  height: 28px !important;
}

/* Avatar */
.layout-navbar .avatar,
.landing-navbar .avatar {
  width: 28px !important;
  height: 28px !important;
}

.layout-navbar .avatar img,
.landing-navbar .avatar img {
  width: 28px !important;
  height: 28px !important;
}

/* ============================================================================
   TABLES
   ============================================================================ */
.table > thead > tr > th {
  background: #f9fafb !important;
  font-weight: 600 !important;
  color: #374151 !important;
  border-bottom: 2px solid var(--gem-border) !important;
}

.table > tbody > tr:hover { background: #f9fafb !important; }

/* ============================================================================
   BADGES
   ============================================================================ */
.badge {
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
}

.bg-primary, .badge-primary {
  background: var(--gem-gradient) !important;
}

.bg-label-primary {
  background: rgba(14, 165, 233, 0.1) !important;
  color: var(--gem-primary) !important;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */
.page-link {
  border-radius: 10px !important;
  margin: 0 3px !important;
}

.page-item.active .page-link {
  background: var(--gem-gradient) !important;
  border-color: transparent !important;
  box-shadow: var(--gem-shadow) !important;
}

.page-link:hover {
  border-color: var(--gem-primary) !important;
  color: var(--gem-primary) !important;
}

/* ============================================================================
   DROPDOWN
   ============================================================================ */
.dropdown-menu {
  border-radius: var(--gem-radius) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
  border: 1px solid var(--gem-border) !important;
}

.dropdown-item { border-radius: 8px !important; margin: 2px 8px !important; }
.dropdown-item:hover { background: #f3f4f6 !important; color: var(--gem-primary) !important; }

.dropdown-item.active, .dropdown-item:active {
  background: var(--gem-gradient) !important;
  color: #fff !important;
}

/* ============================================================================
   MODAL
   ============================================================================ */
.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}

/* ============================================================================
   ALERTS
   ============================================================================ */
.alert { border-radius: var(--gem-radius) !important; border: none !important; }
.alert-primary {
  background: rgba(14, 165, 233, 0.1) !important;
  color: #0369a1 !important;
  border-left: 4px solid var(--gem-primary) !important;
}

/* ============================================================================
   TABS & NAV
   ============================================================================ */
.nav-tabs .nav-link.active {
  color: var(--gem-primary) !important;
  border-bottom: 2px solid var(--gem-primary) !important;
}

.nav-pills .nav-link.active {
  background: var(--gem-gradient) !important;
  color: #fff !important;
}

/* ============================================================================
   PROGRESS
   ============================================================================ */
.progress-bar { background: var(--gem-gradient) !important; }

/* ============================================================================
   AUTH PAGES
   ============================================================================ */
.authentication-wrapper {
  background: var(--gem-gradient) !important;
}

.authentication-wrapper .card {
  border-radius: 20px !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}

/* ============================================================================
   LANDING PAGE - APP ACADEMY
   ============================================================================ */
.app-academy { max-width: 1440px; margin: auto; }

.app-academy .card-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  background: var(--gem-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.app-academy .card-body .card {
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.app-academy .card-body .card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

.app-academy .card-body .card a.h5:hover { color: var(--gem-primary) !important; }

.app-academy .card-body .card .btn-label-primary {
  background: var(--gem-gradient) !important;
  color: #fff !important;
}

#gem_btn_login {
  background: var(--gem-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

#gem_btn_logout {
  background: #fff !important;
  color: #ef4444 !important;
  border: 1px solid #fecaca !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
}

/* ============================================================================
   LANDING FOOTER
   ============================================================================ */
.landing-footer,
.landing-footer.bg-body,
footer.landing-footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #e2e8f0 !important;
}

.landing-footer .footer-top {
  background: transparent !important;
  padding: 4rem 0 3rem !important;
}

.landing-footer .footer-bottom {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.landing-footer .app-brand-text,
.landing-footer .footer-link.fw-bold {
  color: #fff !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

.landing-footer .footer-text,
.landing-footer .footer-logo-description,
.landing-footer p {
  color: #94a3b8 !important;
}

.landing-footer .footer-title,
.landing-footer h6 {
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.landing-footer .footer-link,
.landing-footer a.footer-link {
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
}

.landing-footer .footer-link:hover,
.landing-footer a.footer-link:hover {
  color: var(--gem-primary) !important;
}

.landing-footer .footer-form .form-control {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

.landing-footer .footer-form .form-control:focus {
  border-color: var(--gem-primary) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.landing-footer .footer-form .btn-primary {
  background: var(--gem-gradient) !important;
  border: none !important;
}

.landing-footer .footer-bottom a { color: var(--gem-primary) !important; }
.landing-footer .footer-bottom a:hover { color: var(--gem-primary-light) !important; }

/* ============================================================================
   DARK MODE
   ============================================================================ */
.dark-style .layout-wrapper { background: #111827 !important; }
.dark-style .card { background: #1f2937 !important; border-color: #374151 !important; }
.dark-style .layout-navbar { background: #1f2937 !important; border-color: #374151 !important; }
.dark-style .menu-vertical { background: #1f2937 !important; }
.dark-style .form-control, .dark-style .form-select {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}
.dark-style .dropdown-menu { background: #1f2937 !important; border-color: #374151 !important; }
.dark-style .dropdown-item:hover { background: #374151 !important; color: var(--gem-primary-light) !important; }
.dark-style .table > thead > tr > th { background: #111827 !important; }
.dark-style .table > tbody > tr > td { background: #1f2937 !important; border-color: #374151 !important; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 991.98px) {
  .app-academy .card-title { font-size: 24px !important; }
}

@media (max-width: 767.98px) {
  .app-academy .card-title { font-size: 20px !important; }
}