/* ============================================
   ADMIN.CSS — Dashboard layout, cards, forms, tables
   ============================================ */

/* -- Sidebar -- */
.d-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); background:var(--white); border-right:1px solid var(--gray-200); display:flex; flex-direction:column; padding:16px 0; z-index:50; transition:width 0.25s ease; overflow:hidden; }
.d-sidebar-logo { width:40px; height:40px; background:var(--gold); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin:0 0 32px 16px; flex-shrink:0; }
.d-sidebar-logo svg { width:20px; height:20px; }
.d-sidebar-nav { display:flex; flex-direction:column; gap:4px; flex:1; padding:0 14px; }
.d-sidebar-item { height:44px; border-radius:var(--radius); display:flex; align-items:center; gap:10px; padding:0 12px; transition:background 0.2s ease, color 0.2s ease; color:var(--gray-400); position:relative; flex-shrink:0; white-space:nowrap; }
.d-sidebar-item:hover { background:var(--gray-100); color:var(--gray-700); }
.d-sidebar-item.active { background:var(--gold-subtle); color:var(--gold-hover); }
.d-sidebar-item.active::before { content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--gold); border-radius:0 3px 3px 0; }
.d-sidebar-item svg { width:20px; height:20px; flex-shrink:0; }
.d-sidebar-item .sidebar-label { font-size:0.8125rem; font-weight:600; white-space:nowrap; color:inherit; overflow:hidden; max-width:0; opacity:0; transition:max-width 0.25s ease, opacity 0.2s ease 0.05s; }
.d-sidebar-item .tooltip { display:none; position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); background:var(--gray-800); color:white; padding:4px 10px; border-radius:6px; font-size:0.6875rem; font-weight:600; white-space:nowrap; pointer-events:none; }
.d-sidebar-item:hover .tooltip { display:block; }
.d-sidebar-bottom { margin-top:auto; padding:0 14px; }

/* -- Sidebar Expanded -- */
.d-sidebar.expanded { width:220px; }
.d-sidebar.expanded .d-sidebar-item .sidebar-label { max-width:140px; opacity:1; }
.d-sidebar.expanded .d-sidebar-item .tooltip { display:none !important; }
.d-sidebar.expanded ~ .d-header { left:220px; }
.d-sidebar.expanded ~ .d-main { margin-left:220px; }

/* -- Sidebar Open btn (mobile/collapsed fallback) -- */
.sidebar-open-btn { display:none; position:fixed; top:12px; left:12px; z-index:60; width:36px; height:36px; border-radius:var(--radius); background:var(--white); border:1px solid var(--gray-200); align-items:center; justify-content:center; transition:var(--transition); cursor:pointer; }
.sidebar-open-btn:hover { background:var(--gray-50); border-color:var(--gray-400); }
.sidebar-open-btn svg { width:18px; height:18px; color:var(--gray-600); }

/* -- Dashboard Header -- */
.d-header { position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--header-h); background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--gray-200); display:flex; align-items:center; padding:0 28px; z-index:40; transition:left 0.25s ease; }
.d-greeting h2 { font-size:1rem; font-weight:700; color:var(--gray-900); }
.d-greeting p { font-size:0.75rem; color:var(--gray-500); }
.d-header-center { flex:1; display:flex; justify-content:center; padding:0 24px; }
.d-search { width:100%; max-width:400px; position:relative; }
.d-search input { width:100%; padding:9px 14px 9px 36px; border:1px solid var(--gray-200); border-radius:var(--radius); font-size:0.8125rem; outline:none; transition:var(--transition); background:var(--gray-50); }
.d-search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ring); background:var(--white); }
.d-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--gray-400); }
.d-header-right { display:flex; align-items:center; gap:16px; }
.d-notif { position:relative; }
.d-notif-btn { width:36px; height:36px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; position:relative; transition:var(--transition); border:none; cursor:pointer; }
.d-notif-btn:hover { background:var(--gray-200); }
.d-notif-btn svg { width:18px; height:18px; color:var(--gray-600); }
.d-notif-badge { position:absolute; top:0; right:0; min-width:16px; height:16px; background:var(--red); border-radius:8px; border:2px solid var(--white); font-size:0.5625rem; font-weight:700; color:white; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.d-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-hover)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.75rem; color:var(--gray-900); }
.btn-logout { padding:8px 16px; border:1px solid var(--gray-200); border-radius:var(--radius); font-size:0.75rem; font-weight:600; color:var(--gray-600); transition:var(--transition); }
.btn-logout:hover { border-color:var(--red); color:var(--red); background:var(--red-bg); }

/* -- Main Content Area -- */
.d-main { margin-left:var(--sidebar-w); padding-top:var(--header-h); min-height:100vh; background:var(--bg); transition:margin-left 0.25s ease; }
.d-content { padding:28px; max-width:1200px; }
.d-page { display:none; animation:fadeIn 0.25s ease; }
.d-page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* -- Stat Cards -- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
.stat-card { background:var(--white); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--gray-200); transition:var(--transition); }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card-label { font-size:0.75rem; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.stat-card-value { font-size:1.75rem; font-weight:800; color:var(--gray-900); letter-spacing:-1px; }
.stat-card-change { font-size:0.6875rem; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:20px; }
.stat-card-change.up { background:var(--green-bg); color:var(--green); }
.stat-card-change.down { background:var(--red-bg); color:var(--red); }

/* -- Dashboard Grid & Cards -- */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.dash-card { background:var(--white); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--gray-200); }
.dash-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dash-card-title { font-size:0.9375rem; font-weight:700; color:var(--gray-900); }
.dash-card-more { font-size:0.75rem; font-weight:600; color:var(--gold-hover); }

/* -- Transactions -- */
.tx-list { display:flex; flex-direction:column; gap:12px; }
.tx-item { display:flex; align-items:center; gap:12px; padding:8px 0; }
.tx-icon { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; }
.tx-icon.out { background:var(--red-bg); color:var(--red); }
.tx-icon.in { background:var(--green-bg); color:var(--green); }
.tx-info { flex:1; }
.tx-name { font-size:0.8125rem; font-weight:600; color:var(--gray-800); }
.tx-date { font-size:0.6875rem; color:var(--gray-400); }
.tx-amount { font-size:0.875rem; font-weight:700; }
.tx-amount.negative { color:var(--red); }
.tx-amount.positive { color:var(--green); }

/* -- Chart -- */
.chart-area { width:100%; height:200px; position:relative; }
.chart-area svg { width:100%; height:100%; }

/* -- Quick Actions -- */
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.quick-btn { padding:16px; background:var(--gray-50); border-radius:var(--radius); text-align:center; transition:var(--transition); border:1px solid var(--gray-200); }
.quick-btn:hover { border-color:var(--gray-900); background:var(--gray-50); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.quick-btn-icon { width:40px; height:40px; border-radius:var(--radius); background:var(--gold-subtle); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
.quick-btn-icon svg { width:18px; height:18px; color:var(--gold-hover); }
.quick-btn span { font-size:0.75rem; font-weight:600; color:var(--gray-700); }

/* -- Dashboard Forms -- */
.d-page-title { font-size:1.375rem; font-weight:700; color:var(--gray-900); margin-bottom:24px; letter-spacing:-0.5px; }
.d-form-card { background:var(--white); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--gray-200); margin-bottom:20px; }
.d-form-card h3 { font-size:1rem; font-weight:700; color:var(--gray-900); margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-full { grid-column:1/-1; }

/* -- Step Indicator -- */
.step-bar { display:flex; gap:8px; margin-bottom:28px; }
.step-dot { flex:1; height:4px; border-radius:2px; background:var(--gray-200); transition:var(--transition); }
.step-dot.active { background:var(--gold); }
.step-dot.done { background:var(--green); }
.step-panel { display:none; }
.step-panel.active { display:block; }

/* -- Buttons -- */
.btn-row { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.btn-outline { padding:10px 20px; border:1px solid var(--gray-200); border-radius:var(--radius); font-size:0.8125rem; font-weight:600; color:var(--gray-600); transition:var(--transition); }
.btn-outline:hover { border-color:var(--gray-400); }
.btn-primary { padding:10px 24px; background:var(--gold); border-radius:var(--radius); font-size:0.8125rem; font-weight:700; color:var(--gray-900); transition:var(--transition); }
.btn-primary:hover { background:var(--gold-hover); }
.btn-success { padding:10px 24px; background:var(--green); border-radius:var(--radius); font-size:0.8125rem; font-weight:700; color:white; transition:var(--transition); }
.btn-danger { padding:10px 24px; background:var(--red); border-radius:var(--radius); font-size:0.8125rem; font-weight:700; color:white; transition:var(--transition); }

/* -- Info Cards -- */
.search-card { margin-bottom:20px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.info-card { background:var(--white); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--gray-200); }
.info-card h4 { font-size:0.875rem; font-weight:700; color:var(--gray-900); margin-bottom:16px; }
.info-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--gray-100); font-size:0.8125rem; }
.info-row:last-child { border-bottom:none; }
.info-label { color:var(--gray-500); font-weight:500; }
.info-value { color:var(--gray-900); font-weight:600; }

/* -- Tables -- */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:10px 14px; font-size:0.6875rem; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--gray-200); }
.data-table td { padding:12px 14px; font-size:0.8125rem; color:var(--gray-700); border-bottom:1px solid var(--gray-100); }
.data-table tbody tr { transition:var(--transition); }
.data-table tbody tr:hover { background:var(--gray-50); }
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.6875rem; font-weight:600; }
.badge-green { background:var(--green-bg); color:var(--green); }
.badge-red { background:var(--red-bg); color:var(--red); }
.badge-amber { background:var(--amber-bg); color:var(--amber); }
.badge-blue { background:var(--blue-bg); color:var(--blue); }

/* -- Org name -- */
.d-org-name { font-size:0.6875rem; font-weight:600; color:var(--gold-hover); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:1px; }

/* -- Status cards -- */
.mb-20 { margin-bottom:20px; }
.status-card { border-radius:var(--radius-lg); padding:20px 24px; border:none; display:flex; align-items:center; gap:16px; }
.status-card-num { font-size:1.5rem; font-weight:800; letter-spacing:-1px; }
.status-card-label { font-size:0.75rem; font-weight:600; }
.sc-green { background:var(--green-bg); color:var(--green); }
.sc-red { background:var(--red-bg); color:var(--red); }
.sc-amber { background:var(--amber-bg); color:var(--amber); }
.sc-blue { background:var(--blue-bg); color:var(--blue); }

/* -- Finance grid -- */
.finance-grid { display:flex; flex-direction:column; }

/* -- Small buttons -- */
.btn-sm { padding:4px 10px; font-size:0.6875rem; font-weight:600; border:1px solid var(--gray-200); border-radius:6px; color:var(--gray-600); transition:var(--transition); }
.btn-sm:hover { border-color:var(--gray-900); color:var(--gray-900); }

/* -- Pagination -- */
.pagination { display:flex; gap:4px; justify-content:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--gray-100); }
.pg-btn { width:32px; height:32px; border-radius:var(--radius); font-size:0.75rem; font-weight:600; color:var(--gray-500); border:1px solid var(--gray-200); display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.pg-btn:hover { border-color:var(--gray-400); color:var(--gray-900); }
.pg-btn.active { background:var(--gold); border-color:var(--gold); color:var(--gray-900); }

/* -- Report cards -- */
.report-card { cursor:pointer; text-align:center; padding:32px 20px; }
.report-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.report-icon { width:48px; height:48px; border-radius:var(--radius); background:var(--gold-subtle); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.report-icon svg { width:22px; height:22px; color:var(--gold-hover); }
.sc-red-icon { background:var(--red-bg); }
.sc-red-icon svg { color:var(--red); }
.report-title { font-size:0.875rem; font-weight:700; color:var(--gray-900); margin-bottom:4px; }
.report-desc { font-size:0.75rem; color:var(--gray-500); }

/* -- Dark Mode Variables (Dashboard only) -- */
[data-theme="dark"] { --white:#0f0f0f; --bg:#1a1a1a; --gray-50:#1e1e1e; --gray-100:#2a2a2a; --gray-200:#333; --gray-300:#444; --gray-400:#777; --gray-500:#999; --gray-600:#aaa; --gray-700:#ccc; --gray-800:#e0e0e0; --gray-900:#f0f0f0; --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.4); --shadow-lg:0 8px 30px rgba(0,0,0,0.5); --green-bg:rgba(16,185,129,0.12); --red-bg:rgba(239,68,68,0.12); --amber-bg:rgba(245,158,11,0.12); --blue-bg:rgba(59,130,246,0.12); }
[data-theme="dark"] .d-header { background:rgba(15,15,15,0.92); }
[data-theme="dark"] .d-search input { background:var(--gray-50); color:var(--gray-800); }
[data-theme="dark"] .form-input { background:var(--gray-50); color:var(--gray-800); border-color:var(--gray-200); }

/* -- Dark Mode Toggle -- */
.dark-toggle { width:36px; height:36px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.dark-toggle:hover { background:var(--gray-200); }
.dark-toggle svg { width:18px; height:18px; color:var(--gray-600); }

/* -- Notification Dropdown -- */
.d-notif { position:relative; }
.notif-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:200; overflow:hidden; }
.notif-dropdown.show { display:block; }
.notif-dropdown-header { padding:14px 16px; border-bottom:1px solid var(--gray-200); display:flex; justify-content:space-between; align-items:center; }
.notif-dropdown-title { font-size:0.8125rem; font-weight:700; color:var(--gray-900); }
.notif-dropdown-clear { font-size:0.6875rem; font-weight:600; color:var(--gold-hover); cursor:pointer; background:none; border:none; }
.notif-dropdown-list { max-height:280px; overflow-y:auto; }
.notif-item { display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--gray-100); transition:var(--transition); cursor:pointer; }
.notif-item:hover { background:var(--gray-50); }
.notif-item:last-child { border-bottom:none; }
.notif-item.unread { background:var(--gold-subtle); }
.notif-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); margin-top:6px; flex-shrink:0; }
.notif-item:not(.unread) .notif-dot { background:var(--gray-300); }
.notif-text { font-size:0.75rem; color:var(--gray-700); line-height:1.5; }
.notif-time { font-size:0.625rem; color:var(--gray-400); margin-top:3px; }

/* -- Micro-interactions -- */
.btn-primary:active, .btn-success:active, .btn-outline:active, .btn-danger:active { transform:scale(0.97); }
.btn-primary:focus-visible, .btn-success:focus-visible, .btn-outline:focus-visible { box-shadow:0 0 0 3px var(--gold-ring); outline:none; }
.form-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ring); outline:none; }
.quick-btn:active { transform:translateY(0) scale(0.97); }
.d-sidebar-item:active { transform:scale(0.96); }

/* -- Dashboard Responsive -- */
@media(max-width:1024px) {
    .stat-grid { grid-template-columns:1fr 1fr; }
    .dash-grid { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .form-grid.cols-3 { grid-template-columns:1fr; }
    .info-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
    .stat-grid { grid-template-columns:1fr 1fr; }
    .quick-grid { grid-template-columns:1fr; }
    .d-sidebar { transform:translateX(-100%); }
    .d-sidebar.mobile-open { transform:translateX(0); display:flex; z-index:100; box-shadow:4px 0 24px rgba(0,0,0,0.12); }
    .sidebar-open-btn { display:flex; }
    .d-header { left:0; padding-left:56px; }
    .d-main { margin-left:0; }
    .d-header-center { display:none; }
    .d-content { padding:16px; }
    .d-page-title { font-size:1.125rem; }
    .toast-container { right:12px; left:12px; }
    .toast { min-width:auto; max-width:none; }
}
@media(max-width:480px) {
    .stat-grid { grid-template-columns:1fr; }
    .d-header-right .btn-logout { display:none; }
}