/* ── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(13px, 1.4vw, 15px); }
body { font-family: Arial, Helvetica, sans-serif; background: #f0f4f8;
       color: #1e293b; line-height: 1.5; }
a { color: #00AEEF; text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.muted { color: #94a3b8; }
.fw-600 { font-weight: 600; }

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar { background: #00a8e2; display: flex; align-items: center;
          padding: 0 16px; height: 50px; position: sticky; top: 0; z-index: 100;
          width: 100%; }
.nav-left { display: flex; align-items: center; flex: 1; gap: 0; }
.nav-logo { display: flex; align-items: center; margin-right: 20px; background-color: #00A8E2; padding: 0 12px; height: 50px; }
.nav-logo img { display: block; }
.nav-links { display: flex; gap: 2px; }
.nav-link { color: rgba(255,255,255,.72); font-size: 13px; padding: 0 14px;
            height: 50px; display: flex; align-items: center;
            border-bottom: 3px solid transparent; text-decoration: none;
            transition: color .15s; }
.nav-link:hover { color: #fff; text-decoration: none; }
.nav-link.active { color: #fff; border-bottom-color: #fff; font-weight: 700; }
.nav-link.dim { color: rgba(255,255,255,.35); cursor: default; pointer-events: none; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-username { color: #fff; font-size: 13px; }
.nav-badge { background: rgba(255,255,255,.28); color: #fff; font-size: 11px;
             padding: 2px 9px; border-radius: 4px; }
.nav-logout { color: #fff; font-size: 12px; padding: 4px 12px;
              border: 1.5px solid rgba(255,255,255,.6); border-radius: 4px;
              text-decoration: none; }
.nav-logout:hover { background: rgba(255,255,255,.15); text-decoration: none; }

/* ── SECTION TABS ──────────────────────────────────────────── */
.section-tabs { background: #ffffff; border-bottom: 1px solid #e2e8f0;
                display: flex; align-items: center; padding: 0 16px; height: 40px;
                width: 100%; }
.stab { font-size: 12.5px; color: #64748b; padding: 0 13px; height: 40px;
        border: none; background: none; cursor: pointer;
        border-bottom: 2px solid transparent; }
.stab:hover { color: #00AEEF; }
.stab.active { color: #00AEEF; border-bottom-color: #00AEEF; font-weight: 700; }

/* ── PERIOD BAR ────────────────────────────────────────────── */
.period-bar { background: #ffffff; border-bottom: 1px solid #e2e8f0;
              display: flex; align-items: center; padding: 8px 16px;
              justify-content: space-between; flex-wrap: wrap; gap: 8px;
              width: 100%; }
.period-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.period-label { font-size: 11px; color: #64748b; }
.period-pill { background: #e8f6fd; color: #0076a8; font-size: 12px;
               font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.period-updated { font-size: 11px; color: #94a3b8; }
.period-right { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── MAIN LAYOUT ───────────────────────────────────────────── */
main { display: block; width: 100%; }

/* ── TAB PANES ─────────────────────────────────────────────── */
.tab-pane { padding: 14px 16px; max-width: 1200px; margin: 0 auto; }
.tab-pane.active { display: block; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn { font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
       border: 1px solid #cbd5e1; color: #475569; background: #fff;
       font-family: inherit; display: inline-block; text-align: center; }
.btn:hover { background: #f8fafc; text-decoration: none; color: #475569; }
.btn-primary { background: #00AEEF; border-color: #00AEEF; color: #fff; }
.btn-primary:hover { background: #0099d4; color: #fff; }
.btn-danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.btn-sm { font-size: 11px; padding: 4px 10px; }
.btn-full { width: 100%; }

/* ── KPI GRID ──────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 11px; margin-bottom: 11px; min-width: 0; }
.kpi-card { background: #fff; border: .5px solid #e2e8f0; border-radius: 10px;
            padding: 13px 15px; border-left: 4px solid #00AEEF; }
.kpi-card.green { border-left-color: #10b981; }
.kpi-card.red   { border-left-color: #ef4444; }
.kpi-card.amber { border-left-color: #f59e0b; }
.kpi-card.purple{ border-left-color: #8b5cf6; }
.kpi-label { font-size: 10.5px; color: #64748b; text-transform: uppercase;
             letter-spacing: .5px; margin-bottom: 5px;
             display: flex; align-items: center; gap: 4px; }
.kpi-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid #94a3b8; color: #94a3b8;
  font-size: 8px; cursor: help; flex-shrink: 0;
  position: relative; text-transform: none; letter-spacing: 0;
}
.kpi-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: 130%; left: 50%;
  transform: translateX(-50%);
  background: #1e293b; color: #fff;
  font-size: 11px; font-weight: 400; line-height: 1.5;
  padding: 8px 12px; border-radius: 6px;
  white-space: pre-wrap; width: 230px; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 500;
  text-transform: none; letter-spacing: 0;
}
.kpi-tip:hover::after { opacity: 1; }
.kpi-value { font-size: clamp(18px, 3.5vw, 24px); font-weight: 700; color: #1e293b; margin-bottom: 3px; }
.kpi-value.sm { font-size: 16px; padding-top: 4px; }
.kpi-sub   { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 5px; }
.badge-up  { background: #dcfce7; color: #166534; font-size: 10px;
             padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.badge-dn  { background: #fee2e2; color: #991b1b; font-size: 10px;
             padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.kpi-skeleton { background: #f1f5f9; border-radius: 10px; height: 90px;
                animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── CHART CARDS ───────────────────────────────────────────── */
.chart-card { background: #fff; border: .5px solid #e2e8f0; border-radius: 12px;
              padding: 16px; position: relative; }
.chart-card-header { display: flex; justify-content: space-between;
                     align-items: flex-start; }
.chart-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.chart-sub { font-size: 11px; color: #94a3b8; margin-bottom: 10px; }
.chart-row-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
                  gap: 11px; margin-bottom: 11px; }
.chart-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.chart-pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 11px; }
.chart-area { height: 130px; position: relative; }

/* ── TABLE WRAPPERS ────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

/* Monthly revenue chart — responsive aspect ratio */
#monthly-chart { aspect-ratio: 2.5 / 1; min-height: 260px; position: relative; }
#monthly-chart canvas { width: 100% !important; height: 100% !important; }
/* Category YTD bar — taller */
#catbar-chart { min-height: 320px; position: relative; }
#catbar-chart canvas { width: 100% !important; height: 100% !important; }

/* ── FILTER BAR ────────────────────────────────────────────── */
.filter-bar { background: #ffffff; border-bottom: 1px solid #e2e8f0;
              padding: 8px 16px; display: flex; align-items: center;
              flex-wrap: wrap; gap: 16px; width: 100%; }
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase;
                letter-spacing: .4px; white-space: nowrap; }
.filter-fy-checks { display: flex; gap: 6px; }
.filter-fy-checks label { display: flex; align-items: center; gap: 4px;
                           font-size: 11.5px; color: #334155; cursor: pointer; }
.filter-fy-checks input[type=checkbox] { accent-color: #00AEEF; width: 13px; height: 13px; }
.filter-select { font-size: 11.5px; border: 1px solid #cbd5e1; border-radius: 5px;
                 padding: 3px 8px; color: #334155; background: #fff;
                 font-family: inherit; cursor: pointer; }
.filter-select:focus { outline: none; border-color: #00AEEF; }
.filter-apply { font-size: 11px; padding: 4px 12px; border-radius: 5px;
                border: 1px solid #00AEEF; color: #00AEEF; background: #fff;
                cursor: pointer; font-family: inherit; font-weight: 600; }
.filter-apply:hover { background: #e8f6fd; }

/* ── INFO TOOLTIPS ─────────────────────────────────────────── */
.info-tip { position: relative; display: inline-block; cursor: help;
            color: #94a3b8; font-size: 12px; margin-left: 5px;
            vertical-align: middle; line-height: 1; }
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 400;
  padding: 8px 11px;
  border-radius: 7px;
  white-space: normal;
  width: 260px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 999;
  text-transform: none;
  letter-spacing: 0;
}
.info-tip:hover::after { opacity: 1; }

/* ── DOWNLOAD BUTTONS ──────────────────────────────────────── */
.dl-btn { font-size: 10px; padding: 3px 8px; border-radius: 4px;
          border: 1px solid #cbd5e1; color: #64748b; background: #fff;
          cursor: pointer; font-family: inherit; white-space: nowrap; }
.dl-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #334155; }
.card-actions { display: flex; align-items: center; gap: 4px; }

/* ── LEGEND ────────────────────────────────────────────────── */
.legend { display: flex; gap: 11px; margin: 6px 0; }
.leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; }
.leg-dot { width: 18px; height: 3px; border-radius: 2px; }

/* ── TOGGLE GROUP ──────────────────────────────────────────── */
.toggle-group { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.tgl { font-size: 11px; padding: 3px 10px; border-radius: 5px; cursor: pointer;
       border: 1px solid #cbd5e1; color: #64748b; background: #fff;
       font-family: inherit; }
.tgl.active { background: #00AEEF; border-color: #00AEEF; color: #fff; font-weight: 600; }

/* ── DATA TABLES ───────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px;
              table-layout: auto; }
.data-table thead th { background: #fff; border-bottom: 2px solid #00a8e2;
                 color: #0f172a; font-weight: 700; font-size: 12px;
                 padding: 9px 12px; text-align: center; cursor: pointer;
                 white-space: nowrap; user-select: none; }
.data-table thead th:first-child { text-align: left; }
.data-table tbody td { padding: 7px 12px; border-bottom: .5px solid #f1f5f9;
                 text-align: center; color: #334155; }
.data-table tbody td:first-child { text-align: left; font-weight: 600; color: #1e293b; }
.data-table tbody tr:nth-child(even) td { background: #fafbfc; }
.data-table tbody tr:hover td { background: #f0f7ff !important; }
.data-table tbody tr:last-child td { border-bottom: none; }
.sort-arrow { font-size: 9px; color: #94a3b8; margin-left: 3px; }
.td-pos { color: #059669; font-weight: 700; }
.td-neg { color: #ef4444; font-weight: 700; }
.td-cur { color: #00a8e2; font-weight: 700; }
.td-neutral { color: #64748b; }
.chg-pos { background: #dcfce7; color: #166534; padding: 2px 7px; border-radius: 4px;
           font-size: 11px; font-weight: 700; display: inline-block; white-space: nowrap; }
.chg-neg { background: #fee2e2; color: #991b1b; padding: 2px 7px; border-radius: 4px;
           font-size: 11px; font-weight: 700; display: inline-block; white-space: nowrap; }
.kpi-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px;
             font-weight: 700; display: inline-block; white-space: nowrap; }

/* ── HEATMAP ───────────────────────────────────────────────── */
.heatmap-card { background: #fff; border: .5px solid #e2e8f0; border-radius: 10px;
                padding: 13px 15px; margin-bottom: 11px; overflow: hidden; }
.heatmap-title { font-size: 13px; font-weight: 700; color: #00AEEF;
                 text-transform: uppercase; letter-spacing: .3px; }
.heatmap-sub { font-size: 11px; color: #64748b; margin: 4px 0 10px; }

/* Table scroll wrapper — horizontal scroll with sticky first column */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.heatmap-table { width: 100%; border-collapse: collapse; font-size: 11.5px; white-space: nowrap; }
.heatmap-table th { background: #1e3a5f; color: #fff; padding: 6px 8px;
                    text-align: center; font-weight: 700; font-size: 11px; }
.heatmap-table th:first-child { text-align: left; min-width: 110px;
                                  position: sticky; left: 0; z-index: 3;
                                  background: #1e3a5f; }
.heatmap-table td { padding: 5px 8px; text-align: center; border-bottom: .5px solid #f1f5f9;
                    font-weight: 600; }
.heatmap-table td:first-child { text-align: left; color: #334155; font-weight: 700;
                                  position: sticky; left: 0; z-index: 2;
                                  background: #fff; box-shadow: 2px 0 4px rgba(0,0,0,.04); }
.heatmap-table tr.total td { background: #e8f3fc !important; color: #1e3a5f !important;
                               font-weight: 700; border-top: 1.5px solid #b3d4f0; }
.heatmap-table tr.total td:first-child { background: #e8f3fc !important; }
.hm-ytd-pos { background: #e8f6fd; color: #0076a8; font-weight: 700;
              border-radius: 4px; padding: 1px 5px; }
.hm-ytd-neg { background: #fee2e2; color: #991b1b; font-weight: 700;
              border-radius: 4px; padding: 1px 5px; }

/* Heatmap card view — hidden by default, toggle or mobile activates */
.hm-cards { display: none; }
.hm-cards.active { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-view-card { border: .5px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; }
.hm-vc-name { font-size: 11.5px; font-weight: 700; color: #334155; margin-bottom: 8px;
              padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.hm-vc-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.hm-vc-month { font-size: 10px; color: #64748b; width: 42px; flex-shrink: 0; }
.hm-vc-bar-bg { flex: 1; height: 10px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.hm-vc-bar { height: 100%; border-radius: 3px; }
.hm-vc-pct { font-size: 10.5px; font-weight: 700; width: 44px; text-align: right; flex-shrink: 0; }
.hm-vc-ytd { margin-top: 8px; padding-top: 6px; border-top: 1px solid #f1f5f9;
              font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; }

/* Revenue mix responsive */
.mix-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; }
.mix-layout.mix-table-only { grid-template-columns: 1fr; }
#mix-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.mix-leg-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #334155; }
.mix-leg-dot { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.mix-fy-hdr { cursor: pointer; user-select: none; white-space: nowrap; }
.mix-fy-hdr:hover { color: #00AEEF; }
.mix-hdr-active { color: #00AEEF; border-bottom: 2px solid #00AEEF; font-weight: 700; }

/* ── SECTION LABEL ─────────────────────────────────────────── */
.section-label { font-size: 11px; font-weight: 700; color: #475569;
                 text-transform: uppercase; letter-spacing: .4px; margin: 4px 0 9px; }

/* ── FLASH MESSAGES ────────────────────────────────────────── */
.flash-container { padding: 0 16px; margin-top: 8px; }
.flash { padding: 10px 14px; border-radius: 8px; font-size: 13px;
         display: flex; justify-content: space-between; align-items: center;
         margin-bottom: 8px; }
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #e8f6fd; color: #0076a8; border: 1px solid #7dd3fc; }
.flash-close   { background: none; border: none; cursor: pointer; font-size: 16px;
                 color: inherit; opacity: .6; }

/* ── LOGIN PAGE ────────────────────────────────────────────── */
.login-page { background: #00AEEF; min-height: 100vh; display: flex;
              align-items: center; justify-content: center; }
.login-wrap { width: 100%; max-width: 420px; padding: 24px; }
.login-card { background: #fff; border-radius: 16px; padding: 36px 32px; }
.login-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.login-subtitle { text-align: center; font-size: 13px; color: #64748b; margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-note { text-align: center; font-size: 11px; color: #94a3b8; margin-top: 20px; }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12.5px; font-weight: 600; color: #334155; }
.form-group input, .form-group select, .form-group textarea {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; color: #1e293b;
  transition: border-color .15s; width: 100%; }
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: #00AEEF;
  box-shadow: 0 0 0 3px rgba(0,174,239,.15); }

/* ── FILE DROP ─────────────────────────────────────────────── */
.file-drop { border: 2px dashed #cbd5e1; border-radius: 10px; position: relative; }
.file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-drop-label { display: flex; flex-direction: column; align-items: center;
                   gap: 6px; padding: 28px; cursor: pointer; }
.file-icon { font-size: 28px; }
.file-hint { font-size: 11px; color: #94a3b8; }
.file-drop.drag-over { border-color: #00AEEF; background: #e8f6fd; }
.file-drop.file-selected { border-color: #10b981; background: #f0fdf4; }

/* ── PAGE LAYOUT ───────────────────────────────────────────── */
.page-wrap { padding: 20px 16px; max-width: 1100px; }
.page-narrow { max-width: 540px; }
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 20px; font-weight: 700; color: #1e293b; }
.page-sub { font-size: 13px; color: #64748b; margin-top: 4px; }

/* ── UPLOAD HISTORY ────────────────────────────────────────── */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.upload-history { display: flex; flex-direction: column; gap: 8px; }
.upload-row { background: #fff; border: .5px solid #e2e8f0; border-radius: 10px;
              padding: 12px 14px; display: flex; justify-content: space-between;
              align-items: center; gap: 12px; }
.upload-row-left { display: flex; align-items: center; gap: 12px; }
.upload-status { font-size: 10px; font-weight: 700; padding: 3px 8px;
                 border-radius: 10px; text-transform: uppercase; }
.status-ready      { background: #dcfce7; color: #166534; }
.status-processing { background: #fef3c7; color: #92400e; }
.status-error      { background: #fee2e2; color: #991b1b; }
.upload-period { font-size: 13px; font-weight: 600; color: #1e293b; }
.upload-meta   { font-size: 11px; color: #94a3b8; }
.upload-figure { font-size: 12px; font-weight: 600; color: #00AEEF; }
.upload-error  { font-size: 12px; color: #ef4444; cursor: help; }

/* ── ADMIN TABLE ───────────────────────────────────────────── */
.admin-table th { font-size: 11px; }
.role-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.role-admin      { background: #fce7f3; color: #9d174d; }
.role-management { background: #e8f6fd; color: #0076a8; }
.role-finance    { background: #dcfce7; color: #166534; }
.role-readonly   { background: #f1f5f9; color: #475569; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.status-dot.active   { background: #10b981; }
.status-dot.inactive { background: #94a3b8; }
.row-inactive td { opacity: .5; }
.role-note { padding: 8px 12px; background: #f8fafc; border-radius: 6px; }

/* ── INSIGHTS ──────────────────────────────────────────────── */
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.event-card { background: #fff; border: .5px solid #e2e8f0; border-radius: 10px;
              margin-bottom: 8px; overflow: hidden; display: flex; }
.event-bar { width: 5px; flex-shrink: 0; }
.event-body { padding: 10px 12px; flex: 1; }
.event-header { display: flex; justify-content: space-between; align-items: flex-start; }
.event-title { font-size: 12.5px; font-weight: 700; color: #1e293b; }
.event-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.event-tag { background: #f1f5f9; color: #475569; font-size: 10px;
             padding: 1px 7px; border-radius: 10px; }
.event-date { font-size: 10px; color: #94a3b8; }
.event-desc { font-size: 11.5px; color: #64748b; margin-top: 4px; line-height: 1.5; }
.sev-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.badge-muted { background: #f1f5f9; color: #64748b; font-size: 10.5px;
               padding: 2px 7px; border-radius: 4px; font-weight: 400; }

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state h2 { font-size: 18px; color: #334155; margin-bottom: 8px; }
.empty-state p { color: #64748b; margin-bottom: 20px; }

/* ── BOTTOM NAV (mobile only) ──────────────────────────────── */
.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0;
              z-index: 200; background: #fff; border-top: 1px solid #e2e8f0;
              height: 56px; justify-content: space-around; align-items: stretch; }
.bnav-item { display: flex; flex-direction: column; align-items: center;
             justify-content: center; gap: 2px; padding: 4px 8px;
             color: #94a3b8; text-decoration: none; font-size: 10px; flex: 1;
             transition: color .15s; }
.bnav-item:hover, .bnav-item.active { color: #00a8e2; text-decoration: none; }
.bnav-icon { width: 20px; height: 20px; }

/* ── RESPONSIVE ────────────────────────────────────────────── */

/* 900px – KPI 2-col, charts begin stacking */
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-row-2-1 { grid-template-columns: 1fr; }
  #monthly-chart { aspect-ratio: 2.5 / 1; min-height: 220px; }
  #catbar-chart { min-height: 260px; }
}

/* 768px – full mobile layout */
@media (max-width: 768px) {
  html { font-size: clamp(13px, 2vw, 15px); }
  .kpi-value { font-size: clamp(18px, 4vw, 26px); }
  .chart-title { font-size: clamp(12px, 2.5vw, 14px); }

  /* Navbar: compact, hide page links (moved to bottom nav) */
  .navbar { height: 44px; padding: 0 12px; }
  .nav-logo { height: 44px; padding: 0 10px; }
  .nav-links { display: none; }

  /* Bottom nav: show */
  .bottom-nav { display: flex; }
  main { padding-bottom: 56px; }
  .tab-pane { padding: 8px 8px 70px; }

  /* Section tabs → scrollable pills */
  .section-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch;
                  height: auto; padding: 8px 10px; gap: 6px;
                  -ms-overflow-style: none; scrollbar-width: none; }
  .section-tabs::-webkit-scrollbar { display: none; }
  .stab { background: #f1f5f9; border-radius: 20px; padding: 6px 14px;
          font-size: 12px; height: auto; border-bottom: none;
          white-space: nowrap; flex-shrink: 0; }
  .stab.active { background: #00a8e2; color: #fff; border-bottom-color: transparent; }
  .stab:hover { color: inherit; background: #e2e8f0; }
  .stab.active:hover { background: #00a8e2; color: #fff; }

  /* Layout */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .chart-row-2-1 { grid-template-columns: 1fr; }
  .chart-grid-2 { grid-template-columns: 1fr; }
  .chart-pair-row { grid-template-columns: 1fr; }
  .upload-grid { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }

  /* Chart canvas min-height on mobile */
  .chart-area { min-height: 200px; }

  /* Heatmap: force card view */
  .hm-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .hm-table-wrap.table-scroll { display: none !important; }
  .hm-view-toggle { display: none !important; }

  /* Spacing reductions */
  .chart-card { padding: 12px; border-radius: 10px; }
  .kpi-card { padding: 10px 12px; }
  .filter-bar { padding: 6px 10px; gap: 10px; }
  .period-bar { padding: 6px 10px; }
  .mix-layout { grid-template-columns: 1fr; }
  #mix-donut-wrap { height: 180px; }
  .card-actions { gap: 2px; }
  .dl-btn { font-size: 9px; padding: 2px 5px; }
}

/* 600px – 1-col KPI, stacked filters */
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .chart-card { padding: 8px; }
  .card-actions { flex-wrap: wrap; }
  .hm-cards.active { grid-template-columns: 1fr; }
  .hm-cards { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   INSIGHTS & EVENTS PAGE
══════════════════════════════════════════════════════════════ */

/* Page header */
.ins-page-header { display:flex; justify-content:space-between; align-items:center;
                   padding:14px 16px; background:#fff; border-bottom:.5px solid #e2e8f0;
                   flex-wrap:wrap; gap:10px; }
.ins-page-title  { font-size:17px; font-weight:700; color:#0f172a;
                   display:flex; align-items:center; gap:10px; }
.ins-pending-badge { font-size:11px; padding:2px 10px; border-radius:10px;
                     background:#fef3c7; color:#92400e; font-weight:700; }
.ins-page-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Tab bar */
.ins-tab-bar { background:#fff; border-bottom:1px solid #e2e8f0;
               display:flex; padding:0 16px; overflow-x:auto; }
.ins-tab { font-size:12.5px; color:#64748b; padding:0 14px; height:40px; border:none;
           background:none; cursor:pointer; border-bottom:2px solid transparent;
           white-space:nowrap; transition:color .15s; }
.ins-tab:hover { color:#00AEEF; }
.ins-tab.active { color:#00AEEF; border-bottom-color:#00AEEF; font-weight:700; }

/* Tab panes */
.ins-tab-pane { padding:16px; }

/* ── Timeline ──────────────────────────────────────────────── */
.tl-spine { position:relative; padding:4px 0; }
.tl-spine::before { content:''; position:absolute; left:20px; top:0; bottom:0;
                    width:2px; background:#e2e8f0; z-index:0; }
.tl-month { position:relative; padding-left:52px; margin-bottom:32px; }
.tl-month-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.tl-dot { position:absolute; left:14px; top:4px; width:14px; height:14px;
          border-radius:50%; border:2px solid #fff; z-index:1; }
.tl-ml { font-size:14px; font-weight:700; color:#0f172a; }
.tl-month-rev { font-size:13px; color:#64748b; }
.tl-count-pill { font-size:10px; background:#f1f5f9; color:#64748b;
                 padding:2px 8px; border-radius:10px; }
.tl-cards { display:flex; flex-direction:column; gap:10px; }

/* ── Insight cards ─────────────────────────────────────────── */
.insight-card { background:#fff; border:.5px solid #e2e8f0; border-radius:10px;
                padding:14px 16px; border-left:4px solid #94a3b8; position:relative; }
.insight-card.positive { border-left-color:#22c55e; }
.insight-card.negative { border-left-color:#ef4444; }
.insight-card.neutral  { border-left-color:#94a3b8; }
.insight-card.unknown  { border-left-color:#f59e0b; }
.insight-card.pending-card { border-left-color:#f59e0b; }

.icard-head    { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; gap:8px; }
.icard-badges  { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.icard-actions { display:flex; gap:4px; flex-shrink:0; align-items:center; }
.icard-title   { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:6px; line-height:1.4; }
.icard-body    { font-size:12.5px; color:#475569; line-height:1.65; }
.icard-attach  { font-size:11px; color:#64748b; margin-top:8px; }

/* Inline edit */
.icard-edit-area  { margin-top:10px; }
.icard-edit-title { width:100%; padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px;
                    font-size:13px; margin-bottom:6px; color:#1e293b; }
.icard-edit-body  { width:100%; padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px;
                    font-size:12.5px; resize:vertical; color:#1e293b; }
.icard-edit-title:focus, .icard-edit-body:focus { outline:none; border-color:#00AEEF; }

/* ── Badges ────────────────────────────────────────────────── */
.src-badge        { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:600; }
.src-badge.system     { background:#eff6ff; color:#1d4ed8; }
.src-badge.management { background:#f5f3ff; color:#7c3aed; }

.eff-badge           { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:600; }
.eff-badge.positive  { background:#dcfce7; color:#166534; }
.eff-badge.negative  { background:#fee2e2; color:#991b1b; }
.eff-badge.neutral   { background:#f1f5f9; color:#475569; }
.eff-badge.unknown   { background:#fef3c7; color:#92400e; }

.pend-badge  { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:700;
               background:#fef3c7; color:#92400e; }
.subj-pill   { font-size:10px; padding:2px 8px; border-radius:10px; background:#f0f9ff; color:#0369a1; font-weight:600; }
.month-pill  { font-size:10px; padding:2px 8px; border-radius:10px; background:#f8fafc; color:#64748b; }
.board-pill  { font-size:10px; padding:2px 8px; border-radius:10px; background:#eff6ff; color:#1d4ed8; font-weight:700; }

/* ── Pending actions ───────────────────────────────────────── */
.pend-actions { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }

/* ── Buttons ───────────────────────────────────────────────── */
.board-btn        { font-size:11px; padding:3px 9px; border-radius:4px; cursor:pointer;
                    border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; }
.board-btn.board-on { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; font-weight:700; }
.ins-btn-edit     { font-size:11px; padding:3px 9px; border-radius:4px; cursor:pointer;
                    border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; }
.ins-btn-del      { font-size:11px; padding:3px 9px; border-radius:4px; cursor:pointer;
                    border:1px solid #fecaca; background:#fff5f5; color:#ef4444; }
.btn-green { background:#dcfce7 !important; color:#166534 !important; border-color:#86efac !important; }
.btn-red   { background:#fee2e2 !important; color:#991b1b !important; border-color:#fca5a5 !important; }
.btn-blue  { background:#eff6ff !important; color:#1d4ed8 !important; border-color:#bfdbfe !important; }

/* ── Flash messages ────────────────────────────────────────── */
#ins-flash { position:fixed; top:60px; right:16px; z-index:9999;
             display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.ins-flash-msg { padding:10px 16px; border-radius:6px; font-size:13px; font-weight:600;
                 box-shadow:0 4px 12px rgba(0,0,0,.12); pointer-events:auto;
                 animation:insFlashIn .2s ease; }
.ins-flash-msg.flash-success { background:#dcfce7; color:#166534; }
.ins-flash-msg.flash-error   { background:#fee2e2; color:#991b1b; }
.ins-flash-msg.flash-info    { background:#f1f5f9; color:#475569; }
@keyframes insFlashIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }

/* ── Filter bar (All events) ───────────────────────────────── */
.ins-filter-bar { background:#fff; border:.5px solid #e2e8f0; border-radius:10px;
                  padding:10px 14px; margin-bottom:12px;
                  display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ── Add form ──────────────────────────────────────────────── */
.ins-form      { max-width:720px; }
.ins-form-row  { display:flex; gap:16px; flex-wrap:wrap; }
.ins-form-group { margin-bottom:14px; flex:1; min-width:200px; }
.ins-form-label { font-size:12px; font-weight:700; color:#475569; display:block; margin-bottom:5px; }
.ins-form-input { width:100%; padding:8px 12px; border:1px solid #e2e8f0; border-radius:8px;
                  font-size:13px; color:#1e293b; background:#fff; }
.ins-form-input:focus { outline:none; border-color:#00AEEF; box-shadow:0 0 0 3px rgba(0,174,239,.1); }
.ins-form-select { padding-right:28px; }
.ins-form-textarea { resize:vertical; min-height:80px; line-height:1.6; }

/* Compact board toggle (chart card headers) */
.board-chart-tgl { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; }
.board-chart-tgl input[type=checkbox] { opacity:0; width:0; height:0; position:absolute; }
.btgl-track { width:28px; height:15px; background:#e2e8f0; border-radius:15px;
              position:relative; display:inline-block; transition:background .2s; flex-shrink:0; }
.btgl-track::before { content:''; position:absolute; width:11px; height:11px; background:#fff;
                       border-radius:50%; top:2px; left:2px; transition:.2s;
                       box-shadow:0 1px 2px rgba(0,0,0,.15); }
.board-chart-tgl input:checked + .btgl-track { background:#00AEEF; }
.board-chart-tgl input:checked + .btgl-track::before { transform:translateX(13px); }
.btgl-label { font-size:10px; color:#94a3b8; font-weight:600; white-space:nowrap; }
.board-chart-tgl:has(input:checked) .btgl-label { color:#00AEEF; }

/* Board toggle switch */
.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-knob { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
               background:#e2e8f0; border-radius:22px; transition:.2s; }
.toggle-knob::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
                        background:#fff; border-radius:50%; transition:.2s; }
.toggle-switch input:checked + .toggle-knob { background:#00AEEF; }
.toggle-switch input:checked + .toggle-knob::before { transform:translateX(18px); }

/* ── Fade-out (dismiss animation) ──────────────────────────── */
@keyframes insCardFadeOut { from { opacity:1; transform:scaleY(1); } to { opacity:0; transform:scaleY(0.85); } }
.fading-out { animation:insCardFadeOut .35s ease forwards; pointer-events:none; }

/* ── Month divider (alternate name used in running log) ────── */
.month-divider { background:#1e3a5f; color:#fff; padding:8px 16px; font-weight:700;
                 font-size:13px; border-radius:6px; margin-bottom:12px; }
.month-divider.negative { background:#7f1d1d; }

/* ── Running log (board report doc view) ───────────────────── */
.running-log-doc { max-width:800px; margin:0 auto; font-size:14px; line-height:1.8; }
.running-log-month { background:#1e3a5f; color:#fff; padding:10px 20px;
                     margin:20px 0 10px; font-size:14px; font-weight:700; }

/* ── Empty state ───────────────────────────────────────────── */
.ins-empty { background:#fff; border:.5px solid #e2e8f0; border-radius:10px;
             padding:36px 24px; text-align:center; color:#64748b; font-size:13px;
             line-height:1.8; }
.ins-empty a { color:#00AEEF; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ins-page-header { padding:10px 12px; }
  .ins-tab-pane { padding:12px; }
  .tl-spine::before { left:12px; }
  .tl-month { padding-left:36px; }
  .tl-dot { left:6px; top:4px; width:12px; height:12px; }
  .ins-form-row { flex-direction:column; gap:0; }
}

/* ── FINANCE MODULE ────────────────────────────────────────── */
.fin-company-tabs { display:flex; gap:4px; margin-bottom:4px; flex-wrap:wrap; }
.fin-company-tabs .stab { font-size:12px; padding:5px 12px; }

.fin-pl-table th,
.fin-pl-table td { font-size:12px; }
.fin-pl-table td:not(:first-child) { text-align:right; min-width:72px; }
.fin-pl-table th:not(:first-child) { text-align:right; }
.fin-subtotal-row td { font-weight:700; border-top:1px solid #e2e8f0;
                       background:#f8fafc; }
.fin-total-col { font-weight:700; border-left:2px solid #e2e8f0; }
.fin-neg { color:#dc2626; }

.status-pill { display:inline-block; font-size:11px; padding:2px 8px;
               border-radius:10px; font-weight:600; }
.status-ready { background:#d1fae5; color:#065f46; }
.status-processing { background:#fef3c7; color:#92400e; }
.status-failed { background:#fee2e2; color:#991b1b; }
.status-pending { background:#e2e8f0; color:#475569; }

/* Finance modal reuses main modal styles */

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45);
                  display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-box { background:#fff; border-radius:10px; width:min(480px,92vw);
             max-height:85vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.modal-header { display:flex; align-items:center; justify-content:space-between;
                padding:14px 18px; border-bottom:1px solid #e2e8f0; }
.modal-title { font-size:15px; font-weight:700; color:#1e3a5f; }
.modal-close { background:none; border:none; font-size:20px; color:#94a3b8;
               cursor:pointer; line-height:1; padding:0 2px; }
.modal-close:hover { color:#1e293b; }
.modal-body { padding:16px 18px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px;
                padding:12px 18px; border-top:1px solid #e2e8f0; }
.form-group { margin-bottom:4px; }
.form-label { display:block; font-size:12px; color:#64748b; margin-bottom:3px; font-weight:600; }

/* ── VERSION BADGE ─────────────────────────────────────────── */
.version-badge { font-size:10px; color:rgba(255,255,255,.6); text-decoration:none;
                 padding:2px 7px; border:1px solid rgba(255,255,255,.25);
                 border-radius:10px; margin-left:2px; position:relative;
                 white-space:nowrap; }
.version-badge:hover { color:#fff; border-color:rgba(255,255,255,.6); text-decoration:none; }
.version-dot { position:absolute; top:-3px; right:-3px; width:7px; height:7px;
               background:#10b981; border-radius:50%; border:1px solid #008bbf; }

/* ── CHANGELOG PAGE ────────────────────────────────────────── */
.cl-page { max-width:820px; margin:0 auto; padding:24px 16px 48px; }
.cl-back { display:inline-flex; align-items:center; gap:6px; font-size:13px;
           color:#64748b; margin-bottom:20px; text-decoration:none; }
.cl-back:hover { color:#1e3a5f; text-decoration:none; }
.cl-page-title { font-size:22px; font-weight:800; color:#1e3a5f; margin-bottom:4px; }
.cl-page-sub { font-size:13px; color:#64748b; margin-bottom:24px; }

.cl-card { background:#fff; border:0.5px solid #e2e8f0; border-radius:12px;
           margin-bottom:12px; overflow:hidden; }
.cl-card.major { background:#1e3a5f; border-color:#1e3a5f; }

.cl-card-header { display:flex; align-items:center; gap:10px;
                  padding:16px 18px; cursor:pointer; user-select:none; }
.cl-version-num { font-size:18px; font-weight:800; color:#00AEEF; flex-shrink:0; }
.cl-card.major .cl-version-num { color:#5bc8f5; }
.cl-date { font-size:12px; color:#94a3b8; }
.cl-card.major .cl-date { color:rgba(255,255,255,.5); }
.cl-badges { display:flex; gap:6px; align-items:center; }
.cl-type-badge { font-size:10px; font-weight:700; letter-spacing:.05em;
                 padding:2px 8px; border-radius:4px; }
.cl-type-badge.major { background:#1e3a5f; color:#fff; }
.cl-card.major .cl-type-badge.major { background:rgba(255,255,255,.15); color:#fff; }
.cl-type-badge.minor { background:#e0f2fe; color:#0369a1; }
.cl-type-badge.patch { background:#f1f5f9; color:#64748b; }
.cl-current-badge { font-size:10px; font-weight:700; padding:2px 8px;
                    border-radius:4px; background:#d1fae5; color:#065f46; }
.cl-card.major .cl-current-badge { background:rgba(16,185,129,.2); color:#6ee7b7; }
.cl-toggle-btn { margin-left:auto; font-size:12px; color:#94a3b8; background:none;
                 border:none; cursor:pointer; padding:4px 8px; border-radius:6px;
                 flex-shrink:0; }
.cl-toggle-btn:hover { background:#f1f5f9; color:#1e3a5f; }
.cl-card.major .cl-toggle-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.cl-card.major .cl-toggle-btn { color:rgba(255,255,255,.5); }

.cl-body { padding:0 18px 18px; }
.cl-section { margin-bottom:18px; }
.cl-section:last-child { margin-bottom:0; }
.cl-cat-label { display:flex; align-items:center; gap:7px; font-size:11px;
                font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                color:#64748b; margin-bottom:10px; }
.cl-card.major .cl-cat-label { color:rgba(255,255,255,.5); }
.cl-cat-dot { width:6px; height:6px; border-radius:50%; background:#00AEEF; flex-shrink:0; }
.cl-divider { height:0.5px; background:#e2e8f0; margin-bottom:14px; }
.cl-card.major .cl-divider { background:rgba(255,255,255,.1); }

.cl-feature { display:flex; gap:12px; margin-bottom:12px; }
.cl-feature:last-child { margin-bottom:0; }
.cl-icon { width:32px; height:32px; border-radius:8px; background:#f0f7ff;
           display:flex; align-items:center; justify-content:center;
           flex-shrink:0; margin-top:1px; }
.cl-card.major .cl-icon { background:rgba(255,255,255,.1); }
.cl-icon svg { width:16px; height:16px; stroke:#00AEEF; fill:none;
               stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cl-icon.icon-check svg { stroke:#10b981; }
.cl-feature-title { font-size:13px; font-weight:700; color:#1e293b; margin-bottom:3px; }
.cl-card.major .cl-feature-title { color:#fff; }
.cl-feature-desc { font-size:12px; color:#64748b; line-height:1.55; }
.cl-card.major .cl-feature-desc { color:rgba(255,255,255,.6); }

/* ── Finance months table ───────────────────────────────────── */
.fin-months-table td:not(:first-child),
.fin-months-table th:not(:first-child) { text-align:right; min-width:70px; }
.fin-months-table th { white-space:nowrap; }
.status-final { background:#d1fae5; color:#065f46; }
.status-provisional { background:#fef3c7; color:#92400e; }
.prov-badge { font-size:9px; font-weight:700; background:#fef3c7; color:#92400e;
              padding:1px 4px; border-radius:3px; vertical-align:middle; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Amount cells with full-value tooltip ───────────────────────────────── */
td.amount-cell { cursor: help; }

/* ── IC offset rows ─────────────────────────────────────────────────────── */
.fin-ic-offset-row td,
.fin-ic-row td { font-style:italic; font-size:11px; color:#64748b;
                 background:#fafafa; border-top:none; padding-top:0; }
.fin-ic-offset-row td:first-child,
.fin-ic-row td:first-child { padding-left:20px; }
.fin-ic-offset-row .fin-neg,
.fin-ic-row .fin-neg { color:#b45309; }

/* ── FX rate sub-row in P&L header ─────────────────────────────────────── */
.fx-subrow td { background:#f8fafc; border-bottom:1px solid #e2e8f0; }

/* ── FX grid ────────────────────────────────────────────────────────────── */
.fx-grid-input { padding:3px 6px !important; font-size:12px !important; height:28px; }
.fx-confirmed-badge { display:inline-block; font-size:10px; font-weight:700;
                      color:#065f46; background:#d1fae5; padding:1px 5px;
                      border-radius:4px; margin-top:2px; }
.fx-source-sel { font-size:11px !important; padding:3px 6px !important; height:28px; }

/* ── ILUK toggle ────────────────────────────────────────────────────────── */
#iluk-toggle-wrap { align-items:center; gap:0; }
#iluk-toggle-wrap .toggle-group { margin:0; }
#iluk-toggle-wrap .tgl { font-size:11px; padding:4px 10px; }
#bs-iluk-wrap .toggle-group { margin:0; }
#bs-iluk-wrap .tgl { font-size:11px; padding:4px 10px; }

.btn-bs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border: 1.5px solid #00AEEF;
  border-radius: 20px;
  background: white;
  color: #00AEEF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-bs-toggle:hover { background: #f0f9ff; }
.btn-bs-toggle[data-mode="full"] {
  background: #00AEEF;
  color: white;
}

/* ── Balance Sheet table ────────────────────────────────────────────────── */
.bs-table th, .bs-table td { font-size:12px; }
.bs-num { text-align:right !important; min-width:88px; white-space:nowrap; }
.bs-subtotal-row td { font-weight:700; border-top:1px solid #e2e8f0;
                      background:#f8fafc; }
.bs-grand-total-row td { font-weight:800; border-top:2px solid #1e3a5f;
                         border-bottom:2px solid #1e3a5f; background:#eef2f8; }
.bs-subitem-row td { font-size:11px; color:#475569; }
.bs-subitem-label { padding-left:22px !important; }
.bs-date-header-row td { background:#e8edf5; padding:6px 10px;
                         font-size:12px; color:#1e3a5f; }
.bs-footnote { font-size:10px; color:#94a3b8; padding:6px 10px 4px;
               border-top:1px solid #e2e8f0; }
.bs-footnote-cell { font-size:10px; color:#94a3b8; font-style:italic; }

/* ── Signal badges (KPIs) ───────────────────────────────────────────────── */
.sig-badge { font-size:10px; font-weight:700; padding:1px 6px;
             border-radius:4px; margin-left:4px; }
.sig-green { background:#d1fae5; color:#065f46; }
.sig-amber { background:#fef3c7; color:#92400e; }
.sig-red   { background:#fee2e2; color:#991b1b; }


/* KPI metric tooltips */
.kpi-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}
.kpi-tooltip .tip-text {
  visibility: hidden;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  line-height: 1.4;
  pointer-events: none;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.kpi-tooltip:hover .tip-text { visibility: visible; }

/* ── Inline calculation tooltips (ⓘ on table labels) ───────────────────── */
.calc-tip {
  position: relative;
  display: inline-block;
  cursor: help;
  color: #94a3b8;
  font-size: 11px;
  vertical-align: middle;
  margin-left: 4px;
}
.calc-tip .tip-text {
  visibility: hidden;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 200;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  line-height: 1.45;
  pointer-events: none;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.calc-tip:hover .tip-text { visibility: visible; }

/* ── Insights filter bar ──────────────────────────────────────────────────── */
.ins-filter {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ins-filter:hover  { background: #e2e8f0; }
.ins-filter.active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }

/* ── Domain badge on insight cards ───────────────────────────────────────── */
.domain-badge { display: inline-block; border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 7px; }

/* ── Upload grid responsive ──────────────────────────────────────────────── */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .upload-grid { grid-template-columns: 1fr; } }

/* ── Event type selector (+ Add event chooser) ──────────────────────────── */
.event-type-selector { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.event-type-btn {
  flex: 1; min-width: 160px; max-width: 220px;
  border: 2px solid #e2e8f0; border-radius: 12px; background: #fff;
  padding: 18px 16px; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 5px;
}
.event-type-btn:hover  { border-color: #00AEEF; box-shadow: 0 2px 8px rgba(0,174,239,.12); }
.event-type-btn.active { border-color: #00AEEF; background: #f0faff; }
.etb-icon  { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.etb-title { font-size: 13px; font-weight: 700; color: #1e293b; }
.etb-sub   { font-size: 11px; color: #64748b; }
.event-subform { display: none; }
.event-subform.active { display: block; }

/* ── Site badges ────────────────────────────────────────────────────────── */
.site-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; letter-spacing: .04em;
}
.site-DZ  { background: #dbeafe; color: #1d4ed8; }
.site-EDZ { background: #fce7f3; color: #9d174d; }
.site-NDZ { background: #d1fae5; color: #065f46; }
.site-LD  { background: #fef3c7; color: #92400e; }
.site-AA  { background: #ede9fe; color: #5b21b6; }

/* ── Project status badges ──────────────────────────────────────────────── */
.proj-status { display: inline-block; font-size: 10px; font-weight: 700;
               padding: 2px 8px; border-radius: 4px; }
.proj-status.active    { background: #d1fae5; color: #065f46; }
.proj-status.completed { background: #e0f2fe; color: #0369a1; }
.proj-status.on_hold   { background: #fef3c7; color: #92400e; }
.proj-status.cancelled { background: #fee2e2; color: #991b1b; }

/* ── Project grid ───────────────────────────────────────────────────────── */
.project-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; margin-top: 14px;
}
@media (max-width: 700px) { .project-grid { grid-template-columns: 1fr; } }

.project-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 16px 18px; border-left: 4px solid #00AEEF;
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow .15s;
}
.project-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.project-card.board-card { border-left-color: #f59e0b; }
.proj-card-head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.proj-card-name { font-size: 14px; font-weight: 700; color: #1e293b; flex: 1; line-height: 1.3; }
.proj-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.proj-card-desc { font-size: 12px; color: #475569; line-height: 1.5;
                  display: -webkit-box; -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical; overflow: hidden; }
.proj-card-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                    font-size: 11px; color: #94a3b8; margin-top: 2px; }
.proj-card-footer a { color: #00AEEF; font-weight: 600; }

/* ── Update cards (project detail + running log) ────────────────────────── */
.update-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px; border-left: 3px solid #e2e8f0;
}
.update-card.board-update { border-left-color: #f59e0b; }
.update-date  { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.update-title { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 5px; }
.update-body  { font-size: 12px; color: #475569; line-height: 1.55; white-space: pre-wrap; }
.update-footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
                 align-items: center; }

/* ── Photo / attachment grid ────────────────────────────────────────────── */
.photo-grid  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.photo-thumb {
  width: 80px; height: 60px; object-fit: cover; border-radius: 6px;
  border: 1px solid #e2e8f0; cursor: pointer;
}
.attach-link { font-size: 11px; color: #00AEEF; display: flex; align-items: center; gap: 4px; }

/* ── Project detail layout ──────────────────────────────────────────────── */
.proj-detail-header {
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 16px 20px;
}
.proj-detail-title { font-size: 20px; font-weight: 800; color: #1e293b; margin-bottom: 6px; }
.proj-detail-meta  { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.proj-detail-body  { max-width: 1200px; margin: 0 auto; padding: 14px 16px; }
.proj-updates-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}

/* ── Running log card (Projects in Insights tab) ────────────────────────── */
.rl-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 13px 16px; margin-bottom: 10px; border-left: 4px solid #00AEEF;
}
.rl-card-head { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 5px; }
.rl-proj-name { font-size: 11px; font-weight: 700; color: #64748b; }
.rl-date      { font-size: 11px; color: #94a3b8; margin-left: auto; }
.rl-title     { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.rl-body      { font-size: 12px; color: #475569; line-height: 1.5; }

/* ── Project badge on timeline cards ───────────────────────────────────── */
.proj-badge { display: inline-block; font-size: 10px; font-weight: 700;
              padding: 1px 7px; border-radius: 10px;
              background: #ede9fe; color: #5b21b6;
              border: 1px solid #ddd6fe; }

/* ── FX rate note beneath currency toggles ─────────────────────────────── */
.fx-rate-note { font-size: 11px; color: #888; font-style: italic;
                margin-top: 4px; text-align: right; }

/* ── Universal P&L table (account-level detail) ───────────────────────── */
.btn-pl-toggle {
  padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer;
  background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155;
  transition: background 0.15s;
}