/*
 * modern.css - clean light design for the admin.
 * Loaded last (after backend.css). It only restyles: no ids, classes, sizes that scripts
 * rely on (sidebar 50px / 235px, invoice box heights) or markup are changed.
 * Remove the <link> in includes/templates/header.php to go back to the previous look.
 */

/* ---------- Font (local files, works offline) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Design tokens ---------- */
:root {
    --m-bg: #F5F7FA;
    --m-surface: #FFFFFF;
    --m-surface-2: #F9FAFB;
    --m-hover: #F3F4F6;
    --m-border: #E5E7EB;
    --m-border-strong: #D1D5DB;
    --m-text: #111827;
    --m-text-2: #374151;
    --m-muted: #6B7280;
    --m-primary: #2563EB;
    --m-primary-hover: #1D4ED8;
    --m-primary-soft: #EFF6FF;
    --m-success: #16A34A;
    --m-danger: #DC2626;
    --m-warning: #F59E0B;
    --m-info: #0EA5E9;
    --m-radius: 12px;
    --m-radius-sm: 8px;
    --m-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --m-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --m-shadow-lg: 0 20px 40px -8px rgba(16, 24, 40, .18), 0 8px 16px -6px rgba(16, 24, 40, .08);
    --m-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --m-stripe: #FAFBFC;
    --m-row-hover: #F3F6FB;
    --m-stripe-shade: rgba(17, 24, 39, .025);
    --m-placeholder: #9CA3AF;
    --m-scroll: #CBD5E1;
    --m-overlay: rgba(245, 247, 250, .85);
    --m-selection: #BFDBFE;
    --m-backdrop: #0F172A;

    /* Bootstrap 5 variables, so its components follow the design */
    --bs-body-font-family: var(--m-font);
    --bs-body-bg: var(--m-bg);
    --bs-body-color: var(--m-text-2);
    --bs-emphasis-color: var(--m-text);
    --bs-border-color: var(--m-border);
    --bs-border-radius: var(--m-radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--m-radius);
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-success: #16A34A;
    --bs-success-rgb: 22, 163, 74;
    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: #0EA5E9;
    --bs-info-rgb: 14, 165, 233;
    --bs-link-color: #2563EB;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1D4ED8;
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-focus-ring-color: rgba(37, 99, 235, .25);
}

/* ---------- Dark theme (html[data-theme="dark"], switched from the top bar) ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --m-bg: #0B1120;
    --m-surface: #111827;
    --m-surface-2: #172033;
    --m-hover: #1E293B;
    --m-border: #243044;
    --m-border-strong: #334155;
    --m-text: #F1F5F9;
    --m-text-2: #CBD5E1;
    --m-muted: #94A3B8;
    --m-primary: #3B82F6;
    --m-primary-hover: #60A5FA;
    --m-primary-soft: rgba(59, 130, 246, .16);
    --m-stripe: #131C2E;
    --m-row-hover: #1A2539;
    --m-stripe-shade: rgba(255, 255, 255, .025);
    --m-placeholder: #64748B;
    --m-scroll: #334155;
    --m-overlay: rgba(11, 17, 32, .85);
    --m-selection: #1E3A8A;
    --m-backdrop: #000;
    --m-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --m-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
    --m-shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, .6), 0 8px 16px -6px rgba(0, 0, 0, .4);

    --bs-primary: #3B82F6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-link-color: #60A5FA;
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color: #93C5FD;
    --bs-link-hover-color-rgb: 147, 197, 253;
    --bs-secondary-bg: var(--m-surface-2);
    --bs-tertiary-bg: var(--m-surface-2);
    --bs-secondary-color: var(--m-muted);
}
html[data-theme="dark"] .modal-backdrop.show { opacity: .6; }

/* the switch: moon in light mode, sun in dark mode */
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--m-radius-sm);
    background: transparent;
    color: var(--m-muted);
    font-size: 16px;
    cursor: pointer;
}
#theme-toggle:hover { background: var(--m-hover); color: var(--m-text); }
#theme-toggle .fa-sun-o { display: none; }
html[data-theme="dark"] #theme-toggle .fa-moon-o { display: none; }
html[data-theme="dark"] #theme-toggle .fa-sun-o { display: inline-block; color: #FBBF24; }

/* ---------- Base ---------- */
body {
    font-family: var(--m-font);
    font-size: 14px;
    background-color: var(--m-bg);
    color: var(--m-text-2);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--m-font); color: var(--m-text); letter-spacing: -.01em; }
h1 { font-size: 1.75rem; font-weight: 700; color: var(--m-text); margin: 28px 0 22px; }
h2 { font-weight: 700; }
h3, h4 { font-weight: 600; }
a { color: var(--m-primary); }
a:hover { color: var(--m-primary-hover); }
hr { border-color: var(--m-border); opacity: 1; }
::selection { background: var(--m-selection); }

* { scrollbar-width: thin; scrollbar-color: var(--m-scroll) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--m-scroll); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Top bar ---------- */
#header {
    height: 48px;
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-sm);
    display: flex;
    align-items: center;
}
#header > #button-menu {
    height: 32px !important;
    margin: 0 0 0 9px;
    padding: 3px;
    border-radius: var(--m-radius-sm);
    transition: background-color .15s;
}
#header > #button-menu:hover { background: var(--m-hover); }
#header > .nav { margin-inline-start: auto; height: 100%; align-items: center; padding-inline-end: 8px; }
#header .nav li.dropdown { border-left: 0; }
#header .nav > li > a,
#header .nav li a.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    color: var(--m-text-2);
    font-weight: 500;
    border-radius: var(--m-radius-sm);
    text-decoration: none;
}
#header .nav > li > a:hover,
#header .nav li a.dropdown-toggle:hover,
#header .nav li a.dropdown-toggle.show { color: var(--m-text); background: var(--m-hover); }
#header .nav > li > a .fa { color: var(--m-muted); }

/* ---------- Side menu ---------- */
#column-left {
    margin-top: 48px;
    height: calc(100% - 48px);
    background: var(--m-surface);
    border-right: 1px solid var(--m-border);
}
#menu { padding: 8px 0; }
#menu li a { border-bottom: 0; }
#menu > li > a {
    color: var(--m-muted);
    font-weight: 500;
    margin: 2px 6px;
    padding: 9px 10px 9px 9px;
    border-radius: var(--m-radius-sm);
    border-bottom: 0;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
#menu > li > a > span { color: var(--m-text-2); }
#menu > li > a:hover,
#menu > li:hover > a { background: var(--m-hover); color: var(--m-text); }
#menu > li.active > a,
#menu > li.open > a { background: var(--m-primary-soft); color: var(--m-primary); }
#menu > li.active > a > span,
#menu > li.open > a > span { color: var(--m-primary); }
#menu li a i { font-size: 16px; width: 18px; text-align: center; }

/* flyout (collapsed sidebar) and nested lists */
#menu > li > ul {
    left: 50px;
    width: 230px;
    padding: 6px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
}
#column-left.active #menu > li > ul { border: 0; border-radius: 0; box-shadow: none; padding: 0 6px 4px; background: transparent; }
#menu li ul { overflow-y: auto; }
#menu li li a {
    color: var(--m-text-2);
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 6px;
    font-size: 13.5px;
}
#menu li li a:hover { color: var(--m-primary); background: var(--m-hover); }
#menu li li a:before { content: none; }   /* items already have their own icon */
#menu li li a { padding-left: 14px; }
#menu li li ul a { padding-left: 30px; }
#menu li li a i { font-size: 13px; color: var(--m-muted); margin-right: 4px; }
#menu li.active li a { color: var(--m-text-2); }
#menu li li.active > a:last-child { color: var(--m-primary); font-weight: 500; }
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after { color: var(--m-placeholder); }

/* ---------- Page ---------- */
.m110 { padding-top: 20px; }   /* the top bar is 10px taller than before (48px) */
.text-primary { color: var(--m-primary) !important; }

/* ---------- Cards, wells, boxes ---------- */
.card, .well, .info-box, .info-box1, .info-box2 {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
}
.card { overflow: visible; }
.card > .card-header,
.card-header {
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    padding: 12px 16px;
    color: var(--m-text);
    font-weight: 600;
}
.card > .card-header:first-child { border-radius: var(--m-radius) var(--m-radius) 0 0; }
.card-footer { background: var(--m-surface-2); border-top: 1px solid var(--m-border); }
.card-title { color: var(--m-text); font-size: 1.05rem; font-weight: 600; }
.card.border-primary > .card-header,
.card.border-success > .card-header,
.card.border-info > .card-header,
.card.border-warning > .card-header,
.card.border-danger > .card-header { background: var(--m-surface); color: var(--m-text); border-color: var(--m-border); }
.card.border-primary { border-top: 3px solid var(--m-primary) !important; }
.card.border-success { border-top: 3px solid var(--m-success) !important; }
.card.border-info    { border-top: 3px solid var(--m-info) !important; }
.card.border-warning { border-top: 3px solid var(--m-warning) !important; }
.card.border-danger  { border-top: 3px solid var(--m-danger) !important; }

.well { padding: 16px; }
.wellbox, .wellboxinfo, .wellboxacc { border-top: 3px solid var(--m-primary); }
/* the From / To / date boxes of the documents (backend.css: 210px); phones keep their own height there */
@media (min-width: 721px) { .well.wellbox, .well.wellboxinfo { height: 250px; } }
.info-box, .info-box1, .info-box2 { padding: 12px; }
.tab-color { background: transparent; }

/* ---------- Tabs ---------- */
.nav-tabs {
    background: transparent;          /* backend.css paints tabs #c8d3db */
    border-bottom: 1px solid var(--m-border);
    gap: 4px;
    margin-bottom: 20px;
}
.nav-tabs > li > a,
.nav-tabs .nav-link {
    color: var(--m-muted);
    font-weight: 500;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    padding: 10px 14px;
    margin-bottom: -1px;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover { color: var(--m-text); border-bottom-color: var(--m-border-strong) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a.active,
.nav-tabs .nav-link.active {
    color: var(--m-primary) !important;
    border-bottom-color: var(--m-primary) !important;
    background: transparent !important;
}
.nav-pills > li > a, .nav-pills .nav-link { border-radius: var(--m-radius-sm); }

/* ---------- Buttons ---------- */
.btn {
    font-weight: 500;
    border-radius: var(--m-radius-sm);
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.btn-xs, .btn-group-xs > .btn { --bs-btn-border-radius: 6px; --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .45rem; }
.btn-sm { --bs-btn-border-radius: 6px; }
.btn-primary {
    --bs-btn-bg: #2563EB; --bs-btn-border-color: #2563EB;
    --bs-btn-hover-bg: #1D4ED8; --bs-btn-hover-border-color: #1D4ED8;
    --bs-btn-active-bg: #1E40AF; --bs-btn-active-border-color: #1E40AF;
    --bs-btn-disabled-bg: #2563EB; --bs-btn-disabled-border-color: #2563EB;
}
.btn-success {
    --bs-btn-bg: #16A34A; --bs-btn-border-color: #16A34A;
    --bs-btn-hover-bg: #15803D; --bs-btn-hover-border-color: #15803D;
    --bs-btn-active-bg: #166534; --bs-btn-active-border-color: #166534;
    --bs-btn-disabled-bg: #16A34A; --bs-btn-disabled-border-color: #16A34A;
}
.btn-danger {
    --bs-btn-bg: #DC2626; --bs-btn-border-color: #DC2626;
    --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-border-color: #B91C1C;
    --bs-btn-active-bg: #991B1B; --bs-btn-active-border-color: #991B1B;
    --bs-btn-disabled-bg: #DC2626; --bs-btn-disabled-border-color: #DC2626;
}
.btn-warning {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #F59E0B; --bs-btn-border-color: #F59E0B;
    --bs-btn-hover-bg: #D97706; --bs-btn-hover-border-color: #D97706;
    --bs-btn-active-bg: #B45309; --bs-btn-active-border-color: #B45309;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #F59E0B; --bs-btn-disabled-border-color: #F59E0B;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #131313; --bs-btn-border-color: #0EA5E9;
    --bs-btn-hover-bg: #0284C7; --bs-btn-hover-border-color: #0284C7;
    --bs-btn-active-bg: #0369A1; --bs-btn-active-border-color: #0369A1;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0EA5E9; --bs-btn-disabled-border-color: #0EA5E9;
}
.btn-outline-secondary {
    --bs-btn-color: var(--m-text-2); --bs-btn-border-color: var(--m-border-strong); --bs-btn-bg: var(--m-surface);
    --bs-btn-hover-color: var(--m-text); --bs-btn-hover-bg: var(--m-hover); --bs-btn-hover-border-color: var(--m-border-strong);
    --bs-btn-active-color: var(--m-text); --bs-btn-active-bg: var(--m-border); --bs-btn-active-border-color: var(--m-border-strong);
}

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
    border-color: var(--m-border-strong);
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
}
.form-control, .form-select { background-color: var(--m-surface); box-shadow: var(--m-shadow-sm); }
.form-control:focus, .form-select:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.form-control::placeholder { color: var(--m-placeholder); }
.form-control:disabled, .form-control[readonly] { background-color: var(--m-surface-2); }
.input-group-text { background: var(--m-surface-2); color: var(--m-muted); }
label, .form-label { color: var(--m-text-2); font-weight: 500; }
.form-group + .form-group { border-top-color: var(--m-border); }   /* backend.css: #ededed */
.form-check-input:checked { background-color: var(--m-primary); border-color: var(--m-primary); }

/* bootstrap-select button looks like an input */
.bootstrap-select > .dropdown-toggle.btn-light,
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-light {
    background: var(--m-surface);
    border: 1px solid var(--m-border-strong);
    color: var(--m-text);
    box-shadow: var(--m-shadow-sm);
    font-weight: 400;
}
.bootstrap-select > .dropdown-toggle.btn-light:hover { background: var(--m-surface-2); }
.bootstrap-select.show > .dropdown-toggle.btn-light,
.bootstrap-select > .dropdown-toggle.btn-light:focus { border-color: var(--m-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); outline: 0 !important; }
.bootstrap-select .dropdown-menu li a.active,
.bootstrap-select .dropdown-menu li a:active,
.bootstrap-select .dropdown-menu .dropdown-item.active { background: var(--m-primary-soft); color: var(--m-primary); }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border: 1px solid var(--m-border);
    border-radius: 10px;
    box-shadow: var(--m-shadow-lg);
    padding: 6px;
}
.dropdown-menu > li > a, .dropdown-item { border-radius: 6px; padding: 7px 10px; color: var(--m-text-2); }
.dropdown-menu > li > a:hover, .dropdown-item:hover, .dropdown-item:focus { background: var(--m-hover); color: var(--m-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--m-primary); color: #fff; }
/* search lists (customer / item typeahead): as wide as the box, so a long row (name | code | trade register) wraps
   inside the list instead of running out past its edge */
.typeahead.dropdown-menu { max-width: calc(100vw - 32px); overflow-x: hidden; }
.typeahead.dropdown-menu > li > a, .typeahead.dropdown-menu .dropdown-item { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: var(--m-surface);
    --bs-table-striped-bg: var(--m-stripe);
    --bs-table-hover-bg: var(--m-row-hover);
    --bs-table-border-color: var(--m-border);
    color: var(--m-text-2);
    border-color: var(--m-border);
}
.table-bordered > :not(caption) > * > * { border-color: var(--m-border); }
.table > thead > tr > th,
.table > thead > tr > td,
table.dataTable thead th,
.thclass {
    background: var(--m-surface-2) !important;
    color: var(--m-muted) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom-width: 1px;
    vertical-align: middle;
}
.table > tbody > tr > td { vertical-align: middle; }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--m-row-hover); }
.table-responsive, .dataTables_wrapper { border-radius: var(--m-radius-sm); }
table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { color: var(--m-primary); }

/* horizontal row lines only (cleaner than a full grid); backend.css draws 1px #bfb3c3 on every cell */
.table-bordered { border: 0; }
.table.table-bordered > thead > tr > th, .table.table-bordered > thead > tr > td,
.table.table-bordered > tbody > tr > th, .table.table-bordered > tbody > tr > td,
.table.table-bordered > tfoot > tr > th, .table.table-bordered > tfoot > tr > td {
    border: 0;
    border-bottom: 1px solid var(--m-border);
}
/* backend.css paints striped rows itself (odd #fbfbfb, even #dedede) */
.table.table-striped > tbody > tr > td,
.table.table-striped > tbody > tr > th { background-color: transparent; }
table.dataTable tbody td { padding: 7px 10px; }
table.dataTable thead th { padding-top: 9px; padding-bottom: 9px; }
/* old DataTables row colours left in backend.css (pink/grey odd rows, sorted column) */
table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.even,
table.dataTable.stripe tbody tr.odd, table.dataTable.stripe tbody tr.even { background-color: transparent; }
table.dataTable tbody tr > .sorting_1, table.dataTable tbody tr > .sorting_2, table.dataTable tbody tr > .sorting_3,
.table.dataTable.display tbody tr.odd > .sorting_1, .table.dataTable.display tbody tr.even > .sorting_1 { background-color: transparent !important; }
table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * { box-shadow: inset 0 0 0 9999px var(--m-stripe-shade); }
table.dataTable.table-hover > tbody > tr:hover > *, table.dataTable > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .05); }
table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .12); color: var(--m-text); }

/* list pages from the table plugin: table + add button in a card */
.box {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 12px 16px 16px;
    margin-bottom: 20px;
}
.box > br:first-child { display: none; }

/* pages that wrap their DataTable in <div class="table ...">: BS5 .table styles that div's
   grandchildren as table cells (white strips behind search/pagination). Undo that, make it a card. */
div.table {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 12px 16px;
    margin-bottom: 20px;
    color: inherit;
}
div.table > :not(caption) > * > :not(.dt-button) {
    background-color: transparent;
    box-shadow: none;
    border-bottom-width: 0;
    padding: 0;
}
div.table > .dataTables_wrapper > .row { padding-block: 4px; }

/* DataTables controls */
.dataTables_wrapper .dataTables_length select { width: auto; min-width: 72px; padding-inline-end: 2rem; }
.dataTables_wrapper .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--m-border-strong);
    border-radius: var(--m-radius-sm);
    padding: 5px 10px;
    box-shadow: var(--m-shadow-sm);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--m-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); outline: 0; }
.dataTables_wrapper .dataTables_info { color: var(--m-muted); }
.pagination { --bs-pagination-border-radius: var(--m-radius-sm); --bs-pagination-color: var(--m-text-2); --bs-pagination-border-color: var(--m-border); --bs-pagination-hover-bg: var(--m-hover); --bs-pagination-hover-color: var(--m-text); --bs-pagination-active-bg: var(--m-primary); --bs-pagination-active-border-color: var(--m-primary); --bs-pagination-bg: var(--m-surface); --bs-pagination-disabled-bg: var(--m-surface); --bs-pagination-disabled-color: var(--m-placeholder); --bs-pagination-disabled-border-color: var(--m-border); gap: 4px; }
.pagination .page-link, .pagination > li > a, .pagination > li > span { border-radius: var(--m-radius-sm) !important; margin-inline-start: 0 !important; }
div.dataTables_processing, div.dataTables_processing.card { border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); }

/* DataTables export buttons (CSV / Excel / PDF / Copy / Print / Columns) */
div.dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; float: none; }
button.dt-button, div.dt-button, a.dt-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;                          /* backend.css: width 110px */
    height: 32px;
    margin: 0;                            /* backend.css: margin-bottom 20px */
    padding: 0 12px;
    font: 500 13px/1 var(--m-font);
    color: var(--m-text-2);               /* backend.css: #cb2c2c on #acdddd */
    background: var(--m-surface);
    border: 1px solid var(--m-border-strong);
    border-radius: var(--m-radius-sm);
    box-shadow: var(--m-shadow-sm);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled) {
    background: var(--m-hover);
    border-color: var(--m-border-strong);
    color: var(--m-text);
}
button.dt-button:focus-visible, a.dt-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.dt-button > span { display: inline-flex; align-items: center; gap: 6px; }
.dt-button .fa { font-size: 15px !important; }
.dt-button.buttons-csv .fa   { color: #0891B2 !important; }
.dt-button.buttons-excel .fa { color: #16A34A !important; }
.dt-button.buttons-pdf .fa   { color: #DC2626 !important; }
.dt-button.buttons-print .fa { color: var(--m-muted) !important; }

/* ---------- Dashboard tiles ---------- */
.tile {
    background: var(--m-surface);
    color: var(--m-text-2);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}
.tile a:not(.btn) { color: var(--m-primary); }
.tile a.btn { color: var(--bs-btn-color); }
.tile-heading {
    background: var(--m-surface);
    color: var(--m-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .03em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m-border);
}
.tile-body, .tile .tile-body i, .tile:hover .tile-body i { color: var(--m-text); }
.tile-footer { background: var(--m-surface-2); color: var(--m-muted); border-top: 1px solid var(--m-border); }
.tile .table { margin-bottom: 0; }
/* dashboard.php has its own <style> (arial, dark even rows) for these plain tables */
.tile table { font-family: var(--m-font); font-variant-numeric: tabular-nums; }
.tile table td, .tile table th { border: 0; border-bottom: 1px solid var(--m-border); padding: 9px 12px; color: var(--m-text-2); }
.tile table tr:nth-child(even) { background-color: var(--m-stripe); }
.tile table tr:first-child th { background: var(--m-surface-2); color: var(--m-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tile table tr:hover > td { background-color: var(--m-row-hover); }
.tile table tr:last-child td { font-weight: 600; color: var(--m-text); border-bottom: 0; }

/* ---------- Modals ---------- */
.modal-content {
    border: 0;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: var(--m-surface);
    color: var(--m-text);
    border-bottom: 1px solid var(--m-border);
    padding: 16px 20px;
}
.modal-title { font-weight: 600; font-size: 1.1rem; color: var(--m-text); }
.modal-body { padding: 18px 20px; }
.modal-footer {
    background: var(--m-surface-2);
    border-top: 1px solid var(--m-border);
    border-bottom: 0;
    padding: 12px 20px;
}
.modal-backdrop.show { opacity: .45; }
.modal-backdrop { background-color: var(--m-backdrop); }

/* ---------- Badges, alerts ---------- */
.badge { font-weight: 600; border-radius: 6px; }
.badge.rounded-pill { border-radius: 999px; }
.alert { border-radius: var(--m-radius-sm); border-width: 1px; }
.nice-message { border-radius: var(--m-radius-sm); }

/* ---------- Date pickers ---------- */
.datepicker.dropdown-menu, .ui-datepicker {
    border: 1px solid var(--m-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--m-shadow-lg);
    font-family: var(--m-font);
}
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td.selected { background: var(--m-primary) !important; background-image: none !important; color: #fff !important; border-radius: 6px; }
.datepicker table tr td.today { background: var(--m-primary-soft) !important; background-image: none !important; color: var(--m-primary) !important; }
.datepicker table tr td, .datepicker table tr th { border-radius: 6px; }

/* ---------- Login page ---------- */
.title-box {
    height: auto;
    width: 380px;
    padding: 28px 24px 24px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    box-shadow: var(--m-shadow-lg);
}
.login { width: 100%; margin: 0; }
.login h4 { color: var(--m-text); font-size: 1.35rem; font-weight: 700; margin-bottom: 20px; }
.login .form-control { background: var(--m-surface); height: 42px; margin-bottom: 12px; }
.login .btn { background: var(--m-primary); border-color: var(--m-primary); height: 42px; font-weight: 600; margin-top: 4px; }
.login .btn:hover { background: var(--m-primary-hover); border-color: var(--m-primary-hover); }

/* ---------- Misc ---------- */
.footer { color: var(--m-muted); }
#loader { background-color: var(--m-overlay); }

/* Export buttons of the lists (Excel / PDF / e-mail): coloured, with icon and name, side by side
   (account/customer_statement.php; .ama-exp-bar holds them) */
.ama-exp-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; width: 100%; }
.ama-exp-bar form { margin: 0; }
.btn.ama-exp { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 7px 16px 7px 12px; font-weight: 600; font-size: .95rem;
  color: #fff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .08s ease, filter .15s ease; text-decoration: none; }
.btn.ama-exp i { font-size: 1.25rem; }
.btn.ama-exp:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ama-exp:active { transform: translateY(0); }
.btn.ama-exp-xls { background: linear-gradient(135deg, #22a565, #107c41); }
.btn.ama-exp-pdf { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.btn.ama-exp-mail { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }