/* ==========================================================================
   OPS.CSS — panel versi Langkah 4–5: tema per ruang kerja (lini) + jadwal, booking,
   keuangan, tim, inventaris. Dimuat setelah lab.css dan memakai token yang sama.
   ========================================================================== */

/* ---------- Token tambahan ---------- */
:root {
  --title-font: var(--display); --title-style: normal; --title-weight: 300;
  --c-studio: #3566BD; --c-snaptive: #BF6F3D; --c-romantive: #8D3A3C; --c-out: #9AA0A6; --c-deadline: #8A5A00;
}
[data-theme="dark"] { --c-studio: #5B86D6; --c-snaptive: #C67B3E; --c-romantive: #A23F4E; --c-out: #6B7178; --c-deadline: #F2C48D; }

/* ==========================================================================
   TEMA PER RUANG KERJA — warna kanvas, aksen, lembaran, dan huruf judul ikut lini,
   supaya selalu sadar sedang mengurus lini apa.
   ========================================================================== */
body[data-ws="studio"] {
  --canvas: #08142A; --canvas-line: rgba(220,232,255,.12); --canvas-muted: #A6B4CC;
  --lime: #A9C6FF; --green: #1E488F; --accent: #1E488F;
  --sheet: #F4F6FA; --card: #E6ECF5; --card-2: #FFFFFF; --muted: #4F5B6E;
  --title-font: 'Inter Tight', sans-serif; --title-weight: 500;
  --visual: radial-gradient(120% 90% at 100% 100%, rgba(169,198,255,.55) 0%, rgba(111,155,232,.3) 24%, transparent 55%),
            radial-gradient(90% 80% at 0% 0%, rgba(30,72,143,.9) 0%, transparent 60%),
            linear-gradient(160deg, #050B18 0%, #0B2350 45%, #1E488F 82%, #3E6CC0 100%);
}
body[data-ws="snaptive"] {
  --canvas: #140E0B; --canvas-ink: #F6EFE6; --canvas-line: rgba(246,239,230,.12); --canvas-muted: #C2AE9E;
  --lime: #F2C48D; --green: #A4552C; --accent: #A4552C;
  --sheet: #F6EFE6; --card: #EDE2D4; --card-2: #FBF7F1; --ink: #120D0B; --muted: #6B5446; --line: rgba(58,36,24,.16);
  --title-font: 'Instrument Serif', Georgia, serif; --title-style: italic; --title-weight: 400;
  --visual: radial-gradient(120% 90% at 100% 100%, rgba(242,196,141,.6) 0%, rgba(184,105,58,.35) 26%, transparent 56%),
            radial-gradient(90% 80% at 0% 0%, rgba(164,85,44,.55) 0%, transparent 60%),
            linear-gradient(160deg, #120D0B 0%, #2A1A12 45%, #5A3220 78%, #A4552C 100%);
}
body[data-ws="romantive"] {
  --canvas: #16080B; --canvas-ink: #FDFAE3; --canvas-line: rgba(253,250,227,.12); --canvas-muted: #C6B39A;
  --lime: #C9A45C; --green: #8D3A3C; --accent: #8D3A3C;
  --sheet: #FDFAE3; --card: #F1E8D2; --card-2: #FFFFFF; --ink: #0A0A0A; --muted: #6E5D43; --line: rgba(110,93,67,.2);
  --title-font: 'Source Serif 4', Georgia, serif; --title-style: italic; --title-weight: 500;
  --visual: radial-gradient(120% 90% at 100% 100%, rgba(227,199,138,.55) 0%, rgba(201,164,92,.3) 24%, transparent 55%),
            radial-gradient(90% 80% at 0% 0%, rgba(141,58,60,.8) 0%, transparent 60%),
            linear-gradient(160deg, #0A0405 0%, #280B0F 45%, #5A1E22 78%, #8D3A3C 100%);
}
[data-theme="dark"] body[data-ws="studio"] { --sheet: #0F1A2B; --card: #16233A; --card-2: #1B2A44; --ink: #EEF2FA; --muted: #9DAAC0; --line: rgba(220,232,255,.12); --accent: #A9C6FF; }
[data-theme="dark"] body[data-ws="snaptive"] { --sheet: #1C120D; --card: #2A1A12; --card-2: #33211A; --ink: #F6EFE6; --muted: #C2AE9E; --line: rgba(246,239,230,.12); --accent: #F2C48D; }
[data-theme="dark"] body[data-ws="romantive"] { --sheet: #1F0C0F; --card: #2A1014; --card-2: #331418; --ink: #FDFAE3; --muted: #C6B39A; --line: rgba(253,250,227,.12); --accent: #D9B871; }
html:has(body[data-ws="studio"]) { background: #08142A; }
html:has(body[data-ws="snaptive"]) { background: #140E0B; }
html:has(body[data-ws="romantive"]) { background: #16080B; }
body[data-ws="studio"]::before { background: radial-gradient(38% 34% at 0% 100%, rgba(169,198,255,.22), transparent 70%), radial-gradient(34% 30% at 6% 2%, rgba(30,72,143,.6), transparent 70%), radial-gradient(30% 28% at 100% 0%, rgba(62,108,192,.3), transparent 70%); }
body[data-ws="snaptive"]::before { background: radial-gradient(38% 34% at 0% 100%, rgba(242,196,141,.2), transparent 70%), radial-gradient(34% 30% at 6% 2%, rgba(164,85,44,.4), transparent 70%), radial-gradient(30% 28% at 100% 0%, rgba(142,155,138,.2), transparent 70%); }
body[data-ws="romantive"]::before { background: radial-gradient(38% 34% at 0% 100%, rgba(201,164,92,.22), transparent 70%), radial-gradient(34% 30% at 6% 2%, rgba(141,58,60,.5), transparent 70%), radial-gradient(30% 28% at 100% 0%, rgba(201,164,92,.14), transparent 70%); }
body[data-ws="studio"] .hero__visual .orb--1, body[data-ws="studio"] .bk-hero .orb--1 { --tone: #A9C6FF; }
body[data-ws="studio"] .hero__visual .orb--2, body[data-ws="studio"] .bk-hero .orb--2 { --tone: #6F9BE8; }
body[data-ws="studio"] .hero__visual .orb--3 { --tone: #DBE64C; }
body[data-ws="snaptive"] .hero__visual .orb--1, body[data-ws="snaptive"] .bk-hero .orb--1 { --tone: #F2C48D; }
body[data-ws="snaptive"] .hero__visual .orb--2, body[data-ws="snaptive"] .bk-hero .orb--2 { --tone: #D9894E; }
body[data-ws="snaptive"] .hero__visual .orb--3 { --tone: #8E9B8A; }
body[data-ws="romantive"] .hero__visual .orb--1, body[data-ws="romantive"] .bk-hero .orb--1 { --tone: #E3C78A; }
body[data-ws="romantive"] .hero__visual .orb--2, body[data-ws="romantive"] .bk-hero .orb--2 { --tone: #C9A45C; }
body[data-ws="romantive"] .hero__visual .orb--3 { --tone: #F1E8D2; }
body:not([data-ws="hq"]) .orb--soon { --tone: var(--lime); }
body:not([data-ws="hq"]) .tabbar a[aria-current="page"], body:not([data-ws="hq"]) .side__nav a[aria-current="page"] .side__ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px color-mix(in srgb, var(--lime) 40%, transparent); }
body:not([data-ws="hq"]) .cta-bar__icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px color-mix(in srgb, var(--lime) 45%, transparent); }
body[data-ws="snaptive"] .tabbar { background: linear-gradient(135deg, rgba(42,26,18,.86), rgba(20,14,11,.76)) !important; }
body[data-ws="romantive"] .tabbar { background: linear-gradient(135deg, rgba(40,11,15,.86), rgba(22,8,11,.76)) !important; }
body[data-ws="studio"] .tabbar { background: linear-gradient(135deg, rgba(15,30,58,.86), rgba(8,20,42,.76)) !important; }

/* Judul memakai huruf khas lini */
.page-head h1, .hero__title, .bk-hero__title, .auth__panel h1, .cat__head h2, .hero__panel h2, .card-cream h2, .card-dark h2, .panel h2 { font-family: var(--title-font); font-style: var(--title-style); }
.page-head h1, .hero__title, .bk-hero__title { font-weight: var(--title-weight); }
body[data-ws="snaptive"] .page-head h1, body[data-ws="snaptive"] .hero__title, body[data-ws="snaptive"] .bk-hero__title { letter-spacing: -.02em; }
body[data-ws="snaptive"] .panel h2, body[data-ws="snaptive"] .card-cream h2, body[data-ws="snaptive"] .card-dark h2, body[data-ws="snaptive"] .hero__panel h2 { font-size: 26px; letter-spacing: -.01em; }
body[data-ws="romantive"] .page-head h1, body[data-ws="romantive"] .hero__title, body[data-ws="romantive"] .bk-hero__title { letter-spacing: -.035em; }

/* ---------- Tulisan merek ---------- */
.wordmark { font-weight: 600; font-size: 19px; letter-spacing: -.03em; color: inherit; white-space: nowrap; }
.wordmark--studio { font-family: 'Inter Tight', sans-serif; font-weight: 600; }
.wordmark--snaptive { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 25px; letter-spacing: -.01em; }
.wordmark--romantive { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 500; font-size: 22px; }
.side__brand .wordmark, .topbar__brand .wordmark { color: var(--canvas-ink); }
.topbar__brand span, .side__brand span { background: var(--lime); }

/* ---------- Pemilih ruang kerja ---------- */
.wsw { position: relative; z-index: 30; }
.wsw summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer; color: var(--canvas-ink);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid var(--canvas-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.wsw summary::-webkit-details-marker { display: none; }
.wsw summary:hover { background: rgba(255,255,255,.1); }
.wsw__orb { width: 36px; height: 36px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF 0%, var(--tone) 55%, color-mix(in srgb, var(--tone) 55%, #000) 100%); box-shadow: 0 4px 14px color-mix(in srgb, var(--tone) 45%, transparent); }
.wsw__orb--hq { --tone: #DBE64C; } .wsw__orb--studio { --tone: #6F9BE8; } .wsw__orb--snaptive { --tone: #D9894E; } .wsw__orb--romantive { --tone: #B8484B; }
.wsw__text { display: grid; line-height: 1.15; min-width: 0; flex: 1; }
.wsw__text small { font-size: 10.5px; color: var(--canvas-muted); }
.wsw__text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsw__swap { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.wsw__menu { position: absolute; left: 0; top: calc(100% + 8px); width: max(100%, 260px); padding: 6px; border-radius: 22px; display: grid; gap: 2px;
  background: linear-gradient(135deg, rgba(30,36,42,.94), rgba(14,20,24,.92)); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 24px 50px rgba(0,0,0,.45); animation: flash-in .25s var(--ease); }
.wsw__menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 16px; text-decoration: none; color: #F6F7ED; }
.wsw__menu a:hover { background: rgba(255,255,255,.07); }
.wsw__menu a[aria-current="true"] { background: rgba(255,255,255,.12); }
.wsw__menu .wsw__orb { width: 30px; height: 30px; }
.wsw__menu strong { display: block; font-size: 14px; } .wsw__menu small { font-size: 12px; color: #A9B1B6; }
.wsw--top summary { min-height: 44px; padding-right: 8px; max-width: 64vw; }
.wsw--top .wsw__orb { width: 32px; height: 32px; }
.wsw--top .wsw__text small { display: none; }
.wsw--side { margin-top: -10px; }
.wsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wscard { display: grid; gap: 4px; padding: 14px; border-radius: 20px; background: var(--card-2); text-decoration: none; border: 1px solid transparent; }
.wscard[aria-current="true"] { border-color: var(--ink); }
.wscard strong { margin-top: 6px; font-size: 14.5px; } .wscard small { color: var(--muted); font-size: 12px; }

/* ---------- Kartu angka ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .stats:not(.stats--4) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1100px) { .sheet > .stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); min-width: 0; }
.stat__label { font-size: 12.5px; color: var(--muted); }
.stat__value { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 4.6vw, 24px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__note { font-size: 12px; color: var(--muted); }
.stat--good { background: color-mix(in srgb, var(--lime) 30%, var(--card)); }
.stat--warn .stat__value { color: var(--danger); }
.txt-warn { color: var(--danger); font-weight: 600; }

/* ---------- Agenda / baris booking ---------- */
.agenda { display: grid; gap: 8px; }
.agenda--tight { gap: 6px; }
.ag { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 20px; background: var(--card-2); text-decoration: none; transition: translate .3s var(--ease), background-color .2s; }
.ag:hover { translate: 2px 0; }
.ag::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-c, var(--accent)); }
.ag--studio { --brand-c: var(--c-studio); } .ag--snaptive { --brand-c: var(--c-snaptive); } .ag--romantive { --brand-c: var(--c-romantive); }
.ag__date { grid-row: span 2; width: 48px; height: 52px; border-radius: 14px; display: grid; place-items: center; align-content: center; background: var(--card); line-height: 1; }
.ag__date b { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.03em; }
.ag__date small { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ag__body { display: grid; gap: 2px; min-width: 0; }
.ag__title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag__meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag__warn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--danger); font-weight: 600; }
.ag__side { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ag.is-cancel { opacity: .55; }
.hero__panel .ag, .card-cream .ag { background: var(--card); }
.hero__panel .ag__date, .card-cream .ag__date { background: var(--card-2); }
@media (min-width: 640px) {
  .ag { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ag__date { grid-row: auto; }
  .ag__side { grid-column: auto; justify-content: flex-end; max-width: 280px; }
}
.agenda__day { margin: 14px 0 6px; font-family: var(--display); font-weight: 500; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.agenda__day:first-of-type { margin-top: 0; }
.agenda__day small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.agenda__day.is-today { color: var(--accent); }
.panel .ag { margin-bottom: 6px; }

/* Tahapan & status bayar */
.stage, .pay { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.stage--lead { border: 1px dashed var(--muted); color: var(--muted); }
.stage--active { background: var(--ink); color: var(--sheet); }
.stage--done { background: color-mix(in srgb, var(--mantis) 30%, transparent); color: var(--ink); }
.stage--cancel { background: transparent; color: var(--muted); text-decoration: line-through; border: 1px solid var(--line); }
.pay--ok { background: color-mix(in srgb, var(--mantis) 26%, transparent); color: var(--ink); }
.pay--part { background: color-mix(in srgb, var(--lime) 45%, transparent); color: var(--ink); }
.pay--warn { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.bk-hero .stage--active { background: rgba(255,255,255,.9); color: #0A0A0A; }

/* ---------- Pencarian & saringan ---------- */
.searchbar { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 16px; min-height: 52px; border-radius: 999px; background: var(--card); color: var(--muted); }
.searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--ink); min-height: 50px; }
.searchbar input:focus { outline: none; }
.searchbar:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 55%, transparent); }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filters a { flex: none; min-height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.filters a[aria-current="page"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.pipeline { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.pipe { flex: 1 0 104px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--card); text-decoration: none; border: 1px solid transparent; }
.pipe strong { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; }
.pipe span { font-size: 12px; color: var(--muted); line-height: 1.25; }
.pipe--lead { background: transparent; border: 1px dashed var(--line); }
.pipe--done { background: color-mix(in srgb, var(--mantis) 18%, var(--card)); }
.pipe[aria-current="page"] { border: 1px solid var(--ink); }

/* ---------- Formulir tambahan ---------- */
.grid3 { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form--wide > .panel { max-width: none; }
.field--full { grid-column: 1 / -1; }
.choice--2 { grid-template-columns: 1fr 1fr !important; }
.items { display: grid; gap: 8px; }
.items__head { display: none; font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 4px; }
.items__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px; padding: 8px; border-radius: 18px; background: var(--card-2); }
.items__row input[type="text"]:first-child { grid-column: 1 / -1; }
.items input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); font-size: 16px; }
.items input:focus { outline: none; border-color: var(--ink); }
.money--sm { border-radius: 12px; background: var(--sheet); }
.money--sm input { font-size: 17px; min-height: 42px; padding: 6px 8px 6px 4px; }
@media (min-width: 640px) {
  .items__head { display: grid; grid-template-columns: minmax(0, 1fr) 70px 180px; gap: 8px; }
  .items__row { grid-template-columns: minmax(0, 1fr) 70px 180px; padding: 0; background: transparent; }
  .items__row input[type="text"]:first-child { grid-column: auto; }
}
.checks { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; }
.check span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; background: var(--card-2); cursor: pointer; }
.check input:checked + span { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field > input[name="skills_extra"] { margin-top: 4px; }

/* ---------- Detail booking ---------- */
.bk-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 12px; padding: 22px 20px 20px; border-radius: var(--r-xl); background: var(--visual); color: #F6F7ED; }
.bk-hero > :not(.orb) { position: relative; z-index: 1; }
.bk-hero .orb--1 { --tone: #DBE64C; width: 110px; height: 110px; right: 70px; top: -46px; }
.bk-hero .orb--2 { --tone: #74C365; width: 40px; height: 40px; right: 196px; top: 30px; animation-delay: .15s; }
.bk-hero--studio { --visual: radial-gradient(120% 90% at 100% 100%, rgba(169,198,255,.55), transparent 55%), linear-gradient(160deg, #050B18, #0B2350 45%, #1E488F 82%, #3E6CC0); }
.bk-hero--snaptive { --visual: radial-gradient(120% 90% at 100% 100%, rgba(242,196,141,.6), transparent 56%), linear-gradient(160deg, #120D0B, #2A1A12 45%, #5A3220 78%, #A4552C); }
.bk-hero--romantive { --visual: radial-gradient(120% 90% at 100% 100%, rgba(227,199,138,.55), transparent 55%), linear-gradient(160deg, #0A0405, #280B0F 45%, #5A1E22 78%, #8D3A3C); }
.bk-hero__top { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 50px; }
.pill-glass { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bk-hero__title { font-size: clamp(30px, 7.5vw, 50px); line-height: 1.02; letter-spacing: -.045em; max-width: 760px; }
.bk-hero__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: rgba(246,247,237,.85); }
.bk-hero__facts span { display: inline-flex; align-items: center; gap: 6px; }
.round--glass { position: absolute !important; right: 16px; top: 16px; z-index: 2; color: #F6F7ED !important; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) !important; border: 1px solid rgba(255,255,255,.32) !important; }
.stepper { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 999px; background: var(--card); }
.step { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.step__dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); }
.step.is-done { color: var(--ink); } .step.is-done .step__dot { background: var(--accent); border-color: var(--accent); color: var(--sheet); }
.step.is-current { background: var(--ink); color: var(--sheet); } .step.is-current .step__dot { border-color: var(--lime); background: var(--lime); }
.step:hover:not(.is-current) { background: var(--card-2); }
.twocol { display: grid; gap: 16px; align-items: start; }
.col { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1000px) { .twocol { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .twocol > .col:last-child { position: sticky; top: 24px; } }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kv { margin: 0; display: grid; gap: 0; }
.kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; display: grid; overflow-wrap: anywhere; }
.kv dd small { color: var(--muted); font-size: 12.5px; }
.kv a { text-underline-offset: 3px; }
.note { padding: 12px 14px; border-radius: 16px; background: var(--card-2); display: grid; gap: 4px; font-size: 14px; }
.note strong { font-size: 12.5px; color: var(--muted); }
.note--muted { border: 1px dashed var(--line); background: transparent; }
.progress { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: visible; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.progress i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.task { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px 6px 8px; border: 0; border-radius: 14px; background: transparent; text-align: left; font-size: 14px; }
.task:hover { background: var(--card-2); }
.task small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.task__box { width: 24px; height: 24px; flex: none; border-radius: 8px; display: grid; place-items: center; border: 1.5px solid var(--muted); color: transparent; transition: background-color .2s; }
.task.is-done > span:nth-child(2) { color: var(--muted); text-decoration: line-through; }
.task.is-done .task__box { background: var(--accent); border-color: var(--accent); color: var(--sheet); }
.inline-add { display: flex; gap: 6px; align-items: center; padding: 4px 4px 4px 14px; border-radius: 999px; border: 1px dashed var(--line); }
.inline-add input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; min-height: 40px; }
.inline-add input:focus { outline: none; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.people li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 18px; background: var(--card-2); }
.people form { display: contents; }
.people__body { flex: 1; min-width: 0; display: grid; }
.people__body strong { font-size: 14px; } .people__body small { color: var(--muted); font-size: 12.5px; }
.crew-add { display: grid; gap: 10px; padding: 12px; border-radius: 18px; border: 1px dashed var(--line); }
@media (min-width: 560px) { .crew-add { grid-template-columns: 1fr 1fr; align-items: end; } .crew-add .field:first-of-type { grid-column: 1 / -1; } }
.crew-add .field input, .crew-add .field select { min-height: 46px; }

/* Uang */
.panel--money { gap: 14px; }
.money-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.money-sum div { display: grid; gap: 2px; min-width: 0; }
.money-sum span { font-size: 12px; color: var(--muted); }
.money-sum strong { font-family: var(--display); font-weight: 400; font-size: clamp(16px, 4.2vw, 21px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-wrap { overflow-x: auto; margin: 0 -4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.tbl tfoot td { font-weight: 600; border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl--items td { padding: 7px 0; }
.tbl--items small { color: var(--muted); }
.paylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.paylist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 16px; background: var(--card-2); }
.paylist li > span, .paylist li > a { display: grid; min-width: 0; text-decoration: none; }
.paylist small { color: var(--muted); font-size: 12.5px; }
.paylist form { display: contents; }
.paylist--big li { padding: 12px 14px; }
.paylist__amt { display: grid !important; justify-items: end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.add-pay summary { list-style: none; cursor: pointer; }
.add-pay summary::-webkit-details-marker { display: none; }
.add-pay[open] summary { display: none; }
.add-pay .form { padding: 14px; border-radius: 18px; background: var(--card-2); }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-list { display: grid; gap: 6px; }
.wa-btn { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-radius: 16px; background: var(--card-2); text-decoration: none; font-weight: 500; font-size: 14px; transition: translate .3s var(--ease); }
.wa-btn span { flex: 1; }
.wa-btn .ico-wa { color: #1E9E57; }
.wa-btn:hover { translate: 2px 0; }
.copy { display: flex; gap: 6px; }
.copy input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); font-size: 13px; color: var(--muted); }

/* ---------- Jadwal ---------- */
.cal-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.monthnav { display: inline-flex; align-items: center; gap: 10px; }
.monthnav strong { min-width: 140px; text-align: center; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.sheet > .monthnav { justify-self: start; }
.check-date { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--card); }
.check-date label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.check-date input { border: 0; background: transparent; font-size: 15px; min-height: 40px; color: var(--ink); }
.check-free { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--mantis) 22%, var(--card-2)); font-weight: 500; }
.h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chips--busy span { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.cal__day { min-height: 54px; padding: 4px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal__day.is-pad { background: transparent; }
.cal__day.is-weekend { background: color-mix(in srgb, var(--card) 70%, var(--sheet)); }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal__num { position: relative; align-self: flex-start; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 600; text-decoration: none; }
.cal__num:hover { background: var(--card-2); }
.cal__day.is-today .cal__num { background: var(--accent); color: var(--sheet); }
.cal__conf { position: absolute; right: -6px; top: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--danger); color: #fff; font-style: normal; font-size: 10px; display: grid; place-items: center; }
.cal__ev, .cal__more, .cal__dl { display: none; }
.cal__dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 3px; }
.cal__dots i, .legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--studio, .seg--studio { background: var(--c-studio); } .dot--snaptive, .seg--snaptive { background: var(--c-snaptive); } .dot--romantive, .seg--romantive { background: var(--c-romantive); }
.dot--deadline { background: transparent !important; border: 1.5px solid var(--c-deadline); }
.dot--out { background: var(--c-out); }
.dot--hq { background: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (min-width: 760px) {
  .cal { gap: 6px; }
  .cal__day { min-height: 112px; padding: 6px; }
  .cal__dots { display: none; }
  .cal__ev { display: block; padding: 3px 7px; border-radius: 8px; font-size: 11.5px; line-height: 1.35; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: var(--brand-c); }
  .cal__ev--studio { --brand-c: var(--c-studio); } .cal__ev--snaptive { --brand-c: var(--c-snaptive); } .cal__ev--romantive { --brand-c: var(--c-romantive); }
  .cal__ev.is-conf { box-shadow: inset 0 0 0 2px var(--danger); }
  .cal__ev b { font-weight: 600; }
  .cal__more { display: block; font-size: 11px; color: var(--muted); padding: 0 6px; }
  .cal__dl { display: block; font-size: 11px; padding: 2px 6px; border-radius: 8px; border: 1px dashed var(--c-deadline); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Klien & tim ---------- */
.row--client { grid-template-areas: "main price" "main tools"; }
.row__sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row--client .row__price { font-size: 17px; } .row--client .row__price small { font-size: 12px; color: var(--muted); font-family: var(--font); }
.row--client .row__tools { align-items: center; gap: 6px; }
.people-grid { display: grid; gap: 8px; }
@media (min-width: 900px) { .people-grid { grid-template-columns: 1fr 1fr; } }
.person { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 22px; background: var(--card); text-decoration: none; transition: translate .3s var(--ease); }
.person:hover { translate: 0 -2px; }
.person__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.person__body strong { font-size: 15px; } .person__body > small { color: var(--muted); font-size: 12.5px; }
.person__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.person__side { display: grid; justify-items: end; gap: 2px; text-align: right; }
.person__side strong { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.person__side small { color: var(--muted); font-size: 11.5px; }

/* ---------- Inventaris ---------- */
.eq-form { display: grid; gap: 16px; }
.eq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eq { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 18px; background: var(--card-2); }
.eq.is-out { background: transparent; border: 1px dashed var(--line); }
.eq.is-late { border-color: var(--danger); }
.eq__pick { position: relative; width: 40px; height: 40px; display: grid; place-items: center; flex: none; cursor: pointer; }
.eq__pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.eq__pick input:checked + .task__box { background: var(--accent); border-color: var(--accent); color: var(--sheet); }
.eq__pick input:focus-visible + .task__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.eq__pick--off { cursor: default; }
.eq__body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.eq__name { font-weight: 600; font-size: 14px; text-decoration: none; }
a.eq__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.eq__body small { color: var(--muted); font-size: 12.5px; }
.eq__side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.cond { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.cond--rusak, .cond--servis { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.avail { font-size: 12px; color: var(--green); font-weight: 600; }
[data-theme="dark"] .avail { color: var(--mantis); }
.avail.is-off { color: var(--muted); }
.mini-select { min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 13px; }
.loan-bar { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 5; display: grid; gap: 8px; padding: 12px; border-radius: 26px;
  background: var(--glass-light-bg); border: 1px solid var(--glass-light-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), 0 16px 40px rgba(0,0,0,.16); }
.loan-bar .field select, .loan-bar .field input { min-height: 44px; }
@media (min-width: 900px) { .loan-bar { bottom: 20px; grid-template-columns: 1fr 1.4fr 1fr 1.4fr; align-items: end; } }

/* ---------- Keuangan ---------- */
.bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 220px; align-items: end; padding-top: 18px; border-bottom: 1px solid var(--line); }
.bars__col { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 4px; text-decoration: none; border-radius: 12px; padding: 0 2px; }
.bars__col:hover, .bars__col.is-current { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.bars__val { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__col.is-current .bars__val { color: var(--ink); font-weight: 600; }
.bars__pair { width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.bars__stack { width: min(26px, 42%); display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.bars__seg { display: block; min-height: 2px; flex-basis: 0; }
.bars__stack .bars__seg:first-child { border-radius: 4px 4px 0 0; }
.bars__out { width: min(14px, 24%); background: var(--c-out); border-radius: 4px 4px 0 0; }
.bars__label { position: absolute; bottom: -22px; font-size: 11.5px; color: var(--muted); }
.bars__col.is-current .bars__label { color: var(--ink); font-weight: 600; }
.panel:has(.bars) { padding-bottom: 30px; }
.legend--inline { font-size: 12px; }
.table-view { margin-top: 18px; }
.table-view summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.table-view .tbl { margin-top: 10px; }
.catbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.catbars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.catbars__track { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.catbars__track i { display: block; height: 100%; border-radius: inherit; background: var(--c-out); }
.catbars b { font-variant-numeric: tabular-nums; }
.tx { list-style: none; margin: 0; padding: 0; display: grid; }
.tx li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.tx li:first-child { border-top: 0; }
.tx__icon { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 17px; background: var(--card-2); }
.tx--in .tx__icon { background: color-mix(in srgb, var(--mantis) 30%, transparent); }
.tx__body { flex: 1; min-width: 0; display: grid; text-decoration: none; }
.tx__body strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx__body small { color: var(--muted); font-size: 12.5px; }
.tx__amt { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx--out .tx__amt b { color: var(--muted); }

/* ---------- Beranda ---------- */
.brandcards { display: grid; gap: 10px; }
@media (min-width: 900px) { .brandcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bc { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); color: #F6F7ED; text-decoration: none; transition: translate .35s var(--ease), box-shadow .35s; }
.bc:hover { translate: 0 -3px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.bc--studio { background: radial-gradient(120% 90% at 100% 100%, rgba(169,198,255,.5), transparent 55%), linear-gradient(160deg, #050B18, #0B2350 50%, #1E488F); }
.bc--snaptive { background: radial-gradient(120% 90% at 100% 100%, rgba(242,196,141,.55), transparent 56%), linear-gradient(160deg, #120D0B, #2A1A12 50%, #7A4426); }
.bc--romantive { background: radial-gradient(120% 90% at 100% 100%, rgba(227,199,138,.5), transparent 55%), linear-gradient(160deg, #0A0405, #280B0F 50%, #6E2A2D); }
.bc__head { display: flex; justify-content: space-between; align-items: center; }
.bc__head .wordmark { font-size: 24px; }
.bc__head .wordmark--snaptive { font-size: 30px; }
.bc__go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.28); }
.bc__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bc__nums span { display: grid; }
.bc__nums strong { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -.03em; white-space: nowrap; }
.bc__nums small, .bc__next { font-size: 12px; color: rgba(246,247,237,.72); }
.bc__next { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--card-2); text-decoration: none; transition: translate .3s var(--ease); }
.alert:hover { translate: 2px 0; }
.alert > span:last-child { display: grid; min-width: 0; }
.alert strong { font-size: 14px; } .alert small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.alert__dot { width: 10px; height: 10px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--muted); }
.alert--warn .alert__dot { background: #E0A100; }
.alert--danger .alert__dot { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }
.alert--info .alert__dot { background: transparent; border: 2px solid var(--muted); }
.quick--dark .quick__item { background: rgba(255,255,255,.06); color: #F6F7ED; border: 1px solid rgba(255,255,255,.08); }
.quick--dark .quick__item:hover { background: rgba(255,255,255,.1); }
@media (min-width: 640px) { .quick--dark { grid-template-columns: 1fr 1fr; } }
.hero__panel .cta-bar { margin-top: auto; }

/* Tombol lini kecil di daftar booking (ruang Sinektive) */
.btn--studio { border-color: color-mix(in srgb, var(--c-studio) 60%, transparent); }
.btn--snaptive { border-color: color-mix(in srgb, var(--c-snaptive) 60%, transparent); }
.btn--romantive { border-color: color-mix(in srgb, var(--c-romantive) 60%, transparent); }
.page-head__actions { flex-wrap: wrap; }

/* Lencana lini sedikit menyesuaikan saat mode gelap */
[data-theme="dark"] .badge--studio { background: #3566BD; } [data-theme="dark"] .badge--romantive { background: #A23F4E; }

@media print { .side, .topbar, .tabbar, .form__bar, .loan-bar { display: none !important; } .shell .sheet { margin: 0; } }
.duo { align-items: start; }
.eq-form:not(.has-picks) .loan-bar { position: static; box-shadow: none; }

/* Perbaikan HP 360px (hasil uji Langkah 6): kolom grid tidak boleh melebar mengikuti isi */
.twocol, .form, .panel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .twocol { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.form .grid2, .form .grid3 { min-width: 0; }
.people li { flex-wrap: wrap; row-gap: 6px; } .people__body { flex: 1 1 150px; }
.money-sum strong { font-size: clamp(14px, 3.8vw, 21px); text-overflow: clip; } @media (max-width: 420px) { .money-sum { gap: 4px; } }