/* ============================================================
   FaceDTR monochrome theme — overrides SB Admin 2's palette.
   Neutral zinc grays, no pure #000-on-#fff: soft contrast that
   stays legible. Loaded last, so plain selectors win by order.
   ============================================================ */

/* ---- base ---- */
body { background-color: #f4f4f5; color: #3f3f46; }
a { color: #18181b; }
a:hover { color: #52525b; }
.text-primary { color: #18181b !important; }
.text-warning { color: #d4d4d8 !important; } /* sidebar brand accent */
.text-gray-900 { color: #18181b !important; }
.text-gray-800 { color: #27272a !important; }
.text-gray-600 { color: #52525b !important; }
.text-gray-500 { color: #71717a !important; }
.text-gray-400 { color: #a1a1aa !important; }
.bg-gray-100 { background-color: #fafafa !important; }

/* sidebar + guest background: charcoal gradient instead of purple */
.bg-gradient-primary {
    background-color: #18181b;
    background-image: linear-gradient(180deg, #111113 10%, #2e2e33 100%);
    background-size: cover;
}

/* ---- buttons ---- */
.btn-primary, .btn-primary:disabled {
    background-color: #18181b; border-color: #18181b; color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):active {
    background-color: #3f3f46; border-color: #3f3f46; color: #fff;
}
.btn-outline-primary { color: #18181b; border-color: #3f3f46; }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):active {
    background-color: #18181b; border-color: #18181b; color: #fff;
}
/* Time In: solid ink */
.btn-success, .btn-success:disabled {
    background-color: #111113; border-color: #111113; color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):active {
    background-color: #3f3f46; border-color: #3f3f46; color: #fff;
}
/* Time Out: white with ink border — same weight, opposite fill */
.btn-warning, .btn-warning:disabled {
    background-color: #fff; border: 1px solid #3f3f46; color: #18181b;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:not(:disabled):active {
    background-color: #e4e4e7; border-color: #27272a; color: #111113;
}
.btn-outline-secondary { color: #52525b; border-color: #a1a1aa; }
.btn-outline-secondary:hover { background-color: #52525b; border-color: #52525b; color: #fff; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(24, 24, 27, .18) !important; }

/* ---- badges: IN = solid ink, OUT = outlined ---- */
.badge-success { background-color: #18181b; color: #fff; }
.badge-warning { background-color: #fff; color: #18181b; border: 1px solid #52525b; }
.badge-info { background-color: #52525b; color: #fff; }
.badge-primary { background-color: #3f3f46; color: #fff; }
.badge-danger { background-color: #fff; color: #18181b; border: 2px solid #18181b; }
.badge-secondary { background-color: #e4e4e7; color: #3f3f46; }

/* ---- alerts ---- */
.alert-success {
    background-color: #fafafa; color: #18181b;
    border: 1px solid #d4d4d8; border-left: 4px solid #18181b;
}
.alert-danger {
    background-color: #18181b; color: #fafafa; border: 1px solid #18181b;
}
.alert-info {
    background-color: #f4f4f5; color: #3f3f46;
    border: 1px solid #d4d4d8; border-left: 4px solid #71717a;
}

/* ---- cards / forms ---- */
.card { border-color: #e4e4e7; }
.card-header { background-color: #fafafa; border-bottom-color: #e4e4e7; }

/* ---- Material-style tables: horizontal dividers only, chip badges ---- */
.table { color: #3f3f46; border-collapse: separate; border-spacing: 0; }
.table-bordered { border: 0; }
.table th, .table td,
.table-bordered th, .table-bordered td { border: 0; }
.table thead th,
.thead-light th {
    background-color: transparent !important;
    color: #71717a !important;
    border-bottom: 2px solid #e4e4e7 !important;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap;
}
.table tbody td { border-bottom: 1px solid #ececef; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-top: 2px solid #e4e4e7; }
.table-sm th, .table-sm td { padding: .6rem .75rem; }
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background-color: #f4f4f5; }
/* badges as Material chips */
.badge { border-radius: 999px; padding: .32em .7em; font-weight: 700; letter-spacing: .02em; }
.form-control { color: #27272a; border-color: #d4d4d8; }
.form-control:focus {
    border-color: #71717a; color: #18181b;
    box-shadow: 0 0 0 .2rem rgba(24, 24, 27, .12);
}
hr { border-top-color: #e4e4e7; }
.topbar { border-bottom: 1px solid #e4e4e7; }
.dropdown-item:active { background-color: #27272a; }
.scroll-to-top { background-color: rgba(24, 24, 27, .5); }
.scroll-to-top:hover { background-color: #27272a; }

/* ---- Select2 (searchable dropdowns), matched to form-control-sm + mono ---- */
.select2-container .select2-selection--single {
    height: calc(1.5em + .5rem + 2px); border: 1px solid #d4d4d8; border-radius: .2rem;
    background-color: #fff;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .5rem); padding-left: .5rem; color: #27272a; font-size: .875rem;
}
.select2-container .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .5rem); }
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: #71717a; box-shadow: 0 0 0 .2rem rgba(24, 24, 27, .12);
}
.select2-dropdown { border-color: #d4d4d8; font-size: .875rem; }
.select2-search--dropdown .select2-search__field {
    border: 1px solid #d4d4d8 !important; border-radius: .2rem; padding: .25rem .5rem;
}
.select2-search--dropdown .select2-search__field:focus { outline: none; border-color: #71717a !important; }
.select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #18181b !important; color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-results__option--selected { background-color: #e4e4e7 !important; color: #18181b; }

/* ---- scanner FX in silver/white ---- */
.scanfx .corner { border-color: rgba(255, 255, 255, .8); }
.scanfx .laser {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 30%, #fff 50%, rgba(255,255,255,.9) 70%, transparent);
    box-shadow: 0 0 14px 4px rgba(255, 255, 255, .45);
}
.scanfx .mesh-dot { fill: #fafafa; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.scanfx .mesh-line { stroke: rgba(255, 255, 255, .7); filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55)); }
.video-wrap.scanning .scanfx .corner { border-color: #fff; }
.video-wrap.scanning .overlay .frame {
    border-color: rgba(255, 255, 255, .9);
    animation-name: framePulseMono;
}
@keyframes framePulseMono {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 26px 6px rgba(255, 255, 255, .35); }
}
/* result feedback without color: success = bright flash, failure = dim + shake */
.video-wrap.scan-ok::after { background: rgba(255, 255, 255, .45); }
.video-wrap.scan-err::after { background: rgba(0, 0, 0, .5); }
.video-wrap.scan-err { animation: scanShake .45s ease-in-out; }
@keyframes scanShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}