/* =========================================================================
   UI layer v2 — "ورشة" identity: warm ivory canvas, walnut + brass, soft depth.
   Loaded AFTER app.css: it re-skins the shell and every shared component.
   (Sketch editor, signature screen and print sheets keep their own rules.)
   ========================================================================= */

:root {
    --bg: #f4f1ec;
    --surface: #ffffff;
    --surface-2: #f8f6f2;
    --border: #ece7e0;
    --border-strong: #ddd5ca;
    --text: #1d1a17;
    --muted: #6f6a63;
    --faint: #a39d94;

    --brand: #94582f;
    --brand-600: #7a4623;
    --brand-50: #f8efe6;
    --brand-100: #efdcc7;
    --brand-grad: linear-gradient(135deg, #b0693a 0%, #8a5029 55%, #6e3e1e 100%);

    --green: #17895a;  --green-50: #e6f5ee;
    --amber: #c27a0a;  --amber-50: #fcf1d9;
    --red: #d1423b;    --red-50: #fdebe9;
    --blue: #2f66c8;   --blue-50: #e8effc;
    --violet: #6b4fcf; --violet-50: #eeeafb;
    --teal: #0f8a8f;   --teal-50: #dff3f3;
    --slate: #4c5566;  --slate-50: #eceef2;

    --radius: 20px;
    --radius-sm: 12px;
    --shadow-sm: 0 1px 2px rgba(48, 32, 18, .04);
    --shadow: 0 1px 2px rgba(48, 32, 18, .04), 0 12px 32px -16px rgba(48, 32, 18, .18);
    --shadow-lg: 0 2px 4px rgba(48, 32, 18, .05), 0 24px 48px -20px rgba(48, 32, 18, .28);
    --sidebar-w: 252px;
    --ring: 0 0 0 .25rem rgba(148, 88, 47, .15);
}

body { background: var(--bg); background-image: radial-gradient(1200px 420px at 85% -120px, rgba(196, 154, 74, .13), transparent 70%); background-repeat: no-repeat; font-size: .93rem; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* ------------------------------------------------------------------ buttons */
.btn { --bs-btn-border-radius: 12px; --bs-btn-padding-y: .52rem; --bs-btn-padding-x: 1.05rem; --bs-btn-font-weight: 600; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.5rem; --bs-btn-border-radius: 14px; }
.btn-primary { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: #c9b19d; --bs-btn-disabled-border-color: transparent; background-image: var(--brand-grad); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(110, 62, 30, .7); }
.btn-primary:hover { background-image: linear-gradient(135deg, #b9703f 0%, #935630 55%, #77441f 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 22px -8px rgba(110, 62, 30, .75); }
.btn-primary:disabled, .btn-primary.disabled { background-image: none; box-shadow: none; }
.btn-outline-primary { --bs-btn-border-color: var(--brand-100); --bs-btn-bg: var(--brand-50); }
.btn-outline-secondary { --bs-btn-border-color: var(--border); --bs-btn-bg: #fff; box-shadow: var(--shadow-sm); }
.btn-outline-secondary:hover { border-color: var(--border-strong); }
.btn-soft { background: var(--slate-50); }
.btn-success { background-image: linear-gradient(135deg, #20a56c, #138050); --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: transparent; box-shadow: 0 8px 18px -10px rgba(19, 128, 80, .8); }
.btn-whatsapp { background: linear-gradient(135deg, #2bd267, #17a449); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -10px rgba(23, 164, 73, .85); }
.btn-whatsapp:hover { color: #fff; filter: brightness(1.05); }
.btn-icon { border-radius: 12px; }

/* -------------------------------------------------------------------- forms */
.form-label { color: #4a4540; font-size: .82rem; font-weight: 600; }
.form-control, .form-select { border-color: var(--border); background-color: var(--surface-2); border-radius: 12px; min-height: 2.75rem; transition: background .15s, border-color .15s, box-shadow .15s; }
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: var(--ring); }
textarea.form-control { min-height: 0; }
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { background: var(--surface-2); border-color: var(--border); border-radius: 12px; min-height: 2.75rem; }
.ts-wrapper.focus .ts-control { background: #fff; border-color: var(--brand); box-shadow: var(--ring); }
.form-check-input { border-color: var(--border-strong); }

/* -------------------------------------------------------------------- cards */
.card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { border-bottom: 0; padding: 1.15rem 1.4rem .35rem; font-size: 1.02rem; border-radius: var(--radius) var(--radius) 0 0; }
.card-header .ch-icon { width: 2.2rem; height: 2.2rem; border-radius: 12px; background: var(--brand-50); }
.card-body { padding: 1.1rem 1.4rem 1.4rem; }
.card-footer { border-top: 1px solid var(--border); }
.card.hero { padding: 1.4rem 1.5rem; }

/* ----------------------------------------------------------------- app shell */
.app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
@media (max-width: 991.98px) { .app { grid-template-columns: minmax(0, 1fr); } }
.sidebar { background: #fff; color: var(--text); padding: 1.1rem .9rem 1rem; box-shadow: 1px 0 0 var(--border), 12px 0 40px -28px rgba(48, 32, 18, .25); gap: .25rem; }
[dir=rtl] .sidebar { box-shadow: -1px 0 0 var(--border), -12px 0 40px -28px rgba(48, 32, 18, .25); }
.sb-brand { display: block; padding: .15rem .35rem .85rem; margin: 0; }
.sb-brand img { display: block; width: 100%; max-width: 168px; margin-inline: auto; height: auto; }
.sb-cta { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .1rem .1rem 1rem; padding: .78rem 1rem; border-radius: 14px; background-image: var(--brand-grad); color: #fff; font-weight: 700; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 12px 22px -12px rgba(110, 62, 30, .85); transition: transform .15s, box-shadow .15s; }
.sb-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 16px 26px -12px rgba(110, 62, 30, .9); }
.sb-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.sb-label { color: var(--faint); font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding: 1rem .75rem .35rem; }
.sb-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 14px; color: #4b463f; font-weight: 600; font-size: .9rem; position: relative; transition: background .15s, color .15s; }
.sb-link > i { width: 2.05rem; height: 2.05rem; border-radius: 11px; display: inline-grid; place-items: center; font-size: 1rem; background: var(--tone-bg, var(--slate-50)); color: var(--tone, var(--slate)); flex: none; transition: transform .15s, background .15s, color .15s; }
.sb-link:hover { background: var(--surface-2); color: var(--text); }
.sb-link:hover > i { transform: scale(1.06); }
.sb-link.active { background: var(--brand-50); color: var(--brand-600); }
.sb-link.active > i { background-image: var(--brand-grad); color: #fff; box-shadow: 0 8px 16px -8px rgba(110, 62, 30, .8); }
.sb-link.active::before { content: ''; position: absolute; inset-inline-start: -.9rem; top: 24%; bottom: 24%; width: 4px; border-radius: 4px; background: var(--brand); }
.sb-link[data-tone=brand] { --tone: var(--brand); --tone-bg: var(--brand-50); }
.sb-link[data-tone=amber] { --tone: var(--amber); --tone-bg: var(--amber-50); }
.sb-link[data-tone=blue] { --tone: var(--blue); --tone-bg: var(--blue-50); }
.sb-link[data-tone=teal] { --tone: var(--teal); --tone-bg: var(--teal-50); }
.sb-link[data-tone=violet] { --tone: var(--violet); --tone-bg: var(--violet-50); }
.sb-link[data-tone=green] { --tone: var(--green); --tone-bg: var(--green-50); }
.sb-link[data-tone=slate] { --tone: var(--slate); --tone-bg: var(--slate-50); }
.sb-link .count { margin-inline-start: auto; background: var(--slate-50); color: var(--slate); border-radius: 99px; font-size: .72rem; padding: .1rem .5rem; font-weight: 700; }
.sb-link .count-hot { background: var(--red); color: #fff; }
.sb-user { margin-top: .75rem; padding: .65rem; border-radius: 16px; background: var(--surface-2); display: flex; align-items: center; gap: .65rem; border: 0; }
.sb-user .avatar { width: 2.4rem; height: 2.4rem; border-radius: 13px; background-image: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.sb-user .who { min-width: 0; flex: 1; display: block; }
.sb-user .name { font-weight: 700; font-size: .86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user .role { color: var(--muted); font-size: .75rem; }
.sb-user .logout { background: transparent; border: 0; color: var(--muted); width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; }
.sb-user .logout:hover { background: var(--red-50); color: var(--red); }
.sb-user form { margin: 0; }

.topbar { background: rgba(244, 241, 236, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 0; padding: .8rem 2rem; }
.topbar .search { max-width: 520px; }
.topbar .search .form-control { background: #fff; border: 0; box-shadow: var(--shadow-sm); min-height: 2.7rem; border-radius: 14px; }
.topbar .search .form-control:focus { box-shadow: var(--shadow-sm), var(--ring); }
.topbar .today { background: #fff; border-radius: 12px; padding: .5rem .85rem; box-shadow: var(--shadow-sm); font-weight: 600; color: #5a554e; }
.bell-btn, .bell > button { background: #fff; border: 0; box-shadow: var(--shadow-sm); border-radius: 12px; }
.content { padding: 1rem 2rem 3.5rem; max-width: 1640px; }

@media (max-width: 991.98px) {
    .sidebar { box-shadow: none; }
    .sidebar.open { box-shadow: 0 0 60px rgba(30, 20, 10, .35); }
    .topbar { padding: .6rem 1rem; }
    .content { padding: .8rem 1rem 6rem; }
}

/* -------------------------------------------------------------- page heading */
.page-head { margin-bottom: 1.25rem; align-items: center; }
.page-head h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; }
.page-head .sub { color: var(--muted); }
.crumbs { font-size: .78rem; }

/* ---------------------------------------------------------- pills & chips */
.pill { border-radius: 99px; padding: .22rem .7rem; font-weight: 700; font-size: .76rem; border: 0; }
.chip { border-radius: 99px; border: 0; font-weight: 700; }

/* ----------------------------------------------------------------- callouts */
.callout { border: 0; border-radius: 16px; padding: 1rem 1.15rem; }

/* ------------------------------------------------------------------- tables */
.table-modern { border-collapse: separate; border-spacing: 0 .35rem; width: 100%; }
.table-modern thead th { background: transparent; border: 0; color: var(--faint); font-size: .74rem; font-weight: 700; letter-spacing: .03em; padding: .4rem 1rem; white-space: nowrap; }
.table-modern tbody td { background: #fff; border: 0; padding: .85rem 1rem; vertical-align: middle; }
.table-modern tbody tr { box-shadow: 0 1px 0 var(--border); }
.table-modern tbody tr:hover td { background: #fcfaf7; }
.table-modern tbody td:first-child { border-radius: 0 14px 14px 0; }
.table-modern tbody td:last-child { border-radius: 14px 0 0 14px; }
.table-modern tbody tr.row-late td:first-child { box-shadow: inset -4px 0 0 var(--red); }
.card > .table-responsive { padding: .25rem .9rem .6rem; }
.card > .table-responsive .table-modern tbody td { background: transparent; }
.card > .table-responsive .table-modern tbody tr { box-shadow: none; border-bottom: 1px solid var(--border); }
.card > .table-responsive .table-modern tbody tr:hover td { background: var(--surface-2); }
.card > .table-responsive .table-modern { border-spacing: 0; }
.card > .table-responsive .table-modern tbody tr:last-child { border-bottom: 0; }
.card > .table-responsive .table-modern tbody td { border-bottom: 1px solid var(--border); }
.card > .table-responsive .table-modern tbody tr:last-child td { border-bottom: 0; }
.ono { font-weight: 800; color: var(--brand-600); }
.empty { color: var(--faint); padding: 2.2rem 1rem; text-align: center; }
.empty i { display: block; font-size: 2rem; margin-bottom: .4rem; opacity: .6; }

/* --------------------------------------------------------------- hero (show) */
.hero .ono { font-size: 1.35rem; background: var(--brand-50); padding: .2rem .8rem; border-radius: 12px; }
.hero-meta { border-top: 0; background: var(--surface-2); border-radius: 16px; padding: 1rem 1.1rem; margin-top: 1.2rem; }
.next-action { border: 0; background: linear-gradient(135deg, #fff 0%, #fbf5ee 100%); box-shadow: var(--shadow), 0 0 0 1.5px var(--brand-100); }

/* Customer share card (shown on the order page once the تعميد can be issued) */
.share-card { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: linear-gradient(120deg, #11382b 0%, #1a5a43 60%, #1f7152 100%); color: #fff; box-shadow: 0 20px 40px -22px rgba(17, 56, 43, .9); }
.share-card .sc-ic { width: 3.2rem; height: 3.2rem; border-radius: 16px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.share-card .sc-t { flex: 1; min-width: 12rem; }
.share-card .sc-t b { display: block; font-size: 1.05rem; }
.share-card .sc-t small { color: rgba(255, 255, 255, .72); }
.share-card .sc-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.share-card .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 0; }
.share-card .btn-ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.share-card .btn-whatsapp { background: #fff; color: #118a43; box-shadow: none; }

/* ---------------------------------------------------------------- tab pills */
.tabs-pill { background: #fff; border-radius: 14px; padding: .3rem; box-shadow: var(--shadow-sm); display: inline-flex; gap: .15rem; flex-wrap: wrap; }
.tabs-pill .tab { border-radius: 11px; padding: .42rem .9rem; color: var(--muted); font-weight: 700; font-size: .85rem; border: 0; background: transparent; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.tabs-pill .tab:hover { color: var(--text); }
.tabs-pill .tab.active { background: var(--brand-50); color: var(--brand-600); }
.tabs-pill .tab .n { background: var(--slate-50); color: var(--slate); border-radius: 99px; padding: 0 .45rem; font-size: .72rem; }
.tabs-pill .tab.active .n { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------ login screen */
.login { background: var(--bg); }
.login-art { background: linear-gradient(150deg, #2a1c12 0%, #4a2d18 55%, #7a4623 130%); position: relative; overflow: hidden; }
.login-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 15%, rgba(196, 154, 74, .28), transparent 40%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px); }
.login-art > * { position: relative; }
.login-art .login-logo { background: #fff; border-radius: 18px; padding: .8rem 1.1rem; width: fit-content; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); }
.login-art .login-logo img { display: block; width: 190px; height: auto; }
.login-art h2 { font-size: 2.1rem; font-weight: 800; line-height: 1.35; max-width: 22rem; }
.login-art .feat { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; color: rgba(255, 255, 255, .88); }
.login-art .feat i { width: 2.3rem; height: 2.3rem; border-radius: 12px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.login-form .box { background: #fff; border-radius: 26px; padding: 2.4rem 2.2rem; box-shadow: var(--shadow-lg); }
.login-form .box h1 { font-weight: 800; }

/* ----------------------------------------------------------- misc surfaces */
.dropdown-menu { border: 0; box-shadow: var(--shadow-lg); border-radius: 16px; padding: .4rem; }
.dropdown-item { border-radius: 10px; padding: .5rem .8rem; font-weight: 500; }
.modal-content { border: 0; border-radius: 22px; box-shadow: var(--shadow-lg); }
.toast-stack .toast-item, .toast-stack > * { border-radius: 16px; }


/* ------------------------------------------------ tables: banded header, centred cells */
.table-modern { font-variant-numeric: tabular-nums; }
.table-modern thead th { text-align: center; vertical-align: middle; }
.table-modern tbody td { vertical-align: middle; }
@media (min-width: 768px) {
    .table-modern thead th { background: var(--brand-50); color: var(--brand-600); font-size: .8rem; font-weight: 800; letter-spacing: 0; padding: .8rem .85rem; border: 0; }
    .table-modern thead th:first-child { border-radius: 0 12px 12px 0; }
    .table-modern thead th:last-child { border-radius: 12px 0 0 12px; }
    .table-modern tbody td { padding: .95rem .85rem; text-align: center; }
    .table-modern tbody td.text-end, .table-modern tbody td.cell-actions { text-align: center !important; }
    .table-modern tbody td > .d-flex { justify-content: center; }
    .table-modern tbody td .cell-2 { text-align: center; }
    .table-modern tbody tr { min-height: 3.6rem; }
    .table-modern .money { white-space: nowrap; }
    .table-modern tbody td .btn { min-width: 4.6rem; }
    .table-modern + .empty, .table-modern td > .empty { padding: 2rem 1rem; }
}
.spec-table th, .spec-table td { text-align: center; vertical-align: middle; }
.spec-table th { background: var(--brand-50); color: var(--brand-600); font-weight: 800; }
.table-modern .ono { white-space: nowrap; display: inline-block; }
.table-modern .chip, .table-modern .pill { white-space: nowrap; }

/* ------------------------------- compact sidebar: tablets in landscape and small laptops (icons only) */
@media (min-width: 992px) and (max-width: 1279.98px) {
    :root { --sidebar-w: 84px; }
    .sidebar { padding-inline: .65rem; }
    .sb-brand img { max-width: 58px; }
    .sb-cta { padding: .75rem 0; margin-inline: 0; }
    .sb-cta span, .sb-link > span:not(.count), .sb-label, .sb-user .who, .sb-user .avatar { display: none; }
    .sb-nav { gap: .35rem; padding-top: .5rem; }
    .sb-link { justify-content: center; padding: .4rem 0; }
    .sb-link .count { position: absolute; top: -.1rem; inset-inline-end: .35rem; font-size: .62rem; padding: .05rem .38rem; }
    .sb-link.active::before { inset-inline-start: -.65rem; }
    .sb-user { justify-content: center; padding: .35rem; }
    .topbar, .content { padding-inline: 1.25rem; }
    .table-modern tbody td { padding-inline: .5rem; }
    .table-modern thead th { padding-inline: .5rem; }
    .table-modern .col-open { display: none; } /* the order number already opens the order */
}
.sb-link.sb-late { color: var(--red); background: var(--red-50); }
.sb-link.sb-late > i { background: var(--red); color: #fff; }