/* ============================================================
   AfterSolves Admin — Theme & Layout
   Matches aftersolves.com v2.0 (yellow-50 / neutral-900 dark,
   orange-500 / yellow-400 accents, Poppins typography).
   ============================================================ */

body { font-family: 'Poppins', sans-serif; }
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(234 179 8 / 0.4); border-radius: 6px; }
.dark ::-webkit-scrollbar-thumb { background: rgb(64 64 64 / 0.7); }
::-webkit-scrollbar-thumb:hover { background: rgb(249 115 22 / 0.7); }

/* ===== Page transitions ===== */
.as-page { animation: asFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes asFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .as-page { animation: none; } }

/* ===== Sidebar nav link ===== */
.as-nav-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.85rem; border-radius: 0.6rem;
    font-size: 0.875rem; font-weight: 500; color: rgb(82 82 82);
    transition: all 0.15s; cursor: pointer;
}
.dark .as-nav-link { color: rgb(212 212 212); }
.as-nav-link:hover {
    background: rgb(254 249 195); color: rgb(234 88 12);
}
.dark .as-nav-link:hover { background: rgb(38 38 38); color: rgb(250 204 21); }
.as-nav-link.active {
    background: rgb(249 115 22); color: white;
    box-shadow: 0 4px 12px -2px rgb(249 115 22 / 0.4);
}
.dark .as-nav-link.active {
    background: rgb(250 204 21); color: rgb(23 23 23);
    box-shadow: 0 4px 12px -2px rgb(250 204 21 / 0.3);
}

/* ===== Cards ===== */
.as-card {
    background: white; border: 1px solid rgb(254 240 138);
    border-radius: 1rem; padding: 1.25rem;
    box-shadow: 0 1px 3px -1px rgb(0 0 0 / 0.05);
}
.dark .as-card {
    background: rgb(38 38 38); border-color: rgb(64 64 64);
    box-shadow: 0 1px 3px -1px rgb(0 0 0 / 0.3);
}

.as-card-hover { transition: all 0.2s; }
.as-card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgb(0 0 0 / 0.08); }
.dark .as-card-hover:hover { box-shadow: 0 8px 20px -4px rgb(0 0 0 / 0.5); }

/* ===== KPI Tile ===== */
.as-kpi {
    background: white; border: 1px solid rgb(254 240 138);
    border-radius: 1rem; padding: 1.25rem 1.5rem;
    transition: all 0.2s;
}
.dark .as-kpi { background: rgb(38 38 38); border-color: rgb(64 64 64); }
.as-kpi:hover { border-color: rgb(249 115 22); transform: translateY(-1px); }
.dark .as-kpi:hover { border-color: rgb(250 204 21); }

/* ===== Buttons ===== */
.as-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 0.6rem;
    font-size: 0.875rem; font-weight: 500; transition: all 0.15s;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.as-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.as-btn-primary {
    background: rgb(249 115 22); color: white;
}
.as-btn-primary:hover:not(:disabled) { background: rgb(234 88 12); }
.dark .as-btn-primary { background: rgb(250 204 21); color: rgb(23 23 23); }
.dark .as-btn-primary:hover:not(:disabled) { background: rgb(226 190 11); }

.as-btn-secondary {
    background: white; color: rgb(82 82 82); border-color: rgb(234 179 8);
}
.dark .as-btn-secondary { background: rgb(38 38 38); color: rgb(212 212 212); border-color: rgb(64 64 64); }
.as-btn-secondary:hover:not(:disabled) { background: rgb(254 249 195); }
.dark .as-btn-secondary:hover:not(:disabled) { background: rgb(64 64 64); }

.as-btn-ghost { background: transparent; color: rgb(82 82 82); }
.dark .as-btn-ghost { color: rgb(212 212 212); }
.as-btn-ghost:hover:not(:disabled) { background: rgb(254 249 195); }
.dark .as-btn-ghost:hover:not(:disabled) { background: rgb(64 64 64); }

.as-btn-danger { background: rgb(239 68 68); color: white; }
.as-btn-danger:hover:not(:disabled) { background: rgb(220 38 38); }

/* ===== Inputs ===== */
.as-input, .as-textarea, .as-select {
    width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
    border: 1px solid rgb(234 179 8); background: white;
    font-size: 0.875rem; color: rgb(38 38 38);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dark .as-input, .dark .as-textarea, .dark .as-select {
    background: rgb(23 23 23); border-color: rgb(64 64 64); color: rgb(245 245 245);
}
.as-input:focus, .as-textarea:focus, .as-select:focus {
    outline: none; border-color: rgb(249 115 22);
    box-shadow: 0 0 0 3px rgb(249 115 22 / 0.15);
}
.dark .as-input:focus, .dark .as-textarea:focus, .dark .as-select:focus {
    border-color: rgb(250 204 21);
    box-shadow: 0 0 0 3px rgb(250 204 21 / 0.2);
}

.as-label {
    display: block; font-size: 0.75rem; font-weight: 500;
    color: rgb(82 82 82); margin-bottom: 0.35rem;
}
.dark .as-label { color: rgb(163 163 163); }

/* ===== Badges ===== */
.as-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.6rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 500;
}
.as-badge-green { background: rgb(220 252 231); color: rgb(22 101 52); }
.dark .as-badge-green { background: rgb(20 50 20 / 0.6); color: rgb(187 247 208); }
.as-badge-yellow { background: rgb(254 249 195); color: rgb(133 77 14); }
.dark .as-badge-yellow { background: rgb(146 64 14 / 0.4); color: rgb(254 215 170); }
.as-badge-red { background: rgb(254 226 226); color: rgb(153 27 27); }
.dark .as-badge-red { background: rgb(127 29 29 / 0.5); color: rgb(254 202 202); }
.as-badge-blue { background: rgb(219 234 254); color: rgb(30 64 175); }
.dark .as-badge-blue { background: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }
.as-badge-gray { background: rgb(245 245 245); color: rgb(64 64 64); }
.dark .as-badge-gray { background: rgb(64 64 64); color: rgb(229 229 229); }
.as-badge-purple { background: rgb(243 232 255); color: rgb(107 33 168); }
.dark .as-badge-purple { background: rgb(88 28 135 / 0.5); color: rgb(216 180 254); }

/* ===== Table ===== */
.as-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.as-table thead th {
    text-align: left; padding: 0.75rem 1rem;
    font-weight: 500; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: rgb(115 115 115);
    border-bottom: 1px solid rgb(234 179 8);
}
.dark .as-table thead th { color: rgb(163 163 163); border-bottom-color: rgb(64 64 64); }
.as-table tbody td {
    padding: 0.85rem 1rem; border-bottom: 1px solid rgb(254 240 138);
}
.dark .as-table tbody td { border-bottom-color: rgb(64 64 64); }
.as-table tbody tr { transition: background 0.1s; cursor: pointer; }
.as-table tbody tr:hover { background: rgb(254 249 195); }
.dark .as-table tbody tr:hover { background: rgb(38 38 38); }

/* ===== Toast ===== */
.as-toast {
    pointer-events: auto;
    background: white; border: 1px solid rgb(234 179 8);
    border-radius: 0.75rem; padding: 0.85rem 1rem;
    box-shadow: 0 8px 20px -4px rgb(0 0 0 / 0.15);
    font-size: 0.875rem; animation: asToastIn 0.25s ease both;
}
.dark .as-toast { background: rgb(38 38 38); border-color: rgb(64 64 64); color: rgb(245 245 245); }
.as-toast-success { border-left: 3px solid rgb(34 197 94); }
.as-toast-error { border-left: 3px solid rgb(239 68 68); }
.as-toast-info { border-left: 3px solid rgb(249 115 22); }
.dark .as-toast-info { border-left-color: rgb(250 204 21); }
@keyframes asToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ===== Modal ===== */
.as-modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; animation: asFade 0.2s ease both;
}
.as-modal {
    background: white; border-radius: 1rem; max-width: 32rem; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px -10px rgb(0 0 0 / 0.3);
    animation: asModalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dark .as-modal { background: rgb(38 38 38); }
@keyframes asFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes asModalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ===== Spinner ===== */
.as-spinner {
    width: 1.25rem; height: 1.25rem; border: 2px solid rgb(234 179 8);
    border-top-color: transparent; border-radius: 50%;
    animation: asSpin 0.7s linear infinite;
}
.dark .as-spinner { border-color: rgb(250 204 21); border-top-color: transparent; }
@keyframes asSpin { to { transform: rotate(360deg); } }

/* ===== Empty state ===== */
.as-empty {
    text-align: center; padding: 3rem 1rem; color: rgb(115 115 115);
    font-size: 0.875rem;
}
.dark .as-empty { color: rgb(163 163 163); }

/* ===== Print styles for invoices & agreements ===== */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    body { background: white !important; color: black !important; }
    .print-area { padding: 0 !important; margin: 0 !important; }
    @page { margin: 1.5cm; }
}
.print-only { display: none; }

/* ===== Dark mode text safety net ===== */
/* Ensure any text that lacks an explicit dark: variant is still readable */
.dark { color: rgb(229 229 229); }
.dark table { color: rgb(229 229 229); }
.dark td { color: inherit; }
.dark th { color: rgb(163 163 163); }
.dark p { color: inherit; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: rgb(245 245 245); }
.dark strong { color: rgb(245 245 245); }
.dark .prose { color: rgb(229 229 229); }
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4 { color: rgb(245 245 245); }
.dark .prose strong { color: rgb(245 245 245); }
.dark .prose a { color: rgb(96 165 250); }

/* Force readable text in print-area even in dark mode (for invoices/agreements) */
.dark .print-area { color: rgb(229 229 229); }
.dark .print-area h1, .dark .print-area h2, .dark .print-area h3 { color: rgb(245 245 245); }
.dark .print-area p, .dark .print-area li, .dark .print-area td, .dark .print-area th { color: rgb(229 229 229); }
.dark .print-area strong { color: rgb(245 245 245); }

/* ===== Email manager (Gmail-style) ===== */
.as-email-list-item {
    padding: 0.75rem 1rem; border-bottom: 1px solid rgb(254 240 138);
    cursor: pointer; transition: background 0.1s; display: flex; gap: 0.75rem;
    align-items: flex-start;
}
.dark .as-email-list-item { border-bottom-color: rgb(64 64 64); }
.as-email-list-item:hover { background: rgb(254 249 195); }
.dark .as-email-list-item:hover { background: rgb(38 38 38); }
.as-email-list-item.unread { font-weight: 600; background: rgb(255 251 235); }
.dark .as-email-list-item.unread { background: rgb(38 38 38); }

/* ===== Rich text editor (Quill-style toolbar stub) ===== */
.as-editor-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem;
    border-bottom: 1px solid rgb(234 179 8); background: rgb(254 251 235);
}
.dark .as-editor-toolbar { border-bottom-color: rgb(64 64 64); background: rgb(38 38 38); }
.as-editor-btn {
    padding: 0.35rem 0.55rem; border-radius: 0.35rem; font-size: 0.8rem;
    cursor: pointer; background: transparent; color: rgb(82 82 82);
    border: 1px solid transparent; transition: all 0.1s;
}
.dark .as-editor-btn { color: rgb(212 212 212); }
.as-editor-btn:hover { background: white; border-color: rgb(234 179 8); }
.dark .as-editor-btn:hover { background: rgb(64 64 64); border-color: rgb(64 64 64); }

/* ===== Tabs ===== */
.as-tab {
    padding: 0.6rem 1rem; font-size: 0.875rem; font-weight: 500;
    color: rgb(115 115 115); cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.dark .as-tab { color: rgb(163 163 163); }
.as-tab:hover { color: rgb(249 115 22); }
.dark .as-tab:hover { color: rgb(250 204 21); }
.as-tab.active {
    color: rgb(249 115 22); border-bottom-color: rgb(249 115 22);
}
.dark .as-tab.active { color: rgb(250 204 21); border-bottom-color: rgb(250 204 21); }

/* ===== Mobile sidebar toggle ===== */
@media (max-width: 1023px) {
    #as-sidebar { transform: translateX(-100%); transition: transform 0.3s; }
    #as-sidebar.open { transform: translateX(0); }
}