/*
 * App theme — loaded after AdminLTE by layout/main.blade.php.
 * Restyles AdminLTE classes so every screen gets the same look without editing each view.
 * Brand blue = the "Ventes" series colour validated for the charts (#2a78d6).
 */
:root {
    --brand: #2a78d6;
    --brand-dark: #1d5fae;
    --brand-soft: #e9f1fc;
    --ink: #1f2328;
    --ink-2: #52514e;
    --ink-3: #898781;
    --line: rgba(11, 11, 11, .09);
    --line-strong: rgba(11, 11, 11, .16);
    --page: #f5f6f8;
    --surface: #ffffff;
    --radius: .5rem;
    --success-ink: #0f7a3d;
    --danger-ink: #b42318;
}

body { color: var(--ink); background: var(--page); }
.content-wrapper { background: var(--page); }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1, .h1 { font-size: 1.5rem; font-weight: 600; }
.content-header h1 { font-size: 1.5rem; }

/* ------------------------------------------------------------ navbar */
.main-header.navbar { border-bottom: 1px solid var(--line); box-shadow: none; }
.navbar-shop { color: var(--ink-2); font-weight: 600; padding: .25rem .75rem; border-radius: 999px; background: var(--page); font-size: .9rem; }
.sms-counter { color: var(--success-ink) !important; font-size: .9rem; }
.sms-counter.is-warning { color: #9a6700 !important; }
.sms-counter.is-low { color: var(--danger-ink) !important; font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: .4rem; }
.user-avatar { height: 26px; width: 26px; border-radius: 50%; object-fit: cover; }
.blinking { animation: blinking 1s infinite; }
@keyframes blinking { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .blinking { animation: none; } }

/* ------------------------------------------------------------ sidebar */
.main-sidebar { background: #1b2430; }
.brand-link { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; display: flex; align-items: center; }
.brand-link .brand-image { width: 34px; height: 34px; object-fit: cover; background: #fff; margin-left: .3rem; opacity: 1; }
.nav-sidebar .nav-header { font-size: .68rem; letter-spacing: .08em; color: #8b97a7; padding: 1rem 1rem .35rem; font-weight: 600; }
.nav-sidebar .nav-link { border-radius: .4rem; color: #cfd6df !important; }
.nav-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link { background: var(--brand); color: #fff !important; box-shadow: none; }
.nav-treeview > .nav-item > .nav-link.active { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.nav-treeview .nav-icon { font-size: .7rem !important; }

/* ------------------------------------------------------------ cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); margin-bottom: 1rem; }
.card-header { background: var(--surface); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.card-header::after { display: none; }
.card-header > .card-title { margin-right: auto; font-weight: 600; font-size: 1.05rem; color: var(--ink); float: none; }
.card-header > .float-right { float: none !important; margin: 0 !important; }
.card-header .card-tools { margin-left: auto; float: none; }
/* Coloured card headers become white with an accent line (readable, consistent). */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header {
    background: var(--surface); color: var(--ink); border-top: 3px solid var(--brand); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.card-success:not(.card-outline) > .card-header { border-top-color: var(--success-ink); }
.card-primary:not(.card-outline) > .card-header .btn-tool,
.card-info:not(.card-outline) > .card-header .btn-tool { color: var(--ink-3); }
.card-primary:not(.card-outline) > .card-header a:not(.btn) { color: var(--brand); }
.card-body { padding: 1rem; }

/* Old "card-boy" boxes of the point of sale */
.card-boy, .card-body[style*="3px solid green"] { border: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--surface); }

/* ------------------------------------------------------------ buttons */
.btn { border-radius: .4rem; font-weight: 500; }
.btn.rounded-pill { border-radius: .4rem !important; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }
.btn-default { background: #fff; border-color: var(--line-strong); }

/* Totals shown as outlined buttons above the lists -> neutral "stat chips" (still links: they reset the filters) */
.card-body > a.btn-outline-success.mb-2 {
    background: var(--page); color: var(--ink); border: 1px solid var(--line); font-weight: 600;
    margin-right: .35rem; padding: .4rem .75rem;
}
.card-body > a.btn-outline-success.mb-2:hover { background: var(--brand-soft); color: var(--ink); border-color: var(--brand); }

/* Point-of-sale inputs/buttons were 30px / 25px fonts (custom.css): keep them large but calmer. */
.form-control.nom_produit, .form-control.quantite, .form-control.prix, .form-control.montant,
.form-control.restant, .form-control.total { height: 46px; font-size: 1.25rem; font-weight: 600; }
.form-control.code_barre { height: 42px; font-size: 1.1rem; font-weight: 600; }
.btn.btnNew { height: auto; font-size: 1rem; font-weight: 600; padding: .55rem 1.1rem; }

/* ------------------------------------------------------------ forms */
.form-control, .custom-select { border-color: var(--line-strong); border-radius: .4rem; }
.form-control:focus, .custom-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .18rem rgba(42, 120, 214, .18); }
label:not(.form-check-label):not(.custom-control-label) { font-weight: 600; font-size: .88rem; color: var(--ink-2); }
form.form-control { height: auto; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.text-danger { color: var(--danger-ink) !important; }
.is-invalid { border-color: var(--danger-ink) !important; }

/* ------------------------------------------------------------ tables */
.table { color: var(--ink); }
.table thead th { border-bottom: 1px solid var(--line-strong); border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); font-weight: 600; background: #fafaf8; white-space: nowrap; }
.table td, .table th { border-top: 1px solid var(--line); vertical-align: middle; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfc; }
.table-hover tbody tr:hover { background-color: var(--brand-soft); }
.table td .fas, .table td .fa { font-size: .95rem; }
.table td a + a { margin-left: .15rem; }
div.dataTables_wrapper div.dataTables_filter input { border-radius: .4rem; }
.dt-buttons .btn { background: #fff; color: var(--ink-2); border-color: var(--line-strong); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }

/* ------------------------------------------------------------ modals & alerts */
.modal-content { border: 0; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(16, 24, 40, .18); }
.modal-head, .modal-header.bg-primary, .modal-header.bg-info { background: #1f2937 !important; color: #fff; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.modal-header .close { opacity: .8; }
.app-alert { border: 0; border-left: 4px solid; border-radius: var(--radius); }
.alert-success.app-alert { background: #e8f6ee; color: #0b4f2a; border-left-color: var(--success-ink); }
.alert-danger.app-alert { background: #fdecea; color: #7a1a12; border-left-color: var(--danger-ink); }
.alert-info.app-alert { background: var(--brand-soft); color: #123d70; border-left-color: var(--brand); }
.app-alert .icon { margin-right: .4rem; }

/* ------------------------------------------------------------ dashboard boxes */
.small-box, .info-box { border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.info-box { border: 1px solid var(--line); }

/* ------------------------------------------------------------ footer & small screens */
.main-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-3); }
@media (max-width: 767.98px) {
    .container-fluid { padding-left: 12px; padding-right: 12px; }
    .card-header > .card-title { width: 100%; }
    .card-header .btn { flex: 1 1 auto; }
    h1, .h1 { font-size: 1.25rem; }
}

/* Lists: the hidden advanced-search block left a large empty gap above the totals. */
.card > .card-body.mt-5, .card > .card-body.mt-1 { margin-top: 0 !important; }
.card > #form.mb-5, .card > #form.mb-1 { margin-bottom: 0 !important; }
.card > #form:not(.d-none) { padding: 1rem 1rem 0; }