/* ============================================================
   DocConta - Contador Web Interface
   Dark theme with green accents (#00C896)
   ============================================================ */

:root { --dc-sidebar-w: 260px; --dc-header-h: 64px; }

/* Cliente Portal: Padrao base with blue accent */
[data-theme="cliente"] {
    --dc-bg: #0e1015; --dc-bg-card: #171a20; --dc-bg-sidebar: #111420;
    --dc-bg-hover: #1e222c; --dc-bg-input: #1a1e28; --dc-bg-filter: #141820;
    --dc-bg-active: rgba(59,130,246,0.12);
    --dc-border: #282d38; --dc-border-light: #323844; --dc-border-input: #3a4050;
    --dc-border-focus: #3B82F6;
    --dc-text: #c8cedc; --dc-text-muted: #8e96aa; --dc-text-heading: #eef0f5;
    --dc-text-dim: #8e96aa; --dc-text-input: #c8cedc; --dc-text-table-header: #9aa2b8;
    --dc-text-link: #60a5fa; --dc-text-description: #a0a8bc;
    --dc-sidebar-text: #a0aac0; --dc-sidebar-muted: #6a7490;
    --dc-sidebar-active: #3B82F6; --dc-sidebar-active-bg: rgba(59,130,246,0.12);
    --dc-green: #3B82F6; --dc-green-dark: #2563eb; --dc-green-light: #60a5fa;
    --dc-green-glow: rgba(59,130,246,0.15); --dc-green-bg: rgba(59,130,246,0.10);
    --dc-yellow: #f0b840; --dc-red: #f06060; --dc-info: #3B82F6;
    --dc-blue: #3B82F6; --dc-grey: #6b7280;
    --dc-badge-novo-bg: rgba(59,130,246,0.18); --dc-badge-novo-text: #60a5fa;
    --dc-badge-enviado-bg: rgba(59,130,246,0.18); --dc-badge-enviado-text: #60a5fa;
    --dc-badge-aprovado-bg: rgba(34,197,94,0.18); --dc-badge-aprovado-text: #4ade80;
    --dc-badge-recebido-bg: rgba(240,184,64,0.18); --dc-badge-recebido-text: #f0c860;
    --dc-sidebar-w: 260px; --dc-header-h: 64px;
    --dc-font: 'Inter', -apple-system, sans-serif;
    --dc-font-display: 'Inter', -apple-system, sans-serif;
}

[data-theme="padrao"] {
    --dc-bg: #0e1015; --dc-bg-card: #171a20; --dc-bg-sidebar: #111420;
    --dc-bg-hover: #1e222c; --dc-bg-input: #1a1e28; --dc-bg-filter: #141820;
    --dc-bg-active: rgba(0,201,167,0.12);
    --dc-border: #282d38; --dc-border-light: #323844; --dc-border-input: #3a4050;
    --dc-border-focus: #00c9a7;
    --dc-text: #c8cedc; --dc-text-muted: #8e96aa; --dc-text-heading: #eef0f5;
    --dc-text-dim: #8e96aa; --dc-text-input: #c8cedc; --dc-text-table-header: #9aa2b8;
    --dc-text-link: #2eddb8; --dc-text-description: #a0a8bc;
    --dc-sidebar-text: #a0aac0; --dc-sidebar-muted: #6a7490;
    --dc-sidebar-active: #00c9a7; --dc-sidebar-active-bg: rgba(0,201,167,0.12);
    --dc-green: #00c9a7; --dc-green-dark: #00a67a; --dc-green-light: #2eddb8;
    --dc-green-glow: rgba(0,201,167,0.10); --dc-green-bg: rgba(0,201,167,0.10);
    --dc-yellow: #f0b840; --dc-red: #f06060; --dc-info: #4898f0;
    --dc-blue: #4898f0; --dc-grey: #6b7280;
    --dc-badge-novo-bg: rgba(0,201,167,0.18); --dc-badge-novo-text: #2eddb8;
    --dc-badge-enviado-bg: rgba(72,152,240,0.18); --dc-badge-enviado-text: #70b8f8;
    --dc-badge-aprovado-bg: rgba(0,201,167,0.18); --dc-badge-aprovado-text: #2eddb8;
    --dc-badge-recebido-bg: rgba(240,184,64,0.18); --dc-badge-recebido-text: #f0c860;
    --dc-sidebar-w: 260px; --dc-header-h: 64px;
    --dc-font: 'Inter', -apple-system, sans-serif;
    --dc-font-display: 'Inter', -apple-system, sans-serif;
}

[data-theme="mata_atlantica"] {
    --dc-bg: #121814; --dc-bg-card: #1a2118; --dc-bg-sidebar: #0f1410;
    --dc-bg-hover: #232c20; --dc-bg-input: #1e261c; --dc-bg-filter: #161e14;
    --dc-bg-active: rgba(196,112,74,0.14);
    --dc-border: #2c3628; --dc-border-light: #384432; --dc-border-input: #445038;
    --dc-border-focus: #c4704a;
    --dc-text: #ccd4b8; --dc-text-muted: #96a080; --dc-text-heading: #e8ecda;
    --dc-text-dim: #96a080; --dc-text-input: #ccd4b8; --dc-text-table-header: #a0aa8c;
    --dc-text-link: #d8886a; --dc-text-description: #b0b89c;
    --dc-sidebar-text: #a8b090; --dc-sidebar-muted: #6e7860;
    --dc-sidebar-active: #c4704a; --dc-sidebar-active-bg: rgba(196,112,74,0.14);
    --dc-green: #c4704a; --dc-green-dark: #a85c3a; --dc-green-light: #d8886a;
    --dc-green-glow: rgba(196,112,74,0.15); --dc-green-bg: rgba(196,112,74,0.12);
    --dc-yellow: #c8a040; --dc-red: #c86050; --dc-info: #6a9e5a;
    --dc-blue: #6a9e5a; --dc-grey: #6b7280;
    --dc-badge-novo-bg: rgba(106,158,90,0.20); --dc-badge-novo-text: #80b870;
    --dc-badge-enviado-bg: rgba(196,112,74,0.20); --dc-badge-enviado-text: #d8886a;
    --dc-badge-aprovado-bg: rgba(106,158,90,0.20); --dc-badge-aprovado-text: #80b870;
    --dc-badge-recebido-bg: rgba(200,160,64,0.20); --dc-badge-recebido-text: #d0b850;
    --dc-font: 'Libre Franklin', 'Segoe UI', sans-serif;
    --dc-font-display: 'Playfair Display', Georgia, serif;
}

[data-theme="escritorio"] {
    --dc-bg: #151418; --dc-bg-card: #1e1d26; --dc-bg-sidebar: #111018;
    --dc-bg-hover: #28262e; --dc-bg-input: #201e2a; --dc-bg-filter: #1a1820;
    --dc-bg-active: rgba(196,152,42,0.14);
    --dc-border: #322e3a; --dc-border-light: #3e3a48; --dc-border-input: #4a4458;
    --dc-border-focus: #c4982a;
    --dc-text: #cac4d8; --dc-text-muted: #9690b0; --dc-text-heading: #eae6f2;
    --dc-text-dim: #9690b0; --dc-text-input: #cac4d8; --dc-text-table-header: #a09abc;
    --dc-text-link: #d8ac3e; --dc-text-description: #b4aec8;
    --dc-sidebar-text: #a8a0c0; --dc-sidebar-muted: #6e6890;
    --dc-sidebar-active: #c4982a; --dc-sidebar-active-bg: rgba(196,152,42,0.14);
    --dc-green: #c4982a; --dc-green-dark: #a87e20; --dc-green-light: #d8ac3e;
    --dc-green-glow: rgba(196,152,42,0.15); --dc-green-bg: rgba(196,152,42,0.12);
    --dc-yellow: #c4982a; --dc-red: #d06060; --dc-info: #8878c0;
    --dc-blue: #8878c0; --dc-grey: #6b7280;
    --dc-badge-novo-bg: rgba(88,168,120,0.20); --dc-badge-novo-text: #70c090;
    --dc-badge-enviado-bg: rgba(136,120,192,0.20); --dc-badge-enviado-text: #a898d0;
    --dc-badge-aprovado-bg: rgba(88,168,120,0.20); --dc-badge-aprovado-text: #70c090;
    --dc-badge-recebido-bg: rgba(196,152,42,0.20); --dc-badge-recebido-text: #d8b44a;
    --dc-font: 'DM Sans', 'Segoe UI', sans-serif;
    --dc-font-display: 'Fraunces', Georgia, serif;
}

[data-theme="ipanema"] {
    --dc-bg: #f2ede5; --dc-bg-card: #faf8f5; --dc-bg-sidebar: #f5f0e8;
    --dc-bg-hover: #e8e2d8; --dc-bg-input: #f0ebe2; --dc-bg-filter: #eae4da;
    --dc-bg-active: rgba(26,122,106,0.10);
    --dc-border: #ccc4b4; --dc-border-light: #d8d0c2; --dc-border-input: #b8b0a0;
    --dc-border-focus: #1a7a6a;
    --dc-text: #3a3430; --dc-text-muted: #6a6258; --dc-text-heading: #18140e;
    --dc-text-dim: #6a6258; --dc-text-input: #3a3430; --dc-text-table-header: #5a5248;
    --dc-text-link: #147060; --dc-text-description: #504840;
    --dc-sidebar-text: #5a5248; --dc-sidebar-muted: #8a8078;
    --dc-sidebar-active: #187868; --dc-sidebar-active-bg: rgba(24,120,104,0.12);
    --dc-green: #187868; --dc-green-dark: #146050; --dc-green-light: #20947e;
    --dc-green-glow: rgba(24,120,104,0.12); --dc-green-bg: rgba(24,120,104,0.08);
    --dc-yellow: #a06a18; --dc-red: #b83838; --dc-info: #187868;
    --dc-blue: #187868; --dc-grey: #6b7280;
    --dc-badge-novo-bg: rgba(30,122,74,0.14); --dc-badge-novo-text: #1a7848;
    --dc-badge-enviado-bg: rgba(24,120,104,0.14); --dc-badge-enviado-text: #187868;
    --dc-badge-aprovado-bg: rgba(30,122,74,0.14); --dc-badge-aprovado-text: #1a7848;
    --dc-badge-recebido-bg: rgba(160,106,24,0.14); --dc-badge-recebido-text: #906010;
    --dc-font: 'Source Sans 3', 'Segoe UI', sans-serif;
    --dc-font-display: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }

body {
    background: var(--dc-bg);
    color: var(--dc-text);
    font-family: var(--dc-font, 'Inter'), system-ui, -apple-system, sans-serif;
    margin: 0;
    min-height: 100vh;
}

/* Theme-aware headings */
h1, h2, h3, h4, .dc-header-title, .dc-sidebar-logo .logo-text {
    font-family: var(--dc-font-display, var(--dc-font, 'Inter')), system-ui, sans-serif;
}

/* Theme-aware text colors for Ipanema (light theme) overrides */
[data-theme="ipanema"] .dc-select option {
    background: var(--dc-bg-card);
    color: var(--dc-text);
}
[data-theme="ipanema"] .dc-loading-overlay {
    background: rgba(242,237,229,0.7);
}
[data-theme="ipanema"] .dc-modal-overlay {
    background: rgba(0,0,0,0.35);
}
[data-theme="ipanema"] ::selection {
    background: rgba(26,122,106,0.25);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dc-bg); }
::-webkit-scrollbar-thumb { background: var(--dc-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dc-text-dim); }

/* ---- Layout ---- */
.dc-layout {
    display: flex;
    min-height: 100vh;
}

.dc-sidebar {
    width: var(--dc-sidebar-w);
    background: var(--dc-bg-sidebar);
    border-right: 1px solid var(--dc-border);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: transform 0.3s ease;
}

.dc-sidebar-logo {
    padding: 20px 24px;
    border-bottom: 1px solid var(--dc-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-sidebar-logo .logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--dc-green), var(--dc-green-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.dc-sidebar-logo .logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--dc-text);
    letter-spacing: -0.5px;
}

.dc-sidebar-logo .logo-text span {
    color: var(--dc-green);
}

.dc-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.dc-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--dc-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    margin-bottom: 2px;
}

.dc-sidebar-nav a:hover {
    background: var(--dc-bg-hover);
    color: var(--dc-text);
}

.dc-sidebar-nav a.active {
    background: var(--dc-sidebar-active-bg);
    color: var(--dc-sidebar-active);
}

.dc-sidebar-nav a svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.dc-sidebar-nav .nav-section {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dc-sidebar-muted);
    padding: 20px 14px 8px;
}

.dc-main {
    margin-left: var(--dc-sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dc-header {
    height: var(--dc-header-h);
    background: var(--dc-bg-card);
    border-bottom: 1px solid var(--dc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.dc-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dc-header-title {
    font-size: 18px;
    font-weight: 600;
}

.dc-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dc-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.dc-header-user:hover {
    background: var(--dc-bg-hover);
}

.dc-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dc-green), var(--dc-green-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.dc-content {
    flex: 1;
    padding: 28px;
}

/* ---- Mobile sidebar ---- */
.dc-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 35;
}

.dc-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--dc-text);
    cursor: pointer;
    padding: 4px;
}

@media (max-width: 768px) {
    .dc-sidebar {
        transform: translateX(-100%);
    }
    .dc-sidebar.open {
        transform: translateX(0);
    }
    .dc-sidebar-overlay.open {
        display: block;
    }
    .dc-main {
        margin-left: 0;
    }
    .dc-mobile-toggle {
        display: block;
    }
    .dc-content {
        padding: 16px;
    }
}

/* ---- Cards ---- */
.dc-card {
    background: var(--dc-bg-card);
    border: 1px solid var(--dc-border);
    border-radius: 12px;
    padding: 24px;
}

.dc-stat-card {
    background: var(--dc-bg-card);
    border: 1px solid var(--dc-border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.dc-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.dc-stat-card .stat-label {
    font-size: 13px;
    color: var(--dc-text-muted);
    margin-top: 4px;
}

/* ---- Forms ---- */
.dc-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--dc-bg-input);
    border: 1px solid var(--dc-border-input);
    border-radius: 8px;
    color: var(--dc-text-input);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.dc-input:focus {
    border-color: var(--dc-green);
    box-shadow: 0 0 0 3px var(--dc-green-glow);
}

.dc-input::placeholder {
    color: var(--dc-text-dim);
}

.dc-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--dc-text-heading);
    margin-bottom: 6px;
}

.dc-select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    background-color: var(--dc-bg-input);
    border: 1px solid var(--dc-border-input);
    border-radius: 8px;
    color: var(--dc-text-input);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8fa3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.dc-select option {
    background: var(--dc-bg-card);
    color: var(--dc-text);
    padding: 8px;
}

.dc-select:focus {
    border-color: var(--dc-green);
    box-shadow: 0 0 0 3px var(--dc-green-glow);
}

textarea.dc-input {
    resize: vertical;
    min-height: 80px;
}

/* ---- Buttons ---- */
.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.dc-btn-primary {
    background: var(--dc-green);
    color: #fff;
}

.dc-btn-primary:hover {
    background: var(--dc-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--dc-green-glow);
}

.dc-btn-secondary {
    background: var(--dc-bg-input);
    color: var(--dc-text);
    border: 1px solid var(--dc-border);
}

.dc-btn-secondary:hover {
    background: var(--dc-bg-hover);
    border-color: var(--dc-text-dim);
}

.dc-btn-danger {
    background: rgba(239,68,68,0.15);
    color: var(--dc-red);
    border: 1px solid rgba(239,68,68,0.3);
}

.dc-btn-danger:hover {
    background: rgba(239,68,68,0.25);
}

.dc-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.dc-btn-icon {
    padding: 10px;
    border-radius: 10px;
    background: none;
    border: 1px solid var(--dc-border);
    color: var(--dc-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.dc-btn-icon svg {
    width: 21px;
    height: 21px;
}

.dc-btn-icon:hover {
    background: var(--dc-bg-hover);
    color: var(--dc-text);
}

.dc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ---- Table ---- */
.dc-table-wrap {
    overflow-x: auto;
}

.dc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dc-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dc-text-table-header);
    border-bottom: 1px solid var(--dc-border);
    white-space: nowrap;
}

.dc-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dc-border);
    color: var(--dc-text);
}

.dc-table tr:last-child td {
    border-bottom: none;
}

.dc-table tr:hover td {
    background: var(--dc-bg-hover);
}

/* ---- Badges ---- */
.dc-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dc-badge-green  { background: rgba(0,200,150,0.15); color: var(--dc-green); }
.dc-badge-yellow { background: rgba(245,158,11,0.15); color: var(--dc-yellow); }
.dc-badge-red    { background: rgba(239,68,68,0.15); color: var(--dc-red); }
.dc-badge-blue   { background: rgba(59,130,246,0.15); color: var(--dc-blue); }
.dc-badge-grey   { background: rgba(107,114,128,0.15); color: var(--dc-grey); }

/* ---- Ampel (traffic light) ---- */
.dc-ampel {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}
.dc-ampel-green  { background: var(--dc-green); box-shadow: 0 0 8px var(--dc-green-glow); }
.dc-ampel-yellow { background: var(--dc-yellow); box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.dc-ampel-red    { background: var(--dc-red); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.dc-ampel-grey   { background: var(--dc-grey); }

/* ---- Modal ---- */
.dc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.dc-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dc-modal {
    background: var(--dc-bg-card);
    border: 1px solid var(--dc-border);
    border-radius: 16px;
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s;
}

.dc-modal-overlay.open .dc-modal {
    transform: scale(1) translateY(0);
}

.dc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--dc-border);
}

.dc-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.dc-modal-close {
    background: none;
    border: none;
    color: var(--dc-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}

.dc-modal-close:hover {
    background: var(--dc-bg-hover);
    color: var(--dc-text);
}

.dc-modal-body {
    padding: 24px;
}

.dc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--dc-border);
}

/* ---- Toast ---- */
.dc-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-toast {
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    animation: dc-toast-in 0.3s ease;
    border: 1px solid;
}

.dc-toast-success {
    background: rgba(0,200,150,0.12);
    border-color: rgba(0,200,150,0.3);
    color: var(--dc-green);
}

.dc-toast-error {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
    color: var(--dc-red);
}

.dc-toast-warning {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.3);
    color: var(--dc-yellow);
}

.dc-toast-info {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.3);
    color: var(--dc-blue);
}

.dc-toast-out {
    animation: dc-toast-out 0.3s ease forwards;
}

@keyframes dc-toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes dc-toast-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* ---- Drag & Drop ---- */
.dc-dropzone {
    border: 2px dashed var(--dc-border);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.dc-dropzone:hover,
.dc-dropzone.dragover {
    border-color: var(--dc-green);
    background: var(--dc-green-glow);
}

.dc-dropzone svg {
    margin: 0 auto 12px;
    color: var(--dc-text-dim);
}

.dc-dropzone.dragover svg {
    color: var(--dc-green);
}

/* ---- Auth pages ---- */
.dc-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--dc-bg);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(0,200,150,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.04) 0%, transparent 50%);
}

.dc-auth-card {
    background: var(--dc-bg-card);
    border: 1px solid var(--dc-border);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.dc-auth-card .auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.dc-auth-card .auth-logo .logo-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--dc-green), var(--dc-green-dark));
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
}

.dc-auth-card .auth-logo h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.dc-auth-card .auth-logo h1 span {
    color: var(--dc-green);
}

.dc-auth-card .auth-logo p {
    color: var(--dc-text-muted);
    font-size: 14px;
    margin-top: 6px;
}

/* ---- Pagination ---- */
.dc-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dc-pagination button {
    padding: 6px 12px;
    border: 1px solid var(--dc-border);
    border-radius: 6px;
    background: var(--dc-bg-input);
    color: var(--dc-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.dc-pagination button:hover {
    background: var(--dc-bg-hover);
    color: var(--dc-text);
}

.dc-pagination button.active {
    background: var(--dc-green);
    color: #fff;
    border-color: var(--dc-green);
}

.dc-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Loading spinner ---- */
.dc-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dc-border);
    border-top-color: var(--dc-green);
    border-radius: 50%;
    animation: dc-spin 0.6s linear infinite;
}

.dc-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

@keyframes dc-spin {
    to { transform: rotate(360deg); }
}

.dc-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,17,23,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
}

/* ---- Misc ---- */
.dc-divider {
    height: 1px;
    background: var(--dc-border);
    margin: 20px 0;
}

.dc-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--dc-text-muted);
}

.dc-empty svg {
    margin-bottom: 16px;
    color: var(--dc-text-dim);
}

.dc-link {
    color: var(--dc-text-link);
    text-decoration: none;
    transition: color 0.2s;
}

.dc-link:hover {
    color: var(--dc-green);
    text-decoration: underline;
}

/* ---- Month Selector ---- */
.dc-month-selector {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--dc-bg-input);
    border: 1px solid var(--dc-border);
    border-radius: 10px;
    padding: 6px 8px;
}

.dc-month-selector button {
    background: none;
    border: none;
    color: var(--dc-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.dc-month-selector button:hover {
    background: var(--dc-bg-hover);
    color: var(--dc-text);
}

.dc-month-selector .month-label {
    font-weight: 600;
    font-size: 14px;
    min-width: 140px;
    text-align: center;
}

/* ---- Register page wider card ---- */
.dc-auth-card.register {
    max-width: 560px;
}

/* ---- Settings tabs ---- */
.dc-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--dc-border);
    margin-bottom: 24px;
}

.dc-tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dc-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
}

.dc-tab:hover {
    color: var(--dc-text);
}

.dc-tab.active {
    color: var(--dc-green);
    border-bottom-color: var(--dc-green);
}

.dc-tab-content {
    display: none;
}

.dc-tab-content.active {
    display: block;
}
.hidden { display: none !important; }