/*
 * Simple Billing — app theme on top of AdminLTE 3 / Bootstrap 4.
 * Loaded on every page via the BillingTheme plugin in config/adminlte.php.
 *
 * Soft, rounded, minimal: light grey canvas, white surfaces, pill buttons,
 * pastel accents, one dark "ink" colour for primary actions. Printouts do not
 * use this file (resources/views/print/layout.blade.php has its own styles).
 */

:root {
    --ink: #1c1f26;
    --ink-soft: #3a3f4b;
    --muted: #6b7280;
    --faint: #9aa0ab;
    --line: #e9eaee;
    --canvas: #f3f4f6;
    --surface: #ffffff;

    --mint: #d6ebe5;   --mint-ink: #1f6b57;
    --pink: #fbdaea;   --pink-ink: #9b2c5f;
    --butter: #fbe7aa; --butter-ink: #8a5a00;
    --lilac: #e1d7f3;  --lilac-ink: #5b3e96;
    --sky: #d9e6fb;    --sky-ink: #23519b;
    --rose: #fde0dc;   --rose-ink: #b3261e;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
    --shadow-hover: 0 10px 28px rgba(16, 24, 40, .08);
    --ease: cubic-bezier(.2, .8, .2, 1);

    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .card-title, .brand-text { font-family: var(--font-display); letter-spacing: -.02em; }
a { color: var(--sky-ink); }
a:hover { color: var(--ink); }
::selection { background: var(--mint); }

.content-wrapper, body.login-page { background: var(--canvas); }
.content-header { padding: 22px 1.25rem 10px; }
.content-header h1 { font-size: 1.9rem; font-weight: 600; color: var(--ink); }
.content-header h1 > i.fas:first-child { display: none; }   /* page titles stay text-only */
.content { padding: 0 1.25rem 1.5rem; }

/* Gentle entrance for every page */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.content-header, .content > .container-fluid > * { animation: rise .45s var(--ease) both; }
.content > .container-fluid > *:nth-child(2) { animation-delay: .04s; }
.content > .container-fluid > *:nth-child(3) { animation-delay: .08s; }
.content > .container-fluid > *:nth-child(n+4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.main-header { background: transparent; border-bottom: 0 !important; }
.main-header .nav-link { color: var(--ink-soft); border-radius: 999px; transition: background .2s var(--ease); }
.main-header .nav-link:hover { background: #e7e8ec; }
.main-header .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); padding: .4rem; }
.main-header .dropdown-item, .main-header .dropdown-footer { border-radius: 10px; }

/* ── Sidebar: white, airy, dark pill for the current page ─────────────── */
.main-sidebar { background: var(--surface) !important; box-shadow: none !important; border-right: 1px solid var(--line); }
.brand-link { border-bottom: 0 !important; padding: 1.1rem 1rem .9rem; display: flex; align-items: center; }
.brand-link .brand-image { float: none; max-height: 36px; margin: 0 .65rem 0 .35rem; border-radius: 10px; box-shadow: none !important; }
.brand-link .brand-text { color: var(--ink) !important; font-size: 1.25rem; font-weight: 400 !important; }
.brand-link .brand-text b { font-weight: 700; }
.sidebar { padding: 0 .75rem; }
.nav-sidebar .nav-link { width: auto !important; }
.nav-sidebar .nav-item > .nav-link {
    color: var(--ink-soft) !important; border-radius: 999px !important; margin-bottom: 4px; padding: .62rem 1rem;
    font-weight: 500; transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-sidebar .nav-link > .nav-icon { color: var(--faint); transition: color .2s var(--ease); }
.nav-sidebar .nav-item > .nav-link:hover { background: var(--canvas) !important; color: var(--ink) !important; }
.nav-sidebar .nav-item > .nav-link:hover > .nav-icon { color: var(--ink); }
.nav-sidebar .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--ink) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(28, 31, 38, .18);
}
.nav-sidebar .nav-link.active > .nav-icon { color: #fff !important; }
.nav-sidebar .menu-open > .nav-link { background: var(--canvas) !important; color: var(--ink) !important; }
.nav-treeview { padding-left: .35rem; }
.nav-treeview .nav-link { padding: .5rem 1rem !important; font-size: .93rem; }
.nav-sidebar .nav-treeview .nav-link.active { background: var(--mint) !important; color: var(--mint-ink) !important; box-shadow: none !important; }
.nav-sidebar .nav-treeview .nav-link.active > .nav-icon { color: var(--mint-ink) !important; }

/* ── Cards: white, very round, no coloured bars ───────────────────────── */
.card { background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.card.card-outline { border-top: 0 !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 1.1rem 1.4rem; }
.card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-body { padding: 1.3rem 1.4rem; }
.card-footer { background: transparent; border-top: 1px solid var(--line); padding: 1rem 1.4rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card-title { font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.card-title > i:first-child { color: var(--faint); }
.card-title.small { font-family: var(--font-body); font-size: .75rem; letter-spacing: .06em; }

/* ── Buttons: pills; primary is ink ───────────────────────────────────── */
.btn { border-radius: 999px; font-weight: 600; padding: .5rem 1.15rem; border-width: 1px;
       transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.btn:active { transform: scale(.97); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 4px rgba(28, 31, 38, .12) !important; }
.btn-lg { padding: .7rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: .32rem .8rem; font-size: .85rem; }
.btn-xs { border-radius: 999px; padding: .15rem .55rem; }

.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: #000; border-color: #000; box-shadow: 0 8px 20px rgba(28, 31, 38, .22); }
.btn-success { background: #1f8a5b; border-color: #1f8a5b; }
.btn-success:hover { background: #18734b; border-color: #18734b; box-shadow: 0 8px 20px rgba(31, 138, 91, .25); }
.btn-warning { background: var(--butter); border-color: var(--butter); color: var(--butter-ink); }
.btn-warning:hover { background: #f8da7d; border-color: #f8da7d; color: var(--butter-ink); }
.btn-danger { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }
.btn-danger:hover { background: #fbcac3; border-color: #fbcac3; color: var(--rose-ink); }
.btn-info { background: var(--sky); border-color: var(--sky); color: var(--sky-ink); }
.btn-info:hover { background: #c6d9f8; border-color: #c6d9f8; color: var(--sky-ink); }
.btn-secondary, .btn-default, .btn-light { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover, .btn-default:hover, .btn-light:hover { background: var(--canvas); border-color: #dcdee3; color: var(--ink); }
.btn-outline-primary { color: var(--ink); border-color: #cfd2d8; }
.btn-outline-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-outline-success { color: #1f8a5b; border-color: #b6dcc8; }
.btn-outline-success:hover { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.btn-outline-danger { color: var(--rose-ink); border-color: #f3c3bd; }
.btn-outline-danger:hover { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }
.btn-outline-info, .btn-outline-secondary { border-color: var(--line); color: var(--ink-soft); }
.btn-outline-info:hover, .btn-outline-secondary:hover { background: var(--canvas); color: var(--ink); border-color: var(--line); }
.btn-tool { color: var(--muted); }

/* WhatsApp keeps its own, instantly recognisable green */
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; box-shadow: 0 8px 20px rgba(37, 211, 102, .3); }

/* ── Forms: soft, roomy, rounded ──────────────────────────────────────── */
.form-control, .custom-select {
    border-radius: var(--radius-sm); border: 1px solid #e1e3e8; background-color: #fbfbfc;
    height: calc(2.6rem + 2px); padding: .55rem .9rem; color: var(--ink);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
textarea.form-control { height: auto; }
.form-control-sm { height: calc(2.05rem + 2px); border-radius: 10px; padding: .3rem .7rem; }
.form-control:hover { border-color: #cdd0d6; }
.form-control:focus, .custom-select:focus { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(28, 31, 38, .08); }
.form-control::placeholder { color: #b3b8c2; }
.form-group > label { font-weight: 600; color: var(--ink-soft); font-size: .9rem; margin-bottom: .35rem; }
.text-muted { color: var(--muted) !important; }
.form-text.text-muted, small.text-muted { color: var(--faint) !important; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group-text { border-radius: var(--radius-sm); background: var(--canvas); border-color: #e1e3e8; color: var(--muted); }
.input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.custom-switch .custom-control-label::before { border-radius: 999px; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--ink); border-color: var(--ink); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px rgba(28, 31, 38, .1); }
.custom-control-label { cursor: pointer; }

/* Select2, sized and shaped like the inputs — also inside an input-group */
.select2-container--bootstrap4 .select2-selection { border-radius: var(--radius-sm) !important; border-color: #e1e3e8 !important; background: #fbfbfc; }
.select2-container--bootstrap4 .select2-selection--single { height: calc(2.6rem + 2px) !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: 2.6rem; padding-left: .9rem; color: var(--ink); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { top: 0 !important; height: 100% !important; right: 8px; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { top: 50% !important; margin-top: -2px !important; }
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection { border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(28, 31, 38, .08) !important; background: #fff; }
.select2-container--bootstrap4 .select2-dropdown { border-color: var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); overflow: hidden; }
.select2-container--bootstrap4 .select2-results__option { padding: .55rem .9rem; }
.select2-container--bootstrap4 .select2-results__option--highlighted { background: var(--canvas) !important; color: var(--ink) !important; }
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] { background: var(--mint); color: var(--mint-ink); }
.select2-container--bootstrap4 .select2-search__field { border-radius: 10px !important; }
.input-group > .select2-container--bootstrap4 { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-append .btn { white-space: nowrap; }

/* ── Tables: airy rows, quiet header ──────────────────────────────────── */
.table { color: var(--ink); margin-bottom: 0; }
.table thead th, .thead-light th, .thead-dark th {
    background: transparent !important; color: var(--faint) !important; font-weight: 600; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .06em; border-top: 0 !important; border-bottom: 1px solid var(--line) !important;
}
.table td, .table th { border-top: 1px solid #f1f2f4; padding: .85rem 1rem; vertical-align: middle; }
.table-sm td, .table-sm th { padding: .55rem .8rem; }
.table thead th:first-child, .table tbody td:first-child, .table tfoot td:first-child { padding-left: 1.4rem; }
.table thead th:last-child, .table tbody td:last-child, .table tfoot td:last-child { padding-right: 1.4rem; }
.table-bordered, .table-bordered td, .table-bordered th { border-left: 0; border-right: 0; }
.table-hover tbody tr { transition: background .15s var(--ease); }
.table-hover tbody tr:hover { background: #f8f9fa; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table tfoot td, .table tfoot th { border-top: 1px solid var(--line); }
.bg-light { background: #f8f9fa !important; }

/* ── Badges, alerts, callouts: soft pastel pills ──────────────────────── */
.badge { border-radius: 999px; padding: .4em .8em; font-weight: 600; font-size: 75%; letter-spacing: .01em; }
.badge-success { background: var(--mint); color: var(--mint-ink); }
.badge-danger { background: var(--rose); color: var(--rose-ink); }
.badge-warning { background: var(--butter); color: var(--butter-ink); }
.badge-info { background: var(--sky); color: var(--sky-ink); }
.badge-primary { background: var(--lilac); color: var(--lilac-ink); }
.badge-secondary, .badge-light, .badge-dark { background: #eceef1; color: var(--ink-soft); }

.alert { border: 0; border-radius: var(--radius); padding: .9rem 1.2rem; }
.alert-success { background: var(--mint); color: var(--mint-ink); }
.alert-danger { background: var(--rose); color: var(--rose-ink); }
.alert-warning { background: var(--butter); color: var(--butter-ink); }
.alert-info { background: var(--sky); color: var(--sky-ink); }
.alert .close { color: inherit; opacity: .6; text-shadow: none; }
.callout { border-radius: var(--radius); border-left: 0 !important; box-shadow: none; background: var(--surface); padding: .9rem 1.2rem; }
.callout.callout-info { background: var(--sky); color: var(--sky-ink); }
.callout.callout-warning { background: var(--butter); color: var(--butter-ink); }
.callout.callout-success { background: var(--mint); color: var(--mint-ink); }
.callout.callout-danger { background: var(--rose); color: var(--rose-ink); }
.callout a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ── Modals, pagination ───────────────────────────────────────────────── */
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(16, 24, 40, .18); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1.2rem 1.5rem; }
.modal-footer { border-top: 1px solid var(--line); padding: 1rem 1.5rem; }
.modal-body { padding: 1.3rem 1.5rem; }
.modal-title { font-family: var(--font-display); font-weight: 600; }
.modal.fade .modal-dialog { transform: translateY(16px) scale(.98); transition: transform .25s var(--ease); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .35; }

.pagination { gap: 4px; margin: 0; flex-wrap: wrap; }
.page-link { border: 0; border-radius: 999px !important; color: var(--ink-soft); min-width: 36px; text-align: center; }
.page-item.active .page-link { background: var(--ink); color: #fff; }
.page-link:hover { background: var(--canvas); color: var(--ink); }

/* ── "More details" toggles ───────────────────────────────────────────── */
.more-toggle { color: var(--ink-soft); font-weight: 600; padding: .25rem .1rem; text-decoration: none !important; }
.more-toggle:hover { color: var(--ink); }
.more-toggle .fa-chevron-down { transition: transform .25s var(--ease); font-size: .7rem; margin-left: .3rem; }
.more-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

/* ── Pastel tiles with a round ↗ button (dashboard) ───────────────────── */
.welcome { font-size: 2.3rem; font-weight: 600; margin: 0; }
.welcome-sub { color: var(--muted); margin: .2rem 0 0; }
.section-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: .4rem 0 1rem; letter-spacing: -.02em; }

.tile {
    position: relative; display: flex; flex-direction: column;
    border-radius: var(--radius-lg); padding: 1.2rem 1.3rem; margin-bottom: 1.25rem; min-height: 132px;
    color: var(--ink) !important; text-decoration: none !important;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.tile .tile-label { font-weight: 600; font-size: .95rem; opacity: .8; }
.tile .tile-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; margin-top: .45rem; padding-right: 3rem; }
.tile .tile-sub { font-size: .8rem; opacity: .65; margin-top: .25rem; padding-right: 3rem; }
.tile .tile-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .8); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: auto; }
.tile .tile-go {
    position: absolute; right: 1rem; bottom: 1rem; width: 44px; height: 44px; border-radius: 50%; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.tile .tile-go i { transform: rotate(-45deg); }
.tile:hover .tile-go { transform: rotate(45deg); background: var(--ink); color: #fff; }
.tile.action { min-height: 140px; justify-content: space-between; }
.tile.action .tile-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; padding-right: 3rem; margin-top: 1rem; }

.bg-mint { background: var(--mint) !important; }
.bg-pink { background: var(--pink) !important; }
.bg-butter { background: var(--butter) !important; }
.bg-lilac { background: var(--lilac) !important; }
.bg-sky { background: var(--sky) !important; }
.bg-rose { background: var(--rose) !important; }

/* Report / payment summary boxes follow the pastel look */
.small-box { border-radius: var(--radius-lg); box-shadow: none; transition: transform .25s var(--ease); }
.small-box:hover { transform: translateY(-2px); }
.small-box .inner { padding: 1.1rem 1.3rem; }
.small-box .inner h4 { font-family: var(--font-display); font-weight: 600; }
.small-box .icon > i { color: rgba(0, 0, 0, .07); }
.small-box.bg-success { background: var(--mint) !important; color: var(--mint-ink) !important; }
.small-box.bg-primary { background: var(--lilac) !important; color: var(--lilac-ink) !important; }
.small-box.bg-info { background: var(--sky) !important; color: var(--sky-ink) !important; }
.small-box.bg-danger { background: var(--rose) !important; color: var(--rose-ink) !important; }
.small-box.bg-secondary { background: #eceef1 !important; color: var(--ink-soft) !important; }

/* ── Line items: a grid row on desktop, a stacked card on tablets/phones ─ */
.lines-head, .line {
    display: grid;
    grid-template-columns: 26px minmax(200px, 1fr) 84px 84px 116px 112px 120px 38px;
    grid-template-areas: "no item qty unit price tax total remove";
    gap: .6rem;
    align-items: start;
}
.lines.no-tax .lines-head,
.lines.no-tax .line {
    grid-template-columns: 26px minmax(200px, 1fr) 84px 84px 116px 120px 38px;
    grid-template-areas: "no item qty unit price total remove";
}
.lines.no-tax .line-tax, .lines.no-tax .lines-head .h-tax { display: none; }

.lines-head { padding: .7rem 1.4rem; border-bottom: 1px solid var(--line); color: var(--faint); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.line { padding: .85rem 1.4rem; border-bottom: 1px solid #f1f2f4; animation: rise .3s var(--ease) both; }
.line > .line-no { grid-area: no; padding-top: .7rem; color: var(--faint); font-weight: 600; }
.line > .line-item { grid-area: item; min-width: 0; }
.line > .line-qty { grid-area: qty; }
.line > .line-unit { grid-area: unit; }
.line > .line-price { grid-area: price; }
.line > .line-tax { grid-area: tax; }
.line > .line-total { grid-area: total; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding-top: .6rem; }
.line > .line-remove { grid-area: remove; }
.lines-head .h-total { text-align: right; }
.line label.mobile-label { display: none; }
.line .line-detail { resize: none; overflow: hidden; margin-top: .4rem; font-size: .875rem; background: transparent; border-style: dashed; }
.line .line-detail:focus { background: #fff; border-style: solid; }
.line .is-invalid, .line .border-danger { border-color: #dc3545 !important; }
.line-remove .btn { width: 38px; height: 38px; padding: 0; color: #c0c4cc; }
.line-remove .btn:hover { color: var(--rose-ink); background: var(--rose); }

.totals-box th, .totals-box td { padding: .45rem 0 !important; border: 0 !important; vertical-align: middle; }
.totals-box .grand th { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; border-top: 1px solid var(--line) !important; padding-top: .8rem !important; }

/* ── Sticky save bar: frosted pill, total + save always in reach ──────── */
.savebar {
    position: sticky; bottom: 12px; z-index: 1020;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
    padding: .65rem .7rem .65rem 1.4rem; border-radius: 999px; margin-top: .5rem;
}
.savebar .savebar-total { margin-right: auto; line-height: 1.15; }
.savebar .savebar-total small { display: block; color: var(--faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.savebar .savebar-total strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; }

/* ── Login ────────────────────────────────────────────────────────────── */
.login-box { width: 400px; max-width: calc(100% - 2rem); }
.login-box .card-header { border-bottom: 0; text-align: left; padding: 1.8rem 1.8rem 0; }
.login-box .card-header .login-box-msg, .login-box .card-header h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; text-align: left; padding: 0; margin: 0; }
.login-box .card-footer { border-top: 0; padding: 0 1.8rem 1.6rem; }
.login-box .card, .register-box .card { border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(16, 24, 40, .08); }
.login-logo a, .register-logo a { font-family: var(--font-display); color: var(--ink); }
.login-card-body { border-radius: var(--radius-lg); padding: 1.8rem; }
.login-box .input-group-text { background: transparent; }

/* ── Tablets & phones: each line becomes a stacked card ──────────────── */
@media (max-width: 991.98px) {
    .lines-head { display: none; }
    .line,
    .lines.no-tax .line {
        grid-template-columns: 1fr 1fr 1fr 38px;
        grid-template-areas:
            "item  item  item  remove"
            "qty   unit  price price"
            "tax   tax   total total";
        padding: 1rem;
        margin: .7rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
    }
    .lines.no-tax .line { grid-template-areas: "item item item remove" "qty unit price price" "total total total total"; }
    .line > .line-no { display: none; }
    .line label.mobile-label { display: block; font-size: .7rem; color: var(--faint); margin-bottom: .15rem; text-transform: uppercase; font-weight: 600; letter-spacing: .05em; }
    .line > .line-total { padding-top: 0; font-size: 1.2rem; }
    .line > .line-total label.mobile-label { text-align: right; }
}

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .content-header { padding: 16px 1rem 6px; }
    .content { padding: 0 .5rem 1rem; }
    .content-header h1 { font-size: 1.45rem; }
    .content-header .btn { margin-bottom: .35rem; }
    .welcome { font-size: 1.6rem; }
    .card { border-radius: var(--radius); }
    .card-body, .card-header, .card-footer { padding-left: 1rem; padding-right: 1rem; }

    /* iOS zooms into inputs smaller than 16px */
    .form-control, .custom-select, .select2-container--bootstrap4 .select2-selection { font-size: 16px; }

    .tile { min-height: 112px; padding: 1rem; }
    .tile .tile-value { font-size: 1.1rem; padding-right: 0; white-space: nowrap; }
    .tile .tile-sub { padding-right: 2.6rem; }
    .tile.action { min-height: 118px; }
    .tile.action .tile-title { font-size: 1.05rem; padding-right: 2.6rem; }
    .tile .tile-icon { width: 40px; height: 40px; font-size: 1rem; }
    .tile .tile-go { width: 36px; height: 36px; right: .75rem; bottom: .75rem; }

    .savebar { bottom: 8px; padding: .5rem .5rem .5rem 1.1rem; flex-wrap: nowrap; }
    .savebar .btn-cancel { display: none; }
    .savebar .savebar-total strong { font-size: 1.2rem; }

    .table td, .table th { white-space: nowrap; }
    .table thead th:first-child, .table tbody td:first-child, .table tfoot td:first-child { padding-left: 1rem; }
    .table thead th:last-child, .table tbody td:last-child, .table tfoot td:last-child { padding-right: 1rem; }
}