:root {
    --q-primary: #0f766e;
    --q-primary-dark: #115e59;
    --q-primary-soft: #ccfbf1;
    --q-bg: #f4f6f8;
    --q-surface: #ffffff;
    --q-text: #1f2937;
    --q-muted: #6b7280;
    --q-border: #e5e7eb;
    --q-danger: #b91c1c;
    --q-sidebar: #0b3b38;
    --bs-primary: #0f766e;
    --bs-primary-rgb: 15, 118, 110;
    --bs-link-color: #0f766e;
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #115e59;
    --bs-link-hover-color-rgb: 17, 94, 89;
    --bs-body-font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

body {
    background: var(--q-bg);
    color: var(--q-text);
    font-family: var(--bs-body-font-family);
}

a { text-decoration: none; }

.btn-primary {
    --bs-btn-bg: var(--q-primary);
    --bs-btn-border-color: var(--q-primary);
    --bs-btn-hover-bg: var(--q-primary-dark);
    --bs-btn-hover-border-color: var(--q-primary-dark);
    --bs-btn-active-bg: var(--q-primary-dark);
    --bs-btn-active-border-color: var(--q-primary-dark);
    --bs-btn-disabled-bg: var(--q-primary);
    --bs-btn-disabled-border-color: var(--q-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--q-primary);
    --bs-btn-border-color: var(--q-primary);
    --bs-btn-hover-bg: var(--q-primary);
    --bs-btn-hover-border-color: var(--q-primary);
    --bs-btn-active-bg: var(--q-primary);
    --bs-btn-active-border-color: var(--q-primary);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .2);
}

.form-check-input:checked { background-color: var(--q-primary); border-color: var(--q-primary); }

.nav-pills .nav-link.active { background: var(--q-primary); }
.nav-pills .nav-link { color: var(--q-text); }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--q-sidebar);
    color: #d1fae5;
    padding: 1rem .75rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; }
.brand-name { font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.brand-sub { font-size: .75rem; opacity: .7; }
.sidebar .brand-name { color: #fff; }

.sidebar .nav-link {
    color: #ccfbf1;
    border-radius: .5rem;
    padding: .5rem .75rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    font-size: .95rem;
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active { background: rgba(94, 234, 212, .18); color: #fff; font-weight: 700; }
.sidebar .nav-cta { background: #14b8a6; color: #04201e !important; font-weight: 700; margin: .4rem 0; }
.sidebar .nav-cta:hover { background: #2dd4bf; }
.nav-section { font-size: .75rem; color: #5eead4; opacity: .8; padding: 1rem .75rem .35rem; }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--q-surface);
    border-bottom: 1px solid var(--q-border);
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.content { padding: 1.25rem; flex: 1; }

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1050;
        transform: translateX(100%);
        transition: transform .2s ease;
    }
    .sidebar.open { transform: none; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1040; }
    .content { padding: 1rem; }
}

/* ---------- Building blocks ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }

.card { border: 1px solid var(--q-border); border-radius: .75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.card-header { background: transparent; font-weight: 700; border-bottom-color: var(--q-border); }
.table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }
.table thead th { color: var(--q-muted); font-weight: 600; font-size: .85rem; white-space: nowrap; }
tr[role=button] { cursor: pointer; }

.stat {
    display: block;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: .75rem;
    padding: 1rem 1.1rem;
    height: 100%;
    color: inherit;
}
.stat-label { color: var(--q-muted); font-size: .85rem; }
.stat-value { font-size: 1.5rem; font-weight: 800; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--q-muted); font-size: .8rem; }
.stat-link:hover { border-color: var(--q-primary); }
.stat-danger { border-color: #fecaca; background: #fef2f2; }
.stat-danger .stat-value { color: var(--q-danger); }
.stat-good { border-color: #99f6e4; background: #f0fdfa; }
.stat-good .stat-value { color: var(--q-primary-dark); }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar { width: 100%; background: linear-gradient(180deg, #2dd4bf, var(--q-primary)); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-label { font-size: .7rem; color: var(--q-muted); margin-top: 4px; }

.search-results { position: absolute; left: 1rem; right: 1rem; z-index: 20; max-height: 340px; overflow-y: auto; }

.totals { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: center; margin-bottom: 1rem; }
.totals dt { font-weight: 500; color: var(--q-muted); margin: 0; }
.totals dd { margin: 0; text-align: left; font-variant-numeric: tabular-nums; }
.totals dd input { max-width: 140px; }
.totals .grand { font-size: 1.35rem; font-weight: 800; color: var(--q-text); border-top: 1px solid var(--q-border); padding-top: .4rem; }

.schedule-list { max-height: 160px; overflow-y: auto; background: #f9fafb; border-radius: .5rem; padding: .5rem .75rem; }

.wa-preview {
    white-space: pre-line;
    background: #dcf8c6;
    border-radius: .75rem .75rem .75rem 0;
    padding: .75rem 1rem;
    max-width: 420px;
    font-size: .95rem;
}

.pay-box { background: var(--q-primary-soft); border-radius: .75rem; padding: .9rem 1rem; }

.modal { background: transparent; }

/* ---------- Auth ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 50%), var(--q-bg);
}
.auth-card {
    width: 100%;
    max-width: 520px;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(15, 118, 110, .08);
}
.auth-brand { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; color: var(--q-text); }

/* ---------- Landing ---------- */
.landing { background: var(--q-surface); }
.landing-nav { border-bottom: 1px solid var(--q-border); }
.hero { padding: 4rem 0; background: linear-gradient(180deg, #f0fdfa, #fff); }
.hero-badge { background: var(--q-primary-soft); color: var(--q-primary-dark); font-weight: 700; }
.hero-card { background: #fff; border: 1px solid var(--q-border); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 20px 40px rgba(15, 118, 110, .12); }
.hero-row { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px dashed var(--q-border); }
.hero-total { display: flex; justify-content: space-between; padding-top: .9rem; font-size: 1.1rem; }
.feature { padding: 1.5rem; border: 1px solid var(--q-border); border-radius: 1rem; height: 100%; }
.feature i { font-size: 1.8rem; color: var(--q-primary); display: inline-block; margin-bottom: .5rem; }
.pricing { background: var(--q-bg); }
.price-card { background: #fff; border: 2px solid var(--q-border); border-radius: 1rem; padding: 1.5rem; height: 100%; }
.price-card.featured { border-color: var(--q-primary); box-shadow: 0 10px 30px rgba(15, 118, 110, .12); }
.price-card .price { margin: .5rem 0; color: var(--q-muted); }
.price-card .price span { font-size: 2rem; font-weight: 800; color: var(--q-text); }

/* ---------- Print ---------- */
.print-only { display: none; }

@media print {
    .sidebar, .topbar, .no-print, .btn, .alert { display: none !important; }
    .print-only { display: block; }
    .content { padding: 0; }
    body { background: #fff; }
    .card { border: none; box-shadow: none; }
    .table-danger > td { background: none !important; }
}

/* ---------- Print pages: thermal receipt & barcode labels ---------- */
.print-shell { background: #fff; min-height: 100vh; padding: 16px; color: #000; }
.receipt-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.receipt { margin: 0 auto; font-family: "Cairo", Tahoma, sans-serif; line-height: 1.45; color: #000; background: #fff; }
.receipt .r-center { text-align: center; }
.receipt .r-shop { font-size: 1.35em; font-weight: 800; }
.receipt .r-title { font-weight: 700; margin-top: 4px; font-size: 1.1em; }
.receipt .r-line { border-top: 1px dashed #000; margin: 6px 0; }
.receipt .r-row { display: flex; justify-content: space-between; gap: 8px; }
.receipt .r-total { font-size: 1.25em; font-weight: 800; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 2px 0; margin: 3px 0; }
.receipt .r-items { width: 100%; border-collapse: collapse; }
.receipt .r-items th { font-weight: 700; border-bottom: 1px solid #000; text-align: start; }
.receipt .r-items th:not(:first-child), .receipt .r-nums td { text-align: end; white-space: nowrap; }
.receipt .r-name { font-weight: 600; padding-top: 3px; }
.receipt .r-barcode { height: 12mm; margin: 4px 8mm; }
.receipt .r-footer { font-size: .9em; margin-top: 4px; }
.barcode-svg { width: 100%; height: 100%; display: block; }

.labels-screen { max-width: 1100px; margin: 0 auto; }
.labels-preview .label { border: 1px dashed #adb5bd; background: #fff; }
.labels-print { display: none; }
.label { box-sizing: border-box; overflow: hidden; padding: 1mm 2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: "Cairo", Tahoma, sans-serif; color: #000; line-height: 1.15; }
.label .l-shop { font-size: .8em; font-weight: 600; }
.label .l-name { font-weight: 700; max-height: 2.35em; overflow: hidden; width: 100%; }
.label .barcode-box { width: 100%; margin: .5mm 0; }
.label .l-code { font-size: .85em; letter-spacing: .5px; }
.label .l-price { font-weight: 800; font-size: 1.15em; }
.label .l-sep { margin: 0 3px; font-weight: 400; }

@media print {
    .print-shell { padding: 0; min-height: 0; }
    .labels-print { display: block; }
    .receipt { margin: 0 4mm; }
}

/* ---------- Company logo ---------- */
.logo-box { width: 180px; height: 110px; border: 1px dashed #ced4da; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 8px; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-logo { max-height: 70px; max-width: 200px; object-fit: contain; display: block; }
.topbar-logo { height: 30px; max-width: 90px; object-fit: contain; }
.receipt .r-logo { max-height: 18mm; max-width: 60%; object-fit: contain; filter: grayscale(1); margin-bottom: 2px; }
.wa-qr { width: 240px; height: 240px; border: 1px solid #dee2e6; border-radius: 12px; background: #fff; padding: 6px; }