/* ==========================================================================
   PharmaCare design system
   Built for a counter tool: high glanceability, large targets, calm under
   eight hours of use. Bilingual AR/EN — layout uses logical properties so
   RTL mirrors without a second stylesheet.
   ========================================================================== */

:root {
    /* --- Chrome: deep navy rather than black. Under fluorescent store
       lighting pure black vibrates; navy stays calm and lets white pop. --- */
    --pc-ink-900: #0B1622;
    --pc-ink-800: #13212F;
    --pc-ink-700: #1D2E3F;
    --pc-ink-600: #2A3D50;

    /* --- Work surface --- */
    --pc-surface: #EEF2F6;
    --pc-card: #FFFFFF;
    --pc-line: #DCE4EC;
    --pc-line-soft: #EAEFF4;

    /* --- Text --- */
    --pc-text: #16222E;
    --pc-text-soft: #5A6B7B;
    --pc-text-faint: #8695A3;
    --pc-text-invert: #F2F6FA;

    /* --- Primary: clinical teal. Reads medical without the tired
       hospital-green, and stays distinct from Bootstrap's default blue. --- */
    --pc-teal-700: #095C63;
    --pc-teal-600: #0B6E76;
    --pc-teal-500: #0E8A94;
    --pc-teal-050: #E6F2F3;

    /* --- Money green is reserved ONLY for confirming payment. Never used
       decoratively, so a cashier can trust green = the sale completes. --- */
    --pc-money-700: #115C3F;
    --pc-money-600: #15734F;
    --pc-money-500: #1B8A60;
    --pc-money-050: #E7F3ED;

    /* --- Status --- */
    --pc-amber-600: #A55B08;
    --pc-amber-050: #FDF1E1;
    --pc-red-600: #B0271D;
    --pc-red-500: #C8352A;
    --pc-red-050: #FBEBE9;

    /* --- Shape & depth --- */
    --pc-r-sm: 6px;
    --pc-r: 10px;
    --pc-r-lg: 14px;
    --pc-shadow-sm: 0 1px 2px rgba(11, 22, 34, .06), 0 1px 3px rgba(11, 22, 34, .04);
    --pc-shadow: 0 2px 4px rgba(11, 22, 34, .06), 0 8px 20px rgba(11, 22, 34, .06);
    --pc-shadow-lg: 0 12px 40px rgba(11, 22, 34, .18);

    --pc-topbar-h: 58px;
    --pc-sidebar-w: 244px;

    /* --- Bootstrap overrides so stock components inherit the theme --- */
    --bs-primary: var(--pc-teal-600);
    --bs-primary-rgb: 11, 110, 118;
    --bs-body-color: var(--pc-text);
    --bs-body-bg: var(--pc-surface);
    --bs-border-color: var(--pc-line);
    --bs-border-radius: var(--pc-r);
    --bs-border-radius-sm: var(--pc-r-sm);
    --bs-border-radius-lg: var(--pc-r-lg);
    --bs-link-color: var(--pc-teal-600);
    --bs-link-hover-color: var(--pc-teal-700);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
    background-color: var(--pc-surface);
    color: var(--pc-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--pc-text);
}

h2 { font-size: 1.5rem; }
h5 { font-size: 1.0625rem; }

/* Digits must never shift width as a total counts up. */
.pc-num,
.table td,
.table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Barcodes and batch numbers are machine identifiers, not words — monospace
   says so, and makes transcription errors easier to spot. */
.pc-mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .8125em;
    letter-spacing: -0.01em;
}

.pc-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pc-text-faint);
}

:focus-visible {
    outline: 2px solid var(--pc-teal-500);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.pc-shell { min-height: 100vh; display: flex; flex-direction: column; }

.pc-topbar {
    height: var(--pc-topbar-h);
    background: var(--pc-ink-900);
    color: var(--pc-text-invert);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 18px;
    position: sticky;
    top: 0;
    z-index: 1030;
    flex: 0 0 auto;
}

.pc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

.pc-brand:hover { color: #fff; }

.pc-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--pc-teal-500), var(--pc-teal-700));
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.pc-brand-mark svg { width: 17px; height: 17px; color: #fff; }

.pc-topbar-right { display: flex; align-items: center; gap: 14px; }

.pc-user {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: end;
}

.pc-user-name { font-size: .8125rem; font-weight: 500; color: #E6EDF4; }
.pc-user-role { font-size: .6875rem; color: #7E90A2; letter-spacing: .04em; }

.pc-lang {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #E6EDF4;
    border-radius: var(--pc-r-sm);
    padding: 5px 10px;
    font-size: .8125rem;
    cursor: pointer;
}

.pc-lang:hover { background: rgba(255, 255, 255, .14); }

.pc-signout {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #C8D4DF;
    border-radius: var(--pc-r-sm);
    padding: 5px 12px;
    font-size: .8125rem;
}

.pc-signout:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.pc-body { display: flex; flex: 1 1 auto; min-height: 0; }

/* --- Sidebar --- */

.pc-sidebar {
    width: var(--pc-sidebar-w);
    flex: 0 0 var(--pc-sidebar-w);
    background: var(--pc-ink-900);
    padding: 14px 10px 28px;
    overflow-y: auto;
    position: sticky;
    top: var(--pc-topbar-h);
    height: calc(100vh - var(--pc-topbar-h));
    scrollbar-width: thin;
    scrollbar-color: var(--pc-ink-600) transparent;
}

.pc-sidebar::-webkit-scrollbar { width: 8px; }
.pc-sidebar::-webkit-scrollbar-thumb { background: var(--pc-ink-600); border-radius: 4px; }

.pc-nav-group {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #667A8C;
    padding: 16px 12px 6px;
}

.pc-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--pc-r-sm);
    color: #B4C3D1;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 450;
    transition: background .12s ease, color .12s ease;
}

.pc-nav-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: .75;
}

.pc-nav-link:hover { background: var(--pc-ink-700); color: #EAF1F7; }
.pc-nav-link:hover svg { opacity: 1; }

.pc-nav-link.is-active {
    background: var(--pc-teal-600);
    color: #fff;
    font-weight: 500;
}

.pc-nav-link.is-active svg { opacity: 1; }

/* The till is the one destination that should be findable without reading. */
.pc-nav-link.is-till {
    background: rgba(21, 115, 79, .16);
    color: #6FD8A8;
    font-weight: 550;
    margin-block: 2px;
}

.pc-nav-link.is-till:hover { background: rgba(21, 115, 79, .28); color: #8DE8BE; }
.pc-nav-link.is-till.is-active { background: var(--pc-money-600); color: #fff; }

.pc-kbd {
    margin-inline-start: auto;
    font-family: "IBM Plex Mono", monospace;
    font-size: .625rem;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    color: inherit;
    opacity: .7;
}

/* --- Main --- */

.pc-main { flex: 1 1 auto; min-width: 0; padding: 26px 28px 40px; }
.pc-main.is-flush { padding: 0; display: flex; flex-direction: column; min-height: 0; }

.pc-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pc-page-head p { margin: 4px 0 0; color: var(--pc-text-soft); font-size: .875rem; }

/* ==========================================================================
   Components
   ========================================================================== */

.card {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    box-shadow: var(--pc-shadow-sm);
    background: var(--pc-card);
}

.card-stat {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    box-shadow: var(--pc-shadow-sm);
    position: relative;
    overflow: hidden;
}

.card-stat .card-body { padding: 18px 20px; }

.pc-stat-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--pc-text-soft);
    letter-spacing: .01em;
}

.pc-stat-value {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: 2px;
}

.pc-stat-flag { --flag: var(--pc-teal-500); }

.pc-stat-flag::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--flag);
}

.pc-stat-flag.is-warn { --flag: var(--pc-amber-600); }
.pc-stat-flag.is-danger { --flag: var(--pc-red-600); }
.pc-stat-flag.is-money { --flag: var(--pc-money-500); }

.table { --bs-table-border-color: var(--pc-line-soft); margin-bottom: 0; }

.table > thead > tr > th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pc-text-faint);
    border-bottom: 1px solid var(--pc-line);
    padding: 10px 12px;
    background: transparent;
}

.table > tbody > tr > td { padding: 12px; vertical-align: middle; }
.table > tbody > tr:hover > td { background: #F6F9FB; }

.pc-table-card {
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    overflow: hidden;
    box-shadow: var(--pc-shadow-sm);
}

.form-control, .form-select {
    border-color: var(--pc-line);
    border-radius: var(--pc-r-sm);
    padding: 9px 12px;
    font-size: .9375rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--pc-teal-500);
    box-shadow: 0 0 0 3px rgba(14, 138, 148, .16);
}

.form-label { font-size: .8125rem; font-weight: 500; color: var(--pc-text-soft); margin-bottom: 5px; }

.btn {
    border-radius: var(--pc-r-sm);
    font-weight: 500;
    font-size: .9375rem;
    padding: 9px 16px;
}

.btn-primary {
    --bs-btn-bg: var(--pc-teal-600);
    --bs-btn-border-color: var(--pc-teal-600);
    --bs-btn-hover-bg: var(--pc-teal-700);
    --bs-btn-hover-border-color: var(--pc-teal-700);
    --bs-btn-active-bg: var(--pc-teal-700);
    --bs-btn-disabled-bg: var(--pc-teal-600);
    --bs-btn-disabled-border-color: var(--pc-teal-600);
}

.btn-success {
    --bs-btn-bg: var(--pc-money-600);
    --bs-btn-border-color: var(--pc-money-600);
    --bs-btn-hover-bg: var(--pc-money-700);
    --bs-btn-hover-border-color: var(--pc-money-700);
    --bs-btn-active-bg: var(--pc-money-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--pc-teal-600);
    --bs-btn-border-color: var(--pc-line);
    --bs-btn-hover-bg: var(--pc-teal-050);
    --bs-btn-hover-color: var(--pc-teal-700);
    --bs-btn-hover-border-color: var(--pc-teal-500);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pc-text-soft);
    --bs-btn-border-color: var(--pc-line);
    --bs-btn-hover-bg: #F1F5F8;
    --bs-btn-hover-color: var(--pc-text);
    --bs-btn-hover-border-color: var(--pc-text-faint);
}

.badge { font-weight: 500; letter-spacing: .01em; padding: .34em .6em; border-radius: 5px; }

.alert { border: 1px solid transparent; border-radius: var(--pc-r); font-size: .9375rem; }
.alert-success { background: var(--pc-money-050); border-color: #BFDFCF; color: var(--pc-money-700); }
.alert-danger { background: var(--pc-red-050); border-color: #F0C4BF; color: var(--pc-red-600); }
.alert-warning { background: var(--pc-amber-050); border-color: #F0D6AE; color: var(--pc-amber-600); }

/* ==========================================================================
   POS workspace
   Fills the viewport exactly: the cart scrolls internally so the pay button
   is never scrolled off screen mid-sale.
   ========================================================================== */

.pos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--pc-surface);
}

.pos-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-inline-end: 1px solid var(--pc-line);
}

/* --- Scan bar --- */

.pos-scan {
    padding: 16px 20px 14px;
    background: var(--pc-card);
    border-bottom: 1px solid var(--pc-line);
    flex: 0 0 auto;
}

.pos-scan-field { position: relative; display: flex; align-items: center; }

.pos-scan-field > svg {
    position: absolute;
    inset-inline-start: 16px;
    width: 22px;
    height: 22px;
    color: var(--pc-teal-600);
    pointer-events: none;
}

#barcodeInput {
    width: 100%;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 15px 18px;
    padding-inline-start: 50px;
    border: 2px solid var(--pc-line);
    border-radius: var(--pc-r);
    background: #FBFCFD;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: .01em;
}

#barcodeInput::placeholder {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    letter-spacing: 0;
    color: var(--pc-text-faint);
    font-weight: 400;
}

#barcodeInput:focus {
    border-color: var(--pc-teal-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(14, 138, 148, .13);
    outline: none;
}

.pos-scan-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    font-size: .75rem;
    color: var(--pc-text-faint);
    flex-wrap: wrap;
}

.pos-key {
    font-family: "IBM Plex Mono", monospace;
    font-size: .6875rem;
    font-weight: 500;
    padding: 2px 6px;
    border: 1px solid var(--pc-line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fff;
    color: var(--pc-text-soft);
}

/* --- Search --- */

.pos-search { position: relative; padding: 12px 20px; flex: 0 0 auto; }

#searchInput {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    font-size: .9375rem;
    background: var(--pc-card);
}

#searchInput:focus {
    border-color: var(--pc-teal-500);
    box-shadow: 0 0 0 3px rgba(14, 138, 148, .14);
    outline: none;
}

.pos-results {
    position: absolute;
    inset-inline: 20px;
    top: calc(100% - 4px);
    z-index: 40;
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    box-shadow: var(--pc-shadow-lg);
    max-height: 340px;
    overflow-y: auto;
    padding: 5px;
}

.pos-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--pc-r-sm);
    background: transparent;
    text-align: start;
    cursor: pointer;
}

.pos-result:hover, .pos-result.is-cursor { background: var(--pc-teal-050); }
.pos-result-name { font-weight: 500; font-size: .9375rem; }
.pos-result-meta { font-size: .75rem; color: var(--pc-text-faint); margin-top: 1px; }
.pos-result.is-empty-stock { opacity: .5; }

/* --- Cart --- */

.pos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 10px;
    flex: 0 0 auto;
}

.pos-cart {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 20px 20px;
    min-height: 0;
    scrollbar-width: thin;
}

.pos-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: end;
    gap: 12px;
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: var(--pc-shadow-sm);
    animation: pc-line-in .16s ease-out;
}

.pos-line.is-flash { animation: pc-flash .5s ease-out; }

.pos-line-name {
    font-weight: 500;
    font-size: .9375rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-line-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--pc-text-faint);
}

.pos-line-warn { color: var(--pc-amber-600); font-weight: 500; }

/* Micro-labels make each input self-documenting without a header row that
   would have to stay aligned with card padding. */
.pos-line-field { display: flex; flex-direction: column; gap: 3px; }

.pos-line-field > label {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-text-faint);
}

.pos-line-cell { align-self: end; padding-bottom: 7px; }

.pos-line-total {
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 84px;
    text-align: end;
}

.pos-line-total.is-discounted { color: var(--pc-money-600); }

.pos-line-price {
    width: 92px;
    padding: 7px 9px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    text-align: end;
    background: #FBFCFD;
}

.pos-line-price:focus {
    border-color: var(--pc-teal-500);
    box-shadow: 0 0 0 3px rgba(14, 138, 148, .14);
    outline: none;
    background: #fff;
}

/* Steppers instead of a spinner input: reliably hittable with a finger. */
.pos-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    overflow: hidden;
    background: #fff;
}

.pos-qty button {
    width: 34px;
    height: 34px;
    border: 0;
    background: #F4F7FA;
    color: var(--pc-text);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pos-qty button:hover:not(:disabled) { background: var(--pc-teal-050); color: var(--pc-teal-700); }
.pos-qty button:disabled { opacity: .35; cursor: not-allowed; }

.pos-qty input {
    width: 46px;
    height: 34px;
    border: 0;
    border-inline: 1px solid var(--pc-line);
    text-align: center;
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.pos-qty input::-webkit-outer-spin-button,
.pos-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-qty input:focus { outline: none; background: var(--pc-teal-050); }

.pos-line-remove {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--pc-r-sm);
    background: transparent;
    color: var(--pc-text-faint);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.pos-line-remove:hover { background: var(--pc-red-050); color: var(--pc-red-600); }
.pos-line-remove svg { width: 16px; height: 16px; }

/* --- Empty state: an instruction, not a dead end --- */

.pos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--pc-text-faint);
    height: 100%;
}

.pos-empty svg { width: 46px; height: 46px; opacity: .3; margin-bottom: 14px; }
.pos-empty strong { display: block; font-weight: 500; color: var(--pc-text-soft); font-size: .9375rem; }
.pos-empty span { font-size: .8125rem; margin-top: 4px; }

/* --- Pay rail --- */

.pos-pay-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }

.pos-pay {
    background: var(--pc-ink-900);
    color: var(--pc-text-invert);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.pos-pay-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }

.pos-summary { display: flex; flex-direction: column; gap: 7px; }

.pos-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .875rem;
    color: #9DAFC0;
}

.pos-summary-row span:last-child { font-variant-numeric: tabular-nums; color: #D6E1EB; }
.pos-summary-row.is-discount span:last-child { color: #7FD3AC; }

/* --- SIGNATURE: the total. Oversized tabular figures, small raised
   currency mark, brief flash on change so a distracted cashier still
   registers that it moved. --- */

.pos-total {
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 16px 0 18px;
}

.pos-total-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7E90A2;
}

.pos-total-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 5px;
}

.pos-total-currency {
    font-size: .9375rem;
    font-weight: 500;
    color: #7E90A2;
    align-self: flex-start;
    margin-top: 8px;
}

.pos-total-amount {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.pos-total-amount.is-flash { animation: pc-total-flash .45s ease-out; }

.pos-field label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: #9DAFC0;
    margin-bottom: 6px;
}

.pos-field select,
.pos-field input {
    width: 100%;
    background: var(--pc-ink-700);
    border: 1px solid var(--pc-ink-600);
    color: #fff;
    border-radius: var(--pc-r-sm);
    padding: 11px 13px;
    font-size: .9375rem;
}

.pos-field input {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.pos-field select:focus,
.pos-field input:focus {
    outline: none;
    border-color: var(--pc-teal-500);
    box-shadow: 0 0 0 3px rgba(14, 138, 148, .25);
}

/* Quick cash denominations — faster than typing, the way a real till works. */
.pos-cash { display: flex; gap: 6px; flex-wrap: wrap; }

.pos-cash button {
    flex: 1 1 0;
    min-width: 58px;
    padding: 8px 4px;
    border: 1px solid var(--pc-ink-600);
    background: var(--pc-ink-800);
    color: #C8D4DF;
    border-radius: var(--pc-r-sm);
    font-size: .8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.pos-cash button:hover { background: var(--pc-ink-600); color: #fff; }
.pos-cash button.is-exact { color: #7FD3AC; border-color: rgba(127, 211, 172, .3); }

.pos-change {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: var(--pc-r-sm);
    background: rgba(255, 255, 255, .05);
    font-size: .875rem;
    color: #9DAFC0;
}

.pos-change strong { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.pos-change.is-change { background: rgba(27, 138, 96, .18); }
.pos-change.is-change strong { color: #7FD3AC; }
.pos-change.is-credit { background: rgba(165, 91, 8, .18); }
.pos-change.is-credit strong { color: #F0B970; }

.pos-actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }

.pos-btn-pay {
    width: 100%;
    padding: 17px;
    border: 0;
    border-radius: var(--pc-r);
    background: var(--pc-money-600);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .12s ease, transform .06s ease;
}

.pos-btn-pay:hover:not(:disabled) { background: var(--pc-money-500); }
.pos-btn-pay:active:not(:disabled) { transform: translateY(1px); }

.pos-btn-pay:disabled {
    background: var(--pc-ink-700);
    color: #5F7386;
    cursor: not-allowed;
}

.pos-btn-pay .pos-key {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.pos-btn-clear {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--pc-ink-600);
    border-radius: var(--pc-r-sm);
    background: transparent;
    color: #9DAFC0;
    font-size: .875rem;
    cursor: pointer;
}

.pos-btn-clear:hover { background: var(--pc-ink-800); color: #E6EDF4; }

/* --- Post-sale confirmation: replaces the rail so the next action is
   unmistakable, rather than a link buried in an alert. --- */

.pos-done {
    position: absolute;
    inset: 0;
    background: var(--pc-ink-900);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    gap: 18px;
    z-index: 20;
    animation: pc-fade-in .2s ease-out;
}

.pos-done-mark {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--pc-money-600);
    display: grid;
    place-items: center;
    margin-bottom: 2px;
}

.pos-done-mark svg { width: 28px; height: 28px; color: #fff; }
.pos-done h4 { color: #fff; font-size: 1.25rem; margin: 0; }
.pos-done-num { font-family: "IBM Plex Mono", monospace; font-size: .875rem; color: #7FD3AC; margin-top: 4px; }
.pos-done-change { font-size: .9375rem; color: #9DAFC0; }
.pos-done-change strong { display: block; font-size: 2rem; color: #fff; font-variant-numeric: tabular-nums; }

/* --- Inline error toast inside the rail --- */

.pos-alert {
    padding: 11px 13px;
    border-radius: var(--pc-r-sm);
    font-size: .875rem;
    background: rgba(200, 53, 42, .18);
    border: 1px solid rgba(200, 53, 42, .35);
    color: #FFB4AC;
    animation: pc-shake .3s ease-out;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes pc-line-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
}

@keyframes pc-flash {
    0% { background: var(--pc-teal-050); border-color: var(--pc-teal-500); }
    100% { background: var(--pc-card); border-color: var(--pc-line); }
}

@keyframes pc-total-flash {
    0% { color: #7FD3AC; }
    100% { color: #fff; }
}

@keyframes pc-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes pc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .pos { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 900px) {
    :root { --pc-sidebar-w: 66px; }
    .pc-sidebar { padding-inline: 8px; }
    .pc-nav-link { justify-content: center; padding: 11px 0; }
    .pc-nav-link span, .pc-nav-group, .pc-kbd { display: none; }
    .pos { grid-template-columns: 1fr; }
    .pos-pay-wrap { border-top: 1px solid var(--pc-ink-700); }
    .pc-main { padding: 18px; }
}

@media (max-width: 600px) {
    .pc-user { display: none; }
    .pos-line { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
    .pos-line-price { grid-column: 1; width: 100%; }
    .pos-total-amount { font-size: 2.5rem; }
}

/* --- Print: receipts and reports only --- */
@media print {
    .pc-topbar, .pc-sidebar, .pos-pay-wrap, .pos-scan, .pos-search { display: none !important; }
    .pc-main { padding: 0; }
    body { background: #fff; }
}

/* ==========================================================================
   Shared page furniture
   These target the class combinations the existing views already use
   (`table table-striped bg-white`, bare <h2>, `form method="get"` filters),
   so every list and detail page inherits the system without markup churn.
   ========================================================================== */

/* --- Page headings --------------------------------------------------- */

.pc-main > h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.pc-main > h2 + p,
.pc-main > h2 + .text-muted {
    color: var(--pc-text-soft);
    font-size: .875rem;
    margin-top: -6px;
}

/* --- Tables render as cards ------------------------------------------
   The views write `.table.bg-white` with no wrapper, so the table itself
   carries the card treatment. Separate borders + overflow give it corners. */

.pc-main .table.bg-white {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: var(--pc-shadow-sm);
    background: var(--pc-card);
}

.pc-main .table.bg-white > thead > tr > th {
    background: #F7F9FB;
    border-bottom: 1px solid var(--pc-line);
}

.pc-main .table.bg-white > tbody > tr > td {
    border-bottom: 1px solid var(--pc-line-soft);
    border-top: 0;
}

.pc-main .table.bg-white > tbody > tr:last-child > td { border-bottom: 0; }

/* Hairlines read cleaner than zebra striping at this density, so striping
   is neutralised rather than removed from the markup. */
.pc-main .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    color: inherit;
}

/* Numeric columns align right and share one figure width. */
.pc-main .table td.text-end,
.pc-main .table th.text-end { font-variant-numeric: tabular-nums; }

/* --- Contextual rows -------------------------------------------------
   Bootstrap's defaults are fully saturated and turn an alert list into a
   wall of colour. Softened to a tint plus an edge marker so severity is
   still readable at a glance but the text stays legible. */

.pc-main .table > tbody > tr.table-danger > td,
.pc-main .table > tbody > tr.table-warning > td,
.pc-main .table > tbody > tr.table-success > td,
.pc-main .table > tbody > tr.table-info > td {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    color: var(--pc-text);
}

.pc-main .table > tbody > tr.table-danger > td { background: var(--pc-red-050); }
.pc-main .table > tbody > tr.table-warning > td { background: var(--pc-amber-050); }
.pc-main .table > tbody > tr.table-success > td { background: var(--pc-money-050); }
.pc-main .table > tbody > tr.table-info > td { background: var(--pc-teal-050); }

.pc-main .table > tbody > tr.table-danger > td:first-child { box-shadow: inset 3px 0 0 var(--pc-red-600); }
.pc-main .table > tbody > tr.table-warning > td:first-child { box-shadow: inset 3px 0 0 var(--pc-amber-600); }
.pc-main .table > tbody > tr.table-success > td:first-child { box-shadow: inset 3px 0 0 var(--pc-money-500); }
.pc-main .table > tbody > tr.table-info > td:first-child { box-shadow: inset 3px 0 0 var(--pc-teal-500); }

[dir="rtl"] .pc-main .table > tbody > tr.table-danger > td:first-child { box-shadow: inset -3px 0 0 var(--pc-red-600); }
[dir="rtl"] .pc-main .table > tbody > tr.table-warning > td:first-child { box-shadow: inset -3px 0 0 var(--pc-amber-600); }
[dir="rtl"] .pc-main .table > tbody > tr.table-success > td:first-child { box-shadow: inset -3px 0 0 var(--pc-money-500); }
[dir="rtl"] .pc-main .table > tbody > tr.table-info > td:first-child { box-shadow: inset -3px 0 0 var(--pc-teal-500); }

/* --- Empty states ----------------------------------------------------- */

.pc-main .table td.text-muted[colspan] {
    padding-block: 34px;
    color: var(--pc-text-faint) !important;
    font-size: .875rem;
}

/* --- Filter bars ------------------------------------------------------
   Every list page filters with `form method="get"`. Giving that selector a
   surface turns a row of naked inputs into a deliberate toolbar. */

.pc-main form[method="get"] {
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    padding: 12px 14px;
    box-shadow: var(--pc-shadow-sm);
}

.pc-main form[method="get"] .form-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pc-text-faint);
}

/* --- Post forms sit on a card ----------------------------------------
   The create/edit views set an inline max-width on the form element. */

.pc-main form[method="post"][style*="max-width"] {
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    padding: 22px 24px;
    box-shadow: var(--pc-shadow-sm);
}

/* --- Status pills ----------------------------------------------------- */

.badge.bg-secondary { background: #EDF1F5 !important; color: var(--pc-text-soft) !important; }
.badge.bg-success   { background: var(--pc-money-050) !important; color: var(--pc-money-700) !important; }
.badge.bg-danger    { background: var(--pc-red-050) !important; color: var(--pc-red-600) !important; }
.badge.bg-warning   { background: var(--pc-amber-050) !important; color: var(--pc-amber-600) !important; }
.badge.bg-info      { background: var(--pc-teal-050) !important; color: var(--pc-teal-700) !important; }

/* --- Text colour utilities retuned to the palette --------------------- */

.pc-main .text-danger  { color: var(--pc-red-600) !important; }
.pc-main .text-warning { color: var(--pc-amber-600) !important; }
.pc-main .text-success { color: var(--pc-money-600) !important; }
.pc-main .text-muted   { color: var(--pc-text-soft) !important; }

/* --- Summary strip for detail pages (statements, histories, payments) -- */

.pc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    padding: 16px 20px;
    box-shadow: var(--pc-shadow-sm);
    margin-bottom: 18px;
}

.pc-summary-item { display: flex; flex-direction: column; gap: 2px; }

.pc-summary-item dt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pc-text-faint);
}

.pc-summary-item dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pc-summary-item.is-due dd { color: var(--pc-amber-600); }
.pc-summary-item.is-settled dd { color: var(--pc-money-600); }

/* --- Section label above a block -------------------------------------- */

.pc-section {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pc-text-faint);
    margin: 26px 0 10px;
}

/* --- Line-item builder (Purchases / Orders create screens) ------------ */

.pc-builder { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }

.pc-builder-total {
    background: var(--pc-ink-900);
    color: #fff;
    border-radius: var(--pc-r);
    padding: 16px 18px;
    margin-top: 14px;
}

.pc-builder-total .pos-total-label { color: #7E90A2; }
.pc-builder-total .pos-total-amount { font-size: 2.25rem; }

@media (max-width: 1100px) {
    .pc-builder { grid-template-columns: 1fr; }
}

/* --- Centred message pages (access denied, error) --------------------- */

.pc-notice {
    max-width: 460px;
    margin: 6vh auto 0;
    text-align: center;
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-lg);
    padding: 36px 32px;
    box-shadow: var(--pc-shadow);
}

.pc-notice-mark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    background: var(--pc-amber-050);
    color: var(--pc-amber-600);
}

.pc-notice-mark svg { width: 22px; height: 22px; }
.pc-notice h2 { font-size: 1.25rem; margin-bottom: 6px; }
.pc-notice p { color: var(--pc-text-soft); font-size: .9375rem; margin-bottom: 20px; }

/* ==========================================================================
   Dashboard charts
   ========================================================================== */

.pc-chart {
    background: var(--pc-card);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r);
    box-shadow: var(--pc-shadow-sm);
    padding: 16px 18px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pc-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pc-chart-title { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.pc-chart-sub { font-size: .75rem; color: var(--pc-text-faint); }

/* Canvas needs a bounded, positioned parent or Chart.js grows without limit. */
.pc-canvas { position: relative; flex: 1 1 auto; min-height: 0; }
.pc-canvas.is-tall { height: 260px; }
.pc-canvas.is-short { height: 210px; }

/* Donut centre readout, positioned over the hole. */
.pc-donut-wrap { position: relative; }

.pc-donut-centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.pc-donut-centre strong {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.pc-donut-centre span { font-size: .6875rem; color: var(--pc-text-faint); margin-top: 3px; }

/* Legend rendered in markup rather than by Chart.js, so it can carry counts
   and stay legible in Arabic without fighting canvas text direction. */
.pc-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }

.pc-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--pc-text-soft);
}

.pc-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.pc-legend-row span:last-child { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--pc-text); font-weight: 500; }

.pc-chart-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--pc-text-faint);
    font-size: .8125rem;
    padding: 28px 12px;
}

/* Delta pill against a reference figure (today vs the daily average). */
.pc-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .6875rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    margin-inline-start: 6px;
    vertical-align: middle;
}

.pc-delta.is-up { background: var(--pc-money-050); color: var(--pc-money-700); }
.pc-delta.is-down { background: var(--pc-red-050); color: var(--pc-red-600); }
.pc-delta.is-flat { background: #EDF1F5; color: var(--pc-text-soft); }