/* ============================================================================
   LIVA ADMIN DESIGN SYSTEM  ·  liva-admin-design-system.css
   ----------------------------------------------------------------------------
   A shared token + component layer that translates the new Liva Reservation
   website design language into the Back Office and Operator Platform.

   Values are extracted from the live redesign (common/css/style.css):
     primary #0088cf · accent #ff7800 · Kanit type · sharp/3px corners ·
     soft shadows · 0.3s transitions.

   Namespaced `--lv-*` tokens + `.lds-*` components so it can be adopted
   incrementally WITHOUT colliding with legacy admin CSS (main.css, jQuery UI,
   backoffice.css/lt-mod). Load AFTER the legacy stylesheet.
   ============================================================================ */

:root {
  /* ---- Brand ---- */
  --lv-primary:        #0088cf;   /* official brand blue — public-site primary */
  --lv-primary-600:    #0091d5;   /* hover / lighter blue */
  --lv-primary-700:    #1588cc;   /* pressed / deep */
  --lv-primary-tint:   #e8f4fb;   /* selected row / focus wash */
  --lv-accent:         #ff7800;   /* CTA / promo orange */
  --lv-accent-600:     #ff7418;

  /* ---- Neutrals ---- */
  --lv-ink:            #2b3138;   /* primary text */
  --lv-ink-2:          #575757;   /* secondary text */
  --lv-muted:          #757575;   /* tertiary / captions */
  --lv-line:           #dcdcdc;   /* borders / dividers */
  --lv-line-2:         #ededed;   /* subtle dividers */
  --lv-surface:        #ffffff;   /* cards / panels */
  --lv-surface-2:      #f8f8f8;   /* app background */
  --lv-surface-3:      #f6f6f6;   /* zebra / wells */

  /* ---- Semantic ---- */
  --lv-success:        #28a745;
  --lv-warning:        #ff9f1c;
  --lv-danger:         #d64545;
  --lv-info:           var(--lv-primary);

  /* ---- Type ---- */
  --lv-font: 'Kanit', 'Noto Sans', 'Noto Sans Thai', 'Noto Sans Arabic',
             'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', system-ui,
             -apple-system, 'Segoe UI', Roboto, sans-serif; /* CJK/Arabic fallback! */
  /* Comfortable reading scale (2026-07-17): bumped up ~+2px on the dense end so the
     platform reads at a standard size. Everything (operator-modern.css skin, the LDS
     components, anchornav) sizes off these tokens, so this one change lifts body,
     tables, forms, labels, buttons, nav and headings together and keeps the hierarchy.
     Prev: xs12 sm13 base14 md16 lg18 xl22 2xl28. */
  --lv-fs-xs: 13px; --lv-fs-sm: 15px; --lv-fs-base: 16px;
  --lv-fs-md: 17px; --lv-fs-lg: 20px; --lv-fs-xl: 24px; --lv-fs-2xl: 30px;
  --lv-fw-light: 300; --lv-fw-reg: 400; --lv-fw-med: 500; --lv-fw-semi: 600; --lv-fw-bold: 700;

  /* ---- Space (4pt) ---- */
  --lv-s1: 4px; --lv-s2: 8px; --lv-s3: 12px; --lv-s4: 16px; --lv-s5: 20px;
  --lv-s6: 24px; --lv-s8: 32px; --lv-s10: 40px;

  /* ---- Radius / elevation / motion ---- */
  --lv-radius:    3px;    /* cards, buttons (public site: 0.3em / 3px) */
  --lv-radius-pill: 999px;
  --lv-shadow-1: 0 2px 5px rgba(0,0,0,.07);        /* resting card */
  --lv-shadow-2: 0 6px 18px rgba(0,0,0,.10);        /* raised / hover */
  --lv-shadow-3: 0 24px 25px -20px rgba(0,0,0,.30); /* dialog / popover */
  --lv-transition: all .3s;
}

/* ===== Buttons =============================================================
   Mirrors .blue-button (#0088cf, white, radius .3em, 0.3s). Admin density. */
.lds-btn {
  display: inline-flex; align-items: center; gap: var(--lv-s2);
  font-family: var(--lv-font); font-size: var(--lv-fs-base); font-weight: var(--lv-fw-med);
  line-height: 1.2; text-align: center; text-decoration: none;
  padding: 8px 16px; border: 1px solid transparent; border-radius: var(--lv-radius);
  cursor: pointer; transition: var(--lv-transition); white-space: nowrap;
}
.lds-btn--primary   { background: var(--lv-primary); color: #fff; }
.lds-btn--primary:hover { background: var(--lv-primary-600); }
.lds-btn--accent    { background: var(--lv-accent); color: #fff; }
.lds-btn--outline   { background: #fff; color: var(--lv-primary); border-color: var(--lv-primary); }
.lds-btn--outline:hover { background: var(--lv-primary-tint); }
.lds-btn--ghost     { background: transparent; color: var(--lv-ink-2); }
.lds-btn--ghost:hover { background: var(--lv-surface-3); }
.lds-btn--danger    { background: var(--lv-danger); color: #fff; }
.lds-btn--sm { padding: 5px 10px; font-size: var(--lv-fs-sm); }
.lds-btn--lg { padding: 11px 22px; font-size: var(--lv-fs-md); }
.lds-btn[disabled], .lds-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ===== Fields ==============================================================
   Mirrors .form-control (sharp corners, ~37px). */
.lds-field { display: block; margin-bottom: var(--lv-s4); }
.lds-field > label { display: block; font-size: var(--lv-fs-sm); font-weight: var(--lv-fw-med);
  color: var(--lv-ink-2); margin-bottom: var(--lv-s1); }
.lds-input, .lds-select, .lds-textarea {
  width: 100%; height: 38px; padding: 0 var(--lv-s3); font-family: var(--lv-font);
  font-size: var(--lv-fs-sm); color: var(--lv-ink); background: #fff;
  border: 1px solid var(--lv-line); border-radius: var(--lv-radius);
  transition: var(--lv-transition); appearance: none;
}
.lds-textarea { height: auto; min-height: 96px; padding: var(--lv-s2) var(--lv-s3); }
.lds-input:focus, .lds-select:focus, .lds-textarea:focus {
  outline: none; border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); }
.lds-field.is-error .lds-input { border-color: var(--lv-danger); }
.lds-field .lds-error { color: var(--lv-danger); font-size: var(--lv-fs-xs); margin-top: var(--lv-s1); }

/* ===== Cards / panels ====================================================== */
.lds-card { background: var(--lv-surface); border: 1px solid var(--lv-line-2);
  border-radius: var(--lv-radius); box-shadow: var(--lv-shadow-1); padding: var(--lv-s5); }
.lds-card__head { display: flex; align-items: center; justify-content: space-between;
  margin: calc(-1 * var(--lv-s5)) calc(-1 * var(--lv-s5)) var(--lv-s4);
  padding: var(--lv-s3) var(--lv-s5); border-bottom: 1px solid var(--lv-line-2);
  font-weight: var(--lv-fw-med); }

/* KPI tile (dashboards) */
.lds-kpi { background: #fff; border: 1px solid var(--lv-line-2); border-left: 3px solid var(--lv-primary);
  border-radius: var(--lv-radius); padding: var(--lv-s4); }
.lds-kpi__value { font-size: var(--lv-fs-2xl); font-weight: var(--lv-fw-semi); color: var(--lv-ink); }
.lds-kpi__label { font-size: var(--lv-fs-sm); color: var(--lv-muted); }

/* ===== Tables / listings =================================================== */
.lds-table { width: 100%; border-collapse: collapse; font-size: var(--lv-fs-sm); }
.lds-table thead th { text-align: left; font-weight: var(--lv-fw-med); color: var(--lv-ink-2);
  background: var(--lv-surface-3); padding: var(--lv-s3); border-bottom: 2px solid var(--lv-line); }
.lds-table tbody td { padding: var(--lv-s3); border-bottom: 1px solid var(--lv-line-2); }
.lds-table tbody tr:hover { background: var(--lv-primary-tint); }

/* ===== Badges / status ===================================================== */
.lds-badge { display: inline-block; padding: 2px 10px; font-size: var(--lv-fs-xs);
  font-weight: var(--lv-fw-med); border-radius: var(--lv-radius-pill); line-height: 1.6; }
.lds-badge--success { background: #e6f5ec; color: #1c7c3e; }
.lds-badge--warning { background: #fff3e0; color: #b26a00; }
.lds-badge--danger  { background: #fbe6e6; color: #a12a2a; }
.lds-badge--info    { background: var(--lv-primary-tint); color: var(--lv-primary-700); }

/* ===== Tabs / pills (mirrors oneway/roundtrip nav-pills) ==================== */
.lds-tabs { display: flex; gap: var(--lv-s1); border-bottom: 1px solid var(--lv-line); }
.lds-tab { padding: var(--lv-s2) var(--lv-s4); font-weight: var(--lv-fw-med); color: var(--lv-ink-2);
  border-bottom: 2px solid transparent; cursor: pointer; }
.lds-tab.is-active { color: var(--lv-primary); border-bottom-color: var(--lv-primary); }

/* ===== Alerts ============================================================== */
.lds-alert { border: 1px solid; border-radius: var(--lv-radius); padding: var(--lv-s3) var(--lv-s4);
  font-size: var(--lv-fs-sm); }
.lds-alert--info    { background: var(--lv-primary-tint); border-color: var(--lv-primary-600); color: var(--lv-primary-700); }
.lds-alert--success { background: #e6f5ec; border-color: var(--lv-success); color: #1c7c3e; }
.lds-alert--danger  { background: #fbe6e6; border-color: var(--lv-danger); color: #a12a2a; }

/* ===========================================================================
   BOOTSTRAP-4 RE-SKIN BLOCK  ·  operator (gds.css) + public site
   ---------------------------------------------------------------------------
   Both the Operator platform and the public redesign are Bootstrap-4 based.
   Re-pointing Bootstrap's own component classes at the tokens reskins the
   ENTIRE operator app by editing one seam (css/gds.css). The Back Office has
   no Bootstrap, so it consumes the tokens via .lds-* / lt-mod instead.
   =========================================================================== */
.btn-primary { background: var(--lv-primary) !important; border-color: var(--lv-primary) !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--lv-primary-600) !important; border-color: var(--lv-primary-600) !important; }
.btn-outline-primary { color: var(--lv-primary) !important; border-color: var(--lv-primary) !important; }
.btn-outline-primary:hover { background: var(--lv-primary) !important; color: #fff !important; }
.btn-success { background: var(--lv-success) !important; border-color: var(--lv-success) !important; }
.btn-danger  { background: var(--lv-danger)  !important; border-color: var(--lv-danger)  !important; }
.text-primary, .font-blue, .font-blue-bold { color: var(--lv-primary) !important; }
.bg-primary  { background: var(--lv-primary) !important; }
.badge-primary { background: var(--lv-primary) !important; }
.badge-info    { background: var(--lv-primary-600) !important; }
.badge-success { background: var(--lv-success) !important; }
.badge-warning { background: var(--lv-warning) !important; color: #fff !important; }
.badge-danger  { background: var(--lv-danger)  !important; }
.badge { font-weight: var(--lv-fw-med); border-radius: var(--lv-radius-pill); }
.nav-tabs .nav-link.active { color: var(--lv-primary); border-bottom: 2px solid var(--lv-primary); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--lv-primary); }
.page-link { color: var(--lv-primary); }
.page-item.active .page-link { background: var(--lv-primary); border-color: var(--lv-primary); }
.breadcrumb { background: var(--lv-surface-3); border-radius: var(--lv-radius); }
.breadcrumb-item.active { color: var(--lv-muted); }
.form-control { border-radius: var(--lv-radius); border-color: var(--lv-line); font-family: var(--lv-font); }
.form-control:focus { border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); }
.sidebar .nav-link.active { background: var(--lv-primary); color: #fff; border-radius: var(--lv-radius); }
body, .btn, .form-control, .nav, .card { font-family: var(--lv-font); }

/* ===========================================================================
   jQuery-UI DIALOG RE-SKIN  ·  Back Office (dialog.css seam, 44 files use it)
   =========================================================================== */
.ui-dialog { border: 0; border-radius: var(--lv-radius); box-shadow: var(--lv-shadow-3); }
.ui-dialog .ui-dialog-titlebar { background: var(--lv-primary); color: #fff; border: 0;
  border-radius: var(--lv-radius) var(--lv-radius) 0 0; font-family: var(--lv-font); font-weight: var(--lv-fw-med); }
.ui-dialog .ui-dialog-buttonpane button.ui-button { font-family: var(--lv-font); border-radius: var(--lv-radius); }
.ui-widget { font-family: var(--lv-font); }