/* ============================================================
   TAILOR SYSTEM — style.css
   Theme: Clean Simple Light
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Outfit:wght@600;700&display=swap");

/* ─────────────────────────────────────────
   CSS VARIABLES
───────────────────────────────────────── */
:root {
  --bg-main: #f5f5f5;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-table-head: #f0f0f0;
  --bg-table-row: #ffffff;
  --bg-table-alt: #fafafa;

  --color-gold: #b8860b;
  --color-gold-lt: #d4a017;
  --color-accent: #2563eb;
  --color-danger: #dc2626;
  --color-success: #16a34a;

  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #999999;

  --border: #dddddd;
  --border-focus: #b8860b;

  --sidebar-w: 220px;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --transition: 0.15s ease;

  --font-body: "DM Sans", sans-serif;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.container {
  display: flex;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: clip;
}

.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px 24px;
  background: var(--bg-main);
  min-width: 0;
  max-width: 100%;
}

/* ===== ADDED: Dashboard ke white card ko top-bottom se bhi center karne
   ke liye — sirf us .content wrapper ko target karta hai jiske andar
   dashboard ka .db4-wrap ho, is liye baaki pages (Order Form, Payment
   Form, etc.) ka layout bilkul pehle jaisa hi rahega ===== */
.content:has(.db4-wrap) {
  display: flex;
  flex-direction: column;
}
/* ===== ADDED: Bell notification icon (fixed, top:16px) kabhi bhi
   dashboard ke white card (.db4-wrap) ke andar/upar overlap na kare —
   lekin SIRF jab Global Top Bar maujood NA ho. Jab bar maujood ho, to
   bar khud itni height rakhta hai ke card bell se door rehta hai, is
   liye bar ko extra padding se neeche dhakelne ki zaroorat nahi — bar
   bell icon ke barabar (top:16px) level par aana chahiye ===== */
.content:has(.db4-wrap):not(:has(#ogb-global-bar)) {
  padding-top: 60px;
}

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--transition);
  z-index: 100;
}

/* ===== ADDED: Logo + Language dropdown sidebar scroll par hamesha upar
   rahen (sticky) — neeche ka menu inke peeche se guzarta hai ===== */
.sb-fixed-top {
  position: sticky;
  top: 0;
  z-index: 120;
  flex-shrink: 0;
  padding-top: 20px;
  background: var(--bg-sidebar);
}

.sb-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sb-logo-icon-wrap {
  width: 40px;
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-logo-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.00);
  display: block;
}

.sb-logo-text {
  font-family: "Outfit", var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: #1a1e2e;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a {
  display: block;
  padding: 9px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all var(--transition);
}

.sidebar a:hover {
  color: var(--text-primary);
  background: #f5f5f5;
  border-left-color: var(--color-gold);
}

.sidebar a.active {
  color: var(--color-gold);
  background: #fdf8ee;
  border-left-color: var(--color-gold);
  font-weight: 600;
}

.sidebar a[href="/logout"] {
  color: var(--color-danger);
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.sidebar a[href="/logout"]:hover {
  background: #fff5f5;
  border-left-color: var(--color-danger);
}

/* ===== ADDED: Sidebar "Upgrade Plan" button — premium gold/navy look,
   stays clickable even when the tenant's plan is expired (no .tn-disabled
   class is ever applied to it, unlike the other sidebar links) ===== */
.sidebar a.sb-link-upgrade {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 10px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #1b2340 0%, #2a3358 100%);
  color: #f0d98c;
  border: 1px solid #c9a84c;
  border-left: 1px solid #c9a84c;
  border-radius: 8px;
  font-weight: 700;
}
.sidebar a.sb-link-upgrade:hover,
.sidebar a.sb-link-upgrade.active {
  background: linear-gradient(135deg, #242d52 0%, #343f6e 100%);
  color: #f0d98c;
  border-left-color: #c9a84c;
}
.sidebar a.sb-link-upgrade i {
  color: #f0d98c;
  opacity: 1;
}

/* ─────────────────────────────────────────
   HAMBURGER
───────────────────────────────────────── */
#menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

#menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
}

.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

/* ─────────────────────────────────────────
   CARDS
───────────────────────────────────────── */
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

/* ─────────────────────────────────────────
   LABELS & GROUPS
───────────────────────────────────────── */
.label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-group,
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─────────────────────────────────────────
   INPUTS
───────────────────────────────────────── */
.input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  width: 100%;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.12);
}

.input[readonly] {
  background: #fafafa;
  color: var(--text-secondary);
  cursor: default;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

select.input option {
  background: #fff;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  background: var(--color-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition:
    background var(--transition),
    transform var(--transition);
}

.btn:hover:not(:disabled) {
  background: var(--color-gold-lt);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────
   TABLES
───────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ui-table thead {
  background: var(--bg-table-head);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ui-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.ui-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.ui-table tbody tr:nth-child(odd) {
  background: var(--bg-table-row);
}
.ui-table tbody tr:nth-child(even) {
  background: var(--bg-table-alt);
}
.ui-table tbody tr:hover {
  background: #fdf8ee;
}
.ui-table tbody tr.selected {
  background: #fdf8ee;
  outline: 1px solid var(--color-gold);
}
.ui-table tbody td {
  padding: 9px 14px;
  color: var(--text-primary);
}

.search-table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.search-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.search-table th {
  background: var(--bg-table-head);
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.search-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.search-table tr:hover td {
  background: #fdf8ee;
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #f0f0f0;
}
::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ============================================================
   ORDER FORM PAGE — CSS (FIXED)
   File: order_form.html
   ============================================================ */

.app-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Form inner gap fix ── */
#mainOrderForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.row-entry-table {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

.row-bottom {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.row-bottom .form-section {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
}
.row-bottom .section-actions {
  flex: 0 0 auto;
  width: 300px;
}
/* ===== UPDATED: Laundry/Tharboosh aur Sub Total cards aur chote,
   taake neeche Invoice List box (Name column ke sath, bina cut/wrap
   hue ek hi line me) ke liye zyada jagah bane ===== */
.row-bottom .section-laundry,
.row-bottom .section-amount {
  flex: 0.55;
}
.row-bottom .search-table-wrapper {
  flex: 0 0 340px;
  min-width: 0;
}
.search-table-name-cell {
  white-space: nowrap;
}

/* ===== ADDED: Invoice List box — poori row click-able + currently
   loaded invoice ki row highlight ===== */
.search-table-row {
  cursor: pointer;
}
.search-table-row-active td {
  background: rgba(201, 168, 76, 0.2);
  font-weight: 700;
}
.search-table-row-active:hover td {
  background: rgba(201, 168, 76, 0.28);
}

.section-search {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-search form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

.section-customer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
}

/* ===== ADDED: "View Profile" button row (Customer Account + Profile
   system — PHASE 4) — section-customer ke 4 columns ke neeche, full-width
   row me right-aligned ===== */
.of-customer-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   MOBILE NUMBER GATE POPUP (Order Form — naya order banane se
   pehle mandatory Mobile Number search) — CSS
   ============================================================ */
.mg-overlay {
  position: fixed;
  top: 0;
  /* ===== CHANGED: sidebar ki width chhod kar shuru — sidebar dhundla/
     blocked na ho, uske links click ho sakein ===== */
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  background: rgba(8, 10, 16, 0.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
/* RTL (Arabic/Urdu): sidebar right par hota hai */
[dir="rtl"] .mg-overlay {
  left: 0;
  right: var(--sidebar-w);
}
/* Mobile/Tablet: sidebar hamburger drawer hai — popup ka layer drawer
   (z-index 100) aur hamburger (200) ke neeche, taake menu popup ke upar
   khul sake aur uske links click ho sakein */
@media (max-width: 1024px) {
  .mg-overlay,
  [dir="rtl"] .mg-overlay {
    left: 0;
    right: 0;
    z-index: 90;
  }
}
.mg-modal {
  width: 100%;
  max-width: 380px;
  background: #1a1e2e;
  border: 1.5px solid #c9a84c;
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mg-title {
  font-size: 15px;
  font-weight: 700;
  color: #f0f2f8;
  text-align: center;
}
.mg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-field .label {
  color: #c9a84c;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mg-field .input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: #ffffff;
  font-weight: 500;
}
.mg-field .input:focus {
  border-color: #c9a84c;
  outline: none;
}
.mg-search-btn,
.mg-continue-btn {
  width: 100%;
  justify-content: center;
}
.mg-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 168, 76, 0.25);
}
.mg-found-name {
  font-size: 14px;
  font-weight: 700;
  color: #f0f2f8;
}
.mg-new-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

/* ── Customer Section — Dark Highlight ── */
.form-section.section-customer {
  background: #1a1e2e;
  border: 1.5px solid #c9a84c;
  border-radius: 10px;
  padding: 16px 20px;
}
.form-section.section-customer .label {
  color: #c9a84c;
  font-weight: 600;
}
.form-section.section-customer .input {
  background: #0f1117;
  border-color: #262c42;
  color: #f0f2f8;
  font-weight: 600;
}

/* ===== ADDED: Date icon fix — dark background par white/bright dikhe
   (Order Date + Delivery Date), taake calendar-picker clearly nazar aaye
   aur clickable lage ===== */
.form-section.section-customer input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  cursor: pointer;
}

.section-item-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.section-item-entry .field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.section-item-entry .design {
  flex: 1.5;
  min-width: 140px;
}
.section-item-entry .clothes {
  flex: 1.5;
  min-width: 140px;
}
.section-item-entry .color {
  flex: 1;
  min-width: 120px;
}
.section-item-entry .qty {
  flex: 0.7;
  min-width: 80px;
}
.section-item-entry .price {
  flex: 0.7;
  min-width: 80px;
}
.section-item-entry .total {
  flex: 0.7;
  min-width: 80px;
}

.section-table {
  padding: 0;
  overflow: hidden;
}
.bottom-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Action Buttons Grid ── */
.section-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  overflow: hidden;
  box-sizing: border-box;
}
.section-actions .btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  position: relative;
  font-size: 0;
  padding: 0;
  box-sizing: border-box;
}
.section-actions .btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Tooltip ── */
.section-actions .btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1e2e;
  color: #f0f2f8;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 999;
  border: 1px solid #262c42;
}
.section-actions .btn:hover::after {
  opacity: 1;
}

/* ── Labeled Button Layout ── */
.btn-with-label {
  flex-direction: column !important;
  gap: 3px !important;
  padding: 8px 2px !important;
  height: auto !important;
  min-height: 54px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
.btn-icon-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.9;
  white-space: nowrap;
}

/* ── Save Full Width — CRITICAL FIX ── */
.btn-save {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.btn-save-pro {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  min-height: 40px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 10px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Button Color Variants ── */
.btn-of-danger {
  background: #ef4444 !important;
  color: #fff !important;
}
.btn-of-danger:hover:not(:disabled) {
  background: #dc2626 !important;
}
.btn-of-danger:disabled {
  background: #ef444466 !important;
  color: #fff !important;
  opacity: 0.6 !important;
}

.btn-of-info {
  background: #3b82f6 !important;
  color: #fff !important;
}
.btn-of-info:hover:not(:disabled) {
  background: #2563eb !important;
}
.btn-of-info:disabled {
  background: #3b82f666 !important;
  color: #fff !important;
  opacity: 0.6 !important;
}

.btn-of-success {
  background: #16a34a !important;
  color: #fff !important;
}
.btn-of-success:hover:not(:disabled) {
  background: #15803d !important;
}
.btn-of-success:disabled {
  background: #16a34a66 !important;
  color: #fff !important;
  opacity: 0.6 !important;
}

.btn-of-slate {
  background: #475569 !important;
  color: #e2e8f0 !important;
}
.btn-of-slate:hover:not(:disabled) {
  background: #334155 !important;
}
.btn-of-slate:disabled {
  opacity: 0.5 !important;
}

/* ── Laundry Section ── */
.section-laundry {
  display: flex;
  gap: 16px;
}
.section-laundry .laundry-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.section-laundry .laundry-col .field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section-laundry .input {
  width: 100%;
}

/* ── Amount Section ── */
.section-amount {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
}

/* ── Search Table — Border + No Wrap ── */
.search-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.search-table-wrapper td,
.search-table-wrapper th {
  white-space: nowrap;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
}
.search-table-wrapper th {
  background: #f3f4f6;
  font-weight: 600;
  color: #374151;
}
.search-table-wrapper tr:hover td {
  background: #f9fafb;
}
/* ============================================================
   PAYMENT FORM PAGE
   File: payment_form.html
   ============================================================ */

.payment-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.payment-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-search {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payment-search form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 500px;
}

/* ===== Top row: search card + Payment Summary ke 4 premium cards ===== */
.pf-top-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pf-summary-strip {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pf-stat-card {
  --pf-accent: #94a3b8;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 15px 16px 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pf-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pf-accent);
}
.pf-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}
.pf-stat-slate { --pf-accent: #475569; }
.pf-stat-green { --pf-accent: #16a34a; }
.pf-stat-red { --pf-accent: #dc2626; }
.pf-stat-orange { --pf-accent: #ea580c; }
.pf-stat-grey { --pf-accent: #94a3b8; }
.pf-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-stat-amount {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Total Outstanding — white card, gold accent bar, thora bara amount */
.pf-stat-total {
  --pf-accent: var(--color-gold);
}
.pf-stat-total .pf-stat-amount {
  font-size: 24px;
}
@media (max-width: 1100px) {
  .pf-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  .pf-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .pf-summary-strip {
    grid-template-columns: 1fr;
  }
}

/* Search card chhota — Ultra Master jaisa (left profile card jitni width) */
.pf-search-card {
  width: 300px;
  max-width: 100%;
  align-self: flex-start;
  padding: 12px 20px;
  box-sizing: border-box;
}
.pf-search-card form {
  max-width: none;
}
.pf-search-card .input {
  flex: 1;
  min-width: 0;
}

.payment-customer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Customer Dark Card */
.payment-customer.section-customer {
  background: #1a1e2e;
  border: 1.5px solid #c9a84c;
  border-radius: 10px;
  padding: 16px 20px;
}
.payment-customer.section-customer .label {
  color: #c9a84c;
  font-weight: 600;
}
.payment-customer.section-customer .input {
  background: #0f1117;
  border-color: #262c42;
  color: #f0f2f8;
  font-weight: 600;
}

.payment-middle {
  display: grid;
  /* Payment History chhota (max 620px), Invoices card uske barabar mein */
  grid-template-columns: 300px minmax(0, 620px) fit-content(420px);
  gap: 20px;
  align-items: start;
}

.payment-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.payment-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.payment-editable {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment-save-btn {
  width: 100%;
  justify-content: center;
  padding: 8px;
  font-size: 13px;
}

/* Note textarea */
.payment-note {
  resize: vertical;
  min-height: 60px;
  font-size: 13px;
  line-height: 1.5;
}

/* Payment Method dropdown arrow */
select.input[name="payment_method"] {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Payment Method badges in history */
.pm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.pm-cash {
  background: #dcfce7;
  color: #16a34a;
}
.pm-bank-transfer {
  background: #dbeafe;
  color: #2563eb;
}
.pm-visa-machine {
  background: #fef3c7;
  color: #d97706;
}

.payment-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment-invoice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment-invoice-list .table-wrapper {
  max-height: 300px;
  overflow-y: auto;
}
.payment-invoice-list td {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .payment-customer {
    grid-template-columns: 1fr;
  }
  .payment-middle {
    grid-template-columns: 1fr;
  }
  .payment-summary {
    grid-template-columns: 1fr 1fr;
  }
  .payment-history,
  .payment-invoice-list {
    overflow-x: auto;
  }
  .payment-invoice-list td,
  .payment-invoice-list th {
    white-space: nowrap;
  }
}
/* ============================================================
   MEASUREMENT FORM PAGE
   File: measurement_form.html
   ============================================================ */

.mf-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 6px;
  max-width: 1400px;
  margin: 0 auto;
}

.mf-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mf-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 6px 14px;
}
.mf-search form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 500px;
}

.mf-customer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0d1b2a 0%, #1a2e45 100%);
  border: 1px solid #c9a84c;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mf-customer .label {
  color: #c9a84c;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mf-customer .input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: #ffffff;
  font-weight: 500;
}

/* ===== ADDED: "View Profile" button row (Customer Account + Profile
   system — PHASE 4) — mf-customer grid ke 3 columns ke neeche, full-width
   row me right-aligned ===== */
.mf-customer-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.mf-customer .input:focus {
  border-color: #c9a84c;
  outline: none;
}

/* ============================================================
   MEASUREMENT CHANGE REQUEST BANNER (measurement_form.html)
   ============================================================ */
.mf-request-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #fff8e6;
  border: 1px solid #f0c94a;
  border-radius: var(--radius);
}

.mf-request-banner-text {
  font-size: 13px;
  font-weight: 600;
  color: #6b5300;
}

.mf-request-banner-actions {
  display: flex;
  gap: 8px;
}

.mf-btn-approve {
  background-color: #1da042;
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.mf-btn-reject {
  background-color: #ffffff;
  color: #d9534f;
  border: 1px solid #d9534f;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.mf-btn-approve:hover,
.mf-btn-reject:hover {
  opacity: 0.9;
}

.mf-design {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 6px 14px;
}
.mf-design select {
  flex: 0 0 220px;
}

.mf-body {
  display: grid;
  grid-template-columns: 1fr 200px 200px 280px;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.mf-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.mf-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.mf-buttons .btn {
  flex: 1;
  justify-content: center;
  font-size: 11px;
  padding: 6px 8px;
}

.mf-body .form-section {
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.mf-canvas-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#measurement-canvas {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#measurement-canvas .design-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#measurement-canvas .design-body svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}
#measurement-canvas img {
  object-fit: contain !important;
}

.mf-right {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

.mf-measurements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
  flex: 1;
}
.mf-measurements .field-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mf-measurements .label {
  font-size: 10px;
}
.mf-measurements .input {
  padding: 3px 6px;
  font-size: 11px;
  width: 100%;
  min-width: 0;
}

.mf-notes textarea {
  width: 100%;
  height: 50px;
  resize: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  outline: none;
}
.mf-notes textarea:focus {
  border-color: var(--border-focus);
}

.mf-parts-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.mf-parts-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.mf-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  padding: 2px;
  align-content: flex-start;
}

.part-thumb {
  width: 100%;
  aspect-ratio: 1;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  background: #ffffff;
  object-fit: contain;
  object-position: center;
  transition: border-color var(--transition);
  display: block;
  box-sizing: border-box;
}
.part-thumb:hover {
  border-color: var(--color-gold);
}
.part-thumb.selected {
  border-color: var(--color-gold);
  background: #f5f4f4;
}

.mf-extra-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}
.mf-extra-card input[type="file"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 11px;
}

.mf-ref-image {
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

#reference_image_preview {
  width: 100%;
  height: 90px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  background: #fafafa;
  margin-top: 6px;
  overflow: hidden;
}

.mf-ref-buttons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.mf-ref-buttons .btn {
  flex: 1;
  font-size: 10px;
  padding: 5px 6px;
  justify-content: center;
  gap: 4px;
}

.mf-invoice-list {
  flex-shrink: 0;
  max-height: 150px;
  overflow-y: auto;
}
.mf-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
/* ============================================================
   KAREEGAR SELECTION PAGE — kareegar_selection.css
   ============================================================ */

.ks-container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.ks-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== SEARCH CARD (top) ===== */
.ks-search-card {
  padding: 12px 16px;
}

.ks-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ks-search-row .input {
  max-width: 340px;
  min-width: 180px;
}

/* ===== INVOICE CHIPS (search ke andar) ===== */
.ks-invoice-chips {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ks-chips-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  margin-right: 4px;
}

.ks-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ks-inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f5f5f5;
  text-decoration: none;
  font-size: 12px;
  color: var(--text-primary);
  transition: all 0.15s;
  cursor: pointer;
}

.ks-inv-chip:hover {
  border-color: var(--color-gold);
  background: #fdf8ee;
  color: var(--color-gold);
}

.ks-inv-chip-active {
  background: #fdf3d4 !important;
  border-color: var(--color-gold) !important;
  color: #92700a !important;
  font-weight: 600;
}

.ks-chip-inv {
  font-weight: 700;
}

.ks-chip-sep {
  opacity: 0.3;
}

.ks-chip-date {
  font-size: 11px;
  opacity: 0.6;
}

/* ===== DARK CUSTOMER HEADER ===== */
.ks-customer-header {
  background: #12172b;
  border-radius: var(--radius);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ks-header-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.ks-header-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 28px;
  flex-shrink: 0;
}

.ks-header-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ks-header-value {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  min-height: 22px;
}

/* ===== MAIN GRID: dark left card + order table ===== */
.ks-main-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  align-items: start;
}

/* ===== DARK KAREEGAR CARD ===== */
.ks-kareegar-card {
  background: #12172b;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ks-kareegar-header {
  background: #1a2040;
  padding: 20px 16px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ks-kareegar-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-gold);
  background: #0e1326;
  position: relative;
}

.ks-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.ks-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
}

.ks-kareegar-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ks-dark-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ks-dark-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ks-dark-input {
  background: #1a2040;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  color: #fff;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ks-dark-input:focus {
  border-color: var(--color-gold);
}

.ks-dark-input option {
  background: #1a2040;
  color: #fff;
}

.ks-dark-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}

/* ===== ADDED: manual Meters/Inches cutting-amount input ke liye
   live validation feedback (calculated Min/Max range ke andar hai
   ya nahi) ===== */
.ks-valid-range {
  border-color: #16a34a !important;
}

.ks-invalid-range {
  border-color: #dc2626 !important;
}

/* ===== ORDER TABLE ===== */
.ks-order-card {
  overflow: hidden;
  padding: 0;
}

.ks-order-card .ks-section-label {
  padding: 14px 16px 0;
}

.ks-order-table .assign-input {
  width: 70px;
  padding: 4px 8px;
}

.ks-priority-select {
  width: 90px;
  padding: 4px 8px;
  font-size: 11px;
}

.ks-priority-urgent td {
  color: #b45309;
}
.ks-priority-urgent {
  background: #fff7ed !important;
}
.ks-disabled-box {
  opacity: 0.4;
}

.ks-empty-cell {
  text-align: center;
  color: var(--text-secondary);
  padding: 32px 0;
  font-size: 12px;
}

/* ===== SHARED ===== */
.ks-meter-value {
  color: var(--color-gold);
  font-weight: 700;
  font-size: 14px;
}

.ks-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* ===== ACTIONS ===== */
.ks-actions {
  display: flex;
  gap: 12px;
  padding-top: 4px;
  flex-wrap: wrap;
}

.ks-btn-print {
  background: #fff;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.ks-btn-print:hover {
  background: #fdf8ee;
}

/* ===== Already-assigned design row (Kareegar Selection) =====
   Jab kisi Kareegar ko select karne par pata chalta hai ke us
   Kareegar ko is invoice ka koi design already save/assign ho
   chuka hai, to us row ko halka highlight karte hain. */
.ks-row-assigned {
  background: #eafaf1 !important;
  cursor: pointer;
}
.ks-row-assigned td {
  color: #157347;
}

/* Jo row abhi "active" hai (Print isi design ko print karega) —
   ek se zyada assigned design hon to user click karke badal sakta hai. */
.ks-row-assigned.ks-row-print-active {
  background: #d7f5e3 !important;
  box-shadow: inset 3px 0 0 #157347;
}

/* Print button ka "glowing" effect — jab already-saved assignment
   ho aur print ke liye ready ho. */
.ks-btn-print.ks-btn-glow {
  background: var(--color-gold);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.55);
  animation: ks-print-glow 1.6s ease-in-out infinite;
}
.ks-btn-print.ks-btn-glow:hover {
  background: var(--color-gold-lt);
}

@keyframes ks-print-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(184, 134, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(184, 134, 11, 0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 800px) {
  .ks-main-grid {
    grid-template-columns: 1fr;
  }
  .ks-customer-header {
    flex-direction: column;
    gap: 16px;
  }
  .ks-header-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .ks-invoice-chips {
    flex-direction: column;
    align-items: flex-start;
  }
  .ks-chips-row {
    gap: 6px;
  }
}

/* ============================================================
   KAREEGAR DAILY WORK PAGE
   ============================================================ */

.kdw-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}
.kdw-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.kdw-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* FILTER */
.kdw-filter {
  padding: 12px 20px;
}
.kdw-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 8px;
}
.kdw-filter-row .field-group {
  flex: 1;
  min-width: 160px;
}
.kdw-filter-row .btn {
  flex: 0 0 auto;
  padding: 6px 20px;
}

/* MAIN GRID */
.kdw-main-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
  box-sizing: border-box;
}

/* LEFT CARD */
.kdw-profile-card {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 16px;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}

/* DARK HEADER */
.kdw-profile-header {
  background: linear-gradient(145deg, #0d1017 0%, #13161f 60%, #1a1e2e 100%);
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
}
.kdw-profile-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c55, transparent);
}

.kdw-photo-wrap {
  width: 90px;
  height: 108px;
  border: 2px solid rgba(201, 168, 76, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.kdw-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kdw-profile-header-name {
  font-size: 14px;
  font-weight: 700;
  color: #f0f2f8;
  letter-spacing: 0.3px;
  text-align: center;
  word-break: break-word;
}
.kdw-profile-header-sub {
  font-size: 10px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}

/* DETAILS SECTION */
.kdw-profile-details {
  padding: 14px 16px;
  box-sizing: border-box;
}
.kdw-profile-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* RIGHT */
.kdw-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  box-sizing: border-box;
}
.kdw-summary {
  padding: 14px 20px;
}
.kdw-work {
  padding: 14px 20px;
}

.kdw-summary-scroll {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: auto;
}
.kdw-work-scroll {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: auto;
}
.kdw-summary-scroll .ui-table thead,
.kdw-work-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* TOTAL CARDS */
.kdw-total-cards {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.kdw-total-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.kdw-total-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.kdw-total-card-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gold);
  white-space: nowrap;
}

.kdw-price-input {
  width: 80px;
  padding: 4px 8px;
}
.kdw-status-select {
  width: 110px;
  padding: 4px 6px;
  font-size: 11px;
}

/* ACTIONS */
.kdw-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-bottom: 8px;
}
.kdw-btn-print {
  background: #fff;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}
.kdw-btn-print:hover {
  background: #fdf8ee;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  #menu-toggle {
    display: flex;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    box-shadow: var(--shadow);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .menu-overlay.open {
    display: block;
  }
  .content {
    padding: 12px 10px;
    padding-top: 52px;
  }

  .section-customer {
    grid-template-columns: repeat(2, 1fr);
  }
  .row-entry-table {
    grid-template-columns: 1fr;
  }
  .row-bottom {
    flex-direction: column;
  }
  .row-bottom .form-section,
  .row-bottom .search-table-wrapper {
    width: 100%;
  }
  .section-item-entry {
    flex-direction: column;
  }
  .section-item-entry .field-group {
    width: 100%;
  }

  .payment-customer {
    grid-template-columns: repeat(2, 1fr);
  }
  .payment-middle {
    grid-template-columns: 280px 1fr;
  }

  .mf-body {
    grid-template-columns: 1fr 180px 220px;
    grid-template-rows: 1fr auto;
    height: 420px !important;
  }
  .mf-canvas-wrap {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .mf-body .mf-parts-card {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .mf-body .mf-right {
    grid-column: 3;
    grid-row: 1;
    overflow-y: auto;
  }
  .mf-body .mf-extra-card {
    grid-column: 3;
    grid-row: 2;
    height: auto;
    min-height: 150px;
  }

  .ks-main-grid {
    grid-template-columns: 200px 1fr;
  }
  .ks-order-card {
    grid-column: 1 / -1;
  }

  .kdw-main-grid {
    grid-template-columns: 180px 1fr;
  }
}

@media (max-width: 768px) {
  .section-customer {
    grid-template-columns: 1fr 1fr;
  }
  .payment-customer {
    grid-template-columns: 1fr 1fr;
  }
  .payment-summary {
    grid-template-columns: 1fr 1fr;
  }
  .payment-middle {
    grid-template-columns: 1fr;
  }

  .mf-body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px auto auto;
    height: auto !important;
  }
  .mf-canvas-wrap {
    grid-column: 1;
    grid-row: 1;
    height: 280px;
  }
  #measurement-canvas {
    height: 280px;
  }
  .mf-body .mf-parts-card {
    grid-column: 2;
    grid-row: 1;
    height: 280px;
  }
  .mf-body .mf-right {
    grid-column: 1 / 3;
    grid-row: 2;
    height: auto;
    min-height: 300px;
  }
  .mf-body .mf-extra-card {
    grid-column: 1 / 3;
    grid-row: 3;
    height: auto;
    min-height: 180px;
  }

  .ks-main-grid {
    grid-template-columns: 1fr;
  }
  .ks-order-card {
    grid-column: 1;
  }

  .kdw-main-grid {
    display: flex;
    flex-direction: column;
  }
  .kdw-profile-card {
    position: static;
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px 14px;
  }
  .kdw-profile-card .kdw-section-label {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .kdw-photo-wrap {
    grid-column: 1;
    grid-row: 2 / 4;
    width: 110px;
    aspect-ratio: 3/4;
  }
  .kdw-profile-fields {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .kdw-right-col {
    width: 100%;
    min-width: 0;
  }
  .kdw-total-cards {
    flex-wrap: wrap;
    gap: 14px;
  }
  .kdw-actions {
    justify-content: stretch;
  }
  .kdw-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .section-customer {
    grid-template-columns: 1fr;
  }
  .section-laundry {
    flex-direction: column;
  }
  .section-laundry .laundry-col {
    width: 100%;
  }
  .section-amount {
    grid-template-columns: auto 1fr;
  }
  .payment-customer {
    grid-template-columns: 1fr;
  }
  .payment-summary {
    grid-template-columns: 1fr;
  }

  .mf-body {
    grid-template-columns: 1fr;
    height: auto !important;
  }
  .mf-canvas-wrap {
    grid-column: 1;
    grid-row: 1;
    height: 220px;
  }
  #measurement-canvas {
    height: 220px;
  }
  .mf-body .mf-parts-card {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 180px;
  }
  .mf-body .mf-right {
    grid-column: 1;
    grid-row: 3;
    height: auto;
  }
  .mf-body .mf-extra-card {
    grid-column: 1;
    grid-row: 4;
    height: auto;
  }
  .mf-parts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mf-customer {
    grid-template-columns: 1fr;
  }

  .kdw-profile-card {
    grid-template-columns: 90px 1fr;
  }
  .kdw-photo-wrap {
    width: 90px;
  }
  .kdw-profile-fields {
    min-width: 0;
    overflow: hidden;
  }
  .kdw-total-cards {
    flex-direction: column;
    gap: 8px;
  }
  .kdw-filter-row .field-group {
    flex: 1 1 100%;
  }
  .kdw-summary-scroll {
    max-height: 160px;
  }
  .kdw-work-scroll {
    max-height: 260px;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .mf-body {
    grid-template-columns: 1fr 160px 180px 180px;
    height: 280px !important;
    overflow: hidden;
  }
  .mf-canvas-wrap {
    grid-column: 1;
  }
  .mf-body .mf-parts-card {
    grid-column: 2;
  }
  .mf-body .mf-right {
    grid-column: 3;
    overflow-y: auto;
  }
  .mf-body .mf-extra-card {
    grid-column: 4;
    overflow-y: auto;
  }
  .mf-measurements {
    gap: 3px 4px;
  }
  .mf-measurements .input {
    padding: 2px 5px;
    font-size: 10px;
  }
  .mf-customer {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4px 8px;
  }
}

/* ============================================================
   ADD KAREEGARS PAGE — CSS
   ============================================================ */

.ak-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}
.ak-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.ak-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
}

/* SEARCH */
.ak-search {
  padding: 12px 20px;
}
.ak-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 400px;
}
.ak-search-row .input {
  flex: 1;
}

/* MAIN GRID */
.ak-main-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
}

/* LEFT CARD */
.ak-form {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 16px;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}

/* DARK PROFILE HEADER */
.ak-photo-col {
  background: linear-gradient(145deg, #0d1017 0%, #13161f 60%, #1a1e2e 100%);
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
}
.ak-photo-col::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c55, transparent);
}

.ak-photo-wrap {
  width: 90px;
  height: 108px;
  border: 2px solid rgba(201, 168, 76, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.ak-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: #f0f2f8;
  letter-spacing: 0.3px;
  text-align: center;
  word-break: break-word;
}
.ak-profile-code {
  font-size: 10px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}

.ak-choose-photo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  padding: 5px 14px;
  cursor: pointer;
  margin-top: 2px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.ak-choose-photo-btn:hover {
  background: rgba(201, 168, 76, 0.15);
  border-color: #c9a84c;
  color: #fff;
}

/* FIELDS WRAP */
.ak-fields-wrap {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
.ak-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ACTIONS */
.ak-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.ak-actions .btn {
  width: 100%;
  justify-content: center;
}
.ak-btn-update {
  background: #2563eb;
  color: #fff;
}
.ak-btn-update:hover:not(:disabled) {
  background: #1d4ed8;
}
.ak-btn-delete {
  background: #fff;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.ak-btn-delete:hover:not(:disabled) {
  background: #fff5f5;
}

/* RIGHT TABLE */
.ak-table-section {
  padding: 14px 20px;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ak-main-grid {
    grid-template-columns: 260px 1fr;
  }
}
@media (max-width: 768px) {
  .ak-container {
    padding: 8px 4px;
  }
  .ak-main-grid {
    grid-template-columns: 1fr;
  }
  .ak-form {
    position: static !important;
  }
  .ak-search {
    padding: 12px 10px;
  }
  .ak-search-row {
    max-width: 100%;
  }
  .ak-actions {
    flex-direction: row;
  }
  .ak-actions .btn {
    flex: 1;
  }
  .ak-table-section {
    padding: 12px 10px;
  }
}
@media (max-width: 480px) {
  .ak-actions {
    flex-direction: column;
  }
}
/* ============================================================
   CLOTHES PURCHASE PAGE — CSS
   File: clothes_purchase.html
   ============================================================ */

.cp-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
}
.cp-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.cp-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* New Shop bar */
.cp-new-shop-bar {
  padding: 14px 20px;
}
.cp-new-shop-fields {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.cp-new-shop-fields .field-group {
  flex: 1;
  min-width: 140px;
}
.cp-new-shop-address {
  flex: 2 !important;
}
.cp-new-shop-btn {
  flex: 0 0 auto !important;
}

/* 3-column grid */
.cp-main-grid {
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

/* COL 1 */
.cp-col1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.cp-shop {
  padding: 14px 16px;
}
.cp-shop-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cp-row-gap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cp-row-gap .input {
  flex: 1;
  min-width: 0;
}
.cp-sm-btn {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 11px;
}

/* Image Preview */
.cp-preview-card {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.cp-preview-img {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Buttons */
.cp-btns-card {
  padding: 14px 16px;
}
.cp-final-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-final-btns .btn {
  width: 100%;
  justify-content: center;
}
.cp-btn-update {
  background: #2563eb;
  color: #fff;
}
.cp-btn-update:hover:not(:disabled) {
  background: #1d4ed8;
}
.cp-btn-delete {
  background: #fff;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.cp-btn-delete:hover:not(:disabled) {
  background: #fff5f5;
}

/* COL 2 */
.cp-col2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.cp-clothes-card {
  padding: 14px 16px;
  min-width: 0;
}

/* Clothes list — fixed height, scroll after 7 rows */
.cp-clothes-scroll {
  max-height: 272px;
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
}
.cp-clothes-scroll .ui-table {
  min-width: 600px;
}
.cp-clothes-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.cp-clothes-scroll .ui-table th,
.cp-clothes-scroll .ui-table td {
  font-size: 11px;
  padding: 6px 8px;
  white-space: nowrap;
}

.cp-grand-card {
  padding: 14px 16px;
}
.cp-total-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cp-add-clothes {
  padding: 14px 16px;
}
.cp-clothes-fields {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}

/* COL 3 */
.cp-col3 {
  position: sticky;
  top: 16px;
  min-width: 0;
}
.cp-invoice-card {
  padding: 14px 14px;
}
.cp-invoice-scroll {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.cp-invoice-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.cp-invoice-scroll .ui-table th,
.cp-invoice-scroll .ui-table td {
  font-size: 11px;
  padding: 7px 8px;
}

/* Modal */
.cp-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.cp-modal-inner {
  position: relative;
}
.cp-modal-img {
  max-width: 90vw;
  max-height: 90vh;
  border: 4px solid #fff;
  border-radius: var(--radius);
}
.cp-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark Shop Details card — Add Kareegar style */
.cp-shop {
  background: #1a1e2e;
}
.cp-shop .cp-section-label {
  color: #c9a84c;
}
.cp-shop .label {
  color: #aab4c8;
}
.cp-shop .input {
  background: #252a3d;
  border-color: #3a4060;
  color: #e8eaf0;
}
.cp-shop .input:focus {
  border-color: #c9a84c;
  outline: none;
}
.cp-shop .cp-row-gap .btn {
  background: #c9a84c;
  color: #1a1e2e;
  font-weight: 700;
}

/* Date icon fix — dark background par white dikhe */
.cp-shop input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  cursor: pointer;
}

/* Select dropdown arrow fix */
.cp-shop select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
  .cp-main-grid {
    grid-template-columns: 1fr;
  }
  .cp-col3 {
    position: static;
    order: -1;
  }
  .cp-invoice-scroll {
    max-height: 180px;
  }
  .cp-clothes-fields {
    grid-template-columns: repeat(3, 1fr);
  }
  .cp-total-fields {
    grid-template-columns: repeat(3, 1fr);
  }
  .cp-final-btns {
    flex-direction: row;
  }
  .cp-final-btns .btn {
    flex: 1;
  }
}
@media (max-width: 768px) {
  .cp-container {
    padding: 8px;
    overflow-x: hidden;
  }
  .cp-main-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .cp-col1,
  .cp-col2,
  .cp-col3 {
    width: 100%;
    min-width: 0;
  }
  .cp-col3 {
    position: static;
    order: -1;
  }
  .cp-invoice-scroll {
    max-height: 180px;
  }
  .cp-clothes-fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .cp-total-fields {
    grid-template-columns: 1fr;
  }
  .cp-final-btns {
    flex-direction: row;
  }
  .cp-final-btns .btn {
    flex: 1;
  }
  .cp-clothes-scroll .ui-table {
    min-width: 500px;
  }
}
@media (max-width: 480px) {
  .cp-clothes-fields {
    grid-template-columns: 1fr;
  }
  .cp-total-fields {
    grid-template-columns: 1fr;
  }
  .cp-final-btns {
    flex-direction: column;
  }
  .cp-clothes-scroll .ui-table {
    min-width: 420px;
  }
}
/* ============================================================
   SUPPLIER LEDGER PAGE — CSS
   File: supplier_ledger.html
   ============================================================ */

.sl-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.sl-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.sl-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* Row status colors */
.row-paid {
  background: #f0fdf4 !important;
}
.row-pending {
  background: #fffbeb !important;
}
.row-selected {
  outline: 2px solid #2563eb;
}

/* Topbar */
.sl-topbar {
  padding: 14px 20px;
}
.sl-topbar-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.sl-shop-group {
  flex: 0 0 280px;
}
.sl-btn-print {
  flex: 0 0 auto;
}

/* Shop Profile Card */
.sl-shop-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1a1e2e;
  border: 1px solid #c9a84c44;
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 14px;
}
.sl-shop-avatar {
  width: 48px;
  height: 48px;
  background: #252a3d;
  border: 2px solid #c9a84c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sl-shop-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: #e8eaf0;
  letter-spacing: 0.3px;
}
.sl-profile-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #aab4c8;
}

.sl-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.sl-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sl-summary-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sl-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.sl-paid {
  color: #16a34a;
}
.sl-remaining {
  color: #dc2626;
}

/* Invoice table */
.sl-invoice-section {
  padding: 14px 20px;
}

/* Bottom: Payment | History */
.sl-bottom-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}

/* Payment box */
.sl-payment-box {
  padding: 16px 20px;
}
.sl-payment-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* History box */
.sl-history-box {
  padding: 16px 20px;
}
.sl-history-scroll {
  max-height: 280px;
  overflow-y: auto;
}
.sl-history-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Invoice preview */
.sl-invoice-preview {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.sl-invoice-img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Modal */
.sl-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.sl-modal-inner {
  position: relative;
}
.sl-modal-img {
  max-width: 90vw;
  max-height: 90vh;
  border: 4px solid #fff;
  border-radius: var(--radius);
}
.sl-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .sl-bottom-grid {
    grid-template-columns: 1fr;
  }
  .sl-shop-group {
    flex: 1;
  }
  .sl-summary {
    gap: 16px;
  }
  .sl-shop-profile {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/* ============================================================
   CLOTHES STOCKS PAGE — CSS
   File: clothes_stocks.html
   ============================================================ */

.cs-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.cs-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.cs-table-section {
  padding: 14px 20px;
}

/* Status badge */
.cs-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cs-status-ok {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.cs-status-low {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.cs-status-out {
  background: #fff1f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Row colors */
.cs-row-low {
  background: #fffbeb !important;
}
.cs-row-out {
  background: #fff1f2 !important;
}
/* ============================================================
   STAFF MANAGEMENT PAGE — staff_management.html
   ============================================================ */

.sm-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.sm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.sm-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* Main grid */
.sm-main-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

/* Form card */
.sm-form-card {
  padding: 0 0 16px 0;
  position: sticky;
  top: 16px;
  overflow: hidden;
  min-width: 0;
}

/* ── DARK PROFILE HEADER ── */
.sm-profile-header {
  background: linear-gradient(145deg, #0d1017 0%, #13161f 60%, #1a1e2e 100%);
  border-radius: 10px 10px 0 0;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
}
.sm-profile-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c55, transparent);
}

/* Photo wrap — bada size */
.sm-profile-photo-wrap {
  position: relative;
  width: 120px;
  height: 145px;
  border-radius: 10px;
  border: 2px solid rgba(201, 168, 76, 0.4);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.sm-profile-photo-wrap:hover {
  border-color: var(--color-gold);
}
.sm-profile-photo-wrap:hover .sm-photo-zoom-hint {
  opacity: 1;
}
.sm-profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sm-photo-zoom-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 11px;
  gap: 4px;
}
.sm-profile-header-name {
  font-size: 16px;
  font-weight: 700;
  color: #f0f2f8;
  letter-spacing: 0.3px;
  text-align: center;
}
.sm-profile-header-role {
  font-size: 11px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}
.sm-profile-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 16px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 20px;
  color: var(--color-gold);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.sm-profile-upload-label:hover {
  background: rgba(201, 168, 76, 0.22);
  border-color: var(--color-gold);
}

/* Form grid */
.sm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 0 16px;
  min-width: 0;
}
.sm-form-grid .field-group {
  min-width: 0;
}
.sm-form-grid .input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.sm-code-row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.sm-code-row .input {
  flex: 1;
  min-width: 0;
}
.sm-btn-auto {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 11px;
}

/* Form actions */
.sm-form-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px 0;
  border-top: 1px solid var(--border);
}
.sm-btn-clear {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.sm-btn-clear:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Right col */
.sm-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Search */
.sm-search-card {
  padding: 14px 20px;
}
.sm-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sm-search-row .input {
  flex: 1;
  min-width: 0;
}

/* Staff list */
.sm-list-card {
  padding: 14px 20px;
}
.sm-table-scroll {
  max-height: 520px;
  overflow-y: auto;
}
.sm-table-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Table photo */
.sm-table-thumb {
  width: 44px;
  height: 54px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
  display: block;
  transition: opacity 0.15s;
}
.sm-table-thumb:hover {
  opacity: 0.8;
}
.sm-table-thumb-placeholder {
  width: 44px;
  height: 54px;
  border-radius: 5px;
  background: #e8eaf0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Status badge */
.sm-status-active {
  display: inline-block;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}
.sm-status-inactive {
  display: inline-block;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Photo modal */
.sm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  backdrop-filter: blur(3px);
}
.sm-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.sm-modal-box {
  position: relative;
  background: #1a1e2e;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-width: 340px;
  width: 90%;
  transform: scale(0.95);
  transition: transform 0.2s;
}
.sm-modal-overlay.active .sm-modal-box {
  transform: scale(1);
}
.sm-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s;
}
.sm-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.sm-modal-img {
  width: 200px;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid #c9a84c;
  display: block;
}
.sm-modal-name {
  color: #f0f2f8;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sm-main-grid {
    grid-template-columns: 300px 1fr;
  }
}
@media (max-width: 768px) {
  .sm-main-grid {
    grid-template-columns: 1fr;
  }
  .sm-form-card {
    position: static;
  }
  .sm-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Mobile overflow fix */
  .sm-container {
    overflow-x: hidden;
  }
}
@media (max-width: 480px) {
  .sm-form-grid {
    grid-template-columns: 1fr;
  }
  .sm-profile-photo-wrap {
    width: 100px;
    height: 120px;
  }
}
/* ============================================================
   STAFF SALARY PAGE — CSS
   File: staff_salary.html
   ============================================================ */

.ss-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.ss-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.ss-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* ── Entry bar ── */
.ss-entry-bar {
  padding: 14px 20px;
}
.ss-entry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.ss-entry-row .field-group {
  flex: 1;
  min-width: 130px;
}
.ss-note-field {
  flex: 2 !important;
}
.ss-submit-field {
  flex: 0 0 auto;
}
.ss-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 6px 20px;
}

/* ── Middle grid ── */
.ss-mid-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}
.ss-mid-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Profile card ── */
.ss-profile-card {
  padding: 0 0 14px 0;
  overflow: hidden;
}

/* Dark header — same as staff management */
.ss-profile-header {
  background: linear-gradient(145deg, #0d1017 0%, #13161f 60%, #1a1e2e 100%);
  border-radius: 10px 10px 0 0;
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
  margin-bottom: 14px;
}
.ss-profile-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c55, transparent);
}

/* Photo — portrait rectangle */
.ss-profile-photo-wrap {
  width: 90px;
  height: 108px;
  border-radius: 8px;
  border: 2px solid rgba(201, 168, 76, 0.4);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.ss-profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-profile-header-name {
  font-size: 14px;
  font-weight: 700;
  color: #f0f2f8;
  letter-spacing: 0.3px;
  text-align: center;
}
.ss-profile-header-role {
  font-size: 10px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}

/* Details below header */
.ss-profile-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.ss-info-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ss-info-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 76px;
}
.ss-info-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Summary */
.ss-summary-card {
  padding: 14px 20px;
}
.ss-summary-body {
  font-size: 13px;
  line-height: 2;
  color: var(--text-primary);
}
.ss-warning {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-danger);
  margin-top: 6px;
}

/* Right col */
.ss-mid-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
}
.ss-staff-card {
  padding: 14px 20px;
}
.ss-search-row {
  margin-bottom: 10px;
}
.ss-staff-scroll {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
.ss-staff-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* History */
.ss-history-card {
  padding: 14px 20px;
}
.ss-history-scroll {
  max-height: 240px;
  overflow-y: auto;
}
.ss-history-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Responsive */
@media (max-width: 1024px) {
  .ss-mid-grid {
    grid-template-columns: 270px 1fr;
  }
}
@media (max-width: 768px) {
  .ss-mid-grid {
    grid-template-columns: 1fr;
  }
  .ss-mid-right {
    position: static;
  }
  .ss-staff-scroll {
    max-height: 260px;
  }
  .ss-entry-row .field-group {
    flex: 1 1 45%;
  }
  .ss-note-field {
    flex: 1 1 100% !important;
  }
}
@media (max-width: 480px) {
  .ss-entry-row .field-group {
    flex: 1 1 100%;
  }
}
/* ============================================================
   DAILY EXPENSES PAGE — CSS
   File: daily_expenses.html
   ============================================================ */

.de-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.de-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.de-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* Main grid: Form left | Table right */
.de-main-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}

/* LEFT: Form */
.de-form-card {
  padding: 16px 20px;
  position: sticky;
  top: 16px;
}
.de-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.de-full {
  grid-column: 1 / -1;
}

.de-textarea {
  resize: vertical;
  min-height: 70px;
  font-family: var(--font-body);
}

.de-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.de-preview-img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity var(--transition);
}
.de-preview-img:hover {
  opacity: 0.85;
}

/* Image Lightbox (enlarged invoice image view) */
.de-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10500;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.de-lightbox-overlay.active {
  display: flex;
}
.de-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.de-lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.de-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Buttons */
.de-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.de-actions .btn {
  width: 100%;
  justify-content: center;
}

.de-btn-update {
  background: #2563eb;
  color: #fff;
}
.de-btn-update:hover:not(:disabled) {
  background: #1d4ed8;
}

.de-btn-delete {
  background: #fff;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.de-btn-delete:hover:not(:disabled) {
  background: #fff5f5;
}

.de-btn-cancel {
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.de-btn-cancel:hover {
  background: #f5f5f5;
}

.de-btn-remove {
  background: #fff;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  font-size: 11px;
  padding: 4px 10px;
  align-self: flex-start;
}

/* RIGHT */
.de-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.de-table-card {
  padding: 14px 20px;
}
.de-table-scroll {
  max-height: 500px;
  overflow-y: auto;
}
.de-table-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Totals */
.de-totals-card {
  padding: 14px 20px;
}
.de-totals-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.de-total-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.de-total-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.de-total-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-gold);
}

/* Responsive */
@media (max-width: 768px) {
  .de-main-grid {
    grid-template-columns: 1fr;
  }
  .de-form-card {
    position: static;
  }
  .de-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .de-actions .btn {
    flex: 1;
    min-width: 80px;
  }
  .de-table-scroll {
    max-height: 300px;
  }
}
/* ============================================================
   RENT AGREEMENT PAGE — CSS
   File: rent_agreement.html
   ============================================================ */

.ra-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.ra-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.ra-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* TOP: Form + Preview side by side */
.ra-top-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

/* Form card */
.ra-form-card {
  padding: 16px 20px;
  position: sticky;
  top: 16px;
}
.ra-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.ra-full {
  grid-column: 1 / -1;
}

/* Form buttons */
.ra-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ra-actions .btn {
  width: 100%;
  justify-content: center;
}

.ra-btn-update {
  background: #2563eb;
  color: #fff;
}
.ra-btn-update:hover:not(:disabled) {
  background: #1d4ed8;
}
.ra-btn-delete {
  background: #fff;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.ra-btn-delete:hover:not(:disabled) {
  background: #fff5f5;
}
.ra-btn-remove {
  background: #fff;
  color: #b45309;
  border: 1px solid #f59e0b;
  font-size: 11px;
}
.ra-btn-remove:hover {
  background: #fffbeb;
}
.ra-btn-cancel {
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.ra-btn-cancel:hover {
  background: #f5f5f5;
}

/* PDF Preview card */
.ra-preview-card {
  padding: 16px 20px;
}
.ra-preview-box {
  width: 100%;
  height: 65vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  background: #f8f8f8;
}
#pdf_canvas {
  display: block;
}

/* Table */
.ra-table-card {
  padding: 14px 20px;
}
.ra-table-scroll {
  max-height: 340px;
  overflow-y: auto;
}
.ra-table-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.ra-has-pdf {
  color: #16a34a;
  font-weight: 600;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
  .ra-top-grid {
    grid-template-columns: 280px 1fr;
  }
}
@media (max-width: 768px) {
  .ra-top-grid {
    grid-template-columns: 1fr;
  }
  .ra-form-card {
    position: static;
  }
  .ra-form-fields {
    grid-template-columns: 1fr;
  }
  .ra-preview-box {
    height: 50vh;
  }
  .ra-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ra-actions .btn {
    flex: 1;
    min-width: 80px;
  }
}
/* ============================================================
   ULTRA MASTER PAGE — CSS (FINAL)
   File: ultra_master.html  |  Paste into your main CSS file
   ============================================================ */

.um-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}
.um-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.um-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* ── Search ── */
.um-search-card {
  padding: 12px 20px;
  /* Neeche wale customer card (left column) jitni width */
  width: 300px;
  max-width: 100%;
  align-self: flex-start;
  box-sizing: border-box;
}
/* ===== ADDED: Search card + top tab buttons ek row mein ===== */
.um-top-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}
.um-top-row .um-search-card {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.um-top-row .um-search-card .um-search-row {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
}
/* Top navbar — search card ke right side me compact group, tabs barabar
   width ke, icon text ke saath ek hi line me, active par gold underline */
.um-top-tabs {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 10px;
}
.um-top-tabs .cp-tab {
  flex: 0 0 180px;
  position: relative;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.um-top-tabs .cp-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.um-top-tabs .cp-tab:hover {
  background: rgba(184, 134, 11, 0.07);
  color: var(--color-gold);
}
.um-top-tabs .cp-tab .cp-tab-underline {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  width: auto;
  height: 3px;
  margin: 0;
  border-radius: 3px 3px 0 0;
}
@media (max-width: 1024px) {
  .um-top-row {
    flex-direction: column;
  }
  .um-top-tabs {
    justify-content: space-around;
  }
  .um-top-tabs .cp-tab {
    flex: 1 1 0;
    padding: 12px 6px;
    font-size: 12px;
    gap: 6px;
  }
}
@media (max-width: 560px) {
  .um-top-tabs .cp-tab {
    flex-direction: column;
    gap: 3px;
    padding: 8px 4px 12px;
  }
}
.um-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.um-search-row .input {
  flex: 1;
  min-width: 0;
  max-width: 500px;
}
.um-btn-reset {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.um-btn-reset:hover {
  background: var(--bg-input);
}

/* ── Main Grid ── */
.um-main-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

/* ── LEFT COL ── */
.um-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
  min-width: 0;
}

/* ── Customer Hero Card — no avatar ── */
.um-customer-card {
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.um-customer-hero {
  background: linear-gradient(135deg, #2a3550 0%, #1a2035 100%) !important;
  border-bottom: 2px solid var(--color-gold);
  padding: 22px 20px 20px;
}
.um-customer-name-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Full name — wrap allowed, no cut off */
.um-customer-fullname {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.um-customer-mobile {
  font-size: 13px;
  color: var(--color-gold-lt);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  word-break: break-all;
}

/* ===== ADDED: Customer Profile jaisa photo + registered email ===== */
.um-customer-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.um-customer-hero-row .um-customer-name-block {
  min-width: 0;
}
.um-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.4);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.um-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
/* Sirf asal photo (clickable) par hover — photo wahi rahegi, sirf gol
   border highlight hoga. Khaali icon par koi effect nahi. */
.um-avatar-wrap:has(.um-avatar-img):hover {
  border-color: rgba(201, 168, 76, 1);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.3);
}
.um-customer-email {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  word-break: break-all;
}
.um-customer-email svg {
  flex-shrink: 0;
  color: var(--color-gold-lt);
}

/* ── Customer Meta ── */
.um-customer-meta {
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
.um-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.um-meta-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.um-meta-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Customer Actions ── */
.um-customer-actions {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}
.um-btn-payment {
  background: #16a34a;
  color: #fff;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}
.um-btn-payment:hover:not(:disabled) {
  background: #15803d;
}

/* ===== ADDED: "Chat with Customer" button — Ultra Master page ===== */
.um-btn-chat {
  background: #2563eb;
  color: #fff;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}
.um-btn-chat:hover:not(:disabled) {
  background: #1d4ed8;
}

/* ── Save All Button ── */
.um-save-all-btn {
  background: var(--color-gold);
  color: #0f1117;
  font-weight: 700;
  font-size: 12px;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.um-save-all-btn:hover {
  background: var(--color-gold-lt);
}
.um-save-msg {
  font-size: 12px;
  font-weight: 600;
  min-height: 18px;
}

/* ── Payment Summary ── */
.um-summary-card {
  padding: 16px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.um-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.um-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.um-summary-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.um-summary-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-balance-due {
  color: #dc2626;
}
.um-balance-ok {
  color: #16a34a;
}

/* ── Payment History ── */
.um-pay-history-card {
  padding: 14px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.um-table-scroll {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.um-table-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── RIGHT COL ── */
.um-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* ===== ADDED: detail cards wrapper + All Invoices view ===== */
.um-detail-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.um-all-invoices-view {
  padding: 14px 20px;
  box-sizing: border-box;
  min-width: 0;
}
.um-hidden {
  display: none !important;
}
/* ===== ADDED: Measurements view (canvas left + Design/Measurements card
   right, jaisa Measurement Form ka card) ===== */
.um-measurements-view {
  padding: 14px 20px;
  box-sizing: border-box;
  min-width: 0;
}
.um-measure-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px 0;
}
.um-measure-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.um-measure-canvas-col {
  min-width: 0;
}
.um-measure-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.um-measure-right-col .mf-right {
  overflow: visible;
  flex: 0 0 auto;
  width: 200px;
}
@media (max-width: 768px) {
  .um-measure-grid {
    grid-template-columns: 1fr;
  }
  .um-measure-right-col .mf-right {
    width: 100%;
  }
}
/* ===== ADDED: Ultra Master Measurements — Customer Notes + Reference Image ===== */
.um-measure-notes {
  width: 100%;
  height: 55px;
  resize: none;
  box-sizing: border-box;
}
.um-measure-ref-card {
  width: 200px;
  margin-top: 14px;
  padding: 12px;
  box-sizing: border-box;
}
.um-ref-preview {
  width: 100%;
  height: 120px;
  margin-top: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
}
.um-ref-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
}
@media (max-width: 768px) {
  .um-measure-ref-card {
    width: 100%;
  }
}
.um-view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.um-view-head .um-section-label {
  margin-bottom: 0;
}
.um-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.um-back-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: #fff7e6;
}
.um-back-btn svg {
  width: 16px;
  height: 16px;
}
[dir="rtl"] .um-back-btn svg {
  transform: scaleX(-1);
}
.um-view-cell {
  text-align: right;
  white-space: nowrap;
}
.um-view-btn {
  padding: 5px 12px;
  font-size: 11px;
  text-decoration: none;
}
.um-order-card {
  padding: 14px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.um-kareegar-card {
  padding: 14px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Table Wrappers ── */
.um-order-card .table-wrapper,
.um-kareegar-card .table-wrapper,
.um-pay-history-card .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Collected qty input ── */
.um-qty-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.um-qty-input {
  width: 65px;
  padding: 4px 6px;
  text-align: center;
}

/* ── Delivery status badges ── */
.um-del-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.um-del-pending-collection {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}
.um-del-partial-collection {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.um-del-collected {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* ── Kareegar status badges ── */
.um-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.um-status-ready {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.um-status-pending {
  background: #fff1f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.um-status-progress {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}
.um-status-cancel {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* ══════════════════════════════════════
   TABLET — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Customer card poori width ka ho jata hai, to search card bhi */
  .um-search-card {
    width: 100%;
    align-self: stretch;
  }
  .um-main-grid {
    grid-template-columns: 1fr;
  }
  .um-left-col {
    position: static;
  }
  .um-customer-hero {
    padding: 20px 16px 18px;
  }
  .um-customer-fullname {
    font-size: 18px;
  }
  .um-container > *,
  .um-left-col > *,
  .um-right-col > * {
    box-sizing: border-box;
    max-width: 100%;
  }
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .ui-table {
    min-width: 500px;
  }
  .um-order-card .table-wrapper .ui-table {
    min-width: 650px;
  }
  .um-kareegar-card .table-wrapper .ui-table {
    min-width: 550px;
  }
  .um-pay-history-card .table-wrapper .ui-table {
    min-width: 400px;
  }
}

/* ══════════════════════════════════════
   MOBILE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .um-container {
    padding: 6px 0;
    gap: 12px;
  }
  .um-title {
    font-size: 16px;
  }
  .um-customer-meta {
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
    gap: 8px;
  }
  .um-meta-label {
    font-size: 8px;
  }
  .um-meta-val {
    font-size: 12px;
  }
  .um-customer-actions {
    padding: 12px 16px;
  }
  .um-summary-card {
    padding: 14px 16px;
  }
  .um-summary-val {
    font-size: 18px;
  }
  .um-order-card,
  .um-kareegar-card,
  .um-pay-history-card {
    padding: 12px 16px;
  }
  .um-search-card {
    padding: 10px 16px;
  }
}

/* ══════════════════════════════════════
   SMALL MOBILE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .um-search-row .input {
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }
  .um-customer-fullname {
    font-size: 16px;
  }
  .um-customer-hero {
    padding: 16px 14px;
  }
  .um-customer-meta {
    padding: 10px 14px;
  }
  .um-summary-val {
    font-size: 16px;
  }
  .um-summary-grid {
    gap: 10px;
  }
  .um-customer-actions {
    padding: 10px 14px;
    gap: 7px;
  }
}
/* ============================================================
   SHOP SETTINGS PAGE — CSS
   File: shop_settings.html
   ============================================================ */

.shp-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.shp-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.shp-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* Main card */
.shp-main-card {
  padding: 20px 24px;
}

.shp-body {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  align-items: start;
  margin-bottom: 16px;
}

/* Fields */
.shp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.shp-span2 {
  grid-column: 1 / -1;
}

/* Logo col */
.shp-logo-col {
  display: flex;
  flex-direction: column;
}
.shp-logo-preview {
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shp-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.shp-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Save button */
.shp-actions {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Subscription bar */
.shp-sub-bar {
  padding: 16px 24px;
}
.shp-sub-row {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}
.shp-sub-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shp-sub-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.shp-sub-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.shp-status-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.shp-status-active {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.shp-status-expired {
  background: #fff1f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.shp-status-default {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 768px) {
  .shp-body {
    grid-template-columns: 1fr;
  }
  .shp-logo-col {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }
  .shp-logo-preview {
    width: 120px;
    aspect-ratio: 1;
    flex-shrink: 0;
  }
}
@media (max-width: 480px) {
  .shp-fields {
    grid-template-columns: 1fr;
  }
  .shp-logo-col {
    flex-direction: column;
  }
  .shp-logo-preview {
    width: 100%;
  }
}
/* ============================================================
   KAREEGAR PAYMENT LEDGER PAGE — CSS
   ============================================================ */

.kpl-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}
.kpl-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.kpl-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* Filter bar */
.kpl-filter {
  padding: 12px 20px;
  box-sizing: border-box;
}
.kpl-filter-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.kpl-filter-row .field-group {
  flex: 1;
  min-width: 120px;
}
.kpl-submit {
  flex: 0 0 auto !important;
}

/* Main grid */
.kpl-main-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
}

/* LEFT */
.kpl-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
  min-width: 0;
  box-sizing: border-box;
}

/* ── DARK PROFILE CARD ── */
.kpl-profile-card {
  padding: 0 0 14px 0;
  overflow: hidden;
  box-sizing: border-box;
}
.kpl-profile-header {
  background: linear-gradient(145deg, #0d1017 0%, #13161f 60%, #1a1e2e 100%);
  border-radius: 10px 10px 0 0;
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
  margin-bottom: 14px;
}
.kpl-profile-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c55, transparent);
}
.kpl-profile-photo-wrap {
  width: 90px;
  height: 108px;
  border-radius: 8px;
  border: 2px solid rgba(201, 168, 76, 0.4);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.kpl-profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kpl-profile-header-name {
  font-size: 15px;
  font-weight: 700;
  color: #f0f2f8;
  letter-spacing: 0.3px;
  text-align: center;
  word-break: break-word;
}
.kpl-profile-header-sub {
  font-size: 10px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}
.kpl-profile-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.kpl-info-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.kpl-info-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 72px;
}
.kpl-info-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-word;
}

/* Payment form */
.kpl-form-card {
  padding: 14px 16px;
  box-sizing: border-box;
}
.kpl-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kpl-form-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.kpl-form-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 11px;
  min-width: 60px;
}
.kpl-btn-clear {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.kpl-btn-update {
  background: #2563eb;
  color: #fff;
}
.kpl-btn-update:hover:not(:disabled) {
  background: #1d4ed8;
}
.kpl-btn-delete {
  background: transparent;
  color: var(--color-danger, #dc2626);
  border: 1px solid var(--color-danger, #dc2626);
}
.kpl-btn-delete:hover:not(:disabled) {
  background: #fff5f5;
}

/* RIGHT */
.kpl-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  box-sizing: border-box;
}
.kpl-design-card {
  padding: 14px 20px;
  overflow-x: auto;
}
.kpl-total-row {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 700;
}

/* Payment Summary */
.kpl-summary-card {
  padding: 14px 20px;
}
.kpl-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kpl-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.kpl-summary-row:last-child {
  border-bottom: none;
}
.kpl-opening {
  font-weight: 600;
}
.kpl-remaining {
  font-weight: 700;
}
.kpl-due {
  color: #dc2626;
  font-weight: 700;
}
.kpl-clear {
  color: #16a34a;
  font-weight: 700;
}

/* Payment History */
.kpl-history-card {
  padding: 14px 20px;
  overflow-x: auto;
}
.kpl-history-scroll {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: auto;
}
.kpl-history-scroll .ui-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Responsive */
@media (max-width: 1024px) {
  .kpl-main-grid {
    grid-template-columns: 260px 1fr;
  }
}
@media (max-width: 768px) {
  .kpl-container {
    padding: 8px 4px;
  }
  .kpl-main-grid {
    grid-template-columns: 1fr;
  }
  .kpl-left-col {
    position: static;
  }
  .kpl-filter {
    padding: 12px 10px;
  }
  .kpl-filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .kpl-filter-row .field-group {
    min-width: unset;
    width: 100%;
  }
  .kpl-submit {
    width: 100%;
  }
  .kpl-submit .btn {
    width: 100%;
    justify-content: center;
  }
  .kpl-form-actions {
    flex-wrap: wrap;
  }
  .kpl-design-card,
  .kpl-history-card {
    padding: 12px 10px;
  }
  .kpl-summary-card {
    padding: 12px 10px;
  }
}

/* ============================================================
   CUSTOMER PROFILE PAGE (PHASE 3 + LEFT-CARD / TOP-TABS REDESIGN)
   — CSS
   NOTE: "cp-" is also used by the unrelated Clothes Purchase page
   (clothes_purchase_form.html) for a few shared/generic utility
   classes (.cp-container, .cp-title, .cp-section-label). The grid
   wrapper here is deliberately named .cp-profile-grid (NOT
   .cp-main-grid) to avoid colliding with that page's own
   .cp-main-grid (a different, 3-column layout).
   ============================================================ */
.cp-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}
.cp-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.cp-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* ── 2-column grid: left sticky profile/stats, right tabs+tables ── */
.cp-profile-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
}

/* ================= LEFT COLUMN ================= */
.cp-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Dark header card: photo + name (gradient), details below ── */
.cp-header-card {
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.cp-header-inner {
  background: linear-gradient(145deg, #0d1017 0%, #13161f 60%, #1a1e2e 100%);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.cp-header-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c55, transparent);
}
.cp-avatar-wrap {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.4);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-header-name {
  font-size: 16px;
  font-weight: 700;
  color: #f0f2f8;
  letter-spacing: 0.3px;
  text-align: center;
  word-break: break-word;
}

/* ── Details (mobile/email) sit on the normal card bg, below the gradient ── */
.cp-header-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
.cp-header-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-header-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cp-header-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-word;
}
.cp-profiles-wrap {
  padding: 12px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--border);
}
.cp-profile-chip {
  background: var(--bg-soft, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.cp-profiles-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  width: 100%;
}

/* ── Stat cards (stacked vertically under the profile card) ── */
.cp-stats-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cp-stat-card {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.cp-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cp-stat-balance .cp-stat-value.cp-due {
  color: #dc2626;
}
.cp-stat-balance .cp-stat-value.cp-clear {
  color: #16a34a;
}

/* ================= RIGHT COLUMN ================= */
.cp-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Top tab bar — adapted from the PWA's bottom-nav (icon + label +
   underline), moved to a horizontal top bar styled for the shop theme ── */
.cp-tabs {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  padding: 8px 10px 0;
}
.cp-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 4px 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.cp-tab svg {
  width: 20px;
  height: 20px;
}
.cp-tab.active {
  color: var(--color-gold);
}
.cp-tab-underline {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  margin-top: 2px;
  background: transparent;
}
.cp-tab.active .cp-tab-underline {
  background: var(--color-gold);
}

/* ── Table sections (tab panels — only the active one is shown, via JS) ── */
.cp-section-card {
  padding: 14px 20px;
  overflow-x: auto;
}
.cp-table-empty {
  text-align: center;
  color: var(--text-secondary);
}

/* ── Measurements tab: canvas (left, flexible) + Design/Measurements
   card + Invoice List (right, side-by-side, width follows their own
   content) — UPDATED ── */
.cp-measure-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.cp-measure-canvas-col {
  min-width: 0;
}
.cp-measure-right-col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  max-width: 100%;
}
.cp-measure-right-col .mf-right {
  overflow: visible;
  flex: 0 0 auto;
  width: 200px;
}
/* Invoice List — apni ek height-limit ke baad khud apna scrollbar le
   leta hai, taake invoices zyada hone par poora page scroll na ho aur
   bagal wala Design/Measurements card ke sath misaligned na ho */
.cp-measure-right-col .search-table-wrapper {
  flex: 0 0 auto;
  width: 260px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.cp-measure-right-col .search-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

@media (max-width: 1024px) {
  .cp-profile-grid {
    grid-template-columns: 220px 1fr;
  }
}
@media (max-width: 768px) {
  .cp-profile-grid {
    grid-template-columns: 1fr;
  }
  .cp-left-col {
    position: static;
  }
  .cp-header-inner {
    padding: 18px 14px;
  }
  .cp-section-card {
    padding: 12px 10px;
  }
  .cp-tab {
    font-size: 11px;
  }
  .cp-measure-grid {
    grid-template-columns: 1fr;
  }
  .cp-measure-right-col {
    flex-direction: column;
  }
  .cp-measure-right-col .mf-right,
  .cp-measure-right-col .search-table-wrapper {
    width: 100%;
  }
}

/* ============================================================
   CUSTOMERS LIST PAGE (PHASE 4) — CSS
   ============================================================ */
.cl-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}
.cl-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.cl-search-bar {
  padding: 14px 20px;
}
.cl-search-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.cl-search-form .field-group {
  flex: 1;
  min-width: 200px;
}
.cl-search-submit {
  flex: 0 0 auto !important;
}
.cl-table-card {
  padding: 14px 20px;
  overflow-x: auto;
}

/* ── "View Profile" small button (Order Form / Kareegar Selection /
   Measurement Form customer header me reuse hota hai) ── */
.cp-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-gold, #c9a84c);
  border: 1px solid var(--color-gold, #c9a84c);
  background: transparent;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.cp-view-btn:hover {
  background: var(--color-gold, #c9a84c);
  color: #0d1017;
}

@media (max-width: 768px) {
  .cl-search-bar {
    padding: 12px 10px;
  }
  .cl-table-card {
    padding: 12px 10px;
  }
}

/* ============================================================
   REGISTER PAGE — CSS
   ============================================================ */

.reg-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 24px 16px;
  box-sizing: border-box;
  margin: 0;
}

.reg-center {
  width: 100%;
  max-width: 380px;
}

.reg-card {
  background: #1a2340;
  border: 1px solid #2a3560;
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.reg-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #2a3560;
}

.reg-title {
  font-size: 18px;
  font-weight: 700;
  color: #c9a84c;
  margin: 0 0 4px 0;
  letter-spacing: 0.3px;
}

.reg-subtitle {
  font-size: 11px;
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}

/* Flash Messages */
.reg-flash {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

.reg-flash-success {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: #4ade80;
}

.reg-flash-error,
.reg-flash-danger {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: #e07070;
}

.reg-flash-warning {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
}

.reg-flash-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}

.reg-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reg-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reg-label {
  font-size: 10px;
  font-weight: 700;
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.reg-input {
  background: #131d35;
  border: 1px solid #2a3560;
  border-radius: 7px;
  color: #e8dcc8;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.reg-input:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}

.reg-btn {
  width: 100%;
  background: linear-gradient(135deg, #c9a84c, #a07830);
  color: #0f0f0f;
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.4px;
  margin-top: 2px;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.reg-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.reg-login-link {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: #8899bb;
  margin-bottom: 0;
}

.reg-login-link a {
  color: #c9a84c;
  text-decoration: none;
  font-weight: 600;
}

.reg-login-link a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .reg-card {
    padding: 20px 14px;
  }
  .reg-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   OTP VERIFY PAGE — CSS
   ============================================================ */

.otp-input {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 8px;
  padding: 12px;
  color: #c9a84c;
}
/* ============================================================
   DASHBOARD v4  |  prefix: db4-   |  WHITE BACKGROUND THEME
   Append this block to the END of static/style.css
   ============================================================ */

.db4-wrap {
  padding: 24px;
  width: 100%;
  flex: 1;
  margin-top: 6px;
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 12px;
}

/* ── Top bar ─────────────────────────────────────────────── */
.db4-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.db4-shop-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db4-shop-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.db4-shop-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.db4-shop-select {
  padding: 6px 10px;
  font-size: 13px;
  min-width: 160px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  color: #1a1a1a;
}
.db4-date {
  font-size: 12px;
  color: #666;
  padding: 4px 12px;
  background: #f4f4f4;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  white-space: nowrap;
}

/* ── Delivery alert banner ───────────────────────────────── */
.db4-alert-banner {
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-radius: 16px;
  padding: 16px 18px;
}
.db4-alert-empty {
  font-size: 13px;
  color: #888;
  text-align: center;
  padding: 24px 12px;
}
.db4-alert-banner-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.db4-badge-count {
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.db4-alert-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.db4-alert-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.db4-chip-red {
  background: #fdeaea;
  color: #c0392b;
  border-color: #f5c6c6;
}
.db4-chip-orange {
  background: #fff3e0;
  color: #b9770e;
  border-color: #f5dba0;
}
.db4-chip-green {
  background: #e9f9ef;
  color: #1e8449;
  border-color: #bfe8cf;
}
.db4-chip-inv {
  font-weight: 700;
}
.db4-chip-days {
  font-size: 11px;
  opacity: 0.85;
}

/* ── Delivery alert list (vertical cards) ───────────────────*/
.db4-alert-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.db4-alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fafbfc;
  border: 1px solid #ebedf2;
}
.db4-alert-item-clickable {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.15s;
}
.db4-alert-item-clickable:hover {
  border-color: #c9a84c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.db4-alert-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
}
.db4-alert-date-d {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}
.db4-alert-date-m {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.85;
}
.db4-alert-date-red {
  background: #fdeaea;
  color: #c0392b;
}
.db4-alert-date-orange {
  background: #fff3e0;
  color: #b9770e;
}
.db4-alert-date-green {
  background: #e9f9ef;
  color: #1e8449;
}
.db4-alert-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db4-alert-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db4-alert-item-sub {
  font-size: 11px;
  color: #999;
}
.db4-alert-pill {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ── Page title ──────────────────────────────────────────── */
.db4-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 6px 0 18px;
}

/* ── Row 3: Upcoming Deliveries + Clothes Stock Live ─────────*/
.db4-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
  align-items: stretch;
}
@media (max-width: 850px) {
  .db4-main-row {
    grid-template-columns: 1fr;
  }
}

.db4-stat-grid {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.db4-stat-card {
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.db4-stat-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.db4-stat-tag-green {
  background: #e9f9ef;
  color: #1e8449;
}
.db4-stat-clickable {
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.15s;
}
.db4-stat-clickable:hover {
  border-color: #c9a84c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.db4-stat-icon {
  color: #1a1a1a;
  opacity: 0.85;
}
.db4-stat-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.db4-stat-label {
  font-size: 14px;
  color: #444;
  font-weight: 500;
}
.db4-stat-val {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
}

/* ── Clothes stock panel ─────────────────────────────────── */
.db4-stock-panel {
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-radius: 16px;
  padding: 16px;
}
.db4-stock-hdr {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0;
}
.db4-stock-hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.db4-stock-viewall {
  font-size: 12px;
  font-weight: 700;
  color: #c9a84c;
}
.db4-stock-viewall:hover {
  text-decoration: underline;
}
.db4-stock-table-wrap {
  max-height: 230px;
  overflow-y: auto;
}
.db4-stock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.db4-stock-table th {
  text-align: left;
  padding: 6px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  background: #fafafa;
}
.db4-stock-table td {
  padding: 7px 6px;
  border-bottom: 1px solid #efefef;
  color: #333;
}
.db4-stock-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.db4-stock-row-clickable:hover {
  background: #fdf8ec;
}
.db4-stock-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db4-stock-num {
  font-weight: 600;
  min-width: 20px;
}
.db4-num-red {
  color: #c0392b;
}
.db4-num-orange {
  color: #b9770e;
}
.db4-mini-bar-wrap {
  flex: 1;
  height: 5px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}
.db4-mini-bar {
  height: 5px;
  border-radius: 3px;
  transition: width 0.7s ease;
}
.db4-bar-red {
  background: #e74c3c;
}
.db4-bar-orange {
  background: #f39c12;
}
.db4-bar-green {
  background: #1a1a1a;
}
.db4-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.db4-status-red {
  background: #fdeaea;
  color: #c0392b;
}
.db4-status-orange {
  background: #fff3e0;
  color: #b9770e;
}
.db4-status-green {
  background: #e9f9ef;
  color: #1e8449;
}

/* ── Today row ────────────────────────────────────────────── */
.db4-today-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 700px) {
  .db4-today-row {
    grid-template-columns: 1fr;
  }
}
.db4-today-card {
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.db4-today-clickable {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.15s;
}
.db4-today-clickable:hover {
  border-color: #c9a84c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.db4-today-highlight {
  border: 1px solid #e74c3c55;
}
.db4-today-label {
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}
.db4-today-val {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}
.db4-today-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.db4-icon-red {
  background: #fdeaea;
  color: #c0392b;
}
.db4-icon-green {
  background: #e9f9ef;
  color: #1e8449;
}
.db4-icon-outline {
  background: #fdeaea;
  color: #c0392b;
}

/* ── Pending box (clickable) ─────────────────────────────── */
.db4-pending-box {
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.db4-pending-box:hover {
  border-color: #c9a84c;
}
.db4-pending-box-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.db4-pending-toggle {
  font-size: 16px;
  color: #888;
}

.db4-pending-list {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}
.db4-table-wrap {
  overflow-x: auto;
}
.db4-pending-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.db4-pending-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.db4-pending-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #f2f2f2;
  color: #333;
  vertical-align: middle;
}
.db4-pending-table tr:last-child td {
  border-bottom: none;
}
.db4-pending-table tr:hover td {
  background: #fafafa;
}
.db4-inv {
  font-weight: 600;
  color: #1a1a1a;
}
.db4-amount {
  font-weight: 600;
  color: #c0392b;
}
.db4-btn-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.db4-btn-payment,
.db4-btn-invoice {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #1a1a1a;
  text-decoration: none;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  white-space: nowrap;
  transition: background 0.15s;
}
.db4-btn-payment:hover,
.db4-btn-invoice:hover {
  background: #1a1a1a;
  color: #fff;
}
.db4-empty {
  text-align: center;
  color: #999;
  padding: 16px;
}

/* ── Future slot (placeholder for new sections) ──────────── */
.db4-future-slot {
  min-height: 1px;
}

/* sidebar badge (keep dark since sidebar is dark) */
.db2-sidebar-badge {
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

.of-delivery-date {
  border-color: #c9a84c88 !important;
}
/*------------------------------------------*/
.sidebar a i {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 8px;
  opacity: 0.7;
}

/* ============================================================
   BASE TEMPLATE — shared/common CSS (base.html)
   ============================================================ */
.tn-bell-wrap {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tn-bell-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #333;
  box-shadow: none;
}
.tn-bell-btn:hover {
  color: #000;
}
.tn-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.tn-renew-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #c0392b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
  animation: tn-pulse 1.8s ease-in-out infinite;
}
.tn-renew-btn:hover {
  background: #a93226;
}
@keyframes tn-pulse {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
  }
  50% {
    box-shadow: 0 2px 16px rgba(192, 57, 43, 0.55);
  }
}
/* ===== CHANGED: Thodi transparency + glass/blur effect — premium
   "frosted glass" look (iPhone notification jaisa). Icons ka color
   pehle jaisa hi solid/clear rahega (sirf card ka background hai,
   icon badges ki clarity par asar nahi) ===== */
.tn-bell-dropdown {
  position: fixed;
  top: 64px;
  right: 20px;
  width: 320px;
  max-height: 420px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(226, 226, 226, 0.6);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
}
.tn-bell-dropdown.tn-open {
  display: flex;
}
.tn-bell-dropdown-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  border-bottom: 1px solid rgba(238, 238, 238, 0.7);
  background: rgba(250, 250, 250, 0.6);
}
.tn-bell-list {
  overflow-y: auto;
  flex: 1;
}
/* ===== CHANGED: Bell dropdown list ka scrollbar ab Apple/macOS-style
   overlay scrollbar hai — normally invisible, sirf hover/interact karne
   par thin rounded gray thumb fade-in jaisa dikhta hai, warna list bilkul
   clean/transparent lagti hai. (Sirf ::-webkit-scrollbar pseudo-elements
   use kiye — scrollbar-width/scrollbar-color standard properties jaan
   bojh kar nahi lagaye, kyunke Chrome unko ::-webkit-scrollbar ke saath
   mila kar native OS-style scrollbar (arrows wala) bana deta hai) ===== */
.tn-bell-list::-webkit-scrollbar {
  width: 6px;
}
.tn-bell-list::-webkit-scrollbar-track {
  background: transparent;
}
.tn-bell-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}
.tn-bell-list:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35);
}
.tn-bell-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}
/* ===== CHANGED: Har notification type (measurement/chat/delivery/
   subscription) ka apna colored icon-badge — ek nazar mein pehchaan ho
   jaye ye notification kis cheez ki hai. Row ab flex layout mein hai
   (icon + content side by side), body 2 lines tak clamp hoti hai taake
   list saaf/compact rahe. ===== */
.tn-bell-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(242, 242, 242, 0.7);
  cursor: pointer;
  transition: background 0.15s;
}
.tn-bell-item:hover {
  background: rgba(250, 250, 250, 0.55);
}
.tn-bell-item.tn-unread {
  background: rgba(251, 250, 255, 0.55);
}
/* ===== CHANGED: Icon badge ko zyada premium/glossy look — gol circle
   ki jagah ab rounded-square (squircle), colored soft shadow neeche,
   aur andar ek halki diagonal "shine" layer (::before) ===== */
.tn-bell-item-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  overflow: hidden;
}
.tn-bell-item-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}
.tn-bell-item-icon svg {
  position: relative;
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.tn-bell-item-content {
  flex: 1;
  min-width: 0;
}
.tn-bell-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tn-bell-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.tn-bell-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9342b;
  flex-shrink: 0;
  margin-top: 4px;
}
.tn-bell-item-body {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tn-bell-item-time {
  font-size: 11px;
  color: #aaa;
}
.tn-bell-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: #999;
}

/* ===== Notification type colors — dropdown list + toast dono mein
   reuse hote hain. Har badge ke neeche uske apne color ka halka,
   soft "glow" shadow bhi hai — flat na lage, thoda depth/premium
   feel aaye. ===== */
.tn-type-measurement .tn-bell-item-icon,
.tn-type-measurement .tn-toast-icon {
  background: linear-gradient(145deg, #8b7cf6, #6d5bd0);
  box-shadow: 0 4px 10px -2px rgba(109, 91, 208, 0.5);
}
.tn-type-chat .tn-bell-item-icon,
.tn-type-chat .tn-toast-icon {
  background: linear-gradient(145deg, #34d399, #16a34a);
  box-shadow: 0 4px 10px -2px rgba(22, 163, 74, 0.5);
}
.tn-type-delivery .tn-bell-item-icon,
.tn-type-delivery .tn-toast-icon {
  background: linear-gradient(145deg, #fbbf24, #d97706);
  box-shadow: 0 4px 10px -2px rgba(217, 119, 6, 0.5);
}
.tn-type-delivery-overdue .tn-bell-item-icon,
.tn-type-delivery-overdue .tn-toast-icon {
  background: linear-gradient(145deg, #f87171, #dc2626);
  box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.5);
}
.tn-type-warning .tn-bell-item-icon,
.tn-type-warning .tn-toast-icon {
  background: linear-gradient(145deg, #f87171, #dc2626);
  box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.5);
}
.tn-type-announcement .tn-bell-item-icon,
.tn-type-announcement .tn-toast-icon {
  background: linear-gradient(145deg, #60a5fa, #2563eb);
  box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.5);
}
.tn-type-new-order .tn-bell-item-icon,
.tn-type-new-order .tn-toast-icon {
  background: linear-gradient(145deg, #22d3ee, #0891b2);
  box-shadow: 0 4px 10px -2px rgba(8, 145, 178, 0.5);
}
.tn-type-default .tn-bell-item-icon,
.tn-type-default .tn-toast-icon {
  background: linear-gradient(145deg, #cbd5e1, #94a3b8);
  box-shadow: 0 4px 10px -2px rgba(100, 116, 139, 0.4);
}
.sidebar a.tn-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
#tnToastContainer {
  position: fixed;
  top: 64px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10001;
  width: 300px;
  pointer-events: none;
}

/* ===== ADDED: Real-time notification toast card — pehle isko koi CSS
   nahi mili thi (bilkul plain/unstyled text dashboard ke upar dikhta
   tha). Ab bell dropdown jaisa hi professional card look — white
   background, type ka colored icon, smooth slide-in/fade. ===== */
.tn-toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(235, 237, 242, 0.7);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 30, 70, 0.14);
  padding: 13px 14px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tn-toast.tn-toast-show {
  opacity: 1;
  transform: translateX(0);
}
.tn-toast-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  overflow: hidden;
}
.tn-toast-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}
.tn-toast-icon svg {
  position: relative;
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.tn-toast-content {
  flex: 1;
  min-width: 0;
}
.tn-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.tn-toast-body {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== ADDED: Announcement notification click karne par poora title +
   body dikhane wala popup — dashboard ke existing .db4-modal- pattern se
   consistent design, lekin base.html mein hone ki wajah se har page par
   kaam karta hai ===== */
.tn-ann-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10002;
  align-items: center;
  justify-content: center;
}
.tn-ann-modal-overlay.tn-ann-modal-open {
  display: flex;
}
.tn-ann-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 90%;
  max-width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.tn-ann-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.tn-ann-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tn-ann-modal-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #60a5fa, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tn-ann-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.tn-ann-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #eee;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #555;
  transition: background 0.15s;
  flex-shrink: 0;
}
.tn-ann-modal-close:hover {
  background: #eee;
  color: #111;
}
.tn-ann-modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

/* ===== Flash Messages (category-based colors, contained width) ===== */
.tn-flash-wrap {
  max-width: 640px;
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tn-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
}
.tn-flash i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tn-flash-msg {
  flex: 1;
}
.tn-flash-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  color: inherit;
}
.tn-flash-close:hover {
  opacity: 1;
}
.tn-flash-success {
  background: #eafaf1;
  border-color: #b9e8cd;
  color: #1e7d43;
}
.tn-flash-danger {
  background: #fdedec;
  border-color: #f3c1bd;
  color: #b3392c;
}
.tn-flash-warning {
  background: #fef8e8;
  border-color: #f4e0a5;
  color: #92720c;
}
.tn-flash-info {
  background: #eaf2fd;
  border-color: #bcd6f7;
  color: #1c5aa6;
}
@media (max-width: 768px) {
  .tn-bell-dropdown {
    right: 10px;
    left: 10px;
    width: auto;
  }
  .tn-bell-wrap {
    right: 10px;
  }
  #tnToastContainer {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* ============================================================
   DASHBOARD PAGE — additional CSS (dashboard.html)
   ============================================================ */
.db4-kandura-icon {
  display: block;
  width: 64px;
  height: 64px;
}
.db4-kandura-icon svg {
  width: 100%;
  height: 100%;
}
.db4-today-icon .db4-kandura-icon {
  width: 38px;
  height: 38px;
}
.db4-kandura-icon.red svg g {
  fill: #e53e3e;
}
.db4-kandura-icon.green svg g {
  fill: #38a169;
}
.db4-kandura-icon.outline svg g {
  fill: #c53030;
}
.db4-stat-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 14px 14px 0px !important;
  min-height: auto !important;
}
.db4-stat-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
}
.db4-kandura-icon {
  display: block;
  width: 80px !important;
  height: 80px !important;
}
.db4-stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db4-stat-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: none !important;
}
@media (max-width: 600px) {
  .db4-stat-grid {
    grid-template-columns: 1fr !important;
  }
}
.db4-stat-amber .db4-stat-icon,
.db4-stat-green .db4-stat-icon,
.db4-stat-blue .db4-stat-icon {
  background: transparent;
}
.db4-pending-mini-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-radius: 14px;
  padding: 10px 16px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.15s;
  user-select: none;
  margin-bottom: 18px;
}
.db4-pending-mini-card:hover {
  border-color: #c0392b;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.1);
}
.db4-pending-mini-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fdeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #c0392b;
}
.db4-pending-mini-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.db4-pending-mini-label {
  font-size: 11px;
  color: #888;
  font-weight: 500;
}
.db4-pending-mini-amount {
  font-size: 18px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.1;
}
.db4-pending-mini-sub {
  font-size: 10px;
  color: #aaa;
}
.db4-pending-mini-arrow {
  font-size: 13px;
  color: #bbb;
  margin-left: 4px;
}
.db4-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.db4-modal-overlay.db4-modal-open {
  display: flex;
}
.db4-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 90%;
  max-width: 820px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.db4-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.db4-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.db4-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.db4-modal-icon-currency {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
}
.db4-modal-icon-currency .aed-icon svg {
  width: 17px;
  height: 17px;
}
.db4-modal-badge {
  background: #fdeaea;
  color: #c0392b;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid #f5c6c6;
}
.db4-modal-total {
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.db4-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #eee;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #555;
  transition: background 0.15s;
  flex-shrink: 0;
}
.db4-modal-close:hover {
  background: #eee;
  color: #111;
}
.db4-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}
.db4-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.db4-modal-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fafafa;
  position: sticky;
  top: 0;
  z-index: 1;
}
.db4-modal-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f2f2f2;
  color: #333;
  vertical-align: middle;
}
.db4-modal-table tr:last-child td {
  border-bottom: none;
}
.db4-modal-table tr:hover td {
  background: #fafafa;
}
.db4-modal-empty {
  text-align: center;
  padding: 40px;
  color: #aaa;
  font-size: 14px;
}

/* ── Low stock toast (bottom-right) ──────────────────────── */
.stock-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid #ebedf2;
  border-left: 4px solid #db7e22;
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(27, 31, 39, 0.25);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: db4StockToastIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.stock-toast-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fef3e8;
  color: #db7e22;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stock-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
}
.stock-toast-msg {
  font-size: 12.5px;
  color: #888;
  margin-top: 3px;
  line-height: 1.4;
}
.stock-toast-close {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: #888;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stock-toast-close:hover {
  background: #f4f4f4;
}
@keyframes db4StockToastIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stock-toast {
    animation: none;
  }
}
@media (max-width: 500px) {
  .stock-toast {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}

/* ══ GLOBAL OWNER BAR ══ */
.ogb-bar {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transition: opacity 0.5s;
}
.ogb-small-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 55px;
  padding: 10px 20px;
}
.ogb-icon-sm {
  font-size: 20px;
  flex-shrink: 0;
}
.ogb-title-sm {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.ogb-body-sm {
  font-size: 13px;
  opacity: 0.85;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogb-link-sm {
  font-size: 12px;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
  flex-shrink: 0;
  white-space: nowrap;
}
.ogb-medium-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 120px;
  padding: 20px 28px;
}
.ogb-icon-md {
  font-size: 44px;
  flex-shrink: 0;
  line-height: 1;
}
.ogb-text-md {
  flex: 1;
  min-width: 0;
}
.ogb-title-md {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ogb-body-md {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.5;
}
.ogb-link-md {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: inherit;
  opacity: 0.8;
  text-decoration: underline;
}
.ogb-img-md {
  max-height: 86px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
/* ===== ADDED: Owner Banners list (dashboard ke "ogb-banners-container"
   wale) ke Image/Video type banners ke liye — teeno sizes. Pehle ye
   banners sirf ek generic icon dikhate the, media_url kabhi use hi nahi
   hota tha. ===== */
.ogb-img-sm,
.ogb-video-sm {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.ogb-video-md {
  max-height: 86px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.ogb-banner-lg .ogb-blg-media {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  margin: 0 auto 14px;
}
.ogb-large-inner {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  text-align: center;
}
.ogb-icon-lg {
  font-size: 56px;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.ogb-title-lg {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.2;
}
.ogb-body-lg {
  font-size: 16px;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}
.ogb-link-lg {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: inherit;
  opacity: 0.8;
  text-decoration: underline;
}
.ogb-img-lg {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.ogb-video-lg {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.ogb-anim-bar {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
}
.ogb-anim-wrap {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.ogb-anim-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  padding-left: 100%;
  animation: ogb-marquee 22s linear infinite;
}
@keyframes ogb-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.ogb-type-festival {
  border-bottom: 3px solid #f59e0b;
}
.ogb-fest-deco {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 28px;
  padding: 0 20px;
  font-size: 14px;
  opacity: 0.18;
  pointer-events: none;
  overflow: hidden;
  height: 100%;
  align-items: flex-start;
  padding-top: 6px;
}
.ogb-pulse-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 8px;
  animation: ogb-pdot 1.5s ease-in-out infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes ogb-pdot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

/* ══ OWNER BANNERS — 3 sizes ══ */
.ogb-banners-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Small banner */
.ogb-banner-sm {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #1a1e2e 0%, #1e2540 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  border-left: 4px solid #c9a84c;
  transition:
    opacity 0.5s,
    max-height 0.5s;
}
.ogb-banner-sm .ogb-bicon {
  flex-shrink: 0;
}
.ogb-banner-sm .ogb-btitle {
  font-size: 13px;
  font-weight: 700;
  color: #c9a84c;
  margin-right: 8px;
  white-space: nowrap;
}
.ogb-banner-sm .ogb-bbody {
  font-size: 13px;
  color: #cbd5e0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogb-banner-sm .ogb-blink {
  font-size: 12px;
  color: #c9a84c;
  text-decoration: none;
  flex-shrink: 0;
}
/* Medium banner (default) */
.ogb-banner-md {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1a1e2e 0%, #1e2540 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  border-left: 4px solid #c9a84c;
  transition:
    opacity 0.5s,
    max-height 0.5s;
}
.ogb-banner-md .ogb-bicon {
  flex-shrink: 0;
  margin-top: 2px;
}
.ogb-banner-md .ogb-bbody-wrap {
  flex: 1;
  min-width: 0;
}
.ogb-banner-md .ogb-btitle {
  font-size: 13px;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: 4px;
}
.ogb-banner-md .ogb-bbody {
  font-size: 13px;
  color: #cbd5e0;
  line-height: 1.5;
}
.ogb-banner-md .ogb-blink {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #c9a84c;
  text-decoration: none;
}
/* Large banner */
.ogb-banner-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 28px 24px;
  background: linear-gradient(135deg, #1a1e2e 0%, #1e2540 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  border-left: 4px solid #c9a84c;
  text-align: center;
  transition:
    opacity 0.5s,
    max-height 0.5s;
}
.ogb-banner-lg .ogb-blg-inner {
  max-width: 600px;
}
.ogb-banner-lg .ogb-bicon-lg {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
}
.ogb-banner-lg .ogb-btitle {
  font-size: 22px;
  font-weight: 800;
  color: #c9a84c;
  margin-bottom: 8px;
  display: block;
}
.ogb-banner-lg .ogb-bbody {
  font-size: 15px;
  color: #cbd5e0;
  line-height: 1.6;
  display: block;
}
.ogb-banner-lg .ogb-blink {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: #c9a84c;
  text-decoration: none;
}

/* Slide-in animation for new banners */
@keyframes ogb-slidein {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    max-height: 400px;
    transform: translateY(0);
  }
}
.ogb-banner-new {
  animation: ogb-slidein 0.5s ease forwards;
}

/* ============================================================
   KAREEGAR SELECTION PAGE — additional CSS (kareegar_selection.html)
   ============================================================ */
/* ── ks-right-col : holds Order card + Invoice list, stacked in the same column ── */
.ks-right-col {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
/* Order card chhota (max 780px); Invoice card uske barabar right side mein */
.ks-right-col .ks-order-card {
  flex: 0 1 860px;
  min-width: 0;
}

/* Kareegar column (assigned design ke Kareegar ka naam + code) */
.ks-kareegar-cell {
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.ks-saved-cut {
  font-weight: 700;
  color: var(--color-gold);
}
/* ── ks-invoice-list-wrap : Invoice card, Order card ke right side mein ── */
.ks-invoice-list-wrap {
  display: flex;
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 460px;
}
.ks-invoice-list-panel {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.ks-invoice-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ks-invoice-mini-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #6b7280);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.ks-invoice-mini-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
}
.ks-invoice-mini-table tr {
  cursor: pointer;
}
.ks-invoice-mini-table tr:hover {
  background: #f8fafc;
}
.ks-invoice-mini-table tr.ks-invoice-item-active {
  background: #fff7e6;
}
@media (max-width: 1100px) {
  .ks-right-col {
    flex-direction: column;
    align-items: stretch;
  }
  .ks-right-col .ks-order-card {
    flex: 0 0 auto;
  }
  .ks-invoice-list-wrap {
    max-width: none;
    min-width: 0;
  }
}

/* ── Disabled-state styling for controls in this page ── */
.ks-dark-input:disabled,
select.ks-dark-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.assign-input:disabled,
.priority-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f1f5f9;
}
#btn_save_assignment:disabled,
#btn_print_measurement:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   PAYMENT FORM PAGE — additional CSS (payment_form.html)
   ============================================================ */
.aed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  vertical-align: middle;
}
.aed-icon svg {
  display: block;
}
/* AED ke ilawa currencies (SAR/KWD/QAR/OMR) ke liye chota text badge —
   aed-icon jaisi hi jagah par baithta hai, sirf icon ki jagah code text */
.currency-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  opacity: 0.85;
}
/* Shop Settings ke tab-button / card-icon me badge centre me rahe */
.ss-tab-btn .currency-code-badge,
.ss-card-icon .currency-code-badge {
  margin-right: 0;
  font-size: 9px;
}

.pf-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-summary-subheading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 8px;
}
.pf-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: #f8fafc;
}
.pf-summary-line .pf-summary-label {
  color: #475569;
  font-weight: 500;
}
.pf-summary-line .pf-summary-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
}
.pf-summary-hr {
  border: none;
  border-top: 1px dashed #cbd5e1;
  margin: 6px 0 8px;
}
.pf-summary-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f1f5f9;
}
.pf-summary-total-line .pf-summary-label {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.pf-summary-total-line .pf-summary-amount {
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.um-amt-black {
  color: #1e293b;
}
.um-amt-green {
  color: #16a34a;
}
.um-amt-red {
  color: #dc2626;
}
.um-amt-grey {
  color: #94a3b8;
}
.um-amt-orange {
  color: #ea580c;
}
.um-amt-darkred {
  color: #991b1b;
}

/* Invoice list — poori row clickable */
.pf-invoice-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.pf-invoice-row:hover {
  background: #f8fafc;
}
.pf-invoice-row td {
  padding: 8px 6px;
}
.pf-invoice-link {
  color: #c9a84c;
  text-decoration: underline;
  font-size: 13px;
}
/* Selected invoice ki row — gold highlight */
.pf-invoice-row-active,
.pf-invoice-row-active:hover {
  background: #fff7e6;
}
.payment-invoice-list th {
  white-space: nowrap;
}
.payment-invoice-list td.pf-invoice-name {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* zebra-stripe (even/odd) se zyada specificity — selected row hamesha gold */
.payment-invoice-list .ui-table tbody tr.pf-invoice-row-active,
.payment-invoice-list .ui-table tbody tr.pf-invoice-row-active:hover {
  background: #fff7e6;
}

/* ============================================================
   PRINT MEASUREMENT PAGE (print_measurement.html)
   ============================================================ */
body {
  font-family: Arial, sans-serif;
}

.print-header {
  text-align: center;
  margin-bottom: 20px;
}

.info-line {
  font-size: 14px;
  margin-top: 4px;
}

.measurement-preview {
  /* ===== FIX: asal masla ye tha ke garment SVG files (body.svg
     waghera) khud CHAUDI/LANDSCAPE shape ki hain (jaise Arabi:
     1196x792, Kuwaiti: 1166x792 — yani chaudai:unchai ~ 3:2), lekin
     ye box pehle LAMBA/PORTRAIT (0.6 ratio) rakha hua tha. Is
     mismatch ki wajah se SVG apne aap letterbox ho ke sirf box ki
     width use karta tha, unchai ka bada hissa khaali reh jata tha —
     isi liye canvas hamesha chota lagta tha aur text ke neeche bada
     khaali gap bhi aata tha. Ab box ko SVG ke asal shape (3:2,
     chauda) ke mutabiq bana diya — ab canvas zyada bada + text ke
     turant neeche, bina kisi khaali gap ke dikhega. ===== */
  width: 100%;
  max-width: 780px;
  margin: auto;
  position: relative;
  height: auto;
  aspect-ratio: 3 / 2;
}

.svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.print-btn button {
  padding: 8px 18px;
  font-size: 14px;
  border: none;
  background: #2c7be5;
  color: white;
  cursor: pointer;
}

@media print {
  .print-btn {
    display: none;
  }
}

/* ============================================================
   SHOP SETTINGS PAGE — redesigned CSS, prefix: ss- (shop_settings.html)
   Note: older .shp- prefixed section above is from previous design
   ============================================================ */
.ss-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.ss-header {
  margin-bottom: 26px;
}
.ss-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #1b2340;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.ss-header p {
  font-size: 13px;
  color: #8087a3;
  margin: 0;
}

/* ===== ADDED: Tab bar — Shop Settings ke saare sections ab tabs ke andar
hain, ek waqt mein sirf ek tab ka section neeche khulta hai ===== */
.ss-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #eceef5;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 30, 70, 0.04);
  padding: 8px;
  margin-bottom: 20px;
}
.ss-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: #6a7189;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.ss-tab-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.ss-tab-btn:hover {
  background: #f6f7fb;
  color: #16215c;
}
.ss-tab-btn.active {
  background: #16215c;
  color: #ffffff;
}
.ss-tab-panel {
  display: none;
}
.ss-tab-panel.active {
  display: block;
}
.ss-save-bar {
  margin-bottom: 0;
}
.ss-save-bar .ss-actions {
  border-top: none;
}
@media (max-width: 720px) {
  .ss-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ss-tab-btn {
    flex-shrink: 0;
  }
}

/* ===== Card ===== */
.ss-card {
  background: #ffffff;
  border: 1px solid #eceef5;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 30, 70, 0.04);
  margin-bottom: 20px;
  overflow: hidden;
}
.ss-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f2f8;
  background: #fafbfd;
}
.ss-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eef0ff;
  color: #3d4bc7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ss-card-icon svg {
  width: 17px;
  height: 17px;
}
.ss-card-header h2 {
  font-size: 14.5px;
  font-weight: 700;
  color: #1b2340;
  margin: 0;
  letter-spacing: 0.2px;
}
.ss-card-header span.ss-subtitle {
  display: block;
  font-size: 11.5px;
  color: #9299b5;
  font-weight: 500;
  margin-top: 1px;
}
.ss-card-body {
  padding: 22px 24px 24px;
}

/* ===== Form grid ===== */
.ss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.ss-field.ss-span2 {
  grid-column: 1 / -1;
}
.ss-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #5a6178;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 7px;
}
.ss-field .ss-hint {
  display: block;
  font-size: 11.5px;
  color: #9299b5;
  margin-top: 6px;
  line-height: 1.5;
}
.ss-input,
.ss-select,
.ss-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfe2ee;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #1b2340;
  background: #fff;
  transition: border-color 0.15s;
  font-family: inherit;
}
.ss-input:focus,
.ss-select:focus,
.ss-textarea:focus {
  outline: none;
  border-color: #3d4bc7;
  box-shadow: 0 0 0 3px rgba(61, 75, 199, 0.1);
}
.ss-input[type="color"] {
  padding: 4px;
  height: 42px;
  cursor: pointer;
}
.ss-textarea {
  resize: vertical;
  min-height: 74px;
  line-height: 1.5;
}

/* ===== Logo uploader ===== */
.ss-logo-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ss-logo-preview {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border: 1.5px dashed #d8dbea;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fafbfd;
  flex-shrink: 0;
}
.ss-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #b9bed3;
  font-size: 11px;
}
.ss-file-input {
  font-size: 12.5px;
}

/* ===== Toggle switch ===== */
.ss-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.ss-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.ss-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ss-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d8dbea;
  border-radius: 24px;
  transition: 0.2s;
}
.ss-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ss-toggle input:checked + .ss-toggle-slider {
  background: #3d4bc7;
}
.ss-toggle input:checked + .ss-toggle-slider::before {
  transform: translateX(18px);
}
.ss-toggle-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #1b2340;
}
.ss-toggle-desc {
  font-size: 11.5px;
  color: #9299b5;
  margin: 4px 0 16px 54px;
  line-height: 1.5;
  max-width: 560px;
}

/* ===== Payment Gateway custom dropdown ===== */
.ss-gw-select {
  position: relative;
}
.ss-gw-select-btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe2ee;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #1b2340;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s;
}
.ss-gw-select-btn:hover {
  border-color: #c3c8e2;
}
.ss-gw-select-btn #ssGwNameCurrent {
  flex: 1;
  font-weight: 600;
}
.ss-gw-chevron {
  width: 16px;
  height: 16px;
  color: #9299b5;
  flex-shrink: 0;
}
.ss-gw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}
.ss-gw-badge-ziina {
  background: #0f9d58;
}
.ss-gw-badge-myfatoorah {
  background: #d54b3d;
}
.ss-gw-badge-tap {
  background: #1a73e8;
}
.ss-gw-badge-paytabs {
  background: #6b3fd4;
}
.ss-gw-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #dfe2ee;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 24, 55, 0.12);
  padding: 6px;
  z-index: 20;
}
.ss-gw-dropdown.open {
  display: block;
}
.ss-gw-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.ss-gw-option:hover {
  background: #f5f6fb;
}
.ss-gw-option-name {
  font-size: 13px;
  font-weight: 700;
  color: #1b2340;
}
.ss-gw-fields {
  margin-top: 4px;
}

/* ===== Currency custom dropdown (Invoice Customization) ===== */
.ss-cur-select {
  position: relative;
}
.ss-cur-select-btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe2ee;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #1b2340;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s;
}
.ss-cur-select-btn:hover {
  border-color: #c3c8e2;
}
.ss-cur-select-btn #ssCurNameCurrent {
  flex: 1;
  font-weight: 600;
}
.ss-cur-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  flex-shrink: 0;
}
.ss-cur-badge-aed {
  background: #059669;
}
.ss-cur-badge-sar {
  background: #7c3aed;
}
.ss-cur-badge-kwd {
  background: #dc2626;
}
.ss-cur-badge-qar {
  background: #8b1538;
}
.ss-cur-badge-omr {
  background: #ea580c;
}
.ss-cur-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #dfe2ee;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 24, 55, 0.12);
  padding: 6px;
  z-index: 20;
}
.ss-cur-dropdown.open {
  display: block;
}
.ss-cur-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.ss-cur-option:hover {
  background: #f5f6fb;
}

/* ===== Reminder time rows ===== */
.ss-reminder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 54px;
  max-width: 420px;
}
.reminder-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reminder-time-row input[type="time"] {
  flex: 1;
}
.remove-reminder-time-btn {
  border: 1px solid #f0c9c9;
  color: #c0392b;
  background: #fff5f5;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.remove-reminder-time-btn:hover {
  background: #ffe8e8;
}
#addReminderTimeBtn {
  margin: 12px 0 0 54px;
  border: 1.5px dashed #c7cbe8;
  color: #3d4bc7;
  background: #fafaff;
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  max-width: 420px;
  width: calc(100% - 54px);
  text-align: center;
  transition: background 0.15s;
}
#addReminderTimeBtn:hover {
  background: #f0f1ff;
}

/* ===== Save button ===== */
.ss-actions {
  display: flex;
  justify-content: flex-end;
  padding: 18px 24px;
  border-top: 1px solid #f1f2f8;
  background: #fafbfd;
}
.ss-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #c9a84c;
  color: #1b2340;
  border: none;
  border-radius: 9px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.ss-save-btn:hover {
  background: #bd9a3c;
}
.ss-save-btn:disabled {
  background: #e5e7f0;
  color: #a3a8bd;
  cursor: not-allowed;
}
.ss-save-btn svg {
  width: 14px;
  height: 14px;
}

/* ===== Shop Location (GPS) — "Add Location" field ===== */
.ss-location-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ss-location-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #dfe2ee;
  color: #1b2340;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ss-location-btn:hover {
  border-color: #3d4bc7;
  background: #f7f8ff;
}
.ss-location-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.ss-location-btn svg {
  width: 15px;
  height: 15px;
  color: #3d4bc7;
  flex-shrink: 0;
}
.ss-location-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: transparent;
}
.ss-location-status.set {
  color: #1f9d55;
}
.ss-location-status svg {
  width: 14px;
  height: 14px;
}
.ss-location-status-pending {
  display: none;
  color: #b8860b;
}
.ss-location-status-pending.show {
  display: inline-flex;
}

/* ===== Shop Location map preview (Save Changes se pehle bhi turant
   dikhta hai) ===== */
.ss-map-preview {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eef0f5;
}
.ss-map-preview-canvas {
  width: 100%;
  height: 180px;
}
.ss-map-preview-placeholder {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f7f8fc;
  color: #9299b5;
  font-size: 12.5px;
}
.ss-map-preview-placeholder svg {
  width: 26px;
  height: 26px;
  color: #c7cbe8;
}

/* ===== Shop Location picker modal (naqshe se pin select karne ke liye) ===== */
.ss-location-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 40, 0.55);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ss-location-picker-overlay.open {
  display: flex;
}
.ss-location-picker-modal {
  background: #fff;
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  padding: 20px;
}
.ss-location-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ss-location-picker-header h3 {
  margin: 0;
  font-size: 15.5px;
  color: #1b2340;
  font-weight: 700;
}
.ss-location-picker-close {
  border: none;
  background: #f1f2f8;
  color: #6a7189;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ss-location-picker-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: #9299b5;
}
.ss-location-picker-map {
  width: 100%;
  height: 320px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eef0f5;
}
.ss-location-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.ss-location-picker-cancel-btn {
  background: #fff;
  border: 1px solid #dfe2ee;
  color: #5a6178;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ss-location-picker-confirm-btn {
  background: #c9a84c;
  border: none;
  color: #1b2340;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ss-location-picker-confirm-btn:hover {
  background: #bd9a3c;
}

/* ===== Subscription info card ===== */
.ss-sub-grid {
  display: flex;
  gap: 40px;
}
.ss-sub-item .ss-sub-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #9299b5;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.ss-sub-item .ss-sub-val {
  font-size: 15px;
  font-weight: 700;
  color: #1b2340;
  text-transform: capitalize;
}
/* ===== ADDED: "Upgrade Subscription Plan" button — grid se spacing ===== */
.ss-sub-actions {
  margin-top: 18px;
}
/* ===== ADDED: "Upgrade Subscription Plan" button — premium VIP look,
   dark navy gradient + gold border/text ===== */
.ss-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1b2340 0%, #2a3358 100%);
  color: #f0d98c;
  border: 1px solid #c9a84c;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(27, 35, 64, 0.35);
  transition: all 0.2s ease;
}
.ss-upgrade-btn:hover {
  background: linear-gradient(135deg, #242d52 0%, #343f6e 100%);
  box-shadow: 0 6px 18px rgba(27, 35, 64, 0.5);
  transform: translateY(-1px);
}
.ss-upgrade-btn svg {
  width: 15px;
  height: 15px;
}
/* ===== ADDED: Subscription Status — pill/badge shape, "Active" green,
   "Inactive"/"Suspended" red, jo bhi status ho uske hisab se color ===== */
.ss-sub-item .ss-sub-val.ss-status-active,
.ss-sub-item .ss-sub-val.ss-status-inactive,
.ss-sub-item .ss-sub-val.ss-status-suspended {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.ss-sub-item .ss-sub-val.ss-status-active {
  background: linear-gradient(135deg, rgba(187, 247, 208, 0.85), rgba(220, 252, 231, 0.65));
  border: 1px solid rgba(74, 222, 128, 0.6);
  color: #15803d;
}
.ss-sub-item .ss-sub-val.ss-status-inactive,
.ss-sub-item .ss-sub-val.ss-status-suspended {
  background: linear-gradient(135deg, rgba(254, 205, 211, 0.85), rgba(255, 228, 230, 0.65));
  border: 1px solid rgba(251, 113, 133, 0.6);
  color: #be123c;
}

@media (max-width: 640px) {
  .ss-grid {
    grid-template-columns: 1fr;
  }
  .ss-logo-row {
    flex-direction: column;
  }
  .ss-toggle-desc,
  .ss-reminder-list,
  #addReminderTimeBtn {
    margin-left: 0;
    width: 100%;
  }
}

/* ============================================================
   SUPPLIER STATEMENT PAGE (supplier_statement.html)
   ============================================================ */
@media print {
  nav,
  .sidebar,
  button {
    display: none !important;
  }
}

/* ============================================================
   ULTRA MASTER PAGE — additional CSS from template (ultra_master.html)
   ============================================================ */
.um-prod-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.um-prod-ready {
  background: #dcfce7;
  color: #16a34a;
}
.um-prod-partial-ready {
  background: #fef3c7;
  color: #b45309;
}
.um-prod-in-progress {
  background: #fee2e2;
  color: #b91c1c;
}
.um-prod-not-assigned {
  background: #f1f5f9;
  color: #64748b;
}
.um-del-not-ready {
  background: #f1f5f9;
  color: #64748b;
}
.um-del-partial-collected {
  background: #fef3c7;
  color: #b45309;
}
.um-qty-input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.um-order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.um-collect-all-btn {
  background: #0f766e;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.um-collect-all-btn:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}
@keyframes um-blink-anim {
  0%,
  100% {
    background-color: transparent;
  }
  50% {
    background-color: #fef08a;
  }
}
.um-blink-row {
  animation: um-blink-anim 0.6s ease-in-out 6;
}
.um-invoices-card .um-section-label {
  margin-bottom: 10px;
}
.um-invoice-link {
  color: var(--gold, #b8860b);
  font-weight: 600;
  text-decoration: none;
}
.um-invoice-link:hover {
  text-decoration: underline;
}
.um-invoice-row-active td {
  background: #fff7e6;
}
.um-invoice-row {
  cursor: pointer;
}
.um-invoice-row:hover td {
  background: #fff7e6;
}
.aed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  vertical-align: middle;
}
.aed-icon svg {
  display: block;
}
.um-summary-subheading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 4px 0 10px;
}
.um-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: #f8fafc;
}
.um-summary-line .um-summary-label {
  color: #475569;
  font-weight: 500;
}
.um-summary-line .um-summary-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
}
.um-summary-hr {
  border: none;
  border-top: 1px dashed #cbd5e1;
  margin: 8px 0 10px;
}
.um-summary-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f1f5f9;
}
.um-summary-total-line .um-summary-label {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.um-summary-total-line .um-summary-amount {
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.um-amt-black {
  color: #1e293b;
}
.um-amt-green {
  color: #16a34a;
}
.um-amt-red {
  color: #dc2626;
}
.um-amt-grey {
  color: #94a3b8;
}
.um-amt-orange {
  color: #ea580c;
}
.um-amt-darkred {
  color: #991b1b;
}
/* ============================================================
   WHATSAPP INTEGRATION CARD — additional CSS (shop_settings.html)
   Append to the END of static/style.css
   ============================================================ */

.ss-wa-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.ss-wa-connected {
  background: #eafaf1;
  color: #1e7d43;
  border: 1px solid #b9e8cd;
}
.ss-wa-disconnected {
  background: #fdedec;
  color: #b3392c;
  border: 1px solid #f3c1bd;
}

.ss-wa-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f1f2f8;
}

.ss-wa-btn {
  flex: 0 0 auto;
}

.ss-wa-btn-update {
  background: #3d4bc7;
  color: #fff;
}
.ss-wa-btn-update:hover:not(:disabled) {
  background: #2f3aa8;
}

.ss-wa-btn-test {
  background: #0f766e;
  color: #fff;
}
.ss-wa-btn-test:hover:not(:disabled) {
  background: #0c5f58;
}

.ss-wa-btn-remove {
  background: #fff;
  color: #c0392b;
  border: 1px solid #f0c9c9;
}
.ss-wa-btn-remove:hover:not(:disabled) {
  background: #fff5f5;
}

.ss-wa-icon {
  background: #e7f9ee !important;
  color: #25d366 !important;
}
.ss-wa-icon i {
  font-size: 18px;
}

@media (max-width: 640px) {
  .ss-wa-actions-row {
    flex-direction: column;
  }
  .ss-wa-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ============================================================
   WHATSAPP WARNING MODAL — additional CSS (base.html)
   Append to the END of static/style.css
   ============================================================ */

.wa-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10050;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.wa-modal-overlay.wa-open {
  display: flex;
}

.wa-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 90%;
  max-width: 380px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.wa-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fdedec;
  color: #b3392c;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.wa-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #1b2340;
  margin-bottom: 8px;
}

.wa-modal-body {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.55;
  margin-bottom: 20px;
}

.wa-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.wa-modal-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-modal-btn-secondary {
  background: #f1f2f8;
  color: #5a6178;
}
.wa-modal-btn-secondary:hover {
  background: #e5e7f0;
}

.wa-modal-btn-primary {
  background: #c9a84c;
  color: #1b2340;
}
.wa-modal-btn-primary:hover {
  background: #bd9a3c;
}

/* ============================================================
   SHOP OWNER — LANGUAGE DROPDOWN (base.html sidebar)
   ============================================================ */
.sb-lang-dropdown {
  position: relative;
  padding: 0 16px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.sb-lang-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.sb-lang-btn:hover {
  border-color: var(--color-gold);
}

.sb-lang-btn i.ti-language {
  font-size: 15px;
  color: var(--color-gold);
}

.sb-lang-btn span {
  flex: 1;
  text-align: left;
}

.sb-lang-chevron {
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  transition: transform var(--transition);
}

.sb-lang-dropdown.sb-lang-open .sb-lang-chevron {
  transform: rotate(180deg);
}

.sb-lang-menu {
  position: absolute;
  top: calc(100% - 8px);
  left: 16px;
  right: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition);
  z-index: 150;
  overflow: hidden;
}

.sb-lang-dropdown.sb-lang-open .sb-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sb-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  border-left: none;
}

.sb-lang-option:hover {
  background: #f5f5f5;
  color: var(--text-primary);
  border-left: none;
}

.sb-lang-option .sb-lang-check {
  font-size: 14px;
  opacity: 0;
  color: var(--color-gold);
}

.sb-lang-option.active {
  color: var(--color-gold);
  font-weight: 600;
  background: #fdf8ee;
  border-left: none;
}

.sb-lang-option.active .sb-lang-check {
  opacity: 1;
}

/* ============================================================
   SHOP OWNER — RTL SUPPORT (Arabic, base.html sidebar/layout)
   Sirf woh cheezein flip ho rahi hain jo direction-sensitive hain
   (borders, icon spacing, fixed bell position, mobile slide-in).
   Baaki CSS untouched hai.
   ============================================================ */
[dir="rtl"] .sb-lang-btn span {
  text-align: right;
}

/* ============================================================
   GENERAL RTL — form labels/inputs (applies to any page using
   .label / .input once that page's content is translated)
   ============================================================ */
[dir="rtl"] .label {
  text-align: right;
}

[dir="rtl"] .input,
[dir="rtl"] select.input {
  text-align: right;
}

/* ===== ADDED: RTL — table header alignment (.ui-table thead th hamesha
   text-align:left tha; Arabic mein data cells (tbody td) page dir se
   automatically right-align ho jati hain, is wajah se header aur data
   column ki lines match nahi karti thi — sirf RTL mein header ko bhi
   right-align kar rahe hain, English tables bilkul waise hi rahenge) ===== */
[dir="rtl"] .ui-table thead th {
  text-align: right;
}

[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--border);
}

[dir="rtl"] .sidebar a {
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] .sidebar a:hover,
[dir="rtl"] .sidebar a.active {
  border-left-color: transparent;
  border-right-color: var(--color-gold);
}

[dir="rtl"] .sidebar a[href="/logout"]:hover {
  border-right-color: var(--color-danger);
}

[dir="rtl"] .sidebar a i {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .tn-bell-wrap {
  right: auto;
  left: 20px;
}

[dir="rtl"] #menu-toggle {
  left: auto;
  right: 12px;
}

@media (max-width: 1024px) {
  [dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir="rtl"] .sidebar.open {
    transform: translateX(0);
  }
}

/* ============================================================
   ACCESS CONTROL PAGE (access_control.html) — moved out of the
   HTML file's inline <style> block into this stylesheet, so
   all CSS stays in one place per project convention.
   ============================================================ */
.ac3-page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.ac3-page-header {
  margin-bottom: 12px;
}
.ac3-page-header h1 {
  margin: 0;
}

.ac3-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
  width: 100%;
}
@media (max-width: 1100px) {
  .ac3-layout {
    grid-template-columns: 1fr;
  }
}

.ac3-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ac3-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.ac3-profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9aa1b1;
  padding: 46px 18px;
  gap: 10px;
}
.ac3-profile-empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.5;
}
.ac3-profile-empty p {
  font-size: 12.5px;
  max-width: 170px;
}

.ac3-profile-header {
  background: linear-gradient(135deg, #101a33 0%, #16213e 100%);
  padding: 20px 16px;
  text-align: center;
}
.ac3-profile-photo-wrap {
  width: 66px;
  height: 66px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 110, 0.35);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ac3-profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ac3-profile-name {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.ac3-profile-role {
  color: #c9a86e;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

.ac3-profile-body {
  padding: 14px 16px;
}
.ac3-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
}
.ac3-info-label {
  color: #9aa1b1;
  font-weight: 600;
}
.ac3-info-value {
  color: #1f2937;
  font-weight: 600;
  text-align: right;
}
.ac3-info-divider {
  border-top: 1px solid #eef0f6;
  margin: 4px 0;
}

.ac3-login-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}
.ac3-login-on {
  background: #dcfce7;
  color: #16a34a;
}
.ac3-login-off {
  background: #f1f2f8;
  color: #9aa1b1;
}

.ac3-save-card {
  padding: 14px 16px;
}
.ac3-save-btn-full {
  width: 100%;
  justify-content: center;
}
#savePermissionsBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ac3-col-mid {
  min-width: 0;
}
.ac3-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9aa1b1;
  gap: 14px;
  padding: 40px 20px;
}
.ac3-empty-card svg {
  width: 42px;
  height: 42px;
  opacity: 0.5;
}
.ac3-empty-card p {
  font-size: 13.5px;
  max-width: 260px;
}

.ac3-mid-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ac3-clone-card {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ac3-clone-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
}
.ac3-clone-card .ss-select {
  flex: 1;
}

.ac3-btn-clone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 38px;
  background: #eef0fb;
  color: #4f46e5;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ac3-btn-clone:hover {
  background: #e2e5fa;
}
.ac3-btn-clone svg {
  width: 14px;
  height: 14px;
}

.ac3-permissions-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.ac3-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ac3-table-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2937;
}
.ac3-quick-actions {
  display: flex;
  gap: 8px;
}
.ac3-btn-mini {
  padding: 6px 12px;
  background: #f1f2f8;
  border: none;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5162;
  cursor: pointer;
}
.ac3-btn-mini:hover {
  background: #e6e8f2;
}

.ac3-table-scroll {
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #eef0f6;
  border-radius: 10px;
}
.ac3-table-scroll table {
  margin: 0;
  width: 100%;
  table-layout: fixed;
}
.ac3-table-scroll thead th {
  position: sticky;
  top: 0;
  background: #f8f9fc;
  z-index: 2;
  font-size: 11px;
  padding: 8px 6px;
}
.ac3-table-scroll td {
  font-size: 12.5px;
  padding: 8px 6px;
  text-align: center;
}
.ac3-table-scroll td:first-child {
  text-align: left;
  font-weight: 600;
}

.ac3-col-right {
  min-width: 0;
}
.ac3-list-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.ac3-search-wrap {
  position: relative;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ac3-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #9aa1b1;
}
.ac3-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid #e5e7f0;
  border-radius: 9px;
  font-size: 13px;
  background: #f8f9fc;
}
.ac3-search-input:focus {
  outline: none;
  border-color: #c7cbf5;
  background: #fff;
}

.ac3-staff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.ac3-loading {
  color: #9aa1b1;
  font-size: 13px;
  padding: 8px 4px;
}

.ac3-staff-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}
.ac3-staff-item:hover {
  background: #f8f9fc;
}
.ac3-staff-item.ac3-active {
  background: #eef0fb;
  border-color: #c7cbf5;
}
.ac3-staff-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ac3-staff-name {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}
.ac3-staff-code {
  font-size: 10.5px;
  color: #9aa1b1;
  margin-left: 4px;
}
.ac3-staff-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #eef0fb;
  color: #4f46e5;
  flex-shrink: 0;
}
.ac3-staff-login {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}
/* ============================================================
   REGULAR ITEMS PAGE (add_regular.html)
   ============================================================ */
.content-wrapper {
  padding: 0.75rem 0;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.main-section-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .main-section-layout {
    display: grid;
    grid-template-columns: 340px 320px 1fr;
    gap: 1.5rem;
  }
}

.ri-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.2rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 2px solid #241e4a;
}

.ri-card-header {
  border-bottom: 1px solid #241e4a;
  padding-bottom: 0.75rem;
}

.ri-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: #241e4a;
}

.ri-main-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 1rem;
}

.ri-form-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ri-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.ri-form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ri-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #1b1d1f;
}

.ri-input {
  width: 100%;
  min-width: 0;
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.8125rem;
  outline: none;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #1f2937;
}
.ri-input:focus {
  border-color: #6366f1;
}
.ri-input[readonly] {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}
.ri-input[readonly]:focus {
  border-color: #d1d5db;
}

.ri-measurements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.ri-measurement-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #6b7280;
}

.ri-text-center {
  text-align: center;
}
.ri-font-bold {
  font-weight: 600;
}

.ri-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

.ri-btn {
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.78125rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ri-btn:hover {
  opacity: 0.9;
}
.ri-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.ri-btn-save {
  background-color: #1da042;
  color: #ffffff;
}
.ri-btn-cancel {
  background-color: #e5e7eb;
  color: #374151;
}

.ri-previews-container {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ri-hidden-input {
  display: none;
}

.ri-table-container {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow-x: auto;
  border-top: 4px solid #1f1d44;
}

.ri-table-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1f2937;
}

.ri-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: left;
}

.ri-data-table th,
.ri-data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.ri-data-table th {
  font-weight: 600;
  background-color: #f3f4f6;
  color: #374151;
}

.ri-table-btn {
  padding: 0.35rem 0.6rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  transition: opacity 0.2s;
  background-color: #b10f0f;
  color: #ffffff;
}
.ri-table-btn:hover {
  opacity: 0.85;
} /* ============================================================
   REGULAR ITEMS — Edit-mode buttons (Update / Delete / Cancel)
   ============================================================ */
.ri-btn-update {
  background-color: #2563eb;
  color: #ffffff;
}
.ri-btn-update:hover {
  background-color: #1d4ed8;
}

.ri-btn-delete {
  background-color: #ffffff;
  color: #dc2626;
  border: 1px solid #dc2626;
}
.ri-btn-delete:hover {
  background-color: #fff5f5;
}

.ri-btn-cancel {
  background-color: #ffffff;
  color: #6b7280;
  border: 1px solid #dddddd;
}
.ri-btn-cancel:hover {
  background-color: #f5f5f5;
}

/* Table Edit button (blue, matches Update color) */
.ri-table-btn-edit {
  padding: 0.35rem 0.6rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  transition: opacity 0.2s;
  background-color: #2563eb;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.ri-table-btn-edit:hover {
  opacity: 0.85;
}
/* Disabled-state styling for regular-items / offers buttons */
.ri-btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
/* ============================================================
   REGULAR ITEMS PAGE — COMPACT REDESIGN
   (Size Pricing table + stacked left column: Regular / Laundry
   & Tharboosh / Booking Settings, all same width as right column)
   ============================================================ */
.ri-regular-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Middle column: Available Designs / Booking Settings / Laundry & Tharboosh */
.ri-middle-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Compact card variant — smaller padding/header than .ri-card */
.ri-compact-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 0.6rem 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 2px solid #241e4a;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ri-compact-header {
  font-weight: 700;
  font-size: 0.85rem;
  color: #241e4a;
  border-bottom: 1px solid #241e4a;
  padding-bottom: 0.3rem;
}

/* ── Size Pricing Table ── */
.ri-size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.ri-size-table th {
  background-color: #f3f4f6;
  color: #374151;
  font-weight: 700;
  padding: 0.35rem 0.5rem;
  text-align: left;
  border: 1px solid #e5e7eb;
}
.ri-size-table td {
  padding: 0.3rem 0.4rem;
  border: 1px solid #e5e7eb;
  color: #1f2937;
}
.ri-size-table td.ri-size-name {
  font-weight: 600;
  white-space: nowrap;
}
.ri-size-table input.ri-input {
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  text-align: center;
}

/* ── Compact inline field (label + input side by side) ── */
.ri-inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.ri-inline-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.ri-inline-field label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1b1d1f;
}
.ri-hint-compact {
  font-size: 10.5px;
  color: #8a90a3;
  line-height: 1.35;
  margin-top: -0.15rem;
}

/* ── Compact toggle row (Booking ON checkbox) ── */
.ri-toggle-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1b1d1f;
  cursor: pointer;
}
.ri-toggle-compact input {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── Compact save buttons ── */
.ri-btn-compact {
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
}

/* ── Designs Chackboxes ── */
.ri-designs-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* ============================================================
   REGULAR ITEMS PAGE — DYNAMIC IMAGE GALLERY (unlimited images)
   Replaces the old fixed 8-slot .ri-previews-grid-8 system
   ============================================================ */
.ri-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ri-image-item {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  background-color: #f9fafb;
}

.ri-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.ri-image-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background-color: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  padding: 0;
}
.ri-image-remove-btn:hover {
  background-color: #b91c1c;
}

.ri-image-add-box {
  width: 74px;
  height: 74px;
  border-radius: 0.4rem;
  border: 2px dashed #d1d5db;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f9fafb;
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.1;
}
.ri-image-add-box:hover {
  border-color: #6366f1;
  color: #6366f1;
}
.ri-image-add-box i {
  font-size: 1rem;
}
.ri-image-add-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Offers page — read-only Clothes Images box (Regular item ki images hi
   dikhai jati hain, add/delete nahi hota) */
.ri-image-gallery-readonly .ri-image-empty-note {
  font-size: 0.85rem;
  color: #9098ac;
}

/* Preview Modal */
.ri-image-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.ri-image-modal.ri-open {
  display: flex;
}
.ri-image-modal-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 0.5rem;
  border: 4px solid #fff;
}

@media (max-width: 480px) {
  .ri-image-item,
  .ri-image-add-box {
    width: 64px;
    height: 64px;
  }
}

/* ============================================================
   ADDED: OFFERS PAGE — Status Badge (Active / Upcoming / Expired)
   ============================================================ */
.off-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.off-badge-active {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.off-badge-upcoming {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.off-badge-expired {
  background: #fff1f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ============================================================
   ADDED: OFFERS PAGE — Regular Items reference table (clickable rows)
   ============================================================ */
.off-regular-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.off-regular-row:hover {
  background-color: #f6f7fb;
}
.off-regular-row-selected {
  background-color: #eef2ff;
}

/* ============================================================
   PRINT MEASUREMENT — LETTERHEAD REDESIGN (print_measurement.html)
   prefix: pm-
   ===== UPDATED: professional letterhead polish — section titles ab
   bracket text ["CUSTOMER DETAILS"] ki jagah proper heading style
   (accent bar + uppercase + underline) use karte hain; har section
   (Customer/Order/Kareegar) ab ek distinct card-style panel hai taake
   visual separation clear ho; label/value ab stacked (label chhota
   muted upar, value bold neeche) hai jaisa ek professional invoice
   mein hota hai. Koi field/data/functionality nahi badla — sirf
   styling. ============================================================ */
.pm-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 50px 60px;
  background: #f5f0e6;
  border: 1px solid #e0d6c0;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.pm-masthead {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 3px double #cbb98a;
}

.pm-shop-name {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 4px;
  color: #3d2b1f;
  text-transform: uppercase;
}

/* ===== UPDATED: har section ab ek distinct card-style panel hai
   (halka off-white background + border + rounded corners + soft
   shadow) — pehle sab ek hi flat page par tha, ab har section
   visually alag box ki tarah dikhta hai. ===== */
.pm-section {
  margin-bottom: 22px;
  background: #fffefb;
  border: 1px solid #e3d9c4;
  border-radius: 8px;
  padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(61, 43, 31, 0.06);
}

.pm-section:last-of-type {
  margin-bottom: 0;
}

/* ===== UPDATED: heading ab bracket text ki jagah ek chhota gold
   accent bar (::before) + uppercase letter-spaced text + neeche
   thin underline ke sath proper section-heading jaisa dikhta hai. ===== */
.pm-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: #5a3921;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8dfc9;
}

.pm-section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 15px;
  background: #b08d57;
  border-radius: 2px;
}

.pm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 7px 0;
  border-bottom: 1px dashed #eee3cc;
}

.pm-row:last-child {
  border-bottom: none;
}

/* ===== UPDATED: label/value ab stacked hain (pehle side-by-side
   the) — label chhota/muted/uppercase upar, value bold/bada neeche —
   professional invoice jaisa clean, scannable layout. ===== */
.pm-field {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pm-label {
  color: #9c8a6f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.pm-value {
  font-weight: 700;
  color: #211a10;
  font-size: 15px;
}

.pm-print-btn-wrap {
  text-align: center;
  margin-top: 20px;
}

/* ===== UPDATED: pehle yahan "size: A4" fix kiya hua tha — lekin har
   shop owner ka printer/paper size alag ho sakta hai (A4, Letter,
   receipt printer waghera). Isliye ab page size FIX nahi kar rahe —
   jo bhi printer/paper shop owner ne apne system mein select kiya
   ho, usi ke hisaab se print hoga. Sirf margin halka sa rakha hai. */
@page {
  margin: 8mm;
}

@media print {
  .pm-page {
    box-shadow: none;
    border: none;
    border-radius: 0;
    /* ===== FIX: pehle fixed max-width (680px) tha jis se page ke
       dono taraf khaali jagah bach jati thi (khaas taur par agar
       shop owner ka printer/paper A4 se chota ya bada ho). Ab
       poori width use hogi — jitni bhi width us printer/paper ki
       ho, content usi mein fit ho jayega, koi khaali margin nahi
       bachega (sirf @page ka halka sa margin). ===== */
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    /* ===== ADDED: page padding compact (screen par pehle jaisa hi
       bada rahega — ye sirf print ke liye hai) ===== */
    padding: 8px 16px !important;
  }

  /* ===== ADDED: letterhead (masthead + details boxes) ko sirf print
     ke waqt compact kar diya — taake bada canvas + saari details ek
     hi A4 page mein fit ho jayein. Screen par size bilkul waisa hi
     bada/readable rahega jaisa abhi hai. =====*/
  .pm-masthead {
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .pm-shop-name {
    font-size: 22px;
    letter-spacing: 2px;
  }
  /* ===== UPDATED: card-style section (background/border/shadow) print
     ke liye bhi compact — shadow print par ink/ghosting waste karta
     hai isliye print mein hata diya, border halka rakha hai taake
     section boundary phir bhi nazar aaye. ===== */
  .pm-section {
    margin-bottom: 6px;
    padding: 6px 10px;
    box-shadow: none;
    border-radius: 3px;
  }
  .pm-section-title {
    font-size: 10.5px;
    margin-bottom: 4px;
    padding-bottom: 3px;
  }
  .pm-section-title::before {
    height: 10px;
  }
  .pm-row {
    gap: 20px;
    padding: 2px 0;
  }
  .pm-label {
    font-size: 8.5px;
  }
  .pm-value {
    font-size: 11px;
  }

  /* ===== ADDED FIX: .container/.content (base.html layout) screen pe
     fixed-height + internally-scrolling hain (overflow-y: auto/hidden) —
     isi wajah se Print/Save-as-PDF sirf utna hi capture karta tha jitna
     us waqt scroll ho ke visible tha (masthead + upar wali rows cut ho
     jati thi). Yahan sirf PRINT ke liye inhe full-height/visible kar
     diya hai taake poora page top se bottom tak sahi print ho — screen
     par in classes ka scroll behavior bilkul waisa hi rahega, sirf print
     output affect hota hai. =====*/
  .container {
    height: auto !important;
    overflow: visible !important;
  }
  .content {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* ===== ADDED: notification bell / hamburger menu overlay ko print
     output se hata diya (printed sheet saaf/clean rahe) ===== */
  .tn-bell-wrap,
  #tnBellDropdown,
  #tnToastContainer,
  .menu-overlay {
    display: none !important;
  }

  .pm-masthead,
  .pm-section {
    page-break-inside: avoid;
  }
  /* ===== NOTE: .measurement-preview ka apna sahi (3:2, chauda)
     aspect-ratio ab base rule mein hi set hai (upar, line ~6635) —
     wo already responsive (width:100%) hai, isliye print ke liye
     alag se override karne ki zaroorat nahi rahi. ===== */
}

/* ============================================================
   PRINT WORK SLIP — LETTERHEAD (print_work_slip.html)
   prefix: pws-
   ===== ADDED: "Print Work Slip" button pehle se UI mein tha lekin
   koi route/template/click-handler nahi tha. Ye letterhead Print
   Measurement (pm-) wale hi professional design language ko follow
   karta hai — shop masthead, card-style sections, accent-bar
   headings. Farq sirf itna hai ke yahan Production Summary aur
   Assigned Work TABLES hain (variable, kitni bhi rows ho sakti
   hain) — isliye pm- wali "force 1 page" scaling yahan nahi lagayi,
   kyunki agar kisi kareegar ka mahine mein bohot saara kaam ho to
   sab kuch zabardasti 1 page mein thoons dene se text illegible ho
   jata. Iski jagah tables ko natural tareeqe se multiple pages mein
   flow hone dete hain — bas koi row/section beech mein se nahi
   katega (page-break-inside: avoid) aur har page par table headings
   dobara print hongi (thead: table-header-group), jaisa professional
   invoices mein hota hai. ============================================================ */
.pws-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 50px 60px;
  background: #f5f0e6;
  border: 1px solid #e0d6c0;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.pws-masthead {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 3px double #cbb98a;
}

.pws-shop-name {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 4px;
  color: #3d2b1f;
  text-transform: uppercase;
}

.pws-subtitle {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6b5b47;
  letter-spacing: 0.5px;
}

.pws-section {
  margin-bottom: 22px;
  background: #fffefb;
  border: 1px solid #e3d9c4;
  border-radius: 8px;
  padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(61, 43, 31, 0.06);
}

.pws-section:last-of-type {
  margin-bottom: 0;
}

.pws-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: #5a3921;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8dfc9;
}

.pws-section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 15px;
  background: #b08d57;
  border-radius: 2px;
}

.pws-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 7px 0;
  border-bottom: 1px dashed #eee3cc;
}

.pws-row:last-child {
  border-bottom: none;
}

.pws-field {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pws-label {
  color: #9c8a6f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.pws-value {
  font-weight: 700;
  color: #211a10;
  font-size: 15px;
}

/* ===== Tables (Design Production Summary / Assigned Work) ===== */
.pws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pws-table th {
  text-align: left;
  padding: 8px 10px;
  background: #f1e9d8;
  color: #5a3921;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid #cbb98a;
}

.pws-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eee3cc;
  color: #211a10;
}

.pws-table tbody tr:last-child td {
  border-bottom: none;
}

.pws-table-empty {
  text-align: center;
  color: #9c8a6f;
  padding: 16px;
}

.pws-totals {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}

.pws-total-card {
  flex: 1;
  background: #f1e9d8;
  border: 1px solid #e3d9c4;
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pws-total-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b5b47;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pws-total-value {
  font-size: 18px;
  font-weight: 700;
  color: #3d2b1f;
}

.pws-print-btn-wrap {
  text-align: center;
  margin-top: 20px;
}

@media print {
  .pws-page {
    box-shadow: none;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px 16px !important;
  }
  .pws-masthead {
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .pws-shop-name {
    font-size: 22px;
    letter-spacing: 2px;
  }
  .pws-subtitle {
    font-size: 11px;
  }
  .pws-section {
    padding: 8px 12px;
    box-shadow: none;
    border-radius: 3px;
    /* ===== NOTE: yahan "margin-bottom: 6px" hai lekin
       page-break-inside: avoid NAHI hai jaisa pm-section par tha —
       kyunki is section ke andar table kitni bhi lambi ho sakti hai,
       usse zabardasti ek page par rokna galat hoga (content ya to
       cut ho jata ya bohot tiny scale hota). Tables khud apna
       pagination sambhalti hain (neeche dekhein). ===== */
    margin-bottom: 6px;
  }
  .pws-section-title {
    font-size: 11px;
    margin-bottom: 4px;
    padding-bottom: 3px;
  }
  .pws-section-title::before {
    height: 10px;
  }
  .pws-row {
    gap: 20px;
    padding: 2px 0;
  }
  .pws-label {
    font-size: 8.5px;
  }
  .pws-value {
    font-size: 11px;
  }
  .pws-table {
    font-size: 10px;
  }
  .pws-table th {
    padding: 4px 6px;
    font-size: 8.5px;
  }
  .pws-table td {
    padding: 4px 6px;
  }
  /* ===== ADDED: agar table 1 page se lambi ho jaye, to har page par
     column headings dobara print hongi (professional invoice/report
     jaisa), aur koi row beech mein se nahi kategi. ===== */
  .pws-table thead {
    display: table-header-group;
  }
  .pws-table tr {
    page-break-inside: avoid;
  }
  .pws-masthead,
  .pws-total-card {
    page-break-inside: avoid;
  }
  .pws-print-btn-wrap {
    display: none;
  }
}

/* ============================================================
   GLOBAL TOP BAR — Image/Video MEDIA ANIMATION effects
   Owner dropdown se choose karta hai (Fade/Zoom/Slide/Bounce/Pulse),
   ye classes sirf Image/Video media (img/video tag) par lagti hain.
   ============================================================ */
@keyframes ogbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ogbZoomIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes ogbSlideIn {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes ogbBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes ogbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.ogb-media-fade { animation: ogbFadeIn 1s ease both; }
.ogb-media-zoom { animation: ogbZoomIn 0.8s ease both; }
.ogb-media-slide { animation: ogbSlideIn 0.8s ease both; }
.ogb-media-bounce { animation: ogbBounce 1.6s ease-in-out infinite; }
.ogb-media-pulse { animation: ogbPulse 1.8s ease-in-out infinite; }

/* Kareegar Selection — measurement save na ho to dikhne wala message */
.ks-no-measurement-msg {
  margin: 0 0 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: #fef2f2;
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
}