:root {
  --font-main: "Inter", Aptos, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --navy: #172554;
  --navy-2: #1e3a8a;
  --blue: #2563eb;
  --blue-2: #1d4ed8;
  --sky: #eff6ff;
  --line: #d7e2f0;
  --text: #0f172a;
  --muted: #64748b;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef5ff;
  --green: #059669;
  --red: #dc2626;
  --amber: #d97706;
  --gray: #94a3b8;
  --teal: #0f766e;
  --violet: #4f46e5;
  --shadow: 0 10px 28px rgba(15, 23, 42, .07);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
html, body, button, input, select, textarea { font-family: var(--font-main); }
body { margin: 0; font-size: 14px; color: var(--text); background: linear-gradient(180deg, #f8fbff 0, #f5f7fb 42%, #eef4fb 100%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--blue); text-decoration: none; }
svg { width: 19px; height: 19px; stroke-width: 2; vertical-align: middle; }
body.modal-open { overflow: hidden; }
.page-loader { position: fixed; inset: 0; z-index: 9999; display: none; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 12px; background: rgba(245,247,251,.82); color: var(--navy); font-weight: 900; backdrop-filter: blur(2px); }
.page-loader.show { display: grid; }
.page-loader span { width: 42px; height: 42px; border-radius: 50%; border: 4px solid #cfe0f6; border-top-color: var(--blue); animation: spin .7s linear infinite; }
.page-loader b { display: block; font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-body { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: linear-gradient(135deg, #f8fbff 0, #eef6ff 58%, #f6f9fc 100%); }
.login-shell { width: min(1320px, 100%); min-height: min(820px, calc(100vh - 48px)); display: grid; grid-template-columns: 1.08fr .92fr; border: 1px solid #d8e1ec; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 22px 70px rgba(9, 30, 66, .14); }
.login-visual { position: relative; padding: 58px 68px; color: var(--navy); background: linear-gradient(90deg, rgba(248,251,255,.96) 0%, rgba(248,251,255,.84) 34%, rgba(248,251,255,.24) 68%, rgba(248,251,255,.08) 100%), url("../images/login-hero.png") center/cover; }
.login-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 44%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.72)); pointer-events: none; }
.login-visual > * { position: relative; z-index: 1; }
.login-logo { display: block; width: 200px; max-width: 72%; height: auto; object-fit: contain; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.9); box-shadow: 0 10px 28px rgba(15,23,42,.14); }
.login-copy { position: absolute; z-index: 2; left: 68px; top: 300px; }
.login-copy h1 { margin: 0 0 14px; font-size: 36px; line-height: 1.12; letter-spacing: 0; color: #061f3f; }
.login-copy p { max-width: 350px; font-size: 18px; color: #536276; line-height: 1.45; margin: 0; }
.login-panel { display: grid; place-items: center; padding: 44px 58px; background: linear-gradient(180deg, #fff, #f8fbff); }
.login-card { width: min(500px, 100%); }
.login-card h2 { font-size: 34px; text-align: center; margin: 18px 0 10px; color: #071f48; }
.login-card > p { text-align: center; color: #637083; font-size: 15px; margin: 0 0 30px; }
.form-stack, .booking-form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; font-weight: 700; font-size: 13px; color: #172344; }
input, select, textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; min-height: 42px; padding: 0 13px; font: inherit; color: var(--text); background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
input:focus, select:focus, textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }
.login-card input { min-height: 62px; border-radius: 9px; padding: 0 18px; font-size: 16px; font-weight: 650; }
.input-icon { position: relative; display: block; }
.input-icon svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #0b61d8; width: 23px; height: 23px; }
.input-icon input { padding-left: 54px; }
.split-row, .toolbar, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.split-row { justify-content: space-between; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.check input { width: 22px; min-height: 22px; }
.divider { display: flex; align-items: center; gap: 20px; color: var(--muted); margin: 26px 0; font-weight: 800; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.btn { min-height: 40px; border: 1px solid transparent; border-radius: 6px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; font-size: 13px; cursor: pointer; background: #fff; color: var(--text); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.login-card .btn { min-height: 46px; border-radius: 8px; font-size: 14px; }
.btn.primary { background: linear-gradient(180deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 7px 16px rgba(37, 99, 235, .18); }
.btn.success { background: linear-gradient(180deg, #10b981, #047857); color: #fff; box-shadow: 0 7px 16px rgba(5, 150, 105, .16); }
.btn.outline { border-color: #93c5fd; color: #1d4ed8; background: #f8fbff; }
.btn.ghost { border-color: var(--line); color: var(--text); }
.btn.danger { background: var(--red); color: #fff; }
.btn.wide { width: 100%; }
.btn.small { min-height: 36px; padding-inline: 14px; }
.btn.mini { min-height: 32px; padding-inline: 12px; font-size: 12px; }
.btn.icon-only { width: 32px; min-width: 32px; padding: 0; }
.btn.icon-only svg { width: 15px; height: 15px; }
.link-button { border: 0; padding: 0; background: transparent; color: var(--blue); font: inherit; font-weight: 800; cursor: pointer; }
.link-button:hover { color: var(--blue-2); text-decoration: underline; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 226px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.app-shell.sidebar-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; background: linear-gradient(180deg, #172554, #1e3a8a 58%, #111827); color: #fff; overflow-x: hidden; box-shadow: inset -1px 0 0 rgba(255,255,255,.08); }
.sidebar-logo { display: grid; place-items: center; min-height: 72px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 10px 26px rgba(0,0,0,.15); }
.sidebar-logo img { display: block; max-width: 132px; width: 100%; height: 56px; object-fit: contain; }
.sidebar nav { display: grid; gap: 8px; padding-top: 0; }
.nav-item { display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 13px; color: #dbeafe; border-radius: 7px; font-size: 13px; font-weight: 750; white-space: nowrap; overflow: hidden; transition: background-color .15s ease, color .15s ease; }
.nav-item.active, .nav-item:hover { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 3px 0 0 #60a5fa; }
.nav-item svg { flex: 0 0 20px; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease; }
.sidebar-collapsed .nav-item { justify-content: center; padding: 0; gap: 0; }
.sidebar-collapsed .nav-item span { width: 0; opacity: 0; }
.sidebar-collapsed .sidebar-logo { min-height: 54px; padding: 6px; }
.sidebar-collapsed .sidebar-logo img { height: 40px; max-width: 50px; }
.sidebar-logout { margin-top: auto; }
.sidebar-logout .logout-item { width: 100%; border: 0; cursor: pointer; background: rgba(255,255,255,.1); color: #fff; font: inherit; }
.sidebar-logout .logout-item:hover { background: rgba(255,255,255,.16); }
.support-card { margin-top: auto; padding: 18px; border-radius: 8px; background: rgba(13, 99, 229, .6); display: grid; gap: 10px; }
.support-card p { margin: 0; color: #dceaff; line-height: 1.5; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(15,23,42,.02); }
.topbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar-logo { display: flex; align-items: center; min-width: 0; }
.topbar-logo img { display: block; width: 100px; max-width: 34vw; height: 90px; object-fit: contain; padding: 7px; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.11); }
.menu-toggle { margin-left: 0; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); display: grid; place-items: center; cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--sky); color: var(--blue); }
.icon-btn.badge span { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--red); font-size: 11px; font-weight: 800; }
.profile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.profile strong { font-size: 14px; }
.profile small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #dbeafe; color: var(--navy); font-weight: 900; }
.content { flex: 1; width: 100%; min-width: 0; padding: 22px 24px; overflow-x: hidden; background: linear-gradient(180deg, rgba(239,246,255,.55), rgba(245,247,251,0) 180px); }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-title h1 { margin: 0 0 7px; font-size: 24px; letter-spacing: 0; font-weight: 800; color: #111c3a; }
.page-title p { margin: 0; color: #52647a; font-size: 13px; }
.search { max-width: 320px; }
.plot-layout-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; }
.plot-layout-toolbar select { min-width: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-grid.six { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-card { min-width: 0; min-height: 104px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(180deg, #ffffff, #f8fbff); box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 3px 13px; align-content: center; }
.stat-card svg { grid-row: span 2; width: 48px; height: 48px; padding: 12px; border-radius: 8px; color: #fff; }
.stat-card strong { min-width: 0; font-size: 21px; line-height: 1.1; overflow-wrap: anywhere; }
.stat-card span { min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25; }
.stat-card a { grid-column: 1 / -1; margin-top: 8px; color: var(--navy); font-size: 12px; }
.stat-card.purple svg { background: linear-gradient(135deg, #6366f1, #4338ca); }
.stat-card.green svg { background: linear-gradient(135deg, #10b981, #047857); }
.stat-card.blue svg { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.stat-card.red svg { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.stat-card.amber svg { background: linear-gradient(135deg, #f59e0b, #b45309); }
.stat-card.cyan svg { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-link { min-height: 78px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--navy); display: flex; align-items: center; gap: 14px; font-weight: 850; box-shadow: var(--shadow-soft); }
.quick-link svg { width: 34px; height: 34px; padding: 8px; border-radius: 7px; color: #1d4ed8; background: #eff6ff; }
.quick-link.primary { color: #fff; background: linear-gradient(180deg, #2563eb, #1d4ed8); border-color: #1d4ed8; }
.quick-link.primary svg { color: #1d4ed8; background: #fff; }
.quick-link-form { display: grid; gap: 8px; }
.quick-link-form .quick-link { width: 100%; border: 1px solid var(--line); cursor: pointer; }
.share-link-panel { margin-top: 12px; overflow: visible; }
.share-link-form { padding: 16px; display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: center; }
.share-link-form .btn { min-height: 42px; white-space: nowrap; }

.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow-soft); }
.panel-head { min-height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(180deg, #ffffff, #f8fafc); }
.panel-head h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
.panel-head h2 small, .project-cell small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.panel-head h2 .rera-badge { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
.rera-badge { width: fit-content; max-width: 100%; min-height: 24px; padding: 4px 9px; border: 1px solid #bfdbfe; border-radius: 5px; background: #eff6ff; color: #1e40af; font-size: 12px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.panel-head.dark h2 small { color: #dbeafe; }
.panel-head.dark { background: linear-gradient(90deg, #172554, #1d4ed8); color: #fff; border-color: #1e3a8a; }
.panel-head.dark a { color: #fff; }

.dashboard-grid, .layout-grid, .report-grid { display: grid; gap: 18px; }
.report-export { position: relative; }
.report-export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; padding: 6px; border: 1px solid var(--line, #dbe3ef); border-radius: 8px; background: #fff; box-shadow: 0 10px 25px rgba(15, 23, 42, .14); }
.report-export-menu a { display: block; padding: 9px 10px; color: inherit; text-decoration: none; border-radius: 5px; font-size: 13px; }
.report-export-menu a:hover { background: #f1f5f9; }
#report-filters-panel.is-loading { opacity: .58; pointer-events: none; transition: opacity .15s ease; }
.dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1.25fr); }
.dashboard-grid .span-2 { grid-column: span 1; }
.layout-grid { grid-template-columns: minmax(0, 1.7fr) minmax(360px, .95fr); align-items: start; }
.plot-panel, .recent-panel { min-width: 0; }
.recent-panel { grid-column: 1; }
.summary-panel { grid-column: 1 / -1; }
.dashboard-admin .plot-panel { min-height: 500px; }
.report-grid { grid-template-columns: 1fr 1fr; margin-bottom: 18px; }

.plot-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; font-size: 12px; border-bottom: 1px solid var(--line); background: var(--surface-3); }
.layout-count { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; border-radius: 5px; font-weight: 800; }
.layout-count b { font-size: 15px; }
.layout-count.available { color: #047857; background: #dcfce7; }
.layout-count.booked { color: #475569; background: #e2e8f0; }
.legend, .dot { display: inline-flex; align-items: center; gap: 8px; }
.legend::before, .dot { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.legend.available, .dot.available { color: var(--green); }
.legend.booked, .dot.booked { color: #64748b; }
.legend.reserved, .dot.reserved { color: var(--amber); }
.legend.blocked, .dot.blocked { color: var(--gray); }
.plot-layout-page { grid-template-columns: 1fr; }
.plot-layout-page .panel { width: 100%; }
.plot-layout-page .detail-panel, .plot-layout-page .recent-panel, .plot-layout-page .summary-panel { grid-column: 1 / -1; }
.plot-map-panel { grid-column: 1 / -1; }
.plot-stage { min-height: 500px; padding: 18px; background: linear-gradient(180deg, #ffffff, #fbfdff); overflow-x: hidden; overflow-y: auto; }
.plot-seat-map { --plot-gap: 5px; display: grid; gap: var(--plot-gap); width: min(100%, var(--plot-map-max, 345px)); min-width: 0; margin: 0 auto; }
.plot-row { display: grid; grid-template-columns: 1fr; align-items: center; }
.plot-row, .plot-grid { width: 100%; }
.plot-grid { display: grid; grid-template-columns: repeat(var(--plots-per-row), minmax(0, 1fr)); gap: var(--plot-gap); }
.plot-cell, .plot-skip { width: 100%; min-width: 0; aspect-ratio: 1.18 / 1; min-height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: clamp(8px, 2.2vw, 10px); font-weight: 850; line-height: 1; border: 1px solid rgba(0,0,0,.05); }
.plot-cell.selectable { cursor: pointer; position: relative; }
.plot-cell.selectable input { position: absolute; inset: 0; width: 100%; min-height: 0; height: 100%; opacity: 0; cursor: pointer; }
.plot-cell.selectable span { position: relative; z-index: 1; pointer-events: none; }
.plot-cell.selectable:has(input:checked) { background: #22b757; border-color: #22b757; color: #fff; box-shadow: 0 0 0 3px rgba(34, 183, 87, .18); }
.plot-cell.available { background: #fff; border-color: #6fd08b; color: #6b7280; }
.plot-cell.available:hover { background: #effaf2; box-shadow: 0 0 0 2px rgba(34, 183, 87, .13); }
.plot-cell.booked { background: #e8eaee; border-color: #e8eaee; color: #fff; pointer-events: none; }
.plot-cell.reserved { background: #fff; border-color: #ffb020; color: #6b7280; }
.plot-cell.locked { background: #e8eaee; border-color: #cbd5e1; color: #64748b; }
.plot-cell.blocked { background: #e6e8ec; border-color: #d5d9e0; color: #8a9099; pointer-events: none; }
.plot-cell.selected { background: #22b757; border-color: #22b757; color: #fff; box-shadow: 0 0 0 3px rgba(34, 183, 87, .18); }
.plot-skip { background: transparent; color: #18223d; }
.hint { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px 16px; margin: 0; color: #334155; font-size: 13px; border-top: 1px solid var(--line); background: #f8fafc; }

.detail-panel { position: static; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 10px 18px; margin: 0; }
.detail-list dt, .detail-list dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.detail-list dt { color: #344054; font-weight: 700; }
.detail-list dd { text-align: left; }
.mini-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.mini-detail-grid p { margin: 0; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: #f8fafc; display: grid; gap: 3px; }
.mini-detail-grid span { color: #667085; font-size: 10px; font-weight: 800; }
.mini-detail-grid b { min-width: 0; color: var(--text); font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.status-text.available { color: #047857; }
.status-text.booked { color: #475569; }
.status-text.reserved { color: #92400e; }
.status-text.blocked { color: #64748b; }
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 800; background: #eef2f6; color: #344054; }
.pill.green, .pill.available, .pill.active { background: #dcfce7; color: #047857; }
.pill.reserved { background: #fef3c7; color: #92400e; }
.pill.blocked, .pill.cancelled, .pill.inactive, .pill.booked { background: #e2e8f0; color: #475569; }
.booking-form { padding: 16px 18px 18px; gap: 14px; }
.booking-form h3 { margin: 4px 0 0; font-size: 14px; }
.multi-booking-summary { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.multi-booking-summary p { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; }
.multi-booking-summary span { color: var(--muted); font-size: 12px; font-weight: 800; }
.multi-booking-summary b { color: var(--navy); overflow-wrap: anywhere; }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.amount-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.amount-box.single { grid-template-columns: 1fr; }
.amount-box span { display: grid; gap: 8px; color: #344054; font-weight: 700; }
.amount-box b { font-size: 16px; color: var(--navy); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.empty-state { padding: 32px 18px; text-align: center; color: var(--muted); }

.data-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table th { color: #1e3a8a; background: #eff6ff; font-size: 11px; font-weight: 800; }
.data-table tr:hover td { background: #f8fafc; }
.dataTables_wrapper .data-table { min-width: 760px; table-layout: auto; }
.dataTables_wrapper .data-table th, .dataTables_wrapper .data-table td { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.table-panel { overflow-x: hidden; }
.dataTables_wrapper { padding: 10px 12px 12px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 32px; border: 1px solid #ccd4df; border-radius: 6px; padding: 0 9px; background: #fff; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { font-size: 12px; color: var(--muted); }
.dataTables_wrapper .dataTables_scroll { clear: both; }
.dataTables_wrapper .dataTables_scrollBody { border-bottom: 1px solid var(--line) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--line) !important; border-radius: 6px !important; color: #334155 !important; background: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-color: #2563eb !important; color: #fff !important; background: linear-gradient(180deg, #2563eb, #1d4ed8) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-color: #bfdbfe !important; color: #1d4ed8 !important; background: #eff6ff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #94a3b8 !important; background: #f8fafc !important; }
.modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); backdrop-filter: blur(3px); }
.modal-dialog { position: relative; width: min(860px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; border: 1px solid rgba(215, 226, 240, .9); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .22); }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: #f8fafc; border: 1px solid var(--line); }
.booking-popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 58px 18px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f8fafc); }
.booking-popup-head span:first-child { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.booking-popup-head h3 { margin: 0; color: var(--navy); font-size: 22px; letter-spacing: 0; }
.booking-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px; }
.booking-detail-grid section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfdff; }
.booking-detail-grid h4 { margin: 0 0 12px; color: #172344; font-size: 13px; }
.booking-detail-grid p { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(104px, .55fr) minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #e5edf7; }
.booking-detail-grid h4 + p { border-top: 0; padding-top: 0; }
.booking-detail-grid p.wide { grid-template-columns: 1fr; gap: 4px; }
.booking-detail-grid span { color: var(--muted); font-size: 12px; font-weight: 800; }
.booking-detail-grid b { min-width: 0; color: var(--text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.booking-detail-notes { grid-column: 1 / -1; }
.booking-detail-notes p { display: block; color: #334155; line-height: 1.5; }
.plot-master-table { min-width: 1040px; }
.plot-master-table input, .plot-master-table select { min-height: 36px; padding-inline: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--line); background: #f8fafc; }
.inline-editor { position: relative; display: inline-block; margin-right: 6px; }
.inline-editor summary { list-style: none; }
.inline-editor summary::-webkit-details-marker { display: none; }
.inline-edit-form { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: min(520px, 82vw); padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.18); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; white-space: normal; }
.inline-edit-form .wide { grid-column: 1 / -1; }
.inline-edit-form select[multiple] { min-height: 96px; padding-block: 8px; }
.inline-action-form { display: inline-block; }
.mini-select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: #fff; }
.public-page-title, .public-booking-page { width: min(1180px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }
.public-page-title { padding-top: 24px; }
.project-cell { display: flex; align-items: center; gap: 14px; }
.thumb { width: 96px; height: 50px; border-radius: 5px; background: linear-gradient(135deg, #bfdbfe, #60a5fa 48%, #f8fafc 49%); display: inline-block; }
.text-green { color: #059669; font-weight: 900; }

.donut-wrap { padding: 24px; display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: center; }
.donut { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.donut::after { content: ""; position: absolute; inset: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.donut span { position: relative; z-index: 1; display: grid; text-align: center; font-size: 21px; font-weight: 900; }
.donut small { font-size: 12px; font-weight: 700; }
.summary-list { display: grid; gap: 14px; }
.summary-list p, .summary-metrics p { margin: 0; display: flex; align-items: center; gap: 10px; }
.summary-metrics { padding: 18px; display: grid; gap: 18px; }
.summary-metrics span { display: flex; align-items: center; gap: 12px; }
.summary-metrics svg { color: var(--blue); background: var(--sky); padding: 6px; width: 34px; height: 34px; border-radius: 6px; }
.summary-metrics hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.form-panel { margin-top: 18px; padding-bottom: 18px; }
.form-panel form { padding: 18px; background: linear-gradient(180deg, #fff, #fbfdff); }
.activity-list { margin: 0; padding: 10px 18px 18px; list-style: none; display: grid; gap: 10px; }
.activity-list li { display: flex; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.activity-list span { min-width: 170px; color: var(--muted); }
.footer { min-height: 58px; padding: 8px 24px; border-top: 1px solid var(--line); background: #ffffff; display: flex; align-items: center; justify-content: space-between; color: #475569; font-size: 12px; line-height: 1.5; }
.footer a { font-weight: 800; }
.alert { padding: 12px 16px; border-radius: 7px; margin-bottom: 16px; border: 1px solid #b8dfc2; background: #ebfaef; color: #136c31; font-weight: 700; }
.alert.danger { border-color: #ffc2c7; background: #fff0f1; color: #a51d2a; }
.muted { color: var(--muted); }
.center { text-align: center; }
.copyright { margin-top: 62px !important; font-size: 13px !important; color: #6b7689 !important; }
.policy-check { display: grid; align-items: start; grid-template-columns: 22px 1fr; gap: 11px; line-height: 1.5; font-size: 13px; font-weight: 650; color: #344054; }
.policy-check input { width: 19px; min-height: 19px; margin-top: 1px; }
.policy-check span { display: block; }
.policy-check a { font-weight: 850; white-space: nowrap; }
.policy-page { grid-template-columns: 1fr; min-height: 100vh; }
.policy-card { max-width: 760px; }
.policy-card p { text-align: left; font-size: 16px; line-height: 1.65; margin: 0 0 18px; }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .app-shell.sidebar-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
  .stat-grid.six { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .layout-grid { grid-template-columns: 1fr; }
  .detail-panel, .summary-panel, .recent-panel { grid-column: 1; position: static; }
  .plot-layout-page .detail-panel, .plot-layout-page .summary-panel, .plot-layout-page .recent-panel { grid-column: 1 / -1; }
  .plot-seat-map { --plot-gap: 5px; }
}

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: minmax(130px, 160px) minmax(0, 1fr); }
  .plot-stage { min-height: 460px; padding-inline: 14px; }
  .plot-seat-map { margin-inline: auto; }
}

@media (max-width: 900px) {
  body { font-size: 12px; }
  .login-body { padding: 0; }
  .login-shell { min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; }
  .login-visual { min-height: 210px; padding: 18px; }
  .login-logo { width: 124px; max-width: 52%; padding: 7px; }
  .login-copy { left: 18px; top: 116px; }
  .login-copy h1 { margin-bottom: 8px; font-size: 24px; }
  .login-copy p { max-width: 280px; font-size: 13px; line-height: 1.35; }
  .login-panel { padding: 18px 14px; }
  .login-card h2 { margin-top: 22px; font-size: 24px; }
  .login-card > p { font-size: 12px; margin-bottom: 16px; }
  .login-card input { min-height: 46px; font-size: 13px; }
  .form-stack { gap: 12px; }
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-102%); transition: .2s ease; box-shadow: 18px 0 40px rgba(15, 23, 42, .18); }
  .sidebar-logo { min-height: 58px; }
  .sidebar-logo img { height: 42px; max-width: 112px; }
  .sidebar nav { gap: 5px; padding-top: 4px; }
  .nav-item { height: 40px; font-size: 12px; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0 14px; gap: 13px; }
  .sidebar-collapsed .nav-item span { width: auto; opacity: 1; }
  .sidebar-collapsed .sidebar-logo img { height: 42px; max-width: 112px; }
  .sidebar.open { transform: translateX(0); }
  .dashboard-grid, .report-grid, .layout-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-grid, .stat-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .stat-card { min-height: 74px; padding: 10px; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 9px; border-radius: 6px; }
  .stat-card svg { width: 34px; height: 34px; padding: 8px; border-radius: 7px; }
  .stat-card strong { font-size: 17px; }
  .stat-card span { font-size: 11px; }
  .stat-card a { margin-top: 4px; font-size: 10px; }
  .topbar { height: 56px; padding-inline: 10px; }
  .topbar-left { gap: 8px; }
  .topbar-logo img { width: 80px; max-width: 30vw; height: 48px; padding: 4px; }
  .topbar-actions { gap: 8px; }
  .icon-btn { width: 34px; height: 34px; border-radius: 7px; }
  .avatar { width: 34px; height: 34px; }
  .profile { min-width: 0; max-width: 86px; }
  .profile strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .topbar-actions .icon-btn:first-child { display: none; }
  .content { padding: 10px 8px; background: linear-gradient(180deg, rgba(239,246,255,.7), rgba(243,246,251,0) 160px); }
  .page-title { align-items: stretch; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .page-title h1 { margin-bottom: 4px; font-size: 19px; }
  .page-title p { font-size: 11px; line-height: 1.35; }
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-links { grid-template-columns: 1fr; gap: 8px; }
  .quick-link { min-height: 56px; padding: 10px; border-radius: 6px; }
  .quick-link svg { width: 30px; height: 30px; padding: 7px; }
  .share-link-form { grid-template-columns: 1fr; padding: 10px; }
  .plot-layout-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .plot-layout-toolbar select { min-height: 30px; font-size: 11px; }
  .plot-layout-toolbar .btn { min-width: 78px; }
  .search { max-width: none; }
  .panel { border-radius: 6px; overflow-x: visible; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
  .panel-head { min-height: 40px; padding: 0 10px; gap: 8px; }
  .panel-head h2 { font-size: 13px; }
  .plot-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plot-meta { justify-content: flex-start; gap: 6px; padding: 8px; font-size: 10px; }
  .layout-count { min-height: 24px; padding: 3px 8px; justify-content: center; }
  .layout-count b { font-size: 13px; }
  .plot-stage { min-height: 280px; padding: 10px 6px; overflow-x: hidden; overflow-y: auto; }
  .plot-seat-map { --plot-gap: 3px; width: min(100%, var(--plot-map-max, 345px)); min-width: 0; margin-inline: auto; }
  .plot-row { grid-template-columns: 1fr; }
  .plot-cell, .plot-skip { min-height: 16px; border-radius: 3px; }
  .hint { padding: 9px 10px; font-size: 11px; }
  .detail-panel .panel-head { min-height: 36px; }
  .detail-list { grid-template-columns: 44% 56%; padding: 6px 10px; font-size: 10px; }
  .detail-list dt, .detail-list dd { padding: 5px 0; }
  .mini-detail-grid { gap: 4px; padding: 6px; }
  .mini-detail-grid p { padding: 5px 6px; border-radius: 4px; }
  .mini-detail-grid span { font-size: 9px; }
  .mini-detail-grid b { font-size: 10px; }
  .booking-form { padding: 8px; gap: 8px; }
  .booking-form h3 { margin-top: 2px; font-size: 12px; }
  .multi-booking-summary { gap: 5px; padding: 8px; }
  .multi-booking-summary p { grid-template-columns: 90px minmax(0, 1fr); gap: 6px; }
  .multi-booking-summary span { font-size: 10px; }
  .form-grid, .amount-box, .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .form-grid .wide, .amount-box.single { grid-column: 1 / -1; }
  label { gap: 4px; font-size: 10px; }
  input, select, textarea { min-height: 30px; padding: 0 8px; border-radius: 6px; font-size: 11px; }
  .btn { min-height: 34px; padding-inline: 10px; font-size: 11px; border-radius: 5px; }
  .btn.small { min-height: 32px; padding-inline: 9px; }
  .btn.mini { min-height: 28px; padding-inline: 8px; font-size: 10px; }
  .btn.icon-only { width: 28px; min-width: 28px; padding: 0; }
  .btn.icon-only svg { width: 13px; height: 13px; }
  .link-button { font-size: inherit; }
  .form-panel { margin-top: 10px; padding-bottom: 10px; }
  .form-panel form { padding: 8px; }
  .form-actions { padding: 10px; gap: 8px; }
  .inline-editor { position: static; display: block; margin: 0 0 6px; }
  .inline-edit-form { position: static; width: min(100%, 340px); grid-template-columns: 1fr; margin-top: 8px; padding: 8px; }
  .inline-action-form { display: block; }
  .data-table { min-width: 640px; table-layout: auto; font-size: 10px; }
  .data-table th, .data-table td { padding: 8px 6px; overflow-wrap: anywhere; }
  .data-table th { font-size: 9px; }
  .dataTables_wrapper .data-table { min-width: 720px; }
  .dataTables_wrapper .data-table th, .dataTables_wrapper .data-table td { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  .table-panel { overflow-x: hidden; }
  .dataTables_wrapper { padding: 8px 6px 10px; }
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: 6px; }
  .dataTables_wrapper .dataTables_length select { width: auto; min-width: 70px; }
  .dataTables_wrapper .dataTables_filter input { width: min(100%, 220px); margin: 4px 0 0; }
  .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; margin-top: 6px; }
  .modal { padding: 10px; align-items: end; }
  .modal-dialog { max-height: calc(100vh - 20px); border-radius: 8px 8px 0 0; }
  .modal-close { top: 8px; right: 8px; }
  .booking-popup-head { padding: 16px 48px 14px 14px; }
  .booking-popup-head h3 { font-size: 18px; }
  .booking-detail-grid { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .booking-detail-grid section { padding: 10px; border-radius: 6px; }
  .booking-detail-grid h4 { margin-bottom: 8px; font-size: 12px; }
  .booking-detail-grid p { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
  .booking-detail-grid span { font-size: 10px; }
  .booking-detail-grid b { font-size: 11px; }
  .plot-master-table { min-width: 0; }
  .plot-master-table input, .plot-master-table select { min-height: 30px; padding-inline: 6px; font-size: 10px; }
  .thumb { display: none; }
  .project-cell { gap: 0; }
  .donut-wrap { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 12px 10px; }
  .donut { width: 96px; height: 96px; }
  .donut::after { inset: 22px; }
  .donut span { font-size: 16px; }
  .donut small { font-size: 9px; }
  .summary-list { gap: 8px; font-size: 11px; }
  .summary-metrics { padding: 10px; gap: 10px; }
  .activity-list { padding: 8px 10px 10px; gap: 8px; }
  .activity-list li { padding: 8px; gap: 8px; }
  .activity-list span { min-width: 100px; }
  .footer { min-height: 42px; padding: 8px 10px; flex-direction: column; justify-content: center; gap: 4px; text-align: center; font-size: 10px; }
}

@media (max-width: 520px) {
  .content { padding: 8px 6px; }
  .stat-grid, .stat-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid, .amount-box, .actions, .toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plot-layout-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .login-shell { display: block; }
  .login-visual { min-height: 150px; }
  .login-logo { width: 90px; max-width: 48%;margin-top:0px; }
  .login-copy { top: 96px; }
  .login-copy h1 { font-size: 21px; }
  .login-copy p { font-size: 12px; }
  .login-panel { display: block; }
  .plot-stage { min-height: 240px; }
}

@media (max-width: 380px) {
  .toolbar { grid-template-columns: 1fr; }
  .plot-layout-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .plot-layout-toolbar .btn { min-width: 68px; padding-inline: 7px; }
  .detail-list { grid-template-columns: 46% 54%; }
  .booking-form { padding: 7px; }
  .form-grid, .amount-box, .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  input, select, textarea { min-height: 29px; padding-inline: 7px; font-size: 10px; }
  .amount-box { padding: 8px; }
  .stat-card { grid-template-columns: 28px minmax(0, 1fr); padding: 8px; }
  .stat-card svg { width: 28px; height: 28px; padding: 6px; }
  .stat-card strong { font-size: 15px; }
}

@media print {
  .sidebar, .topbar, .btn, .footer { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; }
  .panel { break-inside: avoid; }
}