/* =========================================================
   S.E.A ROOM MANAGEMENT — MODERN UI V2
   ========================================================= */
* { box-sizing: border-box; }

:root {
  --sea-red: #e20d20;
  --sea-red-dark: #bd0717;
  --sea-orange: #ed6417;
  --sea-purple: #7c2bbd;

  --ink-950: #151820;
  --ink-900: #20242e;
  --ink-800: #303746;
  --ink-700: #4d5667;
  --ink-600: #657083;
  --ink-500: #7d8798;

  --surface: #ffffff;
  --surface-soft: #f7f8fb;
  --surface-tint: #fff7f7;
  --line: #e9ebf0;

  --green: #20a66a;
  --green-soft: #eaf8f1;
  --orange-soft: #fff2e9;
  --purple-soft: #f5edfb;
  --red-soft: #fff0f1;

  --shadow-sm: 0 8px 22px rgba(31, 36, 48, 0.05);
  --shadow-md: 0 18px 48px rgba(31, 36, 48, 0.10);
  --shadow-lg: 0 28px 80px rgba(31, 36, 48, 0.15);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --sidebar: 270px;

  font-synthesis: none;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-900);
  background: var(--surface-soft);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
input, select { outline: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.mobile-only, .desktop-hidden { display: none; }

/* LOGIN */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(480px, 1.15fr) minmax(430px, .85fr);
  background: #fff;
}

.login-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 64px clamp(52px, 7vw, 110px);
  color: #fff;
  background:
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.12), transparent 27%),
    linear-gradient(135deg, #c70819 0%, #e11924 45%, #6d1fa6 130%);
}

.login-visual::after {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  right: -260px;
  bottom: -260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025);
}

.visual-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .5;
}
.visual-glow-one { width: 260px; height: 260px; background: #ff8b33; top: -120px; left: -70px; }
.visual-glow-two { width: 280px; height: 280px; background: #7c2bbd; right: 30px; bottom: -120px; }

.login-brand { position: relative; z-index: 2; max-width: 660px; }
.login-logo {
  width: 210px;
  height: 82px;
  object-fit: contain;
  object-position: left center;
  background: #fff;
  border-radius: 18px;
  padding: 8px 14px;
  margin-bottom: 38px;
  box-shadow: 0 18px 36px rgba(52, 0, 7, .18);
}
.login-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  opacity: .72;
  margin-bottom: 14px;
}
.login-brand h1 {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.login-brand > p {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 24px 0 32px;
}
.login-points { display: flex; gap: 10px; flex-wrap: wrap; }
.login-point {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 650;
}
.login-point span {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 42px;
  background:
    radial-gradient(circle at 100% 0%, rgba(226,13,32,.055), transparent 30%),
    #fff;
}
.login-card { width: min(460px, 100%); }
.mobile-login-logo { display: none; }
.eyebrow, .panel-kicker, .welcome-eyebrow {
  color: var(--sea-red);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
}
.login-card h2 {
  font-size: 34px;
  margin: 10px 0 7px;
  letter-spacing: -.035em;
}
.muted { color: var(--ink-600); }

.auth-form {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}
.auth-form label, .form-field label {
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 750;
}
.auth-form label:not(:first-child) { margin-top: 8px; }
.input-wrap {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  transition: .2s ease;
}
.input-wrap:focus-within {
  border-color: rgba(226,13,32,.58);
  box-shadow: 0 0 0 4px rgba(226,13,32,.07);
}
.input-wrap svg { width: 18px; color: var(--ink-500); }
.input-wrap input {
  border: 0;
  width: 100%;
  min-width: 0;
  color: var(--ink-900);
  font-size: 15px;
  background: transparent;
}
.form-message {
  min-height: 20px;
  margin: 4px 0 0;
  color: var(--sea-red);
  font-size: 13px;
  line-height: 1.5;
}
.login-foot {
  color: var(--ink-500);
  font-size: 12px;
  text-align: center;
  margin-top: 34px;
}

/* BUTTONS */
.btn {
  min-height: 44px;
  padding: 0 17px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 760;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--sea-red), #f22838);
  box-shadow: 0 12px 25px rgba(226,13,32,.20);
}
.btn-primary:hover { box-shadow: 0 15px 30px rgba(226,13,32,.26); }
.btn-secondary {
  color: var(--ink-800);
  background: #f1f3f6;
}
.btn-danger {
  color: #fff;
  background: var(--sea-red);
}
.btn-block { width: 100%; min-height: 52px; margin-top: 12px; }

/* APP LAYOUT */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  background: #fff;
  border-right: 1px solid var(--line);
}

.brand-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 22px;
}
.brand-logo {
  width: 72px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}
.brand-copy { min-width: 0; }
.brand-copy strong {
  display: block;
  font-size: 17px;
  letter-spacing: -.02em;
}
.brand-copy span {
  display: block;
  color: var(--ink-500);
  font-size: 11px;
  margin-top: 2px;
}

.sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.nav-label {
  padding: 10px 12px 8px;
  color: #a0a7b4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}
.nav-label-spaced { margin-top: 12px; }
.nav-item {
  width: 100%;
  height: 47px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 13px;
  color: var(--ink-600);
  background: transparent;
  text-align: left;
  font-size: 14px;
  transition: .18s ease;
}
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover {
  color: var(--ink-900);
  background: #f7f7f9;
}
.nav-item.active {
  color: var(--sea-red);
  background: linear-gradient(90deg, #fff0f1 0%, #fff6f6 100%);
  font-weight: 760;
  box-shadow: inset 3px 0 0 var(--sea-red);
}
.nav-badge {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  color: var(--ink-600);
  background: #f0f2f5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}
.secure-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sea-purple);
  box-shadow: 0 0 0 4px var(--purple-soft);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.user-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 12px;
}
.avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--sea-red), var(--sea-orange));
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(226,13,32,.18);
}
.avatar-small { width: 34px; height: 34px; border-radius: 11px; }
.user-mini-copy { min-width: 0; }
.user-mini-copy strong, .user-mini-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-mini-copy strong { font-size: 13px; }
.user-mini-copy span { color: var(--ink-500); font-size: 11px; margin-top: 2px; }

.logout-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--sea-red);
  background: var(--red-soft);
  font-weight: 730;
}
.logout-btn svg { width: 18px; }

.main-area { min-width: 0; }
.topbar {
  min-height: 90px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 32px;
  background: rgba(247,248,251,.88);
  border-bottom: 1px solid rgba(233,235,240,.86);
  backdrop-filter: blur(14px);
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.breadcrumb {
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 650;
  margin-bottom: 3px;
}
.breadcrumb span { color: var(--sea-red); }
.topbar h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.date-chip, .user-chip {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 5px 14px rgba(31,36,48,.025);
}
.date-chip { color: var(--ink-700); font-size: 12px; font-weight: 650; }
.date-chip svg { width: 17px; color: var(--sea-red); }
.user-chip { padding: 5px 11px 5px 6px; }
.user-chip strong, .user-chip span { display: block; }
.user-chip strong { font-size: 12px; line-height: 1.2; }
.user-chip span {
  max-width: 180px;
  color: var(--ink-500);
  font-size: 10px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-area {
  padding: 28px 32px 48px;
  max-width: 1720px;
  margin: 0 auto;
}

/* DASHBOARD */
.dashboard-overview-shell {
  display: grid;
  gap: 18px;
}

.dashboard-overview-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr .9fr;
  gap: 16px;
}

.overview-card {
  min-height: 184px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.overview-card-primary {
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.12), transparent 26%),
    linear-gradient(135deg, #c20b1a 0%, #e31b28 58%, #a72f67 100%);
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(189, 7, 23, .14);
}

.overview-card-primary .panel-kicker,
.overview-card-primary .overview-card-note,
.overview-card-primary .availability-metric span {
  color: rgba(255,255,255,.8);
}

.overview-card-accent {
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%);
}

.overview-card-list {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.overview-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mini-logo-chip {
  width: 88px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(24, 32, 56, .08);
}
.mini-logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.availability-metric,
.active-customer-metric {
  margin-top: 18px;
}
.availability-metric strong,
.active-customer-metric strong {
  display: block;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.05em;
}
.availability-metric span,
.active-customer-metric span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-600);
}
.active-customer-metric strong { color: var(--sea-purple); }
.overview-card-list h3 {
  margin: 16px 0 14px;
  font-size: 24px;
  letter-spacing: -.03em;
}
.overview-card-note {
  margin: 18px 0 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.6;
}

.room-chip-list {
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
.room-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--sea-red);
  background: rgba(226, 13, 32, .08);
  border: 1px solid rgba(226, 13, 32, .1);
  font-size: 12px;
  font-weight: 720;
}
.room-chip.empty-chip {
  color: var(--ink-500);
  background: #f4f5f7;
  border-color: #eceef2;
}

.dashboard-quick-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.quick-strip-btn {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
  border-radius: 18px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.quick-strip-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.quick-strip-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--sea-red);
  background: var(--red-soft);
  font-size: 20px;
  font-weight: 800;
  flex: 0 0 auto;
}
.quick-strip-btn strong,
.quick-strip-btn small { display: block; }
.quick-strip-btn strong {
  font-size: 14px;
  letter-spacing: -.02em;
}
.quick-strip-btn small {
  margin-top: 5px;
  color: var(--ink-500);
  font-size: 11px;
}

.room-board-panel {
  margin-top: 4px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.room-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.room-board-head h3 {
  margin: 6px 0 8px;
  font-size: 24px;
  letter-spacing: -.03em;
}
.room-board-head p {
  margin: 0;
  color: var(--ink-500);
  font-size: 12px;
}
.room-board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
}
.legend-chip i {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
}
.legend-chip.occupied { color: #128554; background: var(--green-soft); }
.legend-chip.occupied i { background: var(--green); }
.legend-chip.available { color: var(--sea-red); background: var(--red-soft); }
.legend-chip.available i { background: var(--sea-red); }
.legend-chip.inactive { color: #6e7787; background: #f1f3f5; }
.legend-chip.inactive i { background: #97a0ad; }

.dashboard-live-rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 15px;
}
.live-room-card {
  min-height: 188px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.live-room-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.live-room-card.available {
  background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
  border-color: rgba(226, 13, 32, .12);
}
.live-room-card.occupied {
  background: linear-gradient(180deg, #fff 0%, #f5fff9 100%);
  border-color: rgba(21, 162, 104, .16);
}
.live-room-card.inactive {
  background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
  border-color: #ebedf0;
}
.live-room-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.live-room-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.live-room-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff;
  border: 1px solid #f0f0f2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  flex: 0 0 auto;
}
.live-room-card.available .live-room-icon { color: var(--sea-red); }
.live-room-card.occupied .live-room-icon { color: var(--green); }
.live-room-card.inactive .live-room-icon { color: #8490a2; }
.live-room-icon svg { width: 22px; }
.live-room-title-wrap h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.025em;
}
.live-room-sub {
  margin-top: 5px;
  color: var(--ink-500);
  font-size: 11px;
}
.live-room-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.live-room-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.live-room-state.available { color: var(--sea-red); background: var(--red-soft); }
.live-room-state.available::before { background: var(--sea-red); }
.live-room-state.occupied { color: #128554; background: var(--green-soft); }
.live-room-state.occupied::before { background: var(--green); }
.live-room-state.inactive { color: #6e7787; background: #f0f2f5; }
.live-room-state.inactive::before { background: #97a0ad; }
.live-room-detail {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
}
.live-room-detail strong,
.live-room-detail span,
.live-room-detail small {
  display: block;
}
.live-room-detail strong {
  font-size: 14px;
  letter-spacing: -.02em;
}
.live-room-detail span {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
}
.live-room-detail small {
  margin-top: 7px;
  color: var(--ink-500);
  font-size: 11px;
}
.live-room-detail.success { background: rgba(20, 134, 87, .08); }
.live-room-detail.success strong { color: #117a50; }
.live-room-detail.success span { color: #256b4e; }
.live-room-detail.danger { background: rgba(226, 13, 32, .06); }
.live-room-detail.danger strong { color: var(--sea-red); }
.live-room-detail.danger span { color: #8f4450; }
.live-room-detail.neutral { background: #f4f6f8; }
.live-room-detail.neutral strong { color: var(--ink-700); }
.live-room-detail.neutral span { color: var(--ink-500); }

/* PAGE TOOLBAR / FILTER */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.page-subtitle { color: var(--ink-600); font-size: 13px; }

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
}
.search-box {
  min-height: 44px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: 12px;
  background: #f7f8fa;
  border: 1px solid transparent;
}
.search-box:focus-within { border-color: #e3e5e9; background: #fff; }
.search-box svg { width: 18px; color: var(--ink-500); }
.search-box input { width: 100%; border: 0; background: transparent; color: var(--ink-900); }
.select-control {
  min-height: 44px;
  min-width: 175px;
  padding: 0 12px;
  color: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* ROOMS */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 15px;
}
.room-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.room-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--sea-red), var(--sea-orange));
}
.room-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.room-title-wrap { display: flex; align-items: center; gap: 11px; }
.room-avatar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--sea-red);
  background: var(--red-soft);
}
.room-avatar svg { width: 21px; }
.room-title { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.room-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 760;
}
.room-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.room-status.active { color: #138453; background: var(--green-soft); }
.room-status.active::before { background: var(--green); }
.room-status.inactive { color: #737b89; background: #f0f2f5; }
.room-status.inactive::before { background: #9aa1ad; }

.room-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.room-metric {
  padding: 11px;
  border-radius: 13px;
  background: #f8f9fb;
}
.room-metric span, .room-metric strong { display: block; }
.room-metric span { color: var(--ink-500); font-size: 10px; margin-bottom: 4px; }
.room-metric strong { font-size: 13px; }
.room-rate { color: var(--sea-red); }
.room-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #eff0f3;
}
.action-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--ink-700);
  background: #f5f6f8;
  font-size: 11px;
  font-weight: 720;
}
.action-btn svg { width: 14px; height: 14px; }
.action-btn:hover { background: #eceef2; }
.action-btn.danger { color: var(--sea-red); background: var(--red-soft); }

.empty-state {
  min-height: 370px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 40px;
  border-radius: 22px;
  background: #fff;
  border: 1px dashed #dfe2e8;
}
.empty-icon {
  width: 66px; height: 66px;
  display: grid; place-items: center;
  color: var(--sea-red);
  border-radius: 21px;
  background: var(--red-soft);
}
.empty-icon svg { width: 30px; height: 30px; }
.empty-state h3 { margin: 16px 0 7px; }
.empty-state p { max-width: 430px; margin: 0 0 18px; color: var(--ink-500); font-size: 13px; }

/* MODULE PLACEHOLDERS */
.module-hero {
  min-height: 145px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px;
  border-radius: 22px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.module-icon {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 19px;
  color: var(--sea-red);
  background: var(--red-soft);
}
.module-icon.orange { color: var(--sea-orange); background: var(--orange-soft); }
.module-icon.purple { color: var(--sea-purple); background: var(--purple-soft); }
.module-icon svg { width: 29px; height: 29px; }
.module-hero h2 { margin: 4px 0 7px; font-size: 24px; letter-spacing: -.035em; }
.module-hero p { max-width: 780px; margin: 0; color: var(--ink-600); font-size: 13px; line-height: 1.65; }
.finance-hero { border-left: 4px solid var(--sea-purple); }
.empty-module {
  min-height: 250px;
  display: grid;
  place-items: center;
  margin-top: 16px;
  padding: 30px;
  text-align: center;
  border-radius: 22px;
  background: #fff;
  border: 1px dashed #dfe2e8;
}
.empty-module strong, .empty-module span { display: block; }
.empty-module strong { font-size: 16px; }
.empty-module span { max-width: 550px; margin-top: 7px; color: var(--ink-500); font-size: 13px; line-height: 1.6; }

.finance-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
  margin-top: 16px;
}
.finance-placeholder {
  min-height: 145px;
  padding: 22px;
  border-radius: 19px;
  background: #fff;
  border: 1px solid var(--line);
}
.finance-placeholder span, .finance-placeholder strong, .finance-placeholder small { display: block; }
.finance-placeholder span { color: var(--ink-600); font-size: 12px; }
.finance-placeholder strong { font-size: 31px; margin: 8px 0 13px; }
.finance-placeholder small { color: var(--ink-500); font-size: 10px; }

/* MODAL */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18,22,30,.56);
  backdrop-filter: blur(5px);
}
.modal-card {
  width: min(590px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 23px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  animation: modalIn .18s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.03em; }
.icon-btn {
  width: 39px; height: 39px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  color: var(--ink-700);
  border-radius: 12px;
  background: #f4f5f7;
}
.icon-btn svg { width: 18px; }
.icon-btn:hover { background: #eceef1; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.form-field { min-width: 0; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 7px; }
.form-field label span { color: var(--sea-red); }
.form-field input, .form-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.form-field input:focus, .form-field select:focus {
  border-color: rgba(226,13,32,.52);
  box-shadow: 0 0 0 4px rgba(226,13,32,.06);
}
.input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.input-suffix:focus-within {
  border-color: rgba(226,13,32,.52);
  box-shadow: 0 0 0 4px rgba(226,13,32,.06);
}
.input-suffix input { border: 0; box-shadow: none !important; }
.input-suffix span {
  flex: 0 0 auto;
  padding: 0 12px;
  color: var(--ink-500);
  font-size: 11px;
}
.field-help { display: block; margin-top: 6px; color: var(--ink-500); font-size: 10px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* TOAST */
.toast-container {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 200;
  display: grid;
  gap: 8px;
}
.toast {
  min-width: 280px;
  max-width: 390px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  animation: toastIn .2s ease;
}
.toast-icon {
  width: 29px; height: 29px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #148657;
  background: var(--green-soft);
  font-weight: 850;
}
.toast.error .toast-icon { color: var(--sea-red); background: var(--red-soft); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 12px; }
.toast span { color: var(--ink-500); font-size: 10px; margin-top: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .dashboard-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-overview-grid .overview-card-primary { grid-column: 1 / -1; }
  .dashboard-quick-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-live-rooms-grid, .rooms-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 28px; }
  .mobile-login-logo { display: block; margin-bottom: 30px; }
  .mobile-login-logo img { width: 160px; height: 70px; object-fit: contain; object-position: left center; }

  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-105%);
    width: min(300px, 88vw);
    box-shadow: var(--shadow-lg);
    transition: transform .22s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(18,22,30,.45);
    backdrop-filter: blur(3px);
  }
  .mobile-only, .desktop-hidden { display: grid; }
  .brand-box .mobile-only { margin-left: auto; }
  .topbar { padding: 14px 18px; min-height: 76px; }
  .content-area { padding: 20px 18px 38px; }
  .date-chip { display: none; }
}

@media (max-width: 760px) {
  .dashboard-overview-grid,
  .dashboard-quick-strip,
  .dashboard-live-rooms-grid,
  .finance-placeholder-grid,
  .rooms-grid { grid-template-columns: 1fr; }
  .room-board-head { flex-direction: column; }
  .page-toolbar { align-items: flex-start; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .select-control { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-full { grid-column: auto; }
  .topbar-actions .user-chip > div:last-child { display: none; }
}

@media (max-width: 520px) {
  .topbar h1 { font-size: 21px; }
  .content-area { padding-left: 13px; padding-right: 13px; }
  .overview-card,
  .room-board-panel,
  .room-card,
  .customer-card,
  .module-hero { border-radius: 17px; }
  .quick-strip-btn { min-height: 82px; }
  .page-toolbar { flex-direction: column; }
  .page-toolbar .btn { width: 100%; }
  .module-hero { align-items: flex-start; flex-direction: column; }
}


/* CUSTOMERS */
.customers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.customer-card {
  position: relative;
  overflow: hidden;
  min-height: 215px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}

.customer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.customer-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--sea-orange), var(--sea-purple));
}

.customer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-title-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.customer-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--sea-orange);
  background: var(--orange-soft);
  font-weight: 850;
}

.customer-title {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.customer-org {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.customer-info {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.customer-info-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 11px;
  background: #f8f9fb;
  color: var(--ink-700);
}

.customer-info-row svg {
  width: 15px;
  height: 15px;
  color: var(--ink-500);
}

.customer-info-row span {
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-note {
  margin-top: 11px;
  padding: 10px 11px;
  border-radius: 11px;
  background: #fff8f3;
  color: var(--ink-600);
  font-size: 11px;
  line-height: 1.5;
}

.customer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #eff0f3;
}

.form-field textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 12px 13px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  font: inherit;
}

.form-field textarea:focus {
  border-color: rgba(226,13,32,.52);
  box-shadow: 0 0 0 4px rgba(226,13,32,.06);
}

@media (max-width: 1180px) {
  .customers-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .customers-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   V4 — CLEAN HEADER + BOOKING MODULE
   ========================================================= */
.brand-box-simple {
  min-height: 66px;
  justify-content: flex-start;
  padding: 0 10px 22px;
}
.brand-logo-main {
  width: 118px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}

/* Hai nút được bỏ theo yêu cầu: không hiển thị nút đóng sidebar / hamburger. */
#openSidebarBtn, #closeSidebarBtn { display: none !important; }

.booking-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.booking-summary-item {
  min-height: 88px;
  padding: 17px 19px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.booking-summary-item span, .booking-summary-item strong { display: block; }
.booking-summary-item span { color: var(--ink-500); font-size: 11px; font-weight: 650; }
.booking-summary-item strong { margin-top: 5px; font-size: 27px; letter-spacing: -.04em; }

.booking-filter-bar { flex-wrap: wrap; }
.bookings-list { display: grid; gap: 11px; }
.booking-card {
  display: grid;
  grid-template-columns: 126px minmax(150px, .85fr) minmax(180px, 1fr) minmax(155px,.8fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.booking-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.booking-date-block strong, .booking-date-block span { display:block; }
.booking-date-block strong { font-size: 15px; }
.booking-date-block span { margin-top: 3px; color: var(--ink-500); font-size: 10px; }
.booking-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 780;
}
.booking-time svg { width: 16px; color: var(--sea-red); }
.booking-main strong, .booking-main span { display:block; }
.booking-main strong { font-size: 13px; }
.booking-main span { margin-top:4px; color: var(--ink-500); font-size: 10px; }
.booking-room-chip {
  display: inline-flex;
  align-items:center;
  gap: 7px;
  width: fit-content;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--ink-700);
  background:#f7f8fa;
  font-size: 11px;
  font-weight: 720;
}
.booking-room-chip svg { width:14px; color: var(--sea-purple); }
.booking-type-badge {
  display:inline-flex;
  align-items:center;
  width: fit-content;
  padding: 7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:780;
}
.booking-type-badge.single { color: var(--sea-red); background:var(--red-soft); }
.booking-type-badge.fixed { color:var(--sea-purple); background:var(--purple-soft); }
.booking-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.booking-note-line { margin-top:4px; color:var(--ink-500); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }

.modal-card-wide { width: min(760px, 100%); }
.booking-type-picker {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:20px;
}
.booking-type-option {
  min-height:82px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:12px 14px;
  text-align:left;
  border-radius:15px;
  color:var(--ink-700);
  background:#fafbfc;
  border:1px solid var(--line);
  transition:.18s ease;
}
.booking-type-option:hover { background:#fff; border-color:#dfe2e8; }
.booking-type-option.active {
  color:var(--ink-900);
  background:var(--red-soft);
  border-color:rgba(226,13,32,.30);
  box-shadow:0 0 0 3px rgba(226,13,32,.045);
}
.booking-type-option[data-booking-type="fixed"].active {
  background:var(--purple-soft);
  border-color:rgba(124,43,189,.26);
  box-shadow:0 0 0 3px rgba(124,43,189,.04);
}
.booking-type-option strong, .booking-type-option small { display:block; }
.booking-type-option strong { font-size:13px; }
.booking-type-option small { margin-top:4px; color:var(--ink-500); font-size:10px; line-height:1.4; }
.booking-type-icon {
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; color:var(--sea-red); background:#fff;
}
.booking-type-icon.purple { color:var(--sea-purple); }
.booking-type-icon svg { width:19px; }
.booking-form-section {
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid #eff0f3;
}
.weekday-picker { display:flex; flex-wrap:wrap; gap:7px; }
.weekday-picker label { margin:0; cursor:pointer; }
.weekday-picker input { position:absolute; opacity:0; pointer-events:none; }
.weekday-picker span {
  width:42px; height:38px; display:grid; place-items:center;
  border-radius:11px; color:var(--ink-600); background:#f5f6f8;
  border:1px solid transparent; font-size:11px; font-weight:780;
  transition:.16s ease;
}
.weekday-picker input:checked + span {
  color:#fff; background:linear-gradient(135deg,var(--sea-red),#f22c39);
  border-color:var(--sea-red); box-shadow:0 8px 16px rgba(226,13,32,.14);
}
.booking-preview {
  margin-top:15px;
  padding:12px 14px;
  border-radius:13px;
  color:#5e4b0a;
  background:#fff8d9;
  border:1px solid #f3e4a1;
  font-size:11px;
  line-height:1.55;
}
.booking-preview.error { color:#9b101b; background:var(--red-soft); border-color:#ffd3d7; }

/* Mobile: thay hamburger bằng thanh menu ngang, không cần nút mở/đóng. */
@media (max-width: 980px) {
  .app-shell { display:block; }
  .sidebar {
    position:relative;
    top:auto;
    width:100%;
    height:auto;
    transform:none !important;
    padding:12px 12px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
    box-shadow:none;
  }
  .brand-box-simple { min-height:auto; padding:0 5px 10px; }
  .brand-logo-main { width:96px; height:44px; }
  .sidebar-nav { display:flex; gap:6px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none; }
  .sidebar-nav::-webkit-scrollbar { display:none; }
  .nav-label { display:none; }
  .nav-item {
    flex:0 0 auto;
    width:auto;
    grid-template-columns:20px auto auto;
    padding:0 11px;
    white-space:nowrap;
  }
  .sidebar-footer { display:none; }
  .sidebar-backdrop { display:none !important; }
  .topbar { position:sticky; top:0; }
  .booking-card { grid-template-columns:110px 1fr 1fr; }
  .booking-card .booking-type-wrap { display:none; }
  .booking-actions { grid-column:1 / -1; justify-content:flex-start; padding-top:10px; border-top:1px solid #eff0f3; }
}
@media (max-width: 760px) {
  .booking-summary { grid-template-columns:1fr; }
  .booking-card { grid-template-columns:1fr 1fr; gap:12px; }
  .booking-main { grid-column:1 / -1; }
  .booking-type-picker { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .booking-card { grid-template-columns:1fr; }
  .booking-actions { grid-column:auto; }
}

/* =========================================================
   V6 — PRICING PER SESSION + FINANCE WORKFLOW
   ========================================================= */
.equipment-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.equipment-picker label { margin: 0; cursor: pointer; }
.equipment-picker input { position: absolute; opacity: 0; pointer-events: none; }
.equipment-picker span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-600);
  background: #f5f6f8;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 720;
  transition: .16s ease;
}
.equipment-picker input:checked + span {
  color: var(--sea-red);
  background: var(--red-soft);
  border-color: rgba(226,13,32,.18);
}
.room-metric-wide { grid-column: 1 / -1; }
.room-note-inline {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink-600);
  background: #f8f9fb;
  font-size: 11px;
  line-height: 1.5;
}
.booking-session-rate {
  width: fit-content;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--sea-red);
  background: var(--red-soft);
  font-size: 11px;
  font-weight: 800;
}
.booking-type-badge.cancelled {
  color: #6f7786;
  background: #f0f2f5;
}
.booking-invoice-line {
  margin-top: 6px;
  color: var(--sea-purple);
  font-size: 10px;
  font-weight: 760;
}

.finance-shell { display: grid; gap: 18px; }
.finance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.finance-head h2 { margin: 5px 0 7px; font-size: 28px; letter-spacing: -.035em; }
.finance-head p { margin: 0; max-width: 760px; color: var(--ink-600); font-size: 13px; line-height: 1.6; }
.finance-tab-switch,
.finance-view-switch {
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: #f2f4f7;
}
.finance-tab-btn,
.finance-view-btn {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 10px;
  color: var(--ink-600);
  background: transparent;
  font-size: 12px;
  font-weight: 780;
}
.finance-tab-btn.active,
.finance-view-btn.active {
  color: var(--sea-red);
  background: #fff;
  box-shadow: 0 6px 16px rgba(31,36,48,.07);
}
.finance-view { display: grid; gap: 16px; }
.finance-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}
.finance-toolbar label { display: block; margin-bottom: 6px; color: var(--ink-600); font-size: 11px; font-weight: 750; }
.finance-toolbar input[type="month"] {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink-900);
}
.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.finance-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.finance-kpi {
  min-height: 132px;
  padding: 20px;
  border-radius: 19px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.finance-kpi span,
.finance-kpi strong,
.finance-kpi small { display: block; }
.finance-kpi > span { color: var(--ink-600); font-size: 12px; font-weight: 680; }
.finance-kpi strong { margin-top: 7px; font-size: 29px; letter-spacing: -.04em; }
.finance-kpi small { margin-top: 10px; color: var(--ink-500); font-size: 10px; line-height: 1.45; }
.finance-kpi.primary { color: #fff; background: linear-gradient(135deg,#c40b1a,#e91f30 64%,#982d68); border-color: transparent; }
.finance-kpi.primary > span,
.finance-kpi.primary small { color: rgba(255,255,255,.78); }
.finance-kpi.alert { border-left: 4px solid var(--sea-red); }
.finance-kpi.warning { border-left: 4px solid var(--sea-orange); }
.finance-kpi.success { border-left: 4px solid var(--green); }

.finance-table-card {
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.finance-table-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.finance-table-head h3 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.025em; }
.forecast-breakdown { display: grid; gap: 9px; }
.forecast-group {
  overflow: hidden;
  border: 1px solid #eceef2;
  border-radius: 14px;
  background: #fff;
}
.forecast-group summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}
.forecast-group summary::-webkit-details-marker { display: none; }
.forecast-group summary > div strong,
.forecast-group summary > div span { display: block; }
.forecast-group summary > div strong { font-size: 13px; }
.forecast-group summary > div span { margin-top: 4px; color: var(--ink-500); font-size: 10px; }
.forecast-group summary > strong { color: var(--sea-red); font-size: 14px; }
.forecast-detail-list { border-top: 1px solid #eff0f3; background: #fafbfc; }
.forecast-detail-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid #eef0f3;
  font-size: 11px;
}
.forecast-detail-row:last-child { border-bottom: 0; }
.forecast-detail-row span { color: var(--ink-600); }
.forecast-detail-row strong { font-size: 11px; }
.finance-empty {
  min-height: 90px;
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: 14px;
  color: var(--ink-500);
  background: #f8f9fb;
  border: 1px dashed #dfe2e8;
  text-align: center;
  font-size: 12px;
}
.finance-empty.success-empty { color: #137d52; background: var(--green-soft); border-color: #ccebdc; }

.invoice-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
}
.invoice-list { display: grid; gap: 10px; }
.invoice-customer-card,
.invoice-card {
  padding: 15px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid #eceef2;
}
.invoice-customer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invoice-customer-card.alert { border-left: 4px solid var(--sea-red); }
.invoice-card-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.invoice-card-main strong,
.invoice-card-main span,
.invoice-card-main small { display: block; }
.invoice-card-main strong { font-size: 13px; }
.invoice-card-main span { margin-top: 4px; color: var(--ink-600); font-size: 10px; }
.invoice-card-main small { margin-top: 4px; color: var(--sea-red); font-size: 10px; }
.invoice-status-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 5px #f7f7f8; flex: 0 0 auto; }
.invoice-status-dot.red { background: var(--sea-red); box-shadow: 0 0 0 5px var(--red-soft); }
.invoice-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.invoice-card-head strong,
.invoice-card-head span { display: block; }
.invoice-no { color: var(--ink-500); font-size: 9px; font-weight: 780; letter-spacing: .06em; }
.invoice-card-head strong { margin-top: 4px; font-size: 13px; }
.invoice-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.invoice-status-badge.pending { color: var(--sea-orange); background: var(--orange-soft); }
.invoice-status-badge.partial { color: #9b6512; background: #fff6da; }
.invoice-status-badge.paid { color: #128554; background: var(--green-soft); }
.invoice-card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; color: var(--ink-500); font-size: 10px; }
.invoice-money-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.invoice-money-grid > div { padding: 9px; border-radius: 10px; background: #f8f9fb; }
.invoice-money-grid span,
.invoice-money-grid strong { display: block; }
.invoice-money-grid span { color: var(--ink-500); font-size: 9px; }
.invoice-money-grid strong { margin-top: 4px; font-size: 11px; }
.invoice-card-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.invoice-complete-label { color: #128554; font-size: 11px; font-weight: 800; }

.invoice-customer-summary,
.invoice-total-bar,
.payment-summary {
  margin-top: 18px;
  padding: 15px;
  border-radius: 15px;
  background: #f8f9fb;
  border: 1px solid #eceef2;
}
.invoice-customer-summary span,
.invoice-customer-summary strong { display: block; }
.invoice-customer-summary span { color: var(--ink-500); font-size: 10px; }
.invoice-customer-summary strong { margin-top: 4px; font-size: 16px; }
.invoice-range-grid { margin-top: 14px; }
.invoice-select-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.invoice-select-head strong,
.invoice-select-head span { display: block; }
.invoice-select-head strong { font-size: 13px; }
.invoice-select-head span { margin-top: 4px; color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.invoice-booking-picker { display: grid; gap: 7px; max-height: 300px; overflow-y: auto; margin-top: 10px; padding-right: 3px; }
.invoice-booking-row {
  display: grid;
  grid-template-columns: 22px 96px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fafbfc;
  border: 1px solid #eff0f3;
  cursor: pointer;
  font-size: 10px;
}
.invoice-booking-row input { width: 16px; height: 16px; accent-color: var(--sea-red); }
.invoice-booking-row strong { color: var(--sea-red); font-size: 11px; }
.invoice-booking-row.missing-rate { background: var(--red-soft); border-color: #ffd4d8; }
.invoice-booking-date { font-weight: 760; }
.invoice-total-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-total-bar span { color: var(--ink-600); font-size: 11px; }
.invoice-total-bar strong { color: var(--sea-red); font-size: 19px; }
.payment-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.payment-summary > div { min-width: 0; }
.payment-summary span,
.payment-summary strong { display: block; }
.payment-summary span { color: var(--ink-500); font-size: 9px; }
.payment-summary strong { margin-top: 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .finance-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .invoice-workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .finance-head { flex-direction: column; align-items: stretch; }
  .finance-tab-switch { width: 100%; }
  .finance-tab-btn { flex: 1; }
  .finance-toolbar { flex-direction: column; align-items: stretch; }
  .finance-kpi-grid,
  .finance-kpi-grid-4 { grid-template-columns: 1fr; }
  .forecast-detail-row { grid-template-columns: 1fr auto; }
  .forecast-detail-row span:nth-child(2) { grid-column: 1 / -1; }
  .invoice-customer-card { align-items: stretch; flex-direction: column; }
  .invoice-customer-card .btn { width: 100%; }
  .invoice-money-grid { grid-template-columns: 1fr; }
  .invoice-booking-row { grid-template-columns: 22px 1fr auto; }
  .invoice-booking-date { grid-column: 2 / -1; }
  .payment-summary { grid-template-columns: 1fr; }
}