/*
 * MEILIJEWELRY | LUXURY BLUE-NAVY + METALLIC GOLD
 * Unified presentation layer · 2026-10-09
 * Only applied to pages with html.ml-luxury-ui.
 * NEVER defines display:none on business elements, form behavior, business states,
 * grid ordering, data attributes, JS hooks or stock/calculation inputs.
 * Load after each page's own CSS so this is an opt-in visual skin.
 */
html.ml-luxury-ui {
  --ml-navy-950: #06152b;
  --ml-navy-900: #0a2347;
  --ml-navy-800: #123a70;
  --ml-navy-700: #174a83;
  --ml-gold-100: #fff6d5;
  --ml-gold-300: #f6d878;
  --ml-gold-500: #d9ad32;
  --ml-gold-700: #9c6c08;
  --ml-canvas: #f4f8ff;
  --ml-paper: #fff;
  --ml-text: #142945;
  --ml-muted: #68788f;
  --ml-border: rgba(17,53,99,.12);
  --ml-shadow: 0 12px 34px rgba(10,35,71,.085);
  --ml-shadow-lg: 0 22px 52px rgba(10,35,71,.13);
  --ml-radius-lg: 22px;
  --ml-radius-md: 15px;
  --ml-focus: 0 0 0 3px rgba(217,173,50,.21);
  color-scheme: light;
  accent-color: var(--ml-navy-800);
}
/* Leave high-contrast TV/kiosk pages' display geometry intact. */
html.ml-luxury-ui:not(.ml-page-g):not(.ml-page-gold_board) body {
  color: var(--ml-text);
  font-family: 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
}
html.ml-luxury-ui:not(.ml-page-g):not(.ml-page-gold_board):not(.ml-page-login):not(.ml-page-checkin) body {
  background-color: var(--ml-canvas);
}
html.ml-luxury-ui a { text-underline-offset: 3px; }
html.ml-luxury-ui :is(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--ml-gold-500);
  outline-offset: 2px;
}
html.ml-luxury-ui .form-control:focus,
html.ml-luxury-ui .form-select:focus,
html.ml-luxury-ui input[type="search"]:focus {
  border-color: var(--ml-gold-500);
  box-shadow: var(--ml-focus);
}
html.ml-luxury-ui :is(.form-control, .form-select, .input-group-text) {
  border-color: #d9e3ef;
  border-radius: 12px;
}
html.ml-luxury-ui .input-group > :is(.form-control, .form-select, .input-group-text):not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html.ml-luxury-ui .input-group > :is(.form-control, .form-select, .input-group-text):not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html.ml-luxury-ui .btn-primary,
html.ml-luxury-ui .btn-primary-pill,
html.ml-luxury-ui .btn-cta,
html.ml-luxury-ui .btn-pink,
html.ml-luxury-ui .btn-gold {
  background: linear-gradient(125deg, var(--ml-gold-100),var(--ml-gold-300) 52%,var(--ml-gold-500));
  color: var(--ml-navy-900);
  border: 1px solid rgba(156,108,8,.34);
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 6px 17px rgba(157,108,8,.13);
}
html.ml-luxury-ui :is(.btn-primary, .btn-primary-pill, .btn-cta, .btn-pink, .btn-gold):hover:not(:disabled) {
  filter: brightness(.98);
  color: var(--ml-navy-950);
  box-shadow: 0 9px 24px rgba(157,108,8,.2);
}
html.ml-luxury-ui .btn-outline-primary,
html.ml-luxury-ui .btn-outline,
html.ml-luxury-ui .btn-outline-secondary {
  border-color: #bdcde0;
  color: var(--ml-navy-800);
}
html.ml-luxury-ui .btn-outline-primary:hover {
  color: #fff;
  background: var(--ml-navy-800);
  border-color: var(--ml-navy-800);
}
html.ml-luxury-ui :is(.badge.bg-primary, .bg-primary, .pagination .page-item.active .page-link) {
  background-color: var(--ml-navy-800) !important;
}
html.ml-luxury-ui .pagination .page-link { color: var(--ml-navy-800); }
html.ml-luxury-ui .card:not(.carousel-item),
html.ml-luxury-ui .card-soft,
html.ml-luxury-ui .soft-card,
html.ml-luxury-ui .app-card,
html.ml-luxury-ui .hero-card {
  border-color: var(--ml-border);
}
html.ml-luxury-ui .table thead:not(.table-dark) th {
  border-color: rgba(10,35,71,.12);
  color: var(--ml-navy-800);
}
html.ml-luxury-ui .text-muted { color: var(--ml-muted) !important; }
html.ml-luxury-ui .alert-info {
  background: #eaf3ff;
  border-color: #d4e5ff;
  color: var(--ml-navy-800);
}
/* Brand navigation -- preserve sticky, wrapping and menu collapse logic */
html.ml-luxury-ui :is(.navbar-main, nav.navbar, header.app-header) {
  background: linear-gradient(112deg,var(--ml-navy-800),var(--ml-navy-900) 65%,var(--ml-navy-950));
  border-color: rgba(246,216,120,.23);
}
html.ml-luxury-ui :is(.navbar-main, nav.navbar) :is(.navbar-brand, .nav-link) {
  color: #fff7dd;
}
html.ml-luxury-ui :is(.navbar-main, nav.navbar) :is(.navbar-brand, .nav-link):hover {
  color: var(--ml-gold-300);
}
/* Public shop: preserve product aspect ratios, carousel, navbar item layout */
html.ml-page-index :is(.intro-head, .hero-head, .section-head h2),
html.ml-page-index_list .section-head h1,
html.ml-page-contact .section-title,
html.ml-page-index_product_search .section-head {
  color: var(--ml-navy-900);
}
html.ml-page-index :is(.card, .hero-frame),
html.ml-page-index_list .card,
html.ml-page-contact :is(.info-card, .social-card) {
  border-color: var(--ml-border);
  box-shadow: var(--ml-shadow);
}
html.ml-page-index_list {
  --pink: #d9ad32;
  --pink-2: #f6d878;
  --paper-2: #f4f8ff;
  --ink: #142945;
  --shadow: 0 12px 28px rgba(10,35,71,.10);
}
html.ml-page-index_list .navbar { border-bottom: 1px solid rgba(246,216,120,.24); }
html.ml-page-index_list .rec-img-wrap { background: #f8fbff; }
html.ml-page-index_list .section-head h1 { font-weight: 800; }
html.ml-page-contact {
  --brand: #123a70;
  --brand-2: #174a83;
  --cloud: #f4f8ff;
  --ink: #142945;
  --line: rgba(10,35,71,.10);
  --line-strong: rgba(217,173,50,.24);
  --surface: #fff;
}
html.ml-page-contact .hero-panel,
html.ml-page-contact .social-card,
html.ml-page-contact .info-card { border-color: rgba(10,35,71,.11); }
html.ml-page-contact :is(.info-icon, .social-badge) { color: var(--ml-navy-800); }
/* Product catalog already has a production-tested Blue Navy/Gold UI: align tokens only. */
html.ml-page-index_product,
html.ml-page-speed_product,
html.ml-page-index_product_amulet,
html.ml-page-index_product_amulet_detail,
html.ml-page-index_product_search {
  --navy-1: var(--ml-navy-950);
  --navy-2: var(--ml-navy-900);
  --navy-3: var(--ml-navy-800);
  --gold-1: var(--ml-gold-100);
  --gold-2: var(--ml-gold-300);
  --gold-3: var(--ml-gold-500);
  --gold-4: var(--ml-gold-700);
}
/* Account/login flows: backgrounds, titles, shell, actions; field names & states unchanged. */
html.ml-page-login_employee,
html.ml-page-login_customer,
html.ml-page-register_customer,
html.ml-page-terms_accept {
  --navy: var(--ml-navy-950);
  --navy2: var(--ml-navy-900);
  --navy3: var(--ml-navy-800);
  --goldA: var(--ml-gold-100);
  --goldB: var(--ml-gold-300);
  --goldC: var(--ml-gold-500);
  --goldD: var(--ml-gold-700);
  --bg1: #f1f6ff;
  --bg2: #fff8e8;
  --bg3: #edf5ff;
}
html.ml-page-login_employee body,
html.ml-page-login_customer body,
html.ml-page-register_customer body,
html.ml-page-terms_accept body {
  background: radial-gradient(ellipse at 10% 0%,#e4efff 0,transparent 50%),
              radial-gradient(ellipse at 95% 100%,#fff2cb 0,transparent 48%),
              linear-gradient(150deg,#f6faff,#eff5fe);
}
html.ml-page-login_employee :is(.card-box, .card-inner),
html.ml-page-login_customer :is(.card-box, .card-inner),
html.ml-page-register_customer :is(.register-card, .register-inner),
html.ml-page-terms_accept :is(.card-shell, .card-inner) {
  border-color: rgba(217,173,50,.18);
}
html.ml-page-login_employee .card-box,
html.ml-page-login_customer .card-box,
html.ml-page-register_customer .register-card,
html.ml-page-terms_accept .card-shell {
  box-shadow: var(--ml-shadow-lg);
}
html.ml-page-register_customer {
  --cyan: #d9ad32;
  --cyan2: #b7871c;
  --blue: #123a70;
  --blue2: #0a2347;
  --text: var(--ml-text);
  --muted: var(--ml-muted);
}
html.ml-page-register_customer .head-icon {
  background: linear-gradient(135deg,var(--ml-navy-800),var(--ml-navy-950));
  box-shadow: 0 9px 24px rgba(10,35,71,.2);
}
html.ml-page-register_customer :is(.page-title, .section-label) { color: var(--ml-navy-900); }
html.ml-page-login_employee .topbar,
html.ml-page-login_customer .topbar { border-color: rgba(217,173,50,.18); }
html.ml-page-terms_accept .terms-box { border-color: #d9e3f1; background: #fff; }
html.ml-page-login .box { border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow); }
/* Check-in pages: cool canvas and gold focus; do not change card click targets or clocks */
html.ml-page-attendance_checkin body,
html.ml-page-checkin body { background-color: var(--ml-canvas); }
html.ml-page-attendance_checkin .clock-card,
html.ml-page-checkin .clock-card,
html.ml-page-attendance_checkin .emp-card,
html.ml-page-checkin .emp-card {
  border-color: var(--ml-border);
  box-shadow: var(--ml-shadow);
}
html.ml-page-attendance_checkin :is(.big-time, .emp-name),
html.ml-page-checkin :is(.big-time, .emp-name) { color: var(--ml-navy-900); }
html.ml-page-checkin .box { border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow); }
/* Employee order intake -- keep financial summaries and submitted form calculations */
html.ml-page-orderadmin {
  --navy-1: var(--ml-navy-950);
  --navy-2: var(--ml-navy-900);
  --navy-3: var(--ml-navy-800);
  --gold-1: var(--ml-gold-100);
  --gold-2: var(--ml-gold-300);
  --gold-3: var(--ml-gold-500);
}
html.ml-page-orderadmin :is(.card-soft, .hero) {
  border-color: var(--ml-border);
  box-shadow: var(--ml-shadow);
}
/* Special display screens: only hue tokens / not geometry, grids, type size or animation */
html.ml-page-g {
  --maroon1: #123a70;
  --maroon2: #071d39;
  --goldText: #f6d878;
  --goldText2: #e2b94f;
  --label1: #fff0b9;
  --label2: #f6d878;
}
html.ml-page-gold_board {
  --maroon1: #123a70;
  --maroon2: #071d39;
  --goldText: #f6d878;
  --goldText2: #e2b94f;
  --label1: #fff0b9;
  --label2: #f6d878;
}
/* Ancillary dashboard intentionally keeps sidebar and report tables functional */
html.ml-page-dashboard .sidebar {
  background: linear-gradient(170deg,var(--ml-navy-800),var(--ml-navy-950));
  border-right: 2px solid var(--ml-gold-500);
}
html.ml-page-dashboard .sidebar .nav-link.active,
html.ml-page-dashboard .sidebar .nav-link:hover { background: rgba(246,216,120,.16); color: #fff5cc; }
html.ml-page-dashboard .card-custom { border: 1px solid var(--ml-border); border-radius: 18px; box-shadow: var(--ml-shadow); }
html.ml-page-dashboard .progress-bar.bg-warning { background: var(--ml-gold-500) !important; }
/* Preserve layouts on narrow devices; improve touch clarity without adjusting menu columns */
@media (max-width:575.98px) {
  html.ml-luxury-ui .form-control,
  html.ml-luxury-ui .form-select { min-height: 40px; }
  html.ml-page-index_list .section-head h1 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
  html.ml-page-contact .hero-panel { border-radius: 18px; }
}
@media (prefers-reduced-motion:reduce) {
  html.ml-luxury-ui :is(.btn-primary,.btn-cta,.btn-pink,.btn-gold) { transition-duration: .01ms; }
}
/* Per-page legacy accent replacement (legacy cyan/pink skins) */
html.ml-page-login_customer,
html.ml-page-login_employee {
  --ui-cyan: #d9ad32;
  --ui-cyan-2: #f6d878;
  --ui-blue: #123a70;
  --ui-blue-2: #0a2347;
  --ui-text: #142945;
  --ui-muted: #68788f;
  --ui-line: rgba(10,35,71,.15);
  --ui-panel: rgba(255,255,255,.91);
}
html.ml-page-login_employee .badge-dot,
html.ml-page-login_customer .badge-dot,
html.ml-page-login_customer .title .badge-dot {
  border-color: rgba(217,173,50,.36);
  background: linear-gradient(140deg,#153e73,#0a2347);
  box-shadow: 0 8px 24px rgba(10,35,71,.18);
}
html.ml-page-login_employee .hero-title,
html.ml-page-login_customer .title,
html.ml-page-register_customer .page-title { color: var(--ml-navy-900); }
html.ml-page-login_employee .section-title,
html.ml-page-register_customer .section-label { color: var(--ml-navy-800); }
html.ml-page-login_employee .card-box,
html.ml-page-login_customer .card-box {
  background: linear-gradient(145deg,#ffffff 10%,#f6f9ff 70%,#fff8e9);
  border: 1px solid rgba(217,173,50,.22);
}
html.ml-page-login_customer .card-box::before,
html.ml-page-login_employee .card-box::before {
  border-color: rgba(217,173,50,.24);
}
html.ml-page-register_customer .register-card {
  background: linear-gradient(145deg,#ffffff,#f6f9ff);
  border: 1px solid rgba(217,173,50,.24);
}
html.ml-page-register_customer .round-btn,
html.ml-page-register_customer .lang-btn { color: var(--ml-navy-900); border-color: #d8e2f0; }
html.ml-page-register_customer :is(.form-control,.form-select) { background-color: #fff; }
html.ml-page-index_list body {
  background: radial-gradient(900px 550px at 0% 0%,rgba(196,216,249,.39),transparent 70%),
              radial-gradient(820px 450px at 96% 8%,rgba(246,216,120,.21),transparent 72%),
              #f4f8ff;
}
html.ml-page-index_list .btn-icon { color: var(--ml-gold-100); border-color: rgba(246,216,120,.34); }
html.ml-page-index_list .btn-icon:hover { color: #fff; }
html.ml-page-index_list .search-light { background: #fff; }
html.ml-page-index_list .card { background: #fff; }
html.ml-page-contact body {
  background: radial-gradient(860px 420px at -6% -6%,rgba(197,217,251,.38),transparent 70%),
              radial-gradient(850px 510px at 100% 6%,rgba(246,216,120,.22),transparent 70%),
              #f4f8ff;
}
html.ml-page-contact .hero-panel {
  background: linear-gradient(160deg,#f7faff,#fff 44%,#fffdf7);
  box-shadow: var(--ml-shadow-lg);
}
html.ml-page-contact .brand-mini { color: var(--ml-navy-900); }
html.ml-page-contact .info-icon { background: #edf3ff; }
/* Pricing boards must remain readable at a distance */
html.ml-page-g body,
html.ml-page-gold_board body { background-color: #061326; }
html.ml-page-g .frame,
html.ml-page-gold_board .frame {
  background: radial-gradient(1000px 700px at 14% 2%,rgba(40,79,134,.25),transparent 60%),
              linear-gradient(180deg,#0a2347,#061326);
  border-color: rgba(246,216,120,.17);
}