/* Salon & Barber Management — staff UI */
:root {
    --ink: #1d1a17;
    --ink-2: #4a443e;
    --muted: #7b736b;
    --paper: #f6f3ee;
    --card: #ffffff;
    --line: #e7e1d8;
    --brand: #1f5f5b;          /* deep teal */
    --brand-2: #2b7a74;
    --brass: #b8893b;          /* warm accent */
    --sidebar: #191715;
    --sidebar-2: #24211e;
    --radius: 12px;
    --bs-primary: #1f5f5b;
    --bs-primary-rgb: 31, 95, 91;
    --bs-link-color: #1f5f5b;
    --bs-link-hover-color: #154441;
    --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
}
body.app { background: var(--paper); font-size: .94rem; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 8px; }

.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: #174a47; --bs-btn-hover-border-color: #174a47; --bs-btn-active-bg: #123b38; --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--brand-2); box-shadow: 0 0 0 .2rem rgba(31, 95, 91, .2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.nav-pills .nav-link.active { background: var(--brand); }
.nav-tabs .nav-link { color: var(--ink-2); }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 252px; background: var(--sidebar) !important; color: #cfc8bf; flex-shrink: 0; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--sidebar); --bs-offcanvas-width: 260px; }
.sidebar-brand { display: flex; align-items: center; gap: .65rem; padding: 1.15rem 1.1rem; border-bottom: 1px solid #2d2925; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brass), #8a6223); color: #fff; font-size: 1.1rem; }
.brand-name { font-family: 'Fraunces', Georgia, serif; color: #fff; font-size: 1.02rem; line-height: 1.15; }
.sidebar-nav { padding: .5rem .6rem 2rem; }
.nav-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #857c72; padding: 1rem .7rem .35rem; }
.sidebar .nav-link { display: flex; align-items: center; gap: .7rem; color: #d8d1c7; padding: .48rem .7rem; border-radius: 8px; font-size: .9rem; }
.sidebar .nav-link i { font-size: 1.02rem; width: 1.2rem; text-align: center; color: #9b9187; }
.sidebar .nav-link:hover { background: var(--sidebar-2); color: #fff; }
.sidebar .nav-link.active { background: rgba(184, 137, 59, .16); color: #fff; box-shadow: inset 3px 0 0 var(--brass); }
.sidebar .nav-link.active i { color: var(--brass); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem; background: rgba(246, 243, 238, .92); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); }
.page-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; margin: 0; }
.content { padding: 1.5rem; flex: 1; }
@media (max-width: 576px) { .content { padding: 1rem; } .topbar { padding: .6rem 1rem; } }
.btn-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.btn-user { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: .25rem .6rem .25rem .3rem; }
.avatar { width: 28px; height: 28px; border-radius: 8px; color: #fff; font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; }
.avatar-lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.1rem; }
.branch-switch { min-width: 170px; }

/* Cards & tables */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(29, 26, 23, .03); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; padding: .85rem 1.1rem; }
.card-header h2, .card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .65rem .8rem; vertical-align: middle; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #faf7f2; }
.card > .table-responsive > .table > thead th:first-child, .card > .table-responsive > .table td:first-child { padding-left: 1.1rem; }

.stat { padding: 1.1rem 1.2rem; }
.stat .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat .value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.stat .delta { font-size: .8rem; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: #eef4f3; color: var(--brand); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filter-bar .form-control, .filter-bar .form-select { max-width: 220px; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.muted { color: var(--muted); }
.small-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kv dt { font-weight: 500; color: var(--muted); font-size: .82rem; }
.kv dd { margin-bottom: .6rem; }

/* Customer picker */
.picker { position: relative; }
.picker-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); max-height: 300px; overflow-y: auto; }
.picker-results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .55rem .8rem; border-bottom: 1px solid #f2eee8; }
.picker-results button:hover, .picker-results button:focus { background: #f4f9f8; outline: none; }
.picker-selected { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; }

/* Queue */
.queue-col { background: #efebe4; border-radius: var(--radius); padding: .75rem; min-height: 300px; }
.queue-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .75rem; margin-bottom: .6rem; }
.queue-ticket { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; color: var(--brass); }
.board { background: var(--sidebar); color: #fff; min-height: 100vh; padding: 2rem; }
.board .ticket { font-family: 'Fraunces', serif; font-size: 2.5rem; color: var(--brass); }
.board .called { animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .board .called { animation: none; } }

/* POS */
.pos-grid { display: grid; grid-template-columns: 1fr 420px; gap: 1rem; align-items: start; }
@media (max-width: 1199px) { .pos-grid { grid-template-columns: 1fr; } }
.pos-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pos-item { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: .7rem; text-align: left; min-height: 82px; transition: border-color .15s, transform .1s; }
.pos-item:hover, .pos-item:focus-visible { border-color: var(--brand-2); }
.pos-item:active { transform: scale(.98); }
.pos-item .name { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.pos-item .meta { font-size: .78rem; color: var(--muted); }
.pos-cart { position: sticky; top: 76px; }
.cart-line { border-bottom: 1px dashed var(--line); padding: .55rem 0; }
.cart-totals dt { font-weight: 400; color: var(--ink-2); }
.cart-totals dd { text-align: right; margin: 0; font-variant-numeric: tabular-nums; }
.cart-total { font-size: 1.5rem; font-weight: 700; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; margin-bottom: .4rem; }

/* Calendar */
.fc { --fc-border-color: var(--line); --fc-today-bg-color: #fbf6ec; --fc-button-bg-color: #fff; --fc-button-text-color: var(--ink); --fc-button-border-color: var(--line); --fc-button-hover-bg-color: #f3efe8; --fc-button-hover-border-color: var(--line); --fc-button-active-bg-color: var(--brand); --fc-button-active-border-color: var(--brand); font-size: .85rem; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc-event { cursor: pointer; border-radius: 6px; padding: 1px 3px; }

/* Receipt */
.receipt { max-width: 380px; margin: 0 auto; background: #fff; padding: 1.5rem; font-size: .88rem; border: 1px solid var(--line); border-radius: 8px; }
.receipt table { width: 100%; }
.receipt .rule { border-top: 1px dashed #aaa; margin: .6rem 0; }
@media print {
    .sidebar, .topbar, .no-print, .toast-container { display: none !important; }
    .content { padding: 0; }
    body.app { background: #fff; }
    .receipt { border: 0; }
}

/* Public booking */
.public { background: var(--paper); min-height: 100vh; }
.public-hero { background: var(--sidebar); color: #fff; padding: 2.2rem 0 4.5rem; }
.public-hero h1 { font-family: 'Fraunces', Georgia, serif; }
.public-card { margin-top: -3rem; }
.step-pill { display: flex; gap: .4rem; flex-wrap: wrap; }
.step-pill span { padding: .3rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .1); font-size: .8rem; color: #d9d2c8; }
.step-pill span.on { background: var(--brass); color: #fff; }
.choice { display: block; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; background: #fff; cursor: pointer; width: 100%; text-align: left; transition: border-color .15s; }
.choice:hover { border-color: var(--brand-2); }
input:checked + .choice, .choice.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31, 95, 91, .25); background: #f4f9f8; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .45rem; }
.slot-grid button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: .5rem 0; font-variant-numeric: tabular-nums; }
.slot-grid button.selected { background: var(--brand); color: #fff; border-color: var(--brand); }

.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: radial-gradient(circle at 30% 20%, #2b2622, #141210); color: #efe8dd; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; }
.auth-art h1 { font-family: 'Fraunces', Georgia, serif; font-size: 2.5rem; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--paper); }
.auth-form .card { width: 100%; max-width: 400px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } }

.perm-table td, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.hours-table input[type=time] { max-width: 120px; }

.picker-selected .btn-link { margin-left: auto; padding: 0 .25rem; }
#mdType { max-width: 84px !important; }