/* =========================================================
 * 1. THEME TOKENS
 * =======================================================*/

/* DARK THEME (current look) */
:root[data-bs-theme="dark"] {
  --app-bg: #060b10;
  --app-sidebar-bg: #111827;
  --app-sidebar-border: #1f2937;
  --app-card-bg: #111827;
  --app-card-border: #1f2937;
  --app-accent: #3b82f6;
  --app-accent-soft: rgba(59,130,246,.15);
  --app-text-main: #e5e7eb;
  --app-text-muted: #9ca3af;
}

/* LIGHT THEME (full light) */
:root[data-bs-theme="light"] {
  --app-bg: #e5e7eb;
  --app-sidebar-bg: #ffffff;
  --app-sidebar-border: #e5e7eb;
  --app-card-bg: #ffffff;
  --app-card-border: #e5e7eb;
  --app-accent: #2563eb;
  --app-accent-soft: rgba(37,99,235,.08);
  --app-text-main: #111827;
  --app-text-muted: #6b7280;
}

/* Base */
body {
  background-color: var(--app-bg);
}
.app-shell {
  min-height: 100vh;
}

/* =========================================================
 * 2. LAYOUT: SIDEBAR
 * =======================================================*/

.app-sidebar {
  width: 280px;
  background: var(--app-sidebar-bg);
  border-right: 1px solid var(--app-sidebar-border);
}

.app-sidebar-brand {
  height: 64px;
  border-bottom: 1px solid var(--app-sidebar-border);
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #facc15, #b45309);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #0f172a;
}

.app-sidebar-nav {
  padding: 1rem 1rem 1rem 1.25rem;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}

.menu-section-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--app-text-muted);
  margin-top: .75rem;
  margin-bottom: .25rem;
}

.nav-link.app-nav-link {
  font-size: .86rem;
  padding: .35rem .75rem;
  border-radius: .5rem;
  color: var(--app-text-main);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.nav-link.app-nav-link .dot {
  width: .4rem;
  height: .4rem;
  border-radius: 999px;
  background: #4b5563;
}

.nav-link.app-nav-link.active .dot {
  background: var(--app-accent);
}

.sidebar-search {
  border-radius: .75rem;
  padding: .35rem .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  margin-bottom: .75rem;
}

.sidebar-search input {
  border: 0;
  background: transparent;
  font-size: .78rem;
}

.sidebar-search input:focus {
  outline: none;
  box-shadow: none;
}

/* =========================================================
 * 3. LAYOUT: MAIN AREA
 * =======================================================*/

.app-main {
  background: radial-gradient(circle at top, #020617 0, #020617 35%, #020617 100%);
}

.app-main-header {
  height: 64px;
  border-bottom: 1px solid #1f2937;
  backdrop-filter: blur(10px);
  background: linear-gradient(to right, rgba(15,23,42,.9), rgba(15,23,42,.85));
}

/* =========================================================
 * 4. COMPONENTS
 * =======================================================*/

/* 4.1 Top tabs (client profile menu) */
.top-tabs-tile {
  display: flex;
  flex-direction: column;   /* title on top, details below */
  align-items: flex-start;
  justify-content: center;
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--app-card-border);
  background: var(--app-card-bg);
  font-size: .85rem;
  cursor: pointer;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

.top-tabs-tile span:first-child {
  font-weight: 500;         /* title */
}

.top-tabs-tile span + span {
  display: block;           /* always next line */
  font-size: .7rem;         /* details */
  color: #9ca3af;
  margin-top: .1rem;
}

.top-tabs-tile i {
  opacity: .85;
  font-size: .95rem;
}

/* 4.2 KPI tiles */
.kpi-block {
  background: var(--app-card-bg);
  border-radius: 1rem;
  border: 1px solid var(--app-card-border);
  padding: .9rem 1.1rem;
  min-height: 120px;
}

.kpi-block-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .4rem;
}

.kpi-block-main {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: .2rem;
}

.kpi-block-sub {
  font-size: .78rem;
}

/* 4.3 Graph panel */
.graph-panel {
  background: var(--app-card-bg);
  border-radius: 1rem;
  border: 1px solid var(--app-card-border);
  padding: 1rem 1.2rem;
  margin-top: .75rem;
  min-height: 260px;
}

.graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
  font-size: .8rem;
}

.graph-body {
  border-radius: .85rem;
  border: 1px dashed #1f2937;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* 4.4 Strips (summary links, etc.) */
.strip-link {
  border-radius: .75rem;
  border: 1px solid var(--app-card-border);
  padding: .45rem .7rem;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}

/* 4.5 Footer */
footer.app-footer {
  font-size: .72rem;
  border-top: 1px solid #1f2937;
  padding: .4rem 1.5rem;
}

/* 4.6 Dropdown helpers (for nested menus) */
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* 4.7 Period dropdown: title on top, date below */
.dropdown-period-item {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: .05rem;
}

.dropdown-period-item span:first-child {
  font-size: .85rem;
  font-weight: 500;
}

.dropdown-period-item span + span {
  font-size: .75rem;
  color: var(--app-text-muted);
}

/* =========================================================
 * 5. DARK THEME OVERRIDES
 * =======================================================*/

:root[data-bs-theme="dark"] .nav-link.app-nav-link {
  color: #e5e7eb;
}

:root[data-bs-theme="dark"] .nav-link.app-nav-link.active,
:root[data-bs-theme="dark"] .nav-link.app-nav-link:hover {
  background: rgba(31,41,55,.85);
  color: #fff;
}

:root[data-bs-theme="dark"] .sidebar-search {
  background: #020617;
  border: 1px solid var(--app-sidebar-border);
  color: #9ca3af;
}

:root[data-bs-theme="dark"] .sidebar-search input {
  color: #e5e7eb;
}

:root[data-bs-theme="dark"] .kpi-block-title,
:root[data-bs-theme="dark"] .kpi-block-sub,
:root[data-bs-theme="dark"] .graph-header,
:root[data-bs-theme="dark"] .graph-body,
:root[data-bs-theme="dark"] .menu-section-label {
  color: #9ca3af;
}

:root[data-bs-theme="dark"] .graph-body {
  background-image: linear-gradient(135deg, rgba(31,41,55,.7), rgba(15,23,42,.7));
}

:root[data-bs-theme="dark"] .top-tabs-tile {
  color: #d1d5db;
  background: #020617;
}

:root[data-bs-theme="dark"] .top-tabs-tile:hover {
  border-color: var(--app-accent);
  color: #e5e7eb;
}

:root[data-bs-theme="dark"] .strip-link {
  color: #9ca3af;
  background: #020617;
}

:root[data-bs-theme="dark"] .strip-link:hover {
  border-color: var(--app-accent);
  color: #e5e7eb;
}

:root[data-bs-theme="dark"] .kpi-block-main {
  color: #e5e7eb;
}

:root[data-bs-theme="dark"] footer.app-footer {
  color: #6b7280;
}

:root[data-bs-theme="dark"] .app-main {
  background: radial-gradient(circle at top, #020617 0, #020617 35%, #020617 100%);
}

/* =========================================================
 * 6. LIGHT THEME OVERRIDES
 * =======================================================*/

:root[data-bs-theme="light"] body {
  background-color: var(--app-bg);
}

:root[data-bs-theme="light"] .app-main {
  background: radial-gradient(circle at top, #e5e7eb 0, #e5e7eb 35%, #e5e7eb 100%);
}

:root[data-bs-theme="light"] .app-main-header {
  background: linear-gradient(to right, #ffffff, #e5e7eb);
  border-bottom: 1px solid #e5e7eb;
}

:root[data-bs-theme="light"] .app-sidebar-brand {
  border-bottom: 1px solid #e5e7eb;
}

:root[data-bs-theme="light"] .nav-link.app-nav-link {
  color: #111827;
}

:root[data-bs-theme="light"] .nav-link.app-nav-link .dot {
  background: #d1d5db;
}

:root[data-bs-theme="light"] .nav-link.app-nav-link.active,
:root[data-bs-theme="light"] .nav-link.app-nav-link:hover {
  background: #e5e7eb;
  color: #111827;
}

:root[data-bs-theme="light"] .sidebar-search {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

:root[data-bs-theme="light"] .sidebar-search input {
  color: #111827;
}

:root[data-bs-theme="light"] .card-panel,
:root[data-bs-theme="light"] .kpi-block,
:root[data-bs-theme="light"] .graph-panel {
  background: #ffffff;
  border-color: #e5e7eb;
}

:root[data-bs-theme="light"] .graph-body {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

:root[data-bs-theme="light"] .kpi-block-main {
  color: #111827;
}

:root[data-bs-theme="light"] .kpi-block-title,
:root[data-bs-theme="light"] .kpi-block-sub,
:root[data-bs-theme="light"] .graph-header,
:root[data-bs-theme="light"] .menu-section-label {
  color: #6b7280;
}

:root[data-bs-theme="light"] .top-tabs-tile {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
}

:root[data-bs-theme="light"] .top-tabs-tile:hover {
  border-color: var(--app-accent);
  color: #111827;
}

:root[data-bs-theme="light"] .strip-link {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}

:root[data-bs-theme="light"] .strip-link:hover {
  border-color: var(--app-accent);
  color: #111827;
}

:root[data-bs-theme="light"] footer.app-footer {
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  background: transparent;
}