/* ============================================================
   AuditRails.AI — Global Stylesheet v1.0
   Shared across all use cases hosted on demo.auditrails.ai.

   Usage in each use-case HTML:
     <link rel="stylesheet" href="auditrails-global.css">

   Use-case-specific overrides can follow in a <style> block
   or a separate CSS file linked after this one.
   ============================================================ */

/* --- Fonts (must be first) --- */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Lato:wght@400;700&display=swap');

/* --- Browser reset --- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;                 /* no outer scroll — content area scrolls internally */
}
* { box-sizing: border-box; }

/* --- App styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
  .db { width: 100%; height: 100vh; overflow: hidden; font-size: 1rem; background: #F1F5F9; font-family: 'Urbanist', sans-serif; display: flex; flex-direction: column; font-size: 1rem; }

  .nav { background: #000033; height: 50px; padding: 0 20px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .hamburger { display: flex; flex-direction: column; gap: 3px; cursor: pointer; flex-shrink: 0; }
  .hamburger span { display: block; width: 16px; height: 2px; background: rgba(255,255,255,0.55); border-radius: 1px; }
  .nav-logo img { height: 28px; width: auto; flex-shrink: 0; }
  .ai-wrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .ai-input { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; color: #fff; font-size: 0.78rem; font-family: 'Urbanist', sans-serif; padding: 5px 16px; width: 280px; outline: none; }
  .ai-input::placeholder { color: rgba(255,255,255,0.45); }
  .ai-input:focus { border-color: rgba(0,245,255,0.5); background: rgba(255,255,255,0.13); }
  .nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .ai-btn { width: 28px; height: 28px; border-radius: 50%; background: #533AFD; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
  .ai-btn svg { width: 14px; height: 14px; }
  .nav-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
  .nav-co { color: rgba(255,255,255,0.85); font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }
  .nav-screen { color: rgba(255,255,255,0.6); font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }
  .data-as-of { color: rgba(255,255,255,0.7); font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; }
  .sync-btn { background: rgba(0,245,255,0.12); border: 1px solid rgba(0,245,255,0.35); color: #00F5FF; font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
  .sync-dot { width: 5px; height: 5px; border-radius: 50%; background: #00F5FF; }
  .avatar { width: 28px; height: 28px; border-radius: 50%; background: #533AFD; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }

  .body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 10px; background: #F1F5F9; flex: 1; min-width: 0; width: 100%; }

  .top3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; flex-shrink: 0; }
  .tile-sm { background: #FFFFFF; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 18px; overflow: visible; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .tlabel { font-size: 0.7rem; color: #9ca3af; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; font-weight: 600; }
  .tval { font-size: 1.4rem; font-weight: 700; color: #000033; line-height: 1; margin-bottom: 2px; }
  .tsub { font-size: 0.8rem; overflow: visible; position: relative; }
  .orb { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .og { background: #15803D; } .oy { background: #C2410C; }
  .date-bar { display: flex; align-items: center; gap: 0; padding: 10px 18px; flex-shrink: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .date-range-group { display: flex; align-items: center; gap: 8px; }
  .date-range-label { font-size: 0.65rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; }
  .date-range-select { appearance: none; -webkit-appearance: none; background: #F8FAFC; border: 1px solid #e5e7eb; border-radius: 6px; font-family: 'Urbanist', sans-serif; font-size: 0.75rem; font-weight: 600; color: #000033; padding: 3px 22px 3px 8px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }
  .date-range-select:focus { outline: none; border-color: #533AFD; }
  .date-range-from-to { font-size: 0.72rem; color: #6b7280; font-family: 'Lato', sans-serif; }
  .date-bar-divider { width: 1px; height: 20px; background: #e5e7eb; margin: 0 20px; }
  .date-as-of-group { display: flex; align-items: center; gap: 14px; }
  .date-as-of { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: #6b7280; }
  .date-as-of-label { font-size: 0.65rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; }
  .date-as-of-val { color: #1E293B; font-family: 'Lato', sans-serif; font-weight: 500; }
  .time-travel-link { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: #533AFD; cursor: pointer; border: 1px solid rgba(83,58,253,0.25); padding: 3px 8px; border-radius: 12px; }
  .time-travel-link:hover { background: rgba(83,58,253,0.06); }

  .mid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; flex: 1; min-height: 0; overflow: visible; }
  .tile-lg { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 18px 18px; overflow: visible; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .stitle { font-size: 0.7rem; color: #9ca3af; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; flex-shrink: 0; font-family: 'Urbanist', sans-serif; }

  .ft { width: 100%; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
  .ft th { font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; padding-bottom: 4px; text-align: right; font-weight: 600; border-bottom: 1px solid #f3f4f6; overflow: hidden; }
  .ft th:first-child { text-align: left; width: 44%; }
  .ft th:nth-child(2), .ft th:nth-child(3), .ft th:nth-child(4) { width: 18.6%; }
  .ft td { padding: 3px 0; text-align: right; color: #1E293B; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Lato', sans-serif; font-size: 0.875rem; }
  .ft td:first-child { text-align: left; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Urbanist', sans-serif; font-size: 0.875rem; }
  .ft .section-row td { color: #9ca3af; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 5px; padding-bottom: 1px; font-weight: 600; }
  .ft .total-row td { border-top: 1px solid #e5e7eb; font-weight: 600; color: #000033; padding-top: 3px; }
  .ft .grand-row td { border-top: 2px solid #000033; border-bottom: 3px double #000033; font-weight: 700; color: #000033; padding-top: 4px; padding-bottom: 4px; font-size: 0.875rem; }
  .ft .double-row td { border-top: 2px solid #000033; border-bottom: 3px double #000033; font-weight: 700; color: #000033; padding-top: 4px; padding-bottom: 4px; }
  .ft .hl-yellow td { background: #FEF3CD; }
  .diff-neg { color: #DC2626; }
  .diff-pos { color: #15803D; }

  .has-tooltip { cursor: help; }
  .status-tooltip { display: none; position: fixed; background: #000033; color: #fff; border-radius: 8px; padding: 10px 14px; width: 230px; z-index: 9999; font-size: 0.72rem; line-height: 1.6; white-space: normal; font-family: 'Urbanist', sans-serif; box-shadow: 0 4px 20px rgba(0,0,51,0.3); pointer-events: none; }
  .status-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #000033; }
  .tt-row { display: flex; justify-content: space-between; align-items: center; padding: 1px 0; }
  .tt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 5px; }
  .tt-label { display: flex; align-items: center; flex: 1; }
  .tt-val { font-family: 'Lato', sans-serif; font-weight: 600; }
  .green { color: #15803D; } .blue { color: #1D4ED8; } .yellow { color: #A16A03; } .orange { color: #C2410C; } .gray { color: #6b7280; } .blurple { color: #533AFD; }

  .bot3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; flex-shrink: 0; overflow: visible; }
  .bot-panel-wrap { position: relative; min-height: 72px; }
  .bot-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; width: 100%; }
  .bot-panel.expanded { position: absolute; top: 0; left: 0; right: 0; z-index: 20; border-color: #000033; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
  .card-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,51,0.45); align-items: flex-end; justify-content: center; }
  .card-overlay.open { display: flex; }
  .card-panel { background: #fff; width: 1400px; max-height: 80vh; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column; }
  .card-panel-header { background: #000033; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .card-panel-title { color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; }
  .card-panel-meta { display: flex; align-items: center; gap: 16px; }
  .card-total { font-size: 1.3rem; font-weight: 700; color: #fff; }
  .card-diff { font-size: 0.8rem; }
  .card-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 1rem; border: none; }
  .card-close:hover { background: rgba(255,255,255,0.22); }
  .card-link { font-size: 0.75rem; color: #00F5FF; text-decoration: none; cursor: pointer; border: 1px solid rgba(0,245,255,0.3); padding: 3px 10px; border-radius: 12px; }
  .card-link:hover { background: rgba(0,245,255,0.1); }
  .card-body { overflow-y: auto; flex: 1; padding: 16px 24px 24px; }
  .bot-header { padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
  .bot-header-left { display: flex; align-items: center; gap: 6px; }
  .bot-title { font-size: 0.7rem; color: #9ca3af; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
  .bot-summary { display: flex; align-items: baseline; gap: 8px; padding: 0 14px 9px; }
  .bot-total { font-size: 1.25rem; font-weight: 700; color: #000033; }
  .bot-diff-badge { font-size: 0.8rem; font-weight: 500; }
  .expand-btn { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #e5e7eb; background: #F8FAFC; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform 0.2s; }
  .expand-btn svg { width: 10px; height: 10px; stroke: #6b7280; fill: none; }
  .expanded .expand-btn { transform: rotate(180deg); }
  .bot-detail { display: none; padding: 0 16px 16px; border-top: 1px solid #f3f4f6; overflow: visible; }
  .expanded .bot-detail { display: block; }

  .gl-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 8px; table-layout: fixed; }
  .gl-table th { font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 6px 6px 0; text-align: right; font-weight: 600; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
  .gl-table th:first-child { text-align: left; width: 10%; padding-left: 0; }
  .gl-table th:nth-child(2) { text-align: left; width: 32%; }
  .gl-table th:nth-child(3), .gl-table th:nth-child(4), .gl-table th:nth-child(5) { width: 14%; }
  .gl-table th:last-child { width: 16%; }
  .gl-table td { padding: 6px 6px 6px 0; text-align: right; color: #1E293B; border-bottom: 1px solid #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Lato', sans-serif; font-size: 0.875rem; }
  .gl-table td:first-child { text-align: left; color: #9ca3af; font-size: 0.8rem; padding-left: 0; font-family: 'Lato', sans-serif; }
  .gl-table td:nth-child(2) { text-align: left; color: #1E293B; font-family: 'Urbanist', sans-serif; font-size: 0.875rem; }
  .gl-table .gl-header-row td { background: #F8FAFC; color: #6b7280; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; padding: 9px 6px 5px 0; border-bottom: none; }
  .gl-table .gl-total-row td { border-top: 1px solid #e5e7eb; font-weight: 600; color: #000033; border-bottom: none; padding-top: 5px; }

  .sb-overlay { position: fixed; inset: 0; z-index: 100; display: none; }
  .sb-overlay.open { display: block; }
  .sb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
  .sb-panel { position: absolute; top: 0; left: 0; width: 260px; height: 100%; background: #000033; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); }
  .sb-overlay.open .sb-panel { transform: translateX(0); }
  .sb-head { height: 50px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
  .sb-head-logo { flex: 1; display: flex; align-items: center; }
  .sb-close-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; }
  .sb-close-btn:hover { opacity: 1; }
  .sb-close-btn svg { width: 14px; height: 14px; }
  .sb-scroll { flex: 1; overflow-y: auto; padding: 6px 0 8px; }
  .sb-scroll::-webkit-scrollbar { width: 4px; }
  .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
  .sb-section-label { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.28); letter-spacing: 0.8px; text-transform: uppercase; padding: 12px 16px 4px; }
  .sb-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px; cursor: pointer; }
  .sb-item:hover { background: rgba(255,255,255,0.05); }
  .sb-item.active { background: rgba(0,245,255,0.08); border-left: 2px solid #00F5FF; padding-left: 14px; }
  .sb-item.active .sb-item-label { color: #00F5FF; font-weight: 500; }
  .sb-item.disabled { opacity: 0.32; cursor: default; pointer-events: none; }
  .sb-item-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.5; }
  .sb-item.active .sb-item-icon { opacity: 1; }
  .sb-item-label { font-size: 0.85rem; color: rgba(255,255,255,0.72); flex: 1; }
  .sb-badge { font-size: 0.7rem; font-weight: 700; background: rgba(161,106,3,0.25); color: #A16A03; padding: 2px 6px; border-radius: 10px; }
  .sb-badge.soon { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); font-weight: 600; }
  /* Chevron shown next to expandable items (e.g. Sub-ledgers ▼) */
  .sb-chevron { width: 10px; height: 10px; flex-shrink: 0; opacity: 0.5; }
  /* Indented sub-item (e.g. « Sub-ledger entries under Sub-ledgers) */
  .sb-sub-item { padding-left: 34px; }
  .sb-sub-item .sb-item-icon { opacity: 0.4; }
  .sb-sub-item .sb-item-label { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
  .sb-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 5px 0; }
  .sb-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 4px 0; flex-shrink: 0; }


  /* CLOSE STATUS BANNER */
  .close-banner { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 20px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .close-banner-row { display: flex; align-items: center; gap: 12px; }
  .close-banner-label { display: flex; align-items: center; gap: 8px; width: 340px; flex-shrink: 0; white-space: nowrap; }
  .close-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 10px; }
  .close-tag.monthly { background: rgba(29,78,216,0.1); color: #1D4ED8; }
  .close-tag.annual { background: rgba(83,58,253,0.1); color: #533AFD; }
  .close-status-text { font-size: 0.75rem; color: #15803D; font-weight: 600; }
  .close-bar-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
  .close-bar { flex: 1; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; display: flex; }
  .close-bar-fill { height: 100%; }
  .close-bar-fill.amber { background: #A16A03; }
  .close-pct { font-size: 0.7rem; font-weight: 700; color: #6b7280; font-family: 'Lato', sans-serif; width: 30px; text-align: right; }

  /* LAYOUT WITH CHAT PANEL */
  .main-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; align-items: start; width: 100%; }
  .main-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

  /* AI CHAT PANEL — full right side */
  .ai-chat-panel { width: 340px; flex-shrink: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; height: 560px; position: sticky; top: 8px; }
  .ai-chat-header { background: #533AFD; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .ai-chat-header-left { display: flex; align-items: center; gap: 8px; }
  .ai-chat-orb { width: 8px; height: 8px; border-radius: 50%; background: #00F5FF; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .ai-chat-title { color: #fff; font-size: 0.8rem; font-weight: 600; }
  .ai-chat-status { font-size: 0.65rem; color: #00F5FF; font-weight: 600; }
  .ai-chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #F8FAFC; min-height: 0; }
  .ai-chat-messages::-webkit-scrollbar { width: 3px; }
  .ai-chat-messages::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }
  .ai-msg { display: flex; gap: 8px; align-items: flex-start; }
  .ai-msg-bot { flex-direction: row; }
  .ai-msg-user { flex-direction: row-reverse; }
  .ai-msg-avatar { width: 24px; height: 24px; border-radius: 50%; background: #533AFD; color: #fff; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
  .ai-msg-bubble { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; border-top-left-radius: 3px; padding: 8px 11px; font-size: 0.75rem; color: #1E293B; line-height: 1.5; max-width: 260px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); white-space: pre-wrap; }
  .ai-msg-user .ai-msg-bubble { background: #533AFD; color: #fff; border: none; border-top-left-radius: 12px; border-top-right-radius: 3px; }
  .ai-msg-user .ai-msg-avatar { background: #1D4ED8; }
  .ai-chat-input-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 2px solid #533AFD; background: #F5F3FF; flex-shrink: 0; }
  .ai-chat-input { flex: 1; border: 1px solid #e5e7eb; border-radius: 20px; padding: 6px 14px; font-size: 0.75rem; font-family: 'Urbanist', sans-serif; outline: none; color: #1E293B; }
  .ai-chat-input:focus { border-color: #533AFD; }
  .ai-chat-send { width: 30px; height: 30px; border-radius: 50%; background: #533AFD; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ai-chat-send:hover { filter: brightness(0.92); }

  /* PERSISTENT LEFT NAV RAIL */
  .main-wrap { display: flex; flex: 1; min-height: 0; min-width: 0; }
  .left-rail { width: 56px; flex-shrink: 0; background: #000033; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; border-right: 1px solid rgba(255,255,255,0.06); }
  .rail-item { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; position: relative; }
  .rail-item:hover { background: rgba(255,255,255,0.08); }
  .rail-item.active { background: rgba(0,245,255,0.12); }
  .rail-item.active svg { stroke: #00F5FF; }
  .rail-item svg { width: 18px; height: 18px; stroke: rgba(255,255,255,0.55); transition: stroke 0.15s; }
  .rail-item:hover svg { stroke: rgba(255,255,255,0.9); }
  .rail-tooltip { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); background: #1E293B; color: #fff; font-size: 0.72rem; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 50; }
  .rail-item:hover .rail-tooltip { opacity: 1; }
  .rail-divider { width: 24px; height: 1px; background: rgba(255,255,255,0.08); margin: 6px 0; }

  /* Demo navigation buttons — sit below Time travel with a small gap so they
     read as "demo controls" rather than another app nav item. A "DEMO" label
     above them makes the intent explicit. */
  .demo-nav-spacer { height: 36px; flex-shrink: 0; }
  .demo-nav-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(0,245,255,0.7);
    text-align: center;
    text-transform: uppercase;
    padding: 0 0 4px;
    flex-shrink: 0;
  }
  .rail-item.demo-nav-btn {
    background: rgba(0,245,255,0.06);
    border: 1px solid rgba(0,245,255,0.18);
    margin: 2px 0;
  }
  .rail-item.demo-nav-btn:hover { background: rgba(0,245,255,0.14); }
  .rail-item.demo-nav-btn svg { stroke: #00F5FF; }
  .rail-item.demo-nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }


  /* POP-OUT SLIDE PANEL — positioned LEFT of chat panel, not over it */
  .slide-out { position: fixed; top: 70px; right: 390px; width: 440px; max-height: calc(100vh - 110px); background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); display: none; flex-direction: column; overflow: hidden; z-index: 150; border: 1px solid #e5e7eb; }
  .slide-out.open { display: flex; animation: slideIn 0.22s ease-out; }
  @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  .slide-header { background: #533AFD; color: #fff; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .slide-title { font-size: 0.85rem; font-weight: 700; }
  .slide-close { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 1rem; cursor: pointer; padding: 0 4px; }
  .slide-close:hover { color: #fff; }
  .slide-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
  .slide-section { border-bottom: 1px solid #f3f4f6; padding-bottom: 12px; }
  .slide-section:last-child { border-bottom: none; }
  .slide-section-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #9ca3af; margin-bottom: 8px; }
  .slide-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 0.78rem; }
  .slide-row-label { color: #6b7280; flex-shrink: 0; margin-right: 12px; }
  .slide-row-val { color: #1E293B; font-family: 'Lato', sans-serif; font-weight: 500; text-align: right; }
  .slide-note { font-size: 0.78rem; color: #1E293B; line-height: 1.5; background: #F8FAFC; border-left: 3px solid #533AFD; padding: 8px 12px; border-radius: 0 6px 6px 0; }
  .slide-link { font-size: 0.78rem; color: #533AFD; cursor: pointer; text-decoration: underline; }
  .slide-link:hover { filter: brightness(0.82); }
  .trail-row { display: flex; gap: 10px; font-size: 0.73rem; color: #6b7280; padding: 4px 0; border-bottom: 1px solid #f9fafb; }
  .trail-row:last-child { border-bottom: none; }
  .trail-time { font-family: 'Lato', monospace; color: #9ca3af; flex-shrink: 0; width: 160px; }
  .slide-footer { border-top: 1px solid #f0f0f0; padding: 12px 18px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: #FAFBFC; }
  .flag-btn { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #C2410C; color: #C2410C; font-size: 0.78rem; font-weight: 600; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-family: 'Urbanist', sans-serif; }
  .flag-btn:hover { background: rgba(194,65,12,0.05); }

  /* DOCUMENT POPUP — for linked CFO Directive etc */
  .doc-overlay { position: fixed; inset: 0; background: rgba(0,0,51,0.5); display: none; align-items: center; justify-content: center; z-index: 300; backdrop-filter: blur(2px); }
  .doc-overlay.open { display: flex; }
  .doc-modal { background: #fff; border-radius: 12px; width: 560px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
  .doc-header { background: #000033; color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
  .doc-title { font-size: 0.9rem; font-weight: 700; }
  .doc-close { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.1rem; cursor: pointer; }
  .doc-body { flex: 1; overflow-y: auto; padding: 24px 28px; font-family: 'Merriweather', serif; font-size: 0.8rem; line-height: 1.7; color: #1E293B; }
  .doc-body h3 { font-family: 'Urbanist', sans-serif; font-size: 0.95rem; margin-bottom: 14px; color: #000033; }
  .doc-body p { margin-bottom: 12px; }
  .doc-body .doc-meta { font-family: 'Urbanist', sans-serif; font-size: 0.72rem; color: #6b7280; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 16px; }
  .doc-signature { margin-top: 24px; padding-top: 16px; border-top: 1px solid #f0f0f0; font-family: 'Urbanist', sans-serif; font-size: 0.78rem; }
  .doc-signature .sig-name { font-weight: 700; color: #000033; }
  .doc-signature .sig-title { color: #6b7280; font-size: 0.72rem; }

  /* DOUBLE-ENTRY JOURNAL ENTRY FORMAT */
  .je-entry { font-family: 'Lato', monospace; font-size: 0.82rem; line-height: 1.7; color: #1E293B; background: #F8FAFC; padding: 12px 14px; border-radius: 6px; border-left: 3px solid #533AFD; }
  .je-line { display: grid; grid-template-columns: 40px 1fr 120px; gap: 6px; align-items: baseline; }
  .je-dr { color: #000033; font-weight: 700; }
  .je-cr { color: #000033; font-weight: 700; padding-left: 24px; }
  .je-acct { color: #1E293B; }
  .je-amt { text-align: right; font-family: 'Lato', sans-serif; font-weight: 500; }
  .je-desc { grid-column: 1 / -1; color: #6b7280; font-style: italic; font-size: 0.75rem; padding-top: 6px; padding-left: 4px; }

  /* TALLER CHAT PANEL */
  .ai-chat-panel.tall { max-height: calc(100vh - 140px) !important; height: calc(100vh - 140px); }

  /* SIGN-OFF REVIEW BUTTON */
  .review-btn { background: #fff; color: #533AFD; border: 1px solid #533AFD; padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: 'Urbanist', sans-serif; white-space: nowrap; flex-shrink: 0; margin-right: 6px; }
  .review-btn:hover { background: rgba(83,58,253,0.05); }


  .main-layout { display: flex; gap: 10px; align-items: flex-start; }
  .main-left { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  /* The earlier .tile-lg rule (padding: 14px 18px) governs dashboard tiles.
     Level 2 & 3 tiles that wrap full-bleed tables opt-out via inline style="padding:0;".
     (Removed a duplicate rule here that was resetting padding to 0 for all tiles.) */
.signoff-section-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #9ca3af; padding: 10px 0 6px; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
  .signoff-section-label::after { content: ''; flex: 1; height: 1px; background: #f0f0f0; }
  .signoff-entry { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
  .signoff-entry.posted { border-color: #15803D; background: rgba(21,128,61,0.03); }
  .signoff-meta { flex: 1; min-width: 0; }
  .signoff-id { font-size: 0.7rem; color: #9ca3af; font-family: 'Lato', monospace; margin-bottom: 2px; }
  .signoff-desc { font-size: 0.82rem; font-weight: 600; color: #000033; margin-bottom: 3px; }
  .signoff-detail { font-size: 0.72rem; color: #6b7280; line-height: 1.4; }
  .signoff-amount { font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700; color: #000033; flex-shrink: 0; min-width: 80px; text-align: right; }
  .signoff-badge { flex-shrink: 0; }
  .section-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; letter-spacing: 0.3px; }
  .section-tag.monthly { background: rgba(29,78,216,0.1); color: #1D4ED8; }
  .section-tag.annual { background: rgba(83,58,253,0.1); color: #533AFD; }
  .section-tag.annual-big { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; background: rgba(83,58,253,0.1); color: #533AFD; }
  .badge-draft { display: inline-flex; align-items: center; gap: 4px; background: rgba(245,158,11,0.12); color: #A16A03; border: 1px solid rgba(245,158,11,0.3); font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
  .badge-posted { display: inline-flex; align-items: center; gap: 4px; background: rgba(21,128,61,0.1); color: #15803D; border: 1px solid rgba(21,128,61,0.25); font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
  .approve-btn { background: #000033; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: 'Urbanist', sans-serif; white-space: nowrap; flex-shrink: 0; }
  .approve-btn:hover { filter: brightness(0.92); }
  .approve-btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: default; }
  .approve-all-btn { background: #533AFD; color: #fff; border: none; padding: 7px 18px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: 'Urbanist', sans-serif; }
  .approve-all-btn:hover { filter: brightness(0.92); }
  .lt-section td { background: #F8FAFC; color: #6b7280; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; padding: 9px 12px 5px; border-bottom: none; }
  .lt-acct { cursor: pointer; transition: background 0.1s; }
  .lt-acct:hover td { background: #F8FAFC; }
  .lt-acct.open td { background: #EEF2FF; }
  .lt-acct.open .chev { transform: rotate(90deg); }
  .lt-total td { border-top: 2px solid #000033; border-bottom: 3px double #000033; font-weight: 700; color: #000033; font-family: 'Lato', sans-serif; font-size: 0.875rem; padding-top: 6px; padding-bottom: 6px; }
  .lt-total td:first-child { font-family: 'Urbanist', sans-serif; }
  .acct-code { font-family: 'Lato', monospace; font-size: 0.75rem; color: #9ca3af; }
  .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 600; font-family: 'Urbanist', sans-serif; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
  .pd { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  /* Status pill dots — colors match their parent pill's text color (from spec palette) */
  .p-ok  { background: rgba(21,128,61,0.1);  color: #15803D; border: 1px solid rgba(21,128,61,0.2);  }
  .p-ok  .pd { background: #15803D; }
  .p-fl  { background: rgba(161,106,3,0.1);  color: #A16A03; border: 1px solid rgba(161,106,3,0.25); }
  .p-fl  .pd { background: #A16A03; }
  .p-rec { background: rgba(29,78,216,0.08); color: #1D4ED8; border: 1px solid rgba(29,78,216,0.18); }
  .p-rec .pd { background: #1D4ED8; }
  .p-lag { background: rgba(194,65,12,0.09); color: #C2410C; border: 1px solid rgba(194,65,12,0.2);  }
  .p-lag .pd { background: #C2410C; }
  .p-ai  { background: rgba(83,58,253,0.1);  color: #533AFD; border: 1px solid rgba(83,58,253,0.22); }
  .p-ai  .pd { background: #533AFD; }
  .lt { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
  .lt th { font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 12px 8px; text-align: right; font-weight: 600; border-bottom: 1px solid #e5e7eb; white-space: nowrap; background: #fff; position: sticky; top: 0; z-index: 2; }
  .lt th:first-child { text-align: left; width: 36%; }
  .lt th.col-erp  { width: 12%; }
  .lt th.col-diff { width: 12%; }
  .lt th.col-rt   { width: 12%; }
  .lt th.col-st   { width: 28%; text-align: left; padding-left: 14px; }
  .lt td { padding: 6px 12px; text-align: right; color: #1E293B; border-bottom: 1px solid #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Lato', sans-serif; font-size: 0.875rem; }
  .lt td:first-child { text-align: left; color: #1E293B; font-family: 'Urbanist', sans-serif; font-size: 0.875rem; }
  .lt td.col-st { text-align: left; padding-left: 14px; }
  .lt .lt-section td { background: #F8FAFC; color: #6b7280; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; padding: 9px 12px 5px; border-bottom: none; }
  .lt .lt-total td { border-top: 2px solid #000033; border-bottom: 3px double #000033; font-weight: 700; color: #000033; font-family: 'Lato', sans-serif; font-size: 0.875rem; padding-top: 6px; padding-bottom: 6px; }
  .lt .lt-total td:first-child { font-family: 'Urbanist', sans-serif; }
  .lt-tx { display: none; }
  .lt-tx.vis { display: table-row; }
  .lt-tx td { background: #FAFBFF; padding: 5px 12px 5px 40px; font-size: 0.8rem; border-bottom: 1px solid #eef0f8; }
  .lt-tx td:first-child { font-family: 'Urbanist', sans-serif; font-size: 0.8rem; color: #374151; }
  .lt-tx td.col-st { padding-left: 14px; }
  .lt-tx-first td { border-top: 1px solid #dde2f0 !important; }
  .lt-tx-last  td { border-bottom: 2px solid #dde2f0 !important; }
  .diff-neg { color: #DC2626; }
  .diff-pos { color: #15803D; }
  .green { color: #15803D; }
  .blue { color: #1D4ED8; }
  .yellow { color: #A16A03; }
  .orange { color: #C2410C; }
  .stitle { font-size: 0.7rem; color: #9ca3af; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; font-family: 'Urbanist', sans-serif; }

  .review-btn {
    background: #fff;
    border: 1.5px solid #533AFD;
    color: #533AFD;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Urbanist', sans-serif;
    margin-right: 8px;
  }
  .review-btn:hover {
    background: #F5F3FF;
  }


  /* VIEW SWITCHER */
  .view { display: none; }
  .view.active {
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Each view scrolls internally. The page <html> never scrolls, so the
       fixed AI sidebar never overlaps a page scrollbar. The scrollbar
       appears inside the content column, tucked against the sidebar's
       left edge — no viewport-edge overlap possible. */
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }

  /* Slide-out sits to the LEFT of the AI sidebar so it doesn't overlap. */
  .slide-out { right: 388px !important; }

  /* ========================================================================
     PERSISTENT AI SIDEBAR — docked right, full-height, always visible.
     Lives outside the main-wrap flex so it stays put across view switches.
     ======================================================================== */
  .ai-chat-shared {
    position: fixed;
    top: 50px;                  /* below the 50px top nav */
    right: 0;
    bottom: 0;
    width: 360px;
    background: rgb(253, 253, 254);   /* near-white with a hint of lavender — per user spec */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 60;
    border-left: 1px solid rgba(83,58,253,0.15);
    box-shadow: -4px 0 16px rgba(83,58,253,0.08);
    font-family: 'Urbanist', sans-serif;
  }
  /* Reserve space on the right so the main content doesn't slide under the panel */
  .main-wrap {
    padding-right: 360px;
  }
  /* Header — compact blurple band anchors the brand against the pale body */
  .ai-chat-shared .ai-chat-header {
    background: #533AFD;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(83,58,253,0.2);
  }
  .ai-chat-shared .ai-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ai-chat-shared .ai-chat-orb {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00F5FF;
    animation: pulse 2s infinite;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0,245,255,0.6);
  }
  .ai-chat-shared .ai-chat-title {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .ai-chat-shared .ai-chat-status {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
  }
  /* Message area — pale lavender canvas */
  .ai-chat-shared .ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    min-height: 0;
  }
  .ai-chat-shared .ai-chat-messages::-webkit-scrollbar { width: 5px; }
  .ai-chat-shared .ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(83,58,253,0.25);
    border-radius: 3px;
  }
  .ai-chat-shared .ai-msg { display: flex; gap: 8px; align-items: flex-start; }
  .ai-chat-shared .ai-msg-user { flex-direction: row-reverse; }
  /* Avatars on light background */
  .ai-chat-shared .ai-msg-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
    background: #533AFD;
    color: #fff;
  }
  .ai-chat-shared .ai-msg-user .ai-msg-avatar {
    background: #1D4ED8;
    color: #fff;
  }
  /* Bubbles on light canvas — dark text for readability (WCAG AA) */
  .ai-chat-shared .ai-msg-bubble {
    background: #fff;
    color: #1E293B;                 /* Financial Black (spec) */
    border: 1px solid rgba(83,58,253,0.18);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.76rem;
    line-height: 1.5;
    max-width: 270px;
    box-shadow: 0 1px 2px rgba(83,58,253,0.06);
  }
  .ai-chat-shared .ai-msg-user .ai-msg-bubble {
    background: rgba(83,58,253,0.12);
    border: 1px solid rgba(83,58,253,0.3);
    color: #000033;                 /* Deep Navy for user text */
  }
  /* Input row */
  .ai-chat-shared .ai-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 14px;
    background: rgba(83,58,253,0.05);
    border-top: 1px solid rgba(83,58,253,0.15);
    flex-shrink: 0;
  }
  .ai-chat-shared .ai-chat-input {
    flex: 1;
    border: 1px solid rgba(83,58,253,0.3);
    background: #fff;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.76rem;
    font-family: 'Urbanist', sans-serif;
    outline: none;
    color: #1E293B;
  }
  .ai-chat-shared .ai-chat-input::placeholder { color: rgba(30,41,59,0.45); }
  .ai-chat-shared .ai-chat-input:focus {
    border-color: #533AFD;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(83,58,253,0.12);
  }
  .ai-chat-shared .ai-chat-send {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #533AFD;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ai-chat-shared .ai-chat-send:hover { filter: brightness(0.92); }
  .ai-chat-shared .ai-chat-send svg { stroke: #fff !important; }

  /* ========================================================================
     DEMO CONCLUSION BANNER — appears on the sign-off view after all approvals
     ======================================================================== */
  .demo-concluded-banner {
    display: none;
    background: linear-gradient(90deg, #15803D 0%, #0F6B33 100%);
    color: #fff;
    padding: 18px 24px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(21,128,61,0.25);
    font-family: 'Urbanist', sans-serif;
    text-align: center;
    margin-bottom: 14px;
  }
  .demo-concluded-banner.shown { display: block; animation: fadeInDown 0.4s ease-out; }
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .demo-concluded-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
  }
  .demo-concluded-sub {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 14px;
  }
  .demo-concluded-btn {
    background: #fff;
    color: #15803D;
    border: none;
    padding: 9px 22px;
    border-radius: 20px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .demo-concluded-btn:hover { transform: scale(1.04); }

  /* ========================================================================
     DECISION BUTTON STYLES — Approve / Flag / Deny triplet for slide-outs
     ======================================================================== */
  .decision-row {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .decision-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 8px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
  }
  .decision-btn-approve {
    background: #533AFD;
    color: #fff;
    border-color: #533AFD;
  }
  .decision-btn-approve:hover { filter: brightness(0.92); }
  .decision-btn-flag {
    background: #fff;
    color: #C2410C;
    border-color: #C2410C;
  }
  .decision-btn-flag:hover { background: rgba(194,65,12,0.08); }
  .decision-btn-deny {
    background: #fff;
    color: #DC2626;
    border-color: #DC2626;
  }
  .decision-btn-deny:hover { background: rgba(220,38,38,0.08); }