/* ================================================================
   theme-2.css — KADDA DEFAULT THEME
   Dark teal sidebar · Teal (#09B794) accent · Classic dark look
   This is the original Kompiam Ambum District (KADDA) theme.

   To add Theme 5+ later: only create a new theme-N.css file.
   Do NOT modify base CSS files.
   ================================================================ */

:root {
    /* ── Accent / Brand ─────────────────────────────────────── */
    --teal:           #09B794;
    --teal-dark:      #007770;
    --teal-deeper:    #066d58;
    --teal-light:     #0DD8AE;
    --teal-glow:      rgba(9,183,148,.13);
    --kadda-teal:     #007770;

    /* ── Sidebar: DARK TEAL ─────────────────────────────────── */
    --sb-bg-top:      #07120f;
    --sb-bg-bot:      #0c1e18;
    --sb-accent:      #09B794;
    --sb-accent-glow: rgba(9,183,148,.12);
    --sb-border:      rgba(9,183,148,.10);

    --sb-text:        rgba(255,255,255,.55);
    --sb-text-hover:  rgba(255,255,255,.92);
    --sb-label-color: rgba(255,255,255,.26);

    --sb-profile-bg:   linear-gradient(135deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.12) 100%);
    --sb-profile-name: #fff;
    --sb-profile-pos:  rgba(255,255,255,.55);

    --sb-item-hover-bg:  rgba(255,255,255,.055);
    --sb-active-text:    #fff;
    --sb-active-bg:      rgba(9,183,148,.12);
    --sb-active-border:  #09B794;

    --sb-icon-color:  rgba(255,255,255,.55);
    --sb-icon-hover:  rgba(255,255,255,.92);
    --sb-icon-active: #09B794;

    --sb-signout-color: rgba(255,255,255,.32);
    --sb-version-color: rgba(255,255,255,.16);
    --sb-footer-border: rgba(9,183,148,.10);

    /* ── Topbar: DARK TEAL GRADIENT ────────────────────────── */
    --brand-topbar-bg: linear-gradient(90deg, #071c16 0%, #0a2219 50%, #071c16 100%);
    --tb-border:       rgba(9,183,148,.14);
    --tb-shadow:       0 1px 0 rgba(9,183,148,.06), 0 4px 24px rgba(0,0,0,.28);

    --tb-toggle-bg:           rgba(255,255,255,.05);
    --tb-toggle-border:       rgba(255,255,255,.08);
    --tb-toggle-color:        rgba(255,255,255,.6);
    --tb-toggle-hover-bg:     rgba(9,183,148,.12);
    --tb-toggle-hover-border: rgba(9,183,148,.35);
    --tb-toggle-hover-color:  #09B794;

    --tb-divider:             rgba(255,255,255,.10);

    --tb-search-bg:           #f8fafc;
    --tb-search-border:       #e2e8f0;
    --tb-search-text:         #0f172a;
    --tb-search-placeholder:  #94a3b8;
    --tb-search-icon:         #94a3b8;
    --tb-search-focus-border: #09B794;
    --tb-search-focus-bg:     #ffffff;
    --tb-search-focus-shadow: rgba(9,183,148,.12);

    /* ── Avatar ring ─────────────────────────────────────────── */
    --avatar-ring-1: rgba(9,183,148,.4);
    --avatar-ring-2: rgba(9,183,148,.12);

    /* ── Collapsed sidebar tooltips ─────────────────────────── */
    --tooltip-bg:    #1a3530;
    --tooltip-arrow: #1a3530;

    /* ── Composite backgrounds ──────────────────────────────── */
    --brand-banner-bg:    linear-gradient(135deg, #0b2820 0%, #0f3d30 50%, #0d3328 100%);
    --brand-dropdown-hdr: linear-gradient(135deg, #07907a 0%, #09B794 100%);
    --brand-btn-bg:       linear-gradient(135deg, #09B794 0%, #007770 55%, #066d58 100%);
    --brand-panel-bg:     linear-gradient(158deg, #09B794 0%, #007770 60%, #066d58 100%);

    /* ── Login ──────────────────────────────────────────────── */
    --login-body-bg: #007770;

    /* ── Workspace interactive (budget-workspace.css) ────────── */
    --ws-interactive:     #09B794;
    --ws-interactive-dk:  #007770;
    --ws-interactive-gl:  rgba(9,183,148,.18);
    --ws-modal-hdr-bg:    linear-gradient(135deg, #0b2820 0%, #132d27 100%);

    /* ── Semantic ────────────────────────────────────────────── */
    --success: #10b981;
    --danger:  #ef4444;
    --warning: #f59e0b;
    --info:    #3b82f6;
    --surface: #f4f6f9;
    --bg:      #f2f6f6;
    --ink:     #111827;
    --ink-mid: #374151;
    --muted:   #6b7280;
    --border:  #e5e7eb;
}