/* =====================================================
   Design tokens (Phase 2 pilot, 2026-09-22)
   -----------------------------------------------------
   Formalizes the navy/green palette that was already emerging
   ad hoc (login/marketing hero navy #0b2f6a, the green submenu
   highlight rgba(31,122,99,...) used across every "*-menu.menu-
   open" block above) into reusable variables + component classes,
   so new pages can opt into a consistent "elevated card" look
   instead of bare AdminLTE defaults (plain white card, Bootstrap
   blue buttons) without re-deriving the same shadow/radius values
   each time. Deliberately lighter-weight than the login page's
   video/glass/tilt treatment -- these are in-app pages that already
   sit inside the navbar+sidebar chrome, not a full-bleed hero.
   ===================================================== */

:root {
  --brand-navy: #0b2f6a;
  --brand-navy-dark: #082349;
  --brand-accent: #1f7a63;
  --brand-accent-dark: #0f5132;
  --card-radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(11, 47, 106, 0.06), 0 6px 18px rgba(11, 47, 106, 0.08);
  --shadow-card-hover: 0 2px 6px rgba(11, 47, 106, 0.10), 0 10px 28px rgba(11, 47, 106, 0.14);
}

/* Elevated card: rounded, soft navy-tinted shadow, navy gradient
   header (instead of AdminLTE's flat card-primary blue bar). */
.card-elevated {
  border: none;
  border-radius: var(--card-radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-elevated > .card-header {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
  border-bottom: none;
  padding: 1.5rem 1.75rem 1.25rem;
}

.card-elevated > .card-header .card-title {
  /* AdminLTE's base .card-title is float:left -- fine when it's the
     header's only child, but it pulls the sibling .card-subtitle up
     onto the same line instead of wrapping below it. */
  float: none;
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
}

.card-elevated > .card-header .card-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.card-elevated > .card-body {
  padding: 1.5rem 1.75rem;
}

.card-elevated > .card-footer {
  background: #fff;
  border-top: 1px solid #eef1f5;
  padding: 1rem 1.75rem;
}

/* Selectable tile: a list row styled as its own small card, for
   pick-one-of-several UI (e.g. company selection). Wraps a native
   radio so keyboard/a11y behavior is unchanged; :has() drives the
   selected-state highlight without any JS (same modern-CSS comfort
   level as color-mix() already used on the login page). */
.tile-select {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tile-select:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 35%, #e9ecef);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.tile-select:has(input:checked) {
  border-color: var(--brand-accent);
  background-color: color-mix(in srgb, var(--brand-accent) 6%, #fff);
}

.tile-select-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--brand-accent) 12%, #fff);
  color: var(--brand-accent-dark);
  font-size: 1.05rem;
}

.tile-select-name {
  font-weight: 600;
  color: #1c2b45;
}

.btn-brand {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  font-weight: 600;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
  color: #fff;
}

/* User's Guide page (Phase 3, 2026-09-22) -- long-form content inside
   the same .card-elevated shell, sections separated by a thin rule
   instead of nested cards. */
.guide-section {
  padding: 1.1rem 0;
  border-bottom: 1px solid #eef1f5;
}

.guide-section:first-child {
  padding-top: 0;
}

.guide-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.guide-section h4 {
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.guide-section p {
  color: #3c4a5e;
  margin-bottom: 0.5rem;
}

/* FAQ accordion -- reuses the .tile-select hover feel for each
   question row instead of AdminLTE's default accordion markup. */
.faq-item {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  color: #1c2b45;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.faq-question:hover,
.faq-question:focus {
  background-color: color-mix(in srgb, var(--brand-accent) 6%, #fff);
  color: #1c2b45;
  text-decoration: none;
}

.faq-chevron {
  color: var(--brand-accent-dark);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.1rem 1rem;
  color: #3c4a5e;
}

/* =====================================================
   Income Statement – Financial Statement View
   ===================================================== */

.statement-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.statement-table th,
.statement-table td {
  white-space: nowrap;
}

.sticky-col {
  position: sticky;
  left: 0;
  background-color: #ffffff;
  z-index: 2;
}

thead th.sticky-col {
  z-index: 3;
}

/* ================================
   Sidebar brand logo — final fix
   ================================ */

.brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
  overflow: visible;          /* IMPORTANT: prevent clipping */
  height: auto;               /* allow container to grow */
}

.sidebar-logo {
  max-width: 100%;
  max-height: 110px;          /* slightly reduced, still very readable */
  height: auto;
  object-fit: contain;
}

/* =====================================================
   Sidebar: lighter background (Step 1)
   ===================================================== */

/* Base sidebar background */
.main-sidebar {
  background-color: #f1f3f5 !important;  /* slightly darker light gray */
  border-right: 1px solid #dee2e6;       /* subtle separation line */
}

/* Ensure the sidebar panel background matches */
.main-sidebar .sidebar {
  background-color: transparent !important;
}

/* Default nav link text color on light sidebar */
.main-sidebar .nav-sidebar .nav-link {
  color: #343a40 !important; /* dark gray for readability */
}

/* Icons inherit readable color */
.main-sidebar .nav-sidebar .nav-icon {
  color: #343a40 !important;
}

/* Active item: keep strong contrast */
.main-sidebar .nav-sidebar .nav-link.active {
  background-color: #e9ecef !important;
  color: #111 !important;
}

/* Hover: subtle highlight */
.main-sidebar .nav-sidebar .nav-link:hover {
  background-color: #e9ecef !important;
  color: #111 !important;
}

/* =====================================================
   FORCE sidebar background (definitive light–medium gray)
   ===================================================== */

body[class*="sidebar-"] .main-sidebar {
  background-color: #ced4da !important;  /* darker gray */
  border-right: 1px solid #adb5bd;
}

body[class*="sidebar-"] .main-sidebar .sidebar {
  background-color: transparent !important;
}

/* =====================================================
   Sidebar section headers (FINANCIAL STATEMENTS, etc.)
   ===================================================== */

body[class*="sidebar-"] .nav-sidebar .nav-header {
  color: #0d6efd !important;   /* bold blue accent (matches comparison-subitem) */
  font-weight: 700;            /* bold */
  letter-spacing: 0.04em;      /* subtle clarity for all-caps */
}

/* =====================================================
   Sidebar: Comparison submenu styling (Step 2)
   ===================================================== */

body[class*="sidebar-"] .nav-sidebar .comparison-subitem {
  font-weight: 600;            /* bold */
  font-style: italic;          /* italic */
  color: #0d6efd !important;   /* subtle accent (Bootstrap primary blue) */
  padding-left: 1.75rem;       /* slight right indent */
}

/* Optional: hover state for clarity */
body[class*="sidebar-"] .nav-sidebar .comparison-subitem:hover {
  color: #0b5ed7 !important;
}

/* =====================================================
   Sidebar: INTERNAL SCROLL (FINAL, no conflicts)
   ===================================================== */

/*
  You are using:
    <body class="... layout-fixed layout-navbar-fixed">
  and your sidebar markup is:
    <aside class="main-sidebar ...">
      <a class="brand-link">...</a>
      <div class="sidebar">...menu...</div>
    </aside>

  So the correct approach is:
  - offset sidebar below the fixed navbar (top: 57px)
  - make sidebar a flex column: brand-link takes natural height
  - make .sidebar take remaining height and scroll
*/

body.layout-navbar-fixed.layout-fixed .main-sidebar {
  top: 57px;                      /* below fixed navbar */
  height: calc(100vh - 57px);     /* remaining viewport height */
  padding-top: 0 !important;      /* do NOT use padding-top for offset */
  display: flex;                  /* critical */
  flex-direction: column;         /* logo on top, scroll area below */
  overflow: hidden;               /* outer container never scrolls */
}

/* Logo area should not shrink */
body.layout-navbar-fixed.layout-fixed .main-sidebar .brand-link {
  flex: 0 0 auto;
}

/* Scroll container */
body.layout-navbar-fixed.layout-fixed .main-sidebar .sidebar {
  flex: 1 1 auto;
  min-height: 0;                  /* critical in flex layouts */
  overflow-y: auto;               /* show scrollbar when needed */
  overflow-x: hidden;
  scrollbar-gutter: stable;       /* optional: prevents layout shift */
}

/* Optional: ensure content also starts below navbar */
body.layout-navbar-fixed .content-wrapper {
  padding-top: 0;
}

/* =====================================================
   Financial statement tables — fixed year column width
   ===================================================== */

/* Apply to Income Statement & Balance Sheet */
.statement-table th:not(.sticky-col),
.statement-table td:not(.sticky-col) {
  width: 120px;          /* table-layout:fixed only sizes columns off `width`, */
  min-width: 120px;      /* not min-width, so it must be set explicitly here   */
  text-align: right;
  white-space: nowrap;  /* prevent wrapping */
}

/* =====================================================
   Financial statement tables — sticky column width fix
   ===================================================== */

/* Fix width of the first (sticky) column */
.statement-table .sticky-col {
  width: 260px;       /* see note above — table-layout:fixed ignores min-width */
  min-width: 260px;   /* stable label column */
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;        /* clip long account names instead of letting */
  text-overflow: ellipsis; /* them spill visibly over the year columns   */
}

/* =====================================================
   Financial statement tables — deterministic layout
   ===================================================== */

.statement-table {
  table-layout: fixed;
  width: 100%;   /* floor — grows past this once column widths exceed it,
                    scrolling horizontally inside .table-responsive         */
}

/* =====================================================
   Dashboard — Data Availability info-box icon sizing
   ===================================================== */

.info-box .info-box-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.2rem;
}

/* =====================================================
   Income Statements — submenu block highlight (CORRECT)
   ===================================================== */

.income-statement-menu.menu-open .nav-treeview .nav-link {
  background-color: rgba(31, 122, 99, 0.15) !important;
  color: #0f5132 !important;
}

.income-statement-menu.menu-open .nav-treeview .nav-link:hover {
  background-color: rgba(31, 122, 99, 0.25) !important;
  color: #0f5132 !important;
}

/* =====================================================
   Balance Sheets — submenu block highlight (IDENTICAL)
   ===================================================== */

.balance-sheet-menu.menu-open .nav-treeview .nav-link {
  background-color: rgba(31, 122, 99, 0.15) !important;
  color: #0f5132 !important;
}

.balance-sheet-menu.menu-open .nav-treeview .nav-link:hover {
  background-color: rgba(31, 122, 99, 0.25) !important;
  color: #0f5132 !important;
}

/* =====================================================
   Company Metrics — submenu block highlight (IDENTICAL)
   ===================================================== */

.company-metrics-menu.menu-open .nav-treeview .nav-link {
  background-color: rgba(31, 122, 99, 0.15) !important;
  color: #0f5132 !important;
}

.company-metrics-menu.menu-open .nav-treeview .nav-link:hover {
  background-color: rgba(31, 122, 99, 0.25) !important;
  color: #0f5132 !important;
}

/* =====================================================
   Financial Ratios — submenu block highlight (IDENTICAL)
   ===================================================== */

.financial-ratios-menu.menu-open .nav-treeview .nav-link {
  background-color: rgba(31, 122, 99, 0.15) !important;
  color: #0f5132 !important;
}

.financial-ratios-menu.menu-open .nav-treeview .nav-link:hover {
  background-color: rgba(31, 122, 99, 0.25) !important;
  color: #0f5132 !important;
}

/* =====================================================
   Delete Financial Data — submenu block highlight (IDENTICAL)
   ===================================================== */

.delete-financial-data-menu.menu-open .nav-treeview .nav-link {
  background-color: rgba(31, 122, 99, 0.15) !important;
  color: #0f5132 !important;
}

.delete-financial-data-menu.menu-open .nav-treeview .nav-link:hover {
  background-color: rgba(31, 122, 99, 0.25) !important;
  color: #0f5132 !important;
}

/* =====================================================
   AI Ratio Report content formatting
   ===================================================== */

#aiRatioReportContent {
  white-space: pre-wrap;   /* keeps line breaks but wraps long lines */
  font-family: inherit;
  line-height: 1.5;
}

#aiRatioReportContent .katex-display {
  margin: 0.75rem 0;
}

/* =====================================================
   Dashboard watermark + contact section
   ===================================================== */

.dashboard-empty-state {
  width: 100%;
  /* Was calc(100vh - 120px) back when this watermark was the dashboard's
     only content and needed to fill the viewport (Phase 4, 2026-09-22,
     added real panels above it -- that height would now push them off
     screen with a huge dead gap in between). */
  min-height: 260px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20px;
}

.dashboard-watermark {
  max-width: 320px;
  width: 45%;
  opacity: 0.50;   /* watermark transparency */
  pointer-events: none;
  user-select: none;
}

/* Dashboard plan-features / login-history panels (Phase 4, 2026-09-22) */
.plan-feature-list,
.login-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-feature-item,
.login-history-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f1f3f5;
  color: #3c4a5e;
}

.plan-feature-item:last-child,
.login-history-item:last-child {
  border-bottom: none;
}

.plan-feature-item.included i {
  color: var(--brand-accent-dark);
}

.plan-feature-item.locked {
  color: #9aa5b1;
}

.plan-feature-item.locked i {
  color: #c6ccd3;
}

.login-history-item i {
  color: var(--brand-accent-dark);
}

.dashboard-empty-inner {
  text-align: center;
}

.dashboard-contact {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.dashboard-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-contact-icon {
  color: #0b2f6a;
  font-size: 16px;
}

.dashboard-contact-link {
  color: #0b2f6a;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
}

.dashboard-contact-link:hover {
  text-decoration: underline;
}

.dashboard-contact-sep {
  margin: 0 10px;
  opacity: 0.6;
}

.dashboard-copyright {
  margin-top: 8px;
  font-size: 13px;
  color: #6c757d; /* muted gray */
}

/* ================================
   Top navbar year/metrics selectors — keep on one row
   ================================
   .form-inline wraps its items onto a second line whenever the
   labels+selects don't fit (Bootstrap 4 default). Turkish labels
   are long enough to trigger this around ~1400px window width and
   below (e.g. 1366x768, 1280x800 -- both common laptop screens)
   even though English never does at those widths.

   Tried making the row horizontally scrollable instead (flex-wrap:
   nowrap + overflow-x:auto) -- rejected: overflow-x:auto forces
   overflow-y to a clipping value too (CSS spec quirk), which cuts
   off the bootstrap-select dropdown menus since they render as
   normal descendants of this row, not escaped to <body>. Fixing
   that via bootstrap-select's data-container="body" option instead
   made the dropdown menu render at a fixed (0,0) position ignoring
   the toggle button entirely -- a worse regression. So: just make
   the row narrower instead, tight enough to avoid wrapping instead
   of handling overflow after the fact. */
.navbar-compact-forms .form-group {
  margin-right: 0.5rem !important; /* was mr-3 (1rem) between groups */
}

.navbar-compact-forms .form-group label {
  margin-right: 0.35rem !important; /* was mr-2 (0.5rem) label-to-select */
  font-size: 0.85rem;
}

.navbar-compact-forms .bootstrap-select {
  width: 115px !important; /* was the select's own data-width="150px" */
}

/* A long company name in the navbar switcher is unbounded-width by
   default, so it can eat into the same flex row and squeeze the
   selectors above back into wrapping -- same failure mode, new
   trigger. Cap it and ellipsize; full name is still available via
   the title="" tooltip added alongside this class. */
.active-company-name {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}