/* SocoApp v12.3 — UI & navigation rework
   Scoped overrides only. Public Ticketing landing pages are intentionally untouched. */

:root{
  --ui-page-max:1440px;
  --ui-radius-lg:20px;
  --ui-radius-md:14px;
  --ui-shadow:0 18px 50px -38px rgba(20,55,42,.42);
  --ui-green:#18884b;
  --ui-green-dark:#125f39;
  --ui-green-soft:#eef8f2;
  --ui-border:#dfe8e2;
  --ui-muted:#68766e;
  --ui-ink:#17231d;
  --ui-bg:#f6f8f6;
}

/* ---------- Global internal-app safety ---------- */
html,body{max-width:100%;overflow-x:hidden}
.app,.main,#views,.view,.view>*,.card,section,article,form,fieldset{min-width:0;max-width:100%}
.main{overflow-x:clip}
#views{width:min(100%,var(--ui-page-max));margin-inline:auto}
.view{width:100%}
img,svg,canvas,video{max-width:100%}
pre,code{overflow-wrap:anywhere}
.table-wrap,.table-responsive,[class$="-table-wrap"],[class*=" table-wrap"],[class*="-table-wrap"]{max-width:100%;overflow:auto;overscroll-behavior-inline:contain}
.section-head,.page-head,.toolbar,[class$="-toolbar"],[class*="-actions"],.filters,.filter-bar{min-width:0;flex-wrap:wrap}
.section-head>*:first-child,.page-head>*:first-child,.topbar-copy{min-width:0}
.section-head h2,.section-head h3,.page-head h2,.page-head h3,.topbar-copy h1{overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%}
.modal,.fbk-modal{z-index:900}
.modal-box,.fbk-modal-box{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.toast{z-index:1000}

/* Avoid stacked sticky layers and accidental overlays in operational pages. */
.view [style*="position: sticky"],.view .sticky{scroll-margin-top:90px}
@supports not (overflow:clip){.main{overflow-x:hidden}}

/* ---------- Shared internal hub tabs ---------- */
.hub-tabs,.fbk-hub-tabs{
  display:flex;align-items:center;gap:6px;width:100%;padding:5px;margin:0 0 16px;
  border:1px solid var(--ui-border);border-radius:15px;background:#fff;
  box-shadow:0 10px 30px -28px rgba(20,55,42,.5);overflow:auto;
  scrollbar-width:none;
}
.hub-tabs::-webkit-scrollbar,.fbk-hub-tabs::-webkit-scrollbar{display:none}
.hub-tabs>button,.hub-tab,.fbk-hub-tab{
  appearance:none;border:0;border-radius:10px;background:transparent;color:#526159;
  min-height:38px;padding:9px 14px;font:750 12px/1.2 var(--font);white-space:nowrap;cursor:pointer;
}
.hub-tabs>button:hover,.hub-tab:hover,.fbk-hub-tab:hover{background:#f2f7f4;color:#234f39}
.hub-tabs>button.active,.hub-tab.active,.fbk-hub-tab.active{background:#e8f5ed;color:#14633b;box-shadow:inset 0 0 0 1px #cde4d5}
.hub-tabs>button.hidden,.hub-tab.hidden,.fbk-hub-tab.hidden{display:none}

/* ---------- Event: six clean pages, one active stage at a time ---------- */
.ev3-page{display:grid;gap:16px;width:100%;padding-bottom:28px}
.ev3-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:4px 0 2px;
}
.ev3-page-head h2{margin:5px 0 4px;color:var(--ui-ink);font-size:clamp(23px,2.2vw,31px);line-height:1.13}
.ev3-page-head p{margin:0;color:var(--ui-muted);max-width:760px}
.ev3-page-head .eyebrow{color:var(--ui-green-dark)}
.ev3-switcher{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 16px;
  border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:#fff;
}
.ev3-switcher label{display:grid;gap:6px;flex:1;max-width:620px;margin:0;color:#526159;font-size:11px;font-weight:750}
.ev3-switcher select{width:100%}
.ev3-event-summary{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:22px;align-items:center;
  padding:20px 22px;border:1px solid #dbe8df;border-radius:var(--ui-radius-lg);
  background:linear-gradient(135deg,#fff 0%,#f3faf6 100%);box-shadow:var(--ui-shadow);
}
.ev3-event-summary-main h2{margin:5px 0 6px;color:var(--ui-ink);font-size:clamp(21px,2vw,28px);line-height:1.16}
.ev3-event-summary-main p{margin:0;color:var(--ui-muted);overflow-wrap:anywhere}
.ev3-event-summary-side{display:grid;justify-items:stretch;gap:8px}
.ev3-event-summary-side>.tag,.ev3-event-summary-side>.badge{justify-self:end}
.ev3-progress-label{display:flex;justify-content:space-between;gap:12px;color:#59675f;font-size:11px}
.ev3-progress{height:7px;border-radius:999px;background:#dfeae3;overflow:hidden}
.ev3-progress i{display:block;height:100%;border-radius:inherit;background:var(--ui-green)}
.ev3-stage-nav{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:6px;
  border:1px solid var(--ui-border);border-radius:16px;background:#fff;overflow:hidden;
}
.ev3-stage-tab{
  appearance:none;border:0;border-radius:11px;background:transparent;color:#58655e;
  min-width:0;min-height:56px;padding:8px 7px;display:flex;align-items:center;justify-content:center;gap:6px;
  font:740 11px/1.15 var(--font);cursor:pointer;transition:.15s ease;
}
.ev3-stage-tab .ic{width:16px;height:16px;flex:0 0 auto}
.ev3-stage-tab>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev3-stage-tab:hover{background:#f2f7f4;color:#214e37}
.ev3-stage-tab.active{background:#e8f5ed;color:#12613a;box-shadow:inset 0 0 0 1px #cce4d4}
.ev3-stage-tab.done:not(.active){color:#26734d}
.ev3-stage-index{
  width:21px;height:21px;display:grid;place-items:center;flex:0 0 auto;border-radius:999px;
  background:#edf2ef;color:#65736b;font-size:9px;font-weight:850;
}
.ev3-stage-tab.active .ev3-stage-index,.ev3-stage-tab.done .ev3-stage-index{background:#18884b;color:#fff}
.ev3-stage-mobile{display:none}
.ev3-stage-card{padding:0;overflow:hidden;border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow)}
.ev3-stage-card>header{display:flex;justify-content:space-between;gap:18px;padding:21px 22px 17px;border-bottom:1px solid #e8eeea;background:#fff}
.ev3-stage-card>header h3{margin:4px 0 5px;color:var(--ui-ink);font-size:21px}
.ev3-stage-card>header p{margin:0;color:var(--ui-muted);max-width:760px}
.ev3-stage-body{padding:20px 22px;background:#fff}
.ev3-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;padding:15px 22px;border-top:1px solid #e8eeea;background:#fafcfb}
.ev3-kv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ev3-kv{display:flex;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px;border:1px solid #e3eae5;border-radius:13px;background:#fbfcfb}
.ev3-kv>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#eaf5ee;color:#197047}
.ev3-kv>span .ic{width:18px;height:18px}
.ev3-kv small,.ev3-kv b{display:block;overflow-wrap:anywhere}
.ev3-kv small{margin-bottom:4px;color:#748078;font-size:10px}
.ev3-kv b{color:#25342c;font-size:13px;line-height:1.35}
.ev3-callout,.ev3-restricted{padding:16px 17px;border-radius:13px;background:#f3f8f5;border:1px solid #dce9e1}
.ev3-callout b,.ev3-restricted b{display:block;color:#255b3e}
.ev3-callout p,.ev3-restricted p{margin:5px 0 0;color:#68766e}
.ev3-restricted{background:#fff8e9;border-color:#f0dfb8}
.ev3-empty{min-height:330px;display:grid;justify-items:center;align-content:center;text-align:center;padding:32px;border:1px dashed #cadbd0;border-radius:20px;background:#fbfdfb}
.ev3-empty-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eaf5ee;color:#197047}
.ev3-empty-icon .ic{width:27px;height:27px}
.ev3-empty h3{margin:14px 0 5px;color:var(--ui-ink)}
.ev3-empty p{margin:0;color:var(--ui-muted)}
.ev3-empty-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:17px}

/* ---------- Participant, location and feedback pages ---------- */
.ins-main-page,.loc-main-page,.fbk-main-page,.fbk-page{max-width:100%;overflow:visible}
.ins-main-toolbar,.loc-main-toolbar,.fbk-filter-card,.fbk-action-filter{min-width:0}
.ins-main-toolbar>*,.loc-main-toolbar>*,.fbk-filter-card>*,.fbk-action-filter>*{min-width:0}
.ins-main-table-wrap,.loc-main-table-wrap,.fbk-response-list,.fbk-action-list{max-width:100%}
.fbk-hero{align-items:flex-start;gap:16px}
.fbk-hero>div:first-child{min-width:0}
.fbk-hero-actions,.fbk-link-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:100%}
.fbk-filter-card{grid-template-columns:minmax(180px,1.35fr) repeat(5,minmax(135px,.75fr)) auto;align-items:end}
.fbk-main-grid>.card,.fbk-chart-card,.fbk-main-recent{overflow:hidden}
.fbk-chart-wrap{position:relative;min-height:260px;max-width:100%;overflow:hidden}
.fbk-modal-box.wide{width:min(980px,calc(100vw - 32px))}
.fbk-modal-head{position:sticky;top:0;z-index:2;background:#fff}

/* ---------- Shell responsiveness ---------- */
@media(max-width:1100px){
  .ev3-stage-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ev3-kv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fbk-filter-card{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:820px){
  .main{padding:18px 16px 52px}
  #views{width:100%}
  .topbar{align-items:center;margin-bottom:16px}
  .topbar-actions{flex:0 0 auto}
  .topbar-actions #clock{display:none}
  .ev3-page-head{align-items:flex-start;flex-direction:column}
  .ev3-event-summary{grid-template-columns:1fr;gap:14px;padding:18px}
  .ev3-event-summary-side>.tag,.ev3-event-summary-side>.badge{justify-self:start}
  .ev3-stage-nav{display:none}
  .ev3-stage-mobile{display:grid;gap:6px;margin:0;padding:12px 14px;border:1px solid var(--ui-border);border-radius:14px;background:#fff;color:#58665e;font-size:11px;font-weight:750}
  .ev3-stage-mobile select{width:100%}
  .ev3-stage-card>header,.ev3-stage-body,.ev3-actions{padding-left:17px;padding-right:17px}
  .ev3-actions{justify-content:stretch}
  .ev3-actions .btn{flex:1 1 180px}
  .fbk-hero{display:grid}
  .fbk-hero-actions,.fbk-link-actions{justify-content:flex-start}
  .fbk-filter-card,.fbk-action-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  .main{padding:14px 12px 44px}
  .topbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
  .topbar-main{min-width:0;flex:1}
  .topbar-copy h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-copy p{display:none}
  .topbar-refresh{width:40px;height:40px;justify-content:center;padding:0;flex:0 0 auto}
  .topbar-refresh span{display:none}
  .ev3-page{gap:12px}
  .ev3-page-head h2{font-size:22px}
  .ev3-switcher{align-items:stretch;flex-direction:column;padding:12px}
  .ev3-switcher label{max-width:none}
  .ev3-switcher>.btn{width:100%}
  .ev3-event-summary{padding:15px;border-radius:16px}
  .ev3-event-summary-main h2{font-size:20px}
  .ev3-stage-card{border-radius:16px}
  .ev3-stage-card>header{padding-top:17px;padding-bottom:14px}
  .ev3-stage-card>header h3{font-size:18px}
  .ev3-stage-body{padding-top:15px;padding-bottom:15px}
  .ev3-kv-grid{grid-template-columns:1fr}
  .ev3-kv{min-height:68px}
  .hub-tabs,.fbk-hub-tabs{margin-bottom:12px;padding:4px}
  .hub-tabs>button,.hub-tab,.fbk-hub-tab{min-height:36px;padding:8px 12px}
  .fbk-filter-card,.fbk-action-filter{grid-template-columns:1fr}
  .fbk-main-kpis{grid-template-columns:1fr 1fr}
  .fbk-main-recent-row{grid-template-columns:42px minmax(0,1fr)}
  .fbk-main-recent-row>em{grid-column:2}
  .fbk-modal,.modal{padding:0;align-items:end}
  .fbk-modal-box,.modal-box{width:100%;max-height:92dvh;border-radius:20px 20px 0 0}
}

@media(max-width:390px){
  .main{padding-left:10px;padding-right:10px}
  .ev3-actions{display:grid;grid-template-columns:1fr}
  .ev3-actions .btn{width:100%}
  .fbk-main-kpis{grid-template-columns:1fr}
}

.ev3-create-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:820px){.ev3-create-actions{justify-content:flex-start}}
@media(max-width:620px){.ev3-create-actions{display:grid;width:100%}.ev3-create-actions .btn{width:100%}}

/* Mobile data tables become readable cards instead of squeezed columns. */
@media(max-width:620px){
  .people-table-wrap,.loc-main-table-wrap{overflow:visible}
  .people-table,.people-table tbody,.loc-main-table,.loc-main-table tbody{display:block;width:100%;min-width:0}
  .people-table thead,.loc-main-table thead{display:none}
  .people-table tr,.loc-main-table tr{display:grid;width:100%;padding:12px 14px;border-top:1px solid #e7ede9;background:#fff}
  .people-table tr:first-child,.loc-main-table tr:first-child{border-top:0}
  .people-table td,.loc-main-table td{
    display:flex!important;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;
    padding:6px 0!important;border:0!important;text-align:right!important;white-space:normal;
  }
  .people-table td:first-child,.loc-main-table td:first-child{display:block!important;padding:2px 0 10px!important;text-align:left!important;border-bottom:1px solid #edf1ee!important}
  .people-table td b,.people-table td strong,.people-table td small,.loc-main-table td b,.loc-main-table td small{max-width:100%;overflow-wrap:anywhere}
  .people-table td:not(:first-child)::before,.loc-main-table td:not(:first-child)::before{color:#77837c;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:left}
  .people-table td:nth-child(2)::before{content:'Keikutsertaan'}
  .people-table td:nth-child(3)::before{content:'Kehadiran'}
  .people-table td:nth-child(4)::before{content:'Event terakhir'}
  .people-table td:nth-child(5){display:none!important}
  .loc-main-table td:nth-child(2)::before{content:'Alamat'}
  .loc-main-table td:nth-child(3)::before{content:'Kota'}
  .loc-main-table td:nth-child(4)::before{content:'Kategori'}
  .loc-main-table td:nth-child(5)::before{content:'Status'}
  .people-result-head,.loc-main-head{align-items:flex-start;gap:8px}
}