/* ─────────────────────────────────────────
   THEME TOKENS
───────────────────────────────────────── */
[data-theme="dark"] {
   --bg: #0f1008;
   --bg2: #141608;
   --bg3: #1c2010;
   --card: #181c0c;
   --card2: #1f2410;
   --sidebar: #0d0f07;
   --border: #2a2e18;
   --border2: #363c20;
   --text: #e8e4d0;
   --text-muted: #7a7a5e;
   --text-dim: #404030;
   --gold: #c9890a;
   --gold-light: #f0b429;
   --gold-pale: rgba(240, 180, 41, .10);
   --gold-border: rgba(201, 137, 10, .35);
   --accent: #8fba2c;
   --accent-dim: rgba(143, 186, 44, .14);
   --danger: #e05252;
   --danger-dim: rgba(224, 82, 82, .14);
   --success: #52b788;
   --success-dim: rgba(82, 183, 136, .14);
   --warning: #f0b429;
   --blue: #4ea8de;
   --blue-dim: rgba(78, 168, 222, .14);
   --purple: #9c6bff;
   --purple-dim: rgba(156, 107, 255, .13);
   --shadow: 0 4px 28px rgba(0, 0, 0, .5);
   --shadow-gold: 0 0 28px rgba(201, 137, 10, .18);
   --topbar-blur: rgba(14, 16, 8, .88);
   --scrollbar-track: #0f1008;
   --scrollbar-thumb: #2a2e18;
}

[data-theme="light"] {
   --bg: #f5f3ee;
   --bg2: #ffffff;
   --bg3: #eeeae0;
   --card: #ffffff;
   --card2: #f8f6f0;
   --sidebar: #1c2010;
   --border: #e0dbd0;
   --border2: #d0ccc0;
   --text: #1c1c14;
   --text-muted: #6a6a50;
   --text-dim: #b0ac9e;
   --gold: #c9890a;
   --gold-light: #a86e05;
   --gold-pale: rgba(201, 137, 10, .08);
   --gold-border: rgba(201, 137, 10, .30);
   --accent: #5a8a10;
   --accent-dim: rgba(90, 138, 16, .10);
   --danger: #c93a3a;
   --danger-dim: rgba(201, 58, 58, .10);
   --success: #2a8a5a;
   --success-dim: rgba(42, 138, 90, .10);
   --warning: #c9890a;
   --blue: #2a7ab8;
   --blue-dim: rgba(42, 122, 184, .10);
   --purple: #7a4bcc;
   --purple-dim: rgba(122, 75, 204, .10);
   --shadow: 0 2px 20px rgba(0, 0, 0, .08);
   --shadow-gold: 0 0 20px rgba(201, 137, 10, .12);
   --topbar-blur: rgba(255, 255, 255, .92);
   --scrollbar-track: #f0ede6;
   --scrollbar-thumb: #d8d4c8;
}

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

html {
   scroll-behavior: smooth
}

body {
   font-family: 'DM Sans', sans-serif;
   background: var(--bg);
   color: var(--text);
   display: flex;
   min-height: 100vh;
   font-size: 14px;
   transition: background .3s, color .3s
}

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */
.sidebar {
   width: 240px;
   background: var(--sidebar);
   border-right: 1px solid rgba(255, 255, 255, .06);
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   z-index: 100;
   overflow-y: auto
}

[data-theme="light"] .sidebar {
   border-right-color: rgba(0, 0, 0, .08)
}

.sidebar-logo {
   padding: 18px 20px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, .07);
   display: flex;
   align-items: center;
   gap: 11px
}

.logo-shield {
   width: 38px;
   height: 38px;
   background: linear-gradient(135deg, var(--gold), #6a4000);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0
}

.logo-text {
   font-family: 'Syne', sans-serif;
   font-weight: 800;
   font-size: 14px;
   line-height: 1.2;
   color: #e8e4d0
}

.logo-text span {
   display: block;
   color: var(--gold);
   font-size: 9.5px;
   font-weight: 400;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   opacity: .8
}

.nav-section {
   padding: 8px 0
}

.nav-label {
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .2);
   padding: 10px 20px 4px;
   font-weight: 600
}

.nav-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 20px;
   cursor: pointer;
   color: rgba(232, 228, 208, .45);
   font-size: 13px;
   transition: all .15s;
   border-left: 2px solid transparent;
   text-decoration: none
}

.nav-item:hover {
   color: rgba(232, 228, 208, .85);
   background: rgba(240, 180, 41, .07)
}

.nav-item.active {
   color: var(--gold-light);
   background: rgba(240, 180, 41, .10);
   border-left-color: var(--gold)
}

.nav-item i {
   width: 16px;
   text-align: center;
   font-size: 12.5px;
   opacity: .8
}

.nav-item.active i {
   opacity: 1
}

/* ─────────────────────────────────────────
   MAIN / TOPBAR
───────────────────────────────────────── */
.main {
   margin-left: 240px;
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 100vh
}

.topbar {
   background: var(--topbar-blur);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
   padding: 0 28px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 50;
   transition: background .3s, border-color .3s
}

.topbar-left {
   display: flex;
   align-items: center;
   gap: 12px
}

.page-title {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 17px
}

.topbar-right {
   display: flex;
   align-items: center;
   gap: 10px
}

.topbar-icon {
   width: 34px;
   height: 34px;
   border-radius: 9px;
   background: var(--bg3);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--text-muted);
   font-size: 13px;
   transition: all .15s;
   position: relative
}

.topbar-icon:hover {
   border-color: var(--gold-border);
   color: var(--gold-light)
}

.badge {
   position: absolute;
   top: -4px;
   right: -4px;
   background: var(--gold);
   color: #0f1008;
   font-size: 8.5px;
   font-weight: 700;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center
}

.theme-toggle {
   display: flex;
   align-items: center;
   background: var(--bg3);
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 3px;
   gap: 1px
}

.theme-btn {
   width: 28px;
   height: 28px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   transition: all .2s;
   color: var(--text-muted);
   border: none;
   background: transparent;
   cursor: pointer
}

.theme-btn.active {
   background: var(--gold);
   color: #0f1008;
   box-shadow: 0 2px 8px rgba(201, 137, 10, .4)
}

.avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gold), #5a3a00);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 12px;
   cursor: pointer;
   border: 2px solid var(--gold-border);
   color: #fff
}

/* ─────────────────────────────────────────
   CONTENT / PAGES
───────────────────────────────────────── */
.content {
   padding: 26px 28px;
   flex: 1
}

.page {
   display: none
}

.page.active {
   display: block;
   animation: fadeIn .2s ease
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(5px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

/* ─────────────────────────────────────────
   STAT CARDS
───────────────────────────────────────── */
.stat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin-bottom: 22px
}

.stat-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 18px;
   transition: border-color .2s, transform .2s, box-shadow .2s;
   cursor: default
}

.stat-card:hover {
   border-color: var(--gold-border);
   transform: translateY(-2px);
   box-shadow: var(--shadow)
}

.stat-icon {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   margin-bottom: 12px
}

.stat-card.gold .stat-icon {
   background: var(--gold-pale);
   color: var(--gold-light)
}

.stat-card.green .stat-icon {
   background: var(--accent-dim);
   color: var(--accent)
}

.stat-card.blue .stat-icon {
   background: var(--blue-dim);
   color: var(--blue)
}

.stat-card.red .stat-icon {
   background: var(--danger-dim);
   color: var(--danger)
}

.stat-num {
   font-family: 'Syne', sans-serif;
   font-size: 24px;
   font-weight: 800;
   line-height: 1;
   margin-bottom: 3px
}

.stat-label {
   font-size: 12px;
   color: var(--text-muted)
}

.stat-change {
   font-size: 11px;
   margin-top: 8px;
   display: flex;
   align-items: center;
   gap: 4px
}

.stat-change.up {
   color: var(--success)
}

.stat-change.down {
   color: var(--danger)
}

/* ─────────────────────────────────────────
   SECTION HEADER / TOOLBAR
───────────────────────────────────────── */
.section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px
}

.section-title {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 16px
}

.list-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
   flex-wrap: wrap;
   gap: 10px
}

.toolbar-left {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap
}

.toolbar-right {
   display: flex;
   align-items: center;
   gap: 8px
}

.search-box {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 9px;
   padding: 7px 12px;
   color: var(--text-muted);
   min-width: 210px;
   transition: border-color .15s
}

.search-box:focus-within {
   border-color: var(--gold-border)
}

.search-box input {
   background: none;
   border: none;
   outline: none;
   color: var(--text);
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   width: 100%
}

.search-box input::placeholder {
   color: var(--text-dim)
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 15px;
   border-radius: 9px;
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   border: none;
   transition: all .15s;
   text-decoration: none;
   white-space: nowrap
}

.btn-gold {
   background: var(--gold);
   color: #0f1008;
   font-weight: 600
}

.btn-gold:hover {
   background: var(--gold-light);
   box-shadow: var(--shadow-gold)
}

.btn-outline {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border)
}

.btn-outline:hover {
   border-color: var(--gold-border);
   color: var(--gold-light)
}

.btn-sm {
   padding: 5px 10px;
   font-size: 12px;
   border-radius: 7px
}

.btn-danger {
   background: var(--danger-dim);
   color: var(--danger);
   border: 1px solid rgba(224, 82, 82, .25)
}

.btn-danger:hover {
   background: var(--danger);
   color: #fff
}

.btn-success {
   background: var(--success-dim);
   color: var(--success);
   border: 1px solid rgba(82, 183, 136, .25)
}

.btn-success:hover {
   background: var(--success);
   color: #fff
}

.btn-edit {
   background: var(--gold-pale);
   color: var(--gold-light);
   border: 1px solid var(--gold-border)
}

.btn-edit:hover {
   background: var(--gold);
   color: #0f1008
}

.btn-blue {
   background: var(--blue-dim);
   color: var(--blue);
   border: 1px solid rgba(78, 168, 222, .25)
}

.btn-blue:hover {
   background: var(--blue);
   color: #fff
}

.btn-warning {
   background: rgba(240, 180, 41, .12);
   color: var(--warning);
   border: 1px solid rgba(240, 180, 41, .25)
}

.btn-warning:hover {
   background: var(--warning);
   color: #0f1008
}

.btn-purple {
   background: var(--purple-dim);
   color: var(--purple);
   border: 1px solid rgba(156, 107, 255, .25)
}

.btn-purple:hover {
   background: var(--purple);
   color: #fff
}

.btn-view {
   background: var(--blue-dim);
   color: var(--blue);
   border: 1px solid rgba(78, 168, 222, .25)
}

.btn-view:hover {
   background: var(--blue);
   color: #fff
}

/* ─────────────────────────────────────────
   TABLE
───────────────────────────────────────── */
.table-wrap {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
   transition: background .3s, border-color .3s
}

table {
   width: 100%;
   border-collapse: collapse
}

thead th {
   background: var(--card2);
   padding: 11px 16px;
   font-size: 10.5px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--text-muted);
   font-weight: 600;
   text-align: left;
   border-bottom: 1px solid var(--border)
}

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

tbody tr:last-child {
   border-bottom: none
}

tbody tr:hover {
   background: var(--gold-pale)
}

tbody td {
   padding: 11px 16px;
   font-size: 13px;
   vertical-align: middle
}

/* clickable row */
tbody tr.row-link {
   cursor: pointer
}

tbody tr.row-link:hover {
   background: var(--gold-pale)
}

tbody tr.row-link td:first-child {
   position: relative
}

/* ─────────────────────────────────────────
   STATUS BADGES
───────────────────────────────────────── */
.status {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 9px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap
}

.status::before {
   content: '';
   width: 5px;
   height: 5px;
   border-radius: 50%
}

.s-confirmed {
   background: var(--blue-dim);
   color: var(--blue)
}

.s-confirmed::before {
   background: var(--blue)
}

.s-assigned {
   background: var(--gold-pale);
   color: var(--gold-light)
}

.s-assigned::before {
   background: var(--gold)
}

.s-rescheduled {
   background: var(--purple-dim);
   color: var(--purple)
}

.s-rescheduled::before {
   background: var(--purple)
}

.s-reached {
   background: var(--success-dim);
   color: var(--success)
}

.s-reached::before {
   background: var(--success)
}

.s-complete {
   background: var(--accent-dim);
   color: var(--accent)
}

.s-complete::before {
   background: var(--accent)
}

.s-cancelled {
   background: var(--danger-dim);
   color: var(--danger)
}

.s-cancelled::before {
   background: var(--danger)
}

.s-active {
   background: var(--success-dim);
   color: var(--success)
}

.s-active::before {
   background: var(--success)
}

.s-inactive {
   background: var(--danger-dim);
   color: var(--danger)
}

.s-inactive::before {
   background: var(--danger)
}

.s-pending {
   background: rgba(240, 180, 41, .12);
   color: var(--warning)
}

.s-pending::before {
   background: var(--warning)
}

/* ─────────────────────────────────────────
   FORMS
───────────────────────────────────────── */
.form-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 26px;
   max-width: 800px;
   transition: background .3s, border-color .3s
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.form-group.full {
   grid-column: 1/-1
}

label {
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: .5px;
   color: var(--text-muted);
   text-transform: uppercase
}

input[type=text],
input[type=email],
input[type=number],
input[type=tel],
input[type=date],
select,
textarea {
   background: var(--bg3);
   border: 1px solid var(--border);
   border-radius: 9px;
   padding: 9px 13px;
   color: var(--text);
   font-family: 'DM Sans', sans-serif;
   font-size: 13.5px;
   outline: none;
   transition: border-color .15s, box-shadow .15s;
   appearance: none;
   -webkit-appearance: none
}

select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a7a5e'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   padding-right: 30px
}

input:focus,
select:focus,
textarea:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px var(--gold-pale)
}

select option {
   background: var(--bg3);
   color: var(--text)
}

textarea {
   resize: vertical;
   min-height: 88px;
   line-height: 1.6
}

.form-actions {
   display: flex;
   gap: 10px;
   margin-top: 6px
}

select[multiple] {
   height: auto;
   min-height: 100px;
   padding: 8px
}

select[multiple] option {
   padding: 5px 8px;
   border-radius: 5px
}

select[multiple] option:checked {
   background: var(--gold-pale);
   color: var(--gold-light)
}

/* ─────────────────────────────────────────
   MULTI ENTRY
───────────────────────────────────────── */
.multi-entry {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.multi-row {
   display: flex;
   gap: 8px;
   align-items: center
}

.multi-row input {
   flex: 1
}

.add-row-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--gold-light);
   font-size: 12.5px;
   font-weight: 500;
   cursor: pointer;
   padding: 6px 0;
   border: none;
   background: none;
   font-family: 'DM Sans', sans-serif;
   margin-top: 4px
}

.add-row-btn:hover {
   color: var(--gold)
}

/* ─────────────────────────────────────────
   UPLOAD ZONE
───────────────────────────────────────── */
.upload-zone {
   border: 2px dashed var(--border2);
   border-radius: 12px;
   padding: 24px;
   text-align: center;
   cursor: pointer;
   transition: border-color .2s, background .2s;
   color: var(--text-muted)
}

.upload-zone:hover {
   border-color: var(--gold);
   background: var(--gold-pale)
}

.upload-zone i {
   font-size: 26px;
   margin-bottom: 8px;
   display: block;
   color: var(--gold-border)
}

.upload-zone p {
   font-size: 13px
}

.upload-zone small {
   font-size: 11px;
   color: var(--text-dim)
}

.kyc-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .65);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 300;
   backdrop-filter: blur(5px)
}

.modal-overlay.open {
   display: flex
}

.modal {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 28px;
   width: 90%;
   max-width: 520px;
   box-shadow: var(--shadow);
   animation: slideUp .22s ease;
   max-height: 90vh;
   overflow-y: auto;
   transition: background .3s, border-color .3s
}

.modal.wide {
   max-width: 680px
}

@keyframes slideUp {
   from {
      opacity: 0;
      transform: translateY(16px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px
}

.modal-title {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 17px
}

.modal-close {
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: var(--bg3);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--text-muted);
   font-size: 13px;
   transition: all .15s
}

.modal-close:hover {
   border-color: var(--gold-border);
   color: var(--gold-light)
}

.modal-actions {
   display: flex;
   gap: 10px;
   margin-top: 20px;
   justify-content: flex-end
}

.booking-detail-strip {
   background: var(--bg3);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 14px 16px;
   margin-bottom: 16px
}

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

.bds-field label {
   font-size: 10.5px;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-muted);
   margin-bottom: 2px;
   display: block
}

.bds-field p {
   font-size: 13px;
   font-weight: 500
}

/* SP cards in assign modal */
.sp-card {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
   cursor: pointer;
   transition: all .15s;
   background: var(--bg3);
   margin-bottom: 8px
}

.sp-card:hover,
.sp-card.selected {
   border-color: var(--gold-border);
   background: var(--gold-pale)
}

.sp-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 13px;
   color: #fff;
   flex-shrink: 0
}

.sp-info {
   flex: 1
}

.sp-name {
   font-size: 13.5px;
   font-weight: 600
}

.sp-meta {
   font-size: 11.5px;
   color: var(--text-muted)
}

.sp-radio {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2px solid var(--border);
   flex-shrink: 0;
   transition: all .15s
}

.sp-card.selected .sp-radio {
   border-color: var(--gold);
   background: var(--gold);
   box-shadow: 0 0 0 3px var(--gold-pale)
}

/* Refund */
.refund-section {
   background: var(--bg3);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 14px;
   margin-top: 14px
}

.refund-title {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-muted);
   margin-bottom: 10px
}

.refund-options {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.refund-opt {
   padding: 6px 14px;
   border-radius: 20px;
   font-size: 12.5px;
   font-weight: 500;
   cursor: pointer;
   border: 1px solid var(--border);
   background: var(--card);
   color: var(--text-muted);
   transition: all .15s
}

.refund-opt:hover,
.refund-opt.selected {
   border-color: var(--success);
   background: var(--success-dim);
   color: var(--success)
}

/* ─────────────────────────────────────────
   DETAIL / PROFILE PAGES
───────────────────────────────────────── */
.profile-header {
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 24px;
   display: flex;
   align-items: flex-start;
   gap: 22px;
   margin-bottom: 20px
}

.profile-avatar-lg {
   width: 76px;
   height: 76px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Syne', sans-serif;
   font-weight: 800;
   font-size: 26px;
   flex-shrink: 0;
   border: 3px solid var(--gold-border);
   color: #fff
}

.profile-info {
   flex: 1
}

.profile-name {
   font-family: 'Syne', sans-serif;
   font-weight: 800;
   font-size: 22px;
   margin-bottom: 4px
}

.profile-sub {
   font-size: 13px;
   color: var(--text-muted);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap
}

.profile-sub span {
   display: flex;
   align-items: center;
   gap: 5px
}

.profile-stats {
   display: flex;
   gap: 20px;
   flex-wrap: wrap
}

.pstat {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 70px
}

.pstat-val {
   font-family: 'Syne', sans-serif;
   font-size: 20px;
   font-weight: 800;
   color: var(--gold-light)
}

.pstat-lbl {
   font-size: 10.5px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: .5px
}

.profile-actions {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end
}

.detail-grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 20px
}

.detail-grid-3 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 16px;
   margin-bottom: 20px
}

.info-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 18px
}

.info-card-title {
   font-family: 'Syne', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 14px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border)
}

.info-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 7px 0;
   border-bottom: 1px solid var(--border);
   font-size: 13px
}

.info-row:last-child {
   border-bottom: none;
   padding-bottom: 0
}

.info-row .lbl {
   color: var(--text-muted);
   font-size: 12px
}

.info-row .val {
   font-weight: 500;
   text-align: right
}

/* section title inside detail */
.sub-section-title {
   font-family: 'Syne', sans-serif;
   font-size: 13px;
   font-weight: 700;
   color: var(--text-muted);
   letter-spacing: .8px;
   text-transform: uppercase;
   margin: 22px 0 12px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.sub-section-title::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--border);
   margin-left: 14px
}

/* tag chip */
.chip {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 10px;
   border-radius: 20px;
   font-size: 11.5px;
   font-weight: 500;
   background: var(--gold-pale);
   color: var(--gold-light);
   border: 1px solid var(--gold-border)
}

.chip-blue {
   background: var(--blue-dim);
   color: var(--blue);
   border-color: rgba(78, 168, 222, .25)
}

.chip-green {
   background: var(--accent-dim);
   color: var(--accent);
   border-color: rgba(143, 186, 44, .25)
}

/* ─────────────────────────────────────────
   MISC
───────────────────────────────────────── */
.card-box {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 18px;
   transition: background .3s, border-color .3s
}

.card-box-title {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 14px;
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.chart-box {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 18px;
   height: 190px;
   display: flex;
   align-items: flex-end;
   gap: 7px;
   overflow: hidden
}

.chart-bar {
   flex: 1;
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg, var(--gold) 0%, rgba(201, 137, 10, .3) 100%);
   min-width: 0;
   transition: opacity .2s
}

.chart-bar:hover {
   opacity: .7
}

.vendor-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: var(--accent-dim);
   color: var(--accent);
   padding: 3px 9px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 600
}

.price-chip {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   color: var(--gold-light)
}

.cat-icon {
   width: 34px;
   height: 34px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0
}

.cat-icon-cell {
   display: flex;
   align-items: center;
   gap: 10px
}

.svc-cell {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.svc-cat {
   font-size: 11px;
   color: var(--text-muted);
   display: flex;
   align-items: center;
   gap: 4px
}

.timing-cell {
   font-size: 12.5px;
   color: var(--text-muted);
   display: flex;
   align-items: center;
   gap: 4px
}

.cust-cell {
   display: flex;
   align-items: center;
   gap: 10px
}

.cust-name {
   font-size: 13px;
   font-weight: 500
}

.cust-email {
   font-size: 11.5px;
   color: var(--text-muted)
}

.cust-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: linear-gradient(135deg, #4ea8de 0%, #0a3a6e 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 11.5px;
   flex-shrink: 0;
   color: #fff
}

.booking-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gold) 0%, #3a2000 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 12px;
   color: #fff
}

.booking-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 11px 0;
   border-bottom: 1px solid var(--border)
}

.booking-row:last-child {
   border-bottom: none
}

.booking-info {
   display: flex;
   align-items: center;
   gap: 10px
}

.booking-name {
   font-size: 13px;
   font-weight: 500
}

.booking-svc {
   font-size: 11.5px;
   color: var(--text-muted)
}

.booking-amt {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 14px;
   color: var(--gold-light)
}

.img-placeholder {
   width: 68px;
   height: 42px;
   border-radius: 7px;
   border: 1px dashed var(--border2);
   background: var(--bg3);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-dim);
   font-size: 15px
}

.action-wrap {
   display: flex;
   gap: 5px;
   flex-wrap: nowrap
}

.tag-wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 5px
}

.tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 9px;
   border-radius: 20px;
   font-size: 11.5px;
   font-weight: 500;
   background: var(--gold-pale);
   color: var(--gold-light);
   border: 1px solid var(--gold-border)
}

.select-info {
   font-size: 11.5px;
   color: var(--text-muted);
   margin-top: 4px
}

/* setting editor */
.setting-editor {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
   transition: background .3s, border-color .3s
}

.setting-toolbar {
   background: var(--card2);
   border-bottom: 1px solid var(--border);
   padding: 9px 14px;
   display: flex;
   gap: 6px;
   flex-wrap: wrap
}

.toolbar-btn {
   padding: 4px 9px;
   border-radius: 6px;
   font-size: 12px;
   border: 1px solid var(--border);
   background: var(--card);
   color: var(--text-muted);
   cursor: pointer;
   transition: all .15s
}

.toolbar-btn:hover {
   border-color: var(--gold-border);
   color: var(--gold-light)
}

.setting-body textarea {
   border: none;
   border-radius: 0;
   background: transparent;
   width: 100%;
   padding: 20px;
   min-height: 300px;
   font-size: 13.5px;
   line-height: 1.8;
   resize: none;
   color: var(--text)
}

.setting-body textarea:focus {
   box-shadow: none;
   border: none
}

/* detail card (service) */
.detail-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
   transition: background .3s
}

.detail-hero {
   background: var(--card2);
   border-bottom: 1px solid var(--border);
   padding: 24px;
   display: flex;
   gap: 20px;
   align-items: flex-start
}

.detail-icon {
   width: 68px;
   height: 68px;
   border-radius: 14px;
   background: linear-gradient(135deg, var(--gold) 0%, #5a3a00 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   flex-shrink: 0
}

.detail-meta h2 {
   font-family: 'Syne', sans-serif;
   font-size: 20px;
   font-weight: 800;
   margin-bottom: 6px
}

.cat-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: var(--gold-pale);
   color: var(--gold-light);
   padding: 3px 9px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 500;
   border: 1px solid var(--gold-border);
   margin-bottom: 8px
}

.detail-stats {
   display: flex;
   gap: 20px;
   margin-top: 10px;
   flex-wrap: wrap
}

.detail-stat {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.detail-stat-val {
   font-family: 'Syne', sans-serif;
   font-size: 17px;
   font-weight: 700;
   color: var(--gold-light)
}

.detail-stat-lbl {
   font-size: 10.5px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: .5px
}

.detail-body {
   padding: 24px
}

.detail-section-title {
   font-family: 'Syne', sans-serif;
   font-size: 11.5px;
   font-weight: 700;
   color: var(--text-muted);
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin-bottom: 12px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border)
}

.detail-field label {
   display: block;
   font-size: 10.5px;
   color: var(--text-muted);
   margin-bottom: 3px;
   text-transform: uppercase;
   letter-spacing: .5px
}

.detail-field p {
   font-size: 13.5px;
   line-height: 1.6
}

.check-list {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.check-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px
}

.check-icon {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 9px;
   flex-shrink: 0
}

.check-yes {
   background: var(--success-dim);
   color: var(--success)
}

.check-no {
   background: var(--danger-dim);
   color: var(--danger)
}

/* layout helpers */
.two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

.three-col {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 14px
}

.dash-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 18px
}

.mt-2 {
   margin-top: 8px
}

.mt-4 {
   margin-top: 18px
}

.mb-4 {
   margin-bottom: 18px
}

.text-gold {
   color: var(--gold-light)
}

.text-muted {
   color: var(--text-muted)
}

.text-sm {
   font-size: 12px
}

.font-bold {
   font-weight: 700
}

.flex {
   display: flex
}

.items-center {
   align-items: center
}

.gap-2 {
   gap: 8px
}

.gap-3 {
   gap: 12px
}

.info-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 11.5px;
   font-weight: 500
}

.info-badge.blue {
   background: var(--blue-dim);
   color: var(--blue)
}

.divider {
   border: none;
   border-top: 1px solid var(--border);
   margin: 16px 0
}

.kyc-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 5px 12px;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
   background: var(--success-dim);
   color: var(--success);
   border: 1px solid rgba(82, 183, 136, .25)
}

.kyc-badge.pending {
   background: var(--danger-dim);
   color: var(--danger);
   border-color: rgba(224, 82, 82, .25)
}

/* toast */
.toast {
   position: fixed;
   bottom: 26px;
   right: 26px;
   z-index: 999;
   background: var(--card);
   border: 1px solid var(--gold-border);
   border-radius: 10px;
   padding: 12px 18px;
   display: none;
   align-items: center;
   gap: 10px;
   box-shadow: var(--shadow);
   min-width: 240px
}

.toast.show {
   display: flex;
   animation: toastIn .25s ease
}

@keyframes toastIn {
   from {
      opacity: 0;
      transform: translateY(10px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.toast-icon {
   font-size: 16px
}

.toast-icon.success {
   color: var(--success)
}

.toast-icon.error {
   color: var(--danger)
}

/* ─────────────────────────────────────────
   PAYMENT BADGES
───────────────────────────────────────── */
.pay-mode {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 8px;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 600;
   white-space: nowrap
}

.pay-online {
   background: var(--blue-dim);
   color: var(--blue);
   border: 1px solid rgba(78, 168, 222, .22)
}

.pay-cod {
   background: rgba(240, 180, 41, .1);
   color: var(--warning);
   border: 1px solid rgba(240, 180, 41, .22)
}

.pay-paid {
   background: var(--success-dim);
   color: var(--success);
   border: 1px solid rgba(82, 183, 136, .22)
}

.pay-unpaid {
   background: var(--danger-dim);
   color: var(--danger);
   border: 1px solid rgba(224, 82, 82, .22)
}

/* ─────────────────────────────────────────
   MILESTONE TRACKER
───────────────────────────────────────── */
.milestone-track {
   position: relative;
   padding: 8px 0 28px
}

.milestone-line {
   position: absolute;
   left: 19px;
   top: 24px;
   bottom: 0;
   width: 2px;
   background: var(--border);
   z-index: 0
}

.milestone-line-fill {
   position: absolute;
   left: 19px;
   top: 24px;
   width: 2px;
   background: linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
   z-index: 1;
   transition: height .6s ease
}

.milestone-step {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   z-index: 2;
   margin-bottom: 0
}

.milestone-step:not(:last-child) {
   margin-bottom: 0
}

.m-dot-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0
}

.m-dot {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   flex-shrink: 0;
   transition: all .3s;
   position: relative;
   z-index: 2;
   border: 2px solid var(--border)
}

.m-dot.done {
   background: var(--gold);
   border-color: var(--gold);
   color: #0f1008;
   box-shadow: 0 0 0 4px var(--gold-pale)
}

.m-dot.active {
   background: var(--card);
   border-color: var(--gold);
   color: var(--gold-light);
   box-shadow: 0 0 0 4px var(--gold-pale), 0 0 12px rgba(201, 137, 10, .25);
   animation: pulseDot 2s infinite
}

.m-dot.pending {
   background: var(--bg3);
   border-color: var(--border);
   color: var(--text-dim)
}

.m-dot.cancelled {
   background: var(--danger-dim);
   border-color: var(--danger);
   color: var(--danger)
}

@keyframes pulseDot {

   0%,
   100% {
      box-shadow: 0 0 0 4px var(--gold-pale), 0 0 12px rgba(201, 137, 10, .25)
   }

   50% {
      box-shadow: 0 0 0 6px var(--gold-pale), 0 0 20px rgba(201, 137, 10, .4)
   }
}

.m-connector {
   width: 2px;
   flex: 1;
   min-height: 32px;
   background: var(--border);
   margin: 0 auto;
   transition: background .3s
}

.m-connector.filled {
   background: linear-gradient(180deg, var(--gold), var(--gold-light))
}

.m-body {
   padding: 8px 0 36px;
   flex: 1
}

.m-title {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 14px;
   margin-bottom: 3px;
   transition: color .3s
}

.m-title.done,
.m-title.active {
   color: var(--text)
}

.m-title.pending {
   color: var(--text-muted)
}

.m-title.cancelled {
   color: var(--danger)
}

.m-desc {
   font-size: 12px;
   color: var(--text-muted);
   line-height: 1.5
}

.m-time {
   font-size: 11px;
   color: var(--text-dim);
   margin-top: 4px;
   display: flex;
   align-items: center;
   gap: 4px
}

.m-time.done {
   color: var(--text-muted)
}

.m-step:last-child .m-body {
   padding-bottom: 0
}

/* booking detail layout */
.bdetail-grid {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 20px;
   align-items: start
}

.bdetail-main {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.bdetail-sidebar {
   display: flex;
   flex-direction: column;
   gap: 16px;
   position: sticky;
   top: 80px
}

.bdetail-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 20px;
   transition: background .3s, border-color .3s
}

.bdetail-card-title {
   font-family: 'Syne', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 14px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   gap: 8px
}

.bdetail-card-title i {
   color: var(--gold-light)
}

/* booking hero banner */
.bdetail-hero {
   background: linear-gradient(135deg, var(--card2) 0%, var(--card) 100%);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 22px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px
}

.bdetail-hero-left {
   display: flex;
   align-items: center;
   gap: 16px
}

.bdetail-hero-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: linear-gradient(135deg, var(--gold), #5a3a00);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   flex-shrink: 0
}

.bdetail-hero-meta h2 {
   font-family: 'Syne', sans-serif;
   font-weight: 800;
   font-size: 20px;
   margin-bottom: 4px
}

.bdetail-hero-meta .meta-row {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
   font-size: 13px;
   color: var(--text-muted)
}

.bdetail-hero-meta .meta-row span {
   display: flex;
   align-items: center;
   gap: 5px
}

.bdetail-hero-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 8px
}

.bdetail-amt {
   font-family: 'Syne', sans-serif;
   font-size: 28px;
   font-weight: 800;
   color: var(--gold-light)
}

.bdetail-id {
   font-size: 11.5px;
   color: var(--text-muted)
}

/* info rows inside detail */
.drow {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 1px solid var(--border);
   font-size: 13px;
   gap: 12px
}

.drow:last-child {
   border-bottom: none;
   padding-bottom: 0
}

.drow .dl {
   color: var(--text-muted);
   font-size: 12px;
   flex-shrink: 0
}

.drow .dv {
   font-weight: 500;
   text-align: right
}

/* scrollbar */
::-webkit-scrollbar {
   width: 5px;
   height: 5px
}

::-webkit-scrollbar-track {
   background: var(--scrollbar-track)
}

::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
   background: var(--gold-border)
}