/* Modern Dark Theme - AI generated */
/* ERP: dark UI, responsive (375/768/1024/1440), UI/UX Pro Max aligned */

:root {
    --primary-color: #6366f1;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary-color: #64748b;
    --secondary-dark: #475569;
    --secondary-light: #94a3b8;
    --success-color: #22c55e;
    --success-dark: #16a34a;
    --success-light: #4ade80;
    --warning-color: #eab308;
    --warning-dark: #ca8a04;
    --warning-light: #facc15;
    --danger-color: #ef4444;
    --danger-dark: #dc2626;
    --danger-light: #f87171;
    --info-color: #3b82f6;
    --info-dark: #2563eb;
    --info-light: #60a5fa;
    /* Dark theme: page & surfaces (darker for contrast - AI generated) */
    --bg-page: #0f172a;
    --bg-surface: #151f2e;
    --bg-elevated: #1e293b;
    --bg-input: #151f2e;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #475569;
    --border-subtle: #334155;
    --border-radius: 10px;
    --border-radius-sm: 8px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-md: 0 10px 24px rgba(0,0,0,0.45);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.5);
    --transition: 0.2s ease;
    --transition-smooth: 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Base: no horizontal scroll, smooth scroll */
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
    overflow-x: hidden;
}

/* Cursor + transition (UI Pro) */
.btn, .nav-link, .dropdown-item, .dropdown-toggle, .page-link, a.btn { cursor: pointer; transition: var(--transition); }

/* Navbar: dark with accent gradient */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--primary-gradient) !important;
    box-shadow: var(--shadow-md);
    padding: 0.5rem 1rem;
}
.navbar-brand { transition: var(--transition); }
.navbar-brand:hover { opacity: 0.9; }
/* Navbar logo: light backdrop for contrast on purple gradient (logo blends in otherwise) - AI generated */
.navbar .navbar-brand {
    background: rgba(255,255,255,0.84);
    padding: 6px 12px;
    border-radius: 8px;
}
.navbar .navbar-brand img {
    filter: brightness(1.1) contrast(1.05);
}
/* Nav links: no border-left/right (avoids bracket-like look); hover/active by bg only - AI generated */
.navbar-nav .nav-link {
    border: none !important;
    border-radius: var(--border-radius-sm);
    margin: 0 0.2rem;
    padding: 0.5rem 0.75rem !important;
    color: rgba(255,255,255,0.95) !important;
    box-shadow: none !important;
}
.navbar-nav .nav-link:hover { background-color: rgba(255,255,255,0.15); color: #fff !important; }
.navbar-nav .nav-link.active { background-color: rgba(255,255,255,0.25); font-weight: 600; color: #fff !important; }

/* Content padding */
.container, .container-fluid { padding-top: 1rem; padding-bottom: 2rem; }
@media (min-width: 768px) {
    .container, .container-fluid { padding-top: 1.5rem; }
}

/* Cards: dark surface, visible border (UI Pro: borders visible in dark) */
.card {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), border-color var(--transition);
    background-color: var(--bg-surface) !important;
    overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary-color) !important; }
.card-header {
    background: var(--primary-gradient) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.card-body { padding: 1.25rem; color: var(--text-primary) !important; }
.card-footer { background: var(--bg-elevated) !important; border-top: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }

/* Buttons: keep accent colors, no scale on hover */
.btn {
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: var(--transition);
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-primary { background: var(--primary-gradient); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); color: #fff; }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: #fff; box-shadow: var(--shadow-md); }
.btn-success { background: var(--success-color); color: #fff; }
.btn-success:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); color: #fff; }
.btn-danger { background: var(--danger-color); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); color: #fff; }
.btn-warning { background: var(--warning-color); color: #0f172a; }
.btn-warning:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); color: #0f172a; }
.btn-info { background: var(--info-color); color: #fff; }
.btn-info:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); color: #fff; }

/* Forms: dark inputs, visible border (UI Pro) */
.form-control, .form-select {
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.875rem;
    transition: var(--transition);
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-secondary); }
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
    outline: none;
}
label, .form-group label { color: var(--text-secondary) !important; }

/* Table: dark surface, row hover = elevated */
.table { border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--border-color); }
/* When .table has table-responsive / table-responsive-lg: keep overflow-x: auto for horizontal scroll on mobile (our .table overflow:hidden would override it) - AI generated */
.table[class*="table-responsive"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table thead th {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.875rem 1rem;
}
.table tbody tr { transition: background-color var(--transition); background-color: var(--bg-surface) !important; }
.table tbody tr:hover { background-color: var(--bg-elevated) !important; }
.table td { padding: 0.75rem 1rem; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
/* Override Bootstrap .table-light: it sets bg #f8f9fa + color #212529; fully reset for dark theme - AI generated */
.table tbody tr.table-light,
.table tbody tr.table-light td,
.table tbody tr.table-light th {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
.table tbody tr.table-light:hover,
.table tbody tr.table-light:hover td,
.table tbody tr.table-light:hover th { background-color: var(--bg-elevated) !important; }
.table tbody td.text-dark, .table tbody .text-dark { color: var(--text-primary) !important; }
.table tbody td[style*="color:black"], .table tbody td[style*="color: black"] { color: var(--text-primary) !important; }
.table-bordered td, .table-bordered th { border-color: var(--border-color) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,0.12) !important; }
.table-striped tbody tr:hover { background-color: var(--bg-elevated) !important; }
/* thead: override .table-light and page-level thead th { background:white } for dark theme - AI generated */
.table thead tr.table-light, .table thead tr.table-dark { background: transparent !important; }
.table thead tr.table-light th, .table thead tr.table-dark th { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
/* Semantic colors in table cells: use -light variants for visibility on dark bg - AI generated */
.table .text-danger { color: var(--danger-light) !important; }
.table .text-info { color: var(--info-light) !important; }
.table .text-success { color: var(--success-light) !important; }
.table .text-warning { color: var(--warning-light) !important; }

/* Alerts: dark bg with colored left border */
.alert { border-radius: var(--border-radius-sm); border: none; border-left: 4px solid; box-shadow: var(--shadow-sm); padding: 0.875rem 1.25rem; }
.alert-success { background: rgba(34,197,94,0.15); color: var(--success-light); border-left-color: var(--success-color); }
.alert-danger { background: rgba(239,68,68,0.15); color: var(--danger-light); border-left-color: var(--danger-color); }
.alert-warning { background: rgba(234,179,8,0.15); color: var(--warning-light); border-left-color: var(--warning-color); }
.alert-info { background: rgba(59,130,246,0.15); color: var(--info-light); border-left-color: var(--info-color); }
.alert-dismissible .close { color: var(--text-muted); opacity: 0.9; text-shadow: none; }

/* Reminder: Latest invoice block - dark-theme friendly (was lightyellow, caused invisible text) - AI generated */
.reminder-latest-invoice {
    background: rgba(234,179,8,0.2) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid var(--warning-color);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
    margin-top: 0.25rem;
}
.reminder-latest-invoice a { color: var(--primary-light) !important; }
.reminder-latest-invoice a:hover { color: var(--primary-color) !important; }
.reminder-invoice-date {
    background: rgba(234,179,8,0.4) !important;
    color: var(--text-primary) !important;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    display: inline-block;
    margin: 0.2rem 0;
}

/* Dropdown, modal: dark surface, visible border */
.dropdown-menu { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-lg); padding: 0.5rem; margin-top: 0.5rem; background-color: var(--bg-surface) !important; }
.dropdown-item { border-radius: var(--border-radius-sm); padding: 0.5rem 1rem; color: var(--text-primary) !important; }
.dropdown-item:hover { background: var(--bg-elevated); color: var(--primary-light); }
.dropdown-item.active { background: var(--primary-gradient); color: #fff; }
.dropdown-divider { border-top-color: var(--border-color); }
.badge { border-radius: var(--border-radius-sm); padding: 0.3rem 0.6rem; font-weight: 500; }
.pagination .page-link { border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); margin: 0 0.2rem; transition: var(--transition); background: var(--bg-surface); color: var(--text-primary); }
.pagination .page-link:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.pagination .page-item.active .page-link { background: var(--primary-gradient); border-color: var(--primary-color); color: #fff; }
.pagination .page-item.disabled .page-link { background: var(--bg-page); color: var(--text-muted); border-color: var(--border-color); }

/* Footer: dark bar */
.footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted) !important;
    padding: 1rem 1.5rem;
    margin-top: 2rem;
    text-align: center;
}

/* Modals: dark */
.modal-content { border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); background-color: var(--bg-surface) !important; }
.modal-header { background: var(--bg-elevated); color: var(--text-primary) !important; border: none; border-bottom: 1px solid var(--border-color); border-radius: var(--border-radius) var(--border-radius) 0 0; }
.modal-body { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }
.modal-footer { border-top: 1px solid var(--border-color); background: var(--bg-elevated); }
.input-group .form-control, .input-group .form-select { border-radius: var(--border-radius-sm); }
/* Scrollbar: dark */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary-dark); }
.spinner-border { border-width: 3px; }

/* Text utilities that may be overridden by BS */
.text-muted { color: var(--text-muted) !important; }
.text-white { color: #fff !important; }
a:not(.btn) { color: var(--primary-light); }
a:not(.btn):hover { color: var(--primary-color); }

.form-control-sm { height: calc(2.5em + .5rem + 2px) }

/* Responsive: 375, 768, 1024, 1440 (UI Pro) */
@media (max-width: 575.98px) {
    .navbar-brand img { max-height: 40px; }
    .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; }
    .card-body { padding: 1rem; }
    .card-header { padding: 0.75rem 1rem; }
    .btn { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
    .table td, .table thead th { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .footer { padding: 0.875rem 1rem; margin-top: 1.5rem; font-size: 0.875rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .container, .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 768px) {
    .card-body { padding: 1.5rem; }
}
@media (min-width: 1024px) {
    .container { max-width: 1280px; }
}
@media (min-width: 1440px) {
    .container { max-width: 1320px; }
}

/* Login: centered card */
.login-page .container .col-md-6 { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Daily Task form: PWA-friendly SAVE / DRAFT (mobile: "DRAFT" only; desktop: "SAVE AS DRAFT") - AI generated */
.draft-btn-long { display: none; }
@media (min-width: 769px) { .draft-btn-long { display: inline; } }
.button-save { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; clear: both; }
.button-save .btn { float: none !important; white-space: nowrap; }
@media (max-width: 768px) {
    .button-save { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
    .button-save .btn, #save-draft-btn, #save-publish-btn {
        width: 100% !important; min-height: 44px; margin: 0 !important; padding: 12px 16px;
        font-size: 1rem; border-radius: 10px;
    }
}

/* prefers-reduced-motion (UI Pro: a11y) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}