/* ===================== sb Trip - Naver Map Style UI ===================== */

:root{

  --bg-deep:#f4f6fa;

  --bg-panel:#ffffff;

  --bg-panel-2:#f8f9fa;

  --border-soft:rgba(0,0,0,0.08);

  --border-soft-2:rgba(0,0,0,0.12);

  --text-main:#1e1e1e;

  --text-sub:#4c4c4c;

  --text-muted:#888888;

  --cyan:#03c75a;

  --purple:#009432;

  --amber:#ff9f43;

  --green:#03c75a;

  --red:#ff5f56;

  --white:#ffffff;

  --radius-lg:18px;

  --radius-md:12px;

  --radius-sm:8px;

  --shadow-card:0 6px 20px rgba(0,0,0,0.06);

  font-size:15px;

}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}

body{

  font-family:'Noto Sans KR','Outfit',sans-serif;

  background:var(--bg-deep);

  color:var(--text-main);

  overflow:hidden;

  -webkit-font-smoothing:antialiased;

}

button,input,select{font-family:inherit;}

img{max-width:100%;}

::-webkit-scrollbar{width:6px;height:6px;}

::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:10px;}

::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28);}



.app-container{

  display:flex;

  height:100vh;

  width:100vw;

  position:relative;

  overflow:hidden;

}



/* ===================== Glass utility ===================== */

.glass-card,.glass-panel{

  background:rgba(255,255,255,0.85);

  border:1px solid var(--border-soft);

  backdrop-filter:blur(16px);

  -webkit-backdrop-filter:blur(16px);

  border-radius:var(--radius-md);

  box-shadow:var(--shadow-card);

}

.text-cyan{color:var(--cyan)!important;}

.text-purple{color:var(--purple)!important;}

.text-amber{color:var(--amber)!important;}

.text-green{color:var(--green)!important;}

.text-white{color:var(--white)!important;}

.text-muted{color:var(--text-muted)!important;}

.font-bold{font-weight:700;}

.text-right{text-align:right;}

.text-center{text-align:center;}

.mt-10{margin-top:10px;}

.mt-15{margin-top:15px;}

.large-icon{width:46px;height:46px;stroke-width:1.4;opacity:0.5;}

.animate-pulse{animation:pulse 1.4s ease-in-out infinite;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}



/* ===================== 1. Sidebar narrow menu (Naver style) ===================== */

.sidebar-menu{

  width:72px;

  flex-shrink:0;

  background:#ffffff;

  border-right:1px solid var(--border-soft);

  display:flex;

  flex-direction:column;

  align-items:center;

  padding:18px 0;

  z-index:50;

  position:relative;

}

.brand-logo{

  display:flex;

  flex-direction:column;

  align-items:center;

  margin-bottom:26px;

  cursor:pointer;

}

.logo-img{

  width:48px;

  height:48px;

  object-fit:contain;

  border-radius:14px;

  transition:transform .2s ease, box-shadow .2s ease;

  filter:drop-shadow(0 2px 8px rgba(3,199,90,0.25));

}

.logo-img:hover{

  transform:scale(1.08);

  filter:drop-shadow(0 4px 14px rgba(3,199,90,0.45));

}



.sidebar-nav{display:flex;flex-direction:column;gap:10px;flex:1;}

.nav-btn{

  position:relative;

  width:46px;height:46px;

  border:none;border-radius:13px;

  background:transparent;

  color:var(--text-sub);

  display:flex;align-items:center;justify-content:center;

  cursor:pointer;

  transition:all .2s ease;

}

.nav-btn i{width:20px;height:20px;}

.nav-btn:hover{background:rgba(0,0,0,0.04);color:var(--text-main);}

.nav-btn.active{

  background:rgba(3,199,90,0.08);

  color:var(--cyan);

  box-shadow:inset 0 0 0 1px rgba(3,199,90,0.2);

}

.tooltip{

  position:absolute;left:62px;top:50%;transform:translateY(-50%);

  background:#ffffff;color:var(--text-main);

  padding:6px 10px;border-radius:7px;font-size:12.5px;white-space:nowrap;

  opacity:0;pointer-events:none;transition:opacity .15s ease, left .15s ease;

  box-shadow:0 4px 14px rgba(0,0,0,0.08);

  border:1px solid var(--border-soft-2);

  z-index:200;

}

.nav-btn:hover .tooltip{opacity:1;left:68px;}

.sidebar-footer{margin-top:auto;}

.avatar-container{cursor:pointer;}

.avatar{

  width:38px;height:38px;border-radius:50%;

  background:linear-gradient(135deg,var(--amber),#ff8a48);

  display:flex;align-items:center;justify-content:center;

  font-size:11px;font-weight:700;color:#ffffff;

  border:2px solid rgba(0,0,0,0.06);

}



/* ===================== 2. Sidebar drawer (search/content panel) ===================== */

.sidebar-drawer{

  width:420px;

  flex-shrink:0;

  background:var(--bg-panel);

  border-right:1px solid var(--border-soft);

  display:flex;

  flex-direction:column;

  position:relative;

  z-index:40;

  transition:margin-left .28s ease, width .28s ease;

}

.sidebar-drawer.collapsed{margin-left:-420px;}

.drawer-header{

  padding:20px 22px 14px;

  border-bottom:1px solid var(--border-soft);

}

.drawer-header-title h2{font-size:19px;font-weight:700;}

.drawer-header-title p{font-size:12.5px;color:var(--text-sub);margin-top:4px;}

.drawer-body{flex:1;overflow-y:auto;padding:18px;}

.tab-content{display:none;}

.tab-content.active{display:block;}



.drawer-toggle{

  position:absolute;

  top:50%;right:-15px;

  transform:translateY(-50%);

  width:26px;height:54px;

  background:var(--bg-panel-2);

  border:1px solid var(--border-soft-2);

  border-radius:0 8px 8px 0;

  color:var(--text-sub);

  display:flex;align-items:center;justify-content:center;

  cursor:pointer;z-index:501;

  box-shadow:3px 0 12px rgba(0,0,0,0.05);

}

.drawer-toggle i{width:15px;height:15px;transition:transform .25s ease;}

.drawer-toggle:hover{color:var(--cyan);}

.sidebar-drawer.collapsed .drawer-toggle i{transform:rotate(180deg);}



/* ===================== Cards / panels ===================== */

.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.card{padding:15px;}

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

.card-title{font-size:12px;color:var(--text-sub);font-weight:500;}

.card-header i{width:16px;height:16px;}

.stat-main{font-size:21px;font-weight:700;}

.stat-main .unit{font-size:11px;font-weight:400;color:var(--text-sub);margin-left:3px;}

.card-desc{font-size:11.5px;color:var(--text-muted);margin-top:6px;line-height:1.4;}

.purple-glow{box-shadow:0 0 0 1px rgba(0,148,50,0.12), var(--shadow-card);}

.amber-glow{box-shadow:0 0 0 1px rgba(255,159,67,0.12), var(--shadow-card);}

.cyan-glow{box-shadow:0 0 0 1px rgba(3,199,90,0.12), var(--shadow-card);}

.green-glow{box-shadow:0 0 0 1px rgba(3,199,90,0.12), var(--shadow-card);}



.panel{padding:18px;margin-bottom:14px;}

.panel h3{font-size:14.5px;font-weight:700;margin-bottom:2px;}

.panel-subtitle{font-size:12px;color:var(--text-sub);margin-bottom:12px;}

.chart-container{height:190px;position:relative;}



.data-sync-grid{display:flex;flex-direction:column;gap:8px;}

.sync-item{

  display:flex;align-items:center;gap:10px;

  padding:9px 10px;border-radius:10px;

  background:rgba(0,0,0,0.02);

  border:1px solid var(--border-soft);

}

.sync-icon{

  width:32px;height:32px;border-radius:9px;flex-shrink:0;

  background:rgba(3,199,90,0.08);

  display:flex;align-items:center;justify-content:center;

  color:var(--cyan);

}

.sync-icon i{width:16px;height:16px;}

.sync-info h4{font-size:12.5px;font-weight:600;}

.sync-info p{font-size:11px;color:var(--text-muted);margin-top:1px;}

.sync-status{

  margin-left:auto;font-size:10.5px;font-weight:700;color:var(--green);

  background:rgba(3,199,90,0.12);padding:3px 8px;border-radius:20px;

  flex-shrink:0;

}



/* ===================== Forms / Naver-style search ===================== */

.flex-column-gap{display:flex;flex-direction:column;}

.form-container{display:flex;flex-direction:column;gap:14px;}

.form-group label,.form-label-highlight{

  display:flex;align-items:center;gap:6px;

  font-size:12.5px;font-weight:600;color:var(--text-sub);margin-bottom:7px;

}

.form-label-highlight i{width:14px;height:14px;}

.form-control{

  width:100%;

  background:var(--bg-panel-2);

  border:1.5px solid var(--border-soft-2);

  border-radius:10px;

  color:var(--text-main);

  padding:11px 12px;

  font-size:13.5px;

  outline:none;

  transition:border-color .15s ease;

}

.form-control:focus{border-color:var(--cyan);}

select.form-control,select#car-type,input#fuel-efficiency{

  background:var(--bg-panel-2);border:1.5px solid var(--border-soft-2);border-radius:10px;

  color:var(--text-main);padding:11px 12px;font-size:13.5px;width:100%;

}



.search-group-wrapper{position:relative;}

.search-input-container{position:relative;display:flex;align-items:center;}

.search-icon{position:absolute;left:12px;width:15px;height:15px;color:var(--text-muted);}

.search-input-container .form-control{padding-left:34px;padding-right:32px;}

.btn-clear-search{

  position:absolute;right:8px;background:rgba(0,0,0,0.06);

  border:none;color:var(--text-sub);width:20px;height:20px;border-radius:50%;

  cursor:pointer;font-size:13px;line-height:1;

}

.search-suggestions-panel{

  position:absolute;top:calc(100% + 6px);left:0;right:0;

  background:#ffffff;border:1px solid var(--border-soft-2);

  border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,0.08);

  max-height:260px;overflow-y:auto;z-index:300;

}

.suggestion-item{

  display:flex;align-items:flex-start;gap:10px;

  padding:10px 12px;cursor:pointer;

  border-bottom:1px solid rgba(0,0,0,0.04);

}

.suggestion-item:last-child{border-bottom:none;}

.suggestion-item:hover{background:rgba(3,199,90,0.06);}

.suggestion-item i{width:15px;height:15px;color:var(--cyan);margin-top:2px;flex-shrink:0;}

.suggestion-main{font-size:13px;font-weight:600;color:var(--text-main);}

.suggestion-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}

.suggestion-empty,.suggestion-loading{padding:14px;text-align:center;font-size:12px;color:var(--text-muted);}



.search-swap-container{display:flex;justify-content:center;margin:-4px 0;}

.btn-swap-dir{

  width:30px;height:30px;border-radius:50%;

  background:var(--bg-panel-2);border:1px solid var(--border-soft-2);

  color:var(--text-sub);cursor:pointer;

  display:flex;align-items:center;justify-content:center;

  transition:transform .2s ease;

}

.btn-swap-dir:hover{transform:rotate(180deg);color:var(--cyan);}

.btn-swap-dir i{width:14px;height:14px;}



.btn{

  border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:13.5px;

  display:inline-flex;align-items:center;justify-content:center;gap:7px;

  padding:11px 16px;transition:transform .12s ease, opacity .15s ease;

}

.btn i{width:15px;height:15px;}

.btn:active{transform:scale(0.97);}

.btn:disabled{opacity:0.4;cursor:not-allowed;}

.btn-full{width:100%;}

.btn-primary{background:var(--cyan);color:#ffffff;}

.btn-amber{background:var(--amber);color:#ffffff;}

.btn-secondary{background:#ffffff;color:var(--text-main);border:1px solid var(--border-soft-2);}

.btn-sm{padding:7px 11px;font-size:12px;}

.glowing-btn{box-shadow:0 6px 22px rgba(3,199,90,0.15);}



.comparison-summary{padding:14px;border-radius:12px;background:rgba(0,0,0,0.02);border:1px solid var(--border-soft);}

.comparison-summary h4{font-size:13px;margin-bottom:10px;}

.comp-item{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-sub);padding:4px 0;}

.comp-highlight{

  display:flex;justify-content:space-between;align-items:center;

  margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-soft-2);

  font-size:13px;font-weight:700;

}



/* ===================== Store list / category tabs ===================== */

.panel-header-compact{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}

.panel-header-compact h3{font-size:14.5px;font-weight:700;}

.badge{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:20px;}

.badge-amber{background:rgba(255,182,72,0.15);color:var(--amber);}

.badge-primary{background:rgba(3,199,90,0.12);color:var(--cyan);}



.store-filter-bar{margin-bottom:10px;}

.category-tabs{display:flex;gap:6px;flex-wrap:wrap;}

.cat-btn{

  background:#ffffff;border:1px solid var(--border-soft-2);

  color:var(--text-sub);font-size:11.5px;font-weight:600;

  padding:6px 11px;border-radius:20px;cursor:pointer;transition:.15s ease;

}

.cat-btn:hover{color:var(--text-main);background:#f1f2f6;}

.cat-btn.active{background:var(--cyan);color:#ffffff;border-color:var(--cyan);}



.store-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding-right:2px;}

.store-card{

  display:flex;gap:10px;align-items:flex-start;

  padding:11px;border-radius:11px;

  background:#ffffff;border:1px solid var(--border-soft);

  cursor:pointer;transition:.15s ease;

}

.store-card:hover{background:rgba(3,199,90,0.04);border-color:rgba(3,199,90,0.25);}

.store-card .s-icon{

  width:34px;height:34px;border-radius:9px;flex-shrink:0;

  display:flex;align-items:center;justify-content:center;

  background:rgba(255,182,72,0.12);color:var(--amber);

}

.store-card .s-icon i{width:16px;height:16px;}

.store-card .s-info{flex:1;min-width:0;}

.store-card .s-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;}

.store-card .s-addr{font-size:11px;color:var(--text-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.store-card .s-meta{font-size:11px;color:var(--cyan);margin-top:4px;font-weight:600;}

.store-card .s-dist{font-size:10.5px;color:var(--text-muted);flex-shrink:0;}

.detail-empty-state{

  text-align:center;color:var(--text-muted);font-size:12.5px;

  display:flex;flex-direction:column;align-items:center;gap:10px;

  padding:30px 10px;

}



.detail-back-header{margin-bottom:10px;}

.btn-back{

  background:none;border:none;color:var(--text-sub);font-size:12.5px;

  display:flex;align-items:center;cursor:pointer;font-weight:600;

}

.btn-back i{width:15px;height:15px;}

.btn-back:hover{color:var(--cyan);}



.detail-hero h4{font-size:17px;font-weight:700;margin:6px 0 4px;}

.detail-addr{font-size:12px;color:var(--text-sub);display:flex;align-items:center;gap:5px;}

.detail-addr i{width:13px;height:13px;}

.detail-stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:14px 0;}

.d-stat{background:rgba(0,0,0,0.02);border:1px solid var(--border-soft);border-radius:10px;padding:9px;text-align:center;}

.d-label{display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px;}

.d-val{font-size:12px;font-weight:700;}



.detail-menu-selector h5{font-size:12.5px;margin-bottom:8px;color:var(--text-sub);}

.menu-price-list{display:flex;flex-direction:column;gap:6px;}

.menu-item-row{

  display:flex;justify-content:space-between;align-items:center;

  padding:9px 11px;border-radius:9px;background:#ffffff;

  border:1px solid var(--border-soft);font-size:12.5px;cursor:pointer;

}

.menu-item-row.selected{border-color:var(--amber);background:rgba(255,182,72,0.1);}

.menu-item-row input{accent-color:var(--amber);}

.menu-total{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;font-weight:700;padding-top:8px;border-top:1px dashed var(--border-soft-2);}



.receipts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.receipt-mini-card{

  background:#ffffff;border:1px solid var(--border-soft);

  border-radius:10px;padding:9px;cursor:pointer;position:relative;

}

.receipt-mini-card img{width:100%;height:60px;object-fit:cover;border-radius:6px;margin-bottom:6px;}

.receipt-mini-card .r-name{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:16px;}

.receipt-mini-card .r-amt{font-size:11px;color:var(--cyan);}

.receipt-mini-card .r-del{

  position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.4);border:none;

  color:var(--white);width:18px;height:18px;border-radius:50%;font-size:12px;

  line-height:1;cursor:pointer;

}

.receipt-mini-card .r-del:hover{color:var(--red);}



.receipt-dropzone{

  border:1.5px dashed var(--border-soft-2);border-radius:12px;

  padding:24px 14px;text-align:center;cursor:pointer;transition:.15s ease;

}

.receipt-dropzone:hover{border-color:var(--cyan);background:rgba(3,199,90,0.04);}

.receipt-dropzone .main-text{font-size:12.5px;font-weight:600;margin-top:8px;}

.receipt-dropzone .sub-text{font-size:11px;color:var(--text-muted);margin-top:4px;}



.receipt-selector-group label{font-size:12px;color:var(--text-sub);font-weight:600;display:block;margin-bottom:8px;}

.receipt-selector-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}

.link-btn{background:none;border:none;color:var(--cyan);font-size:11.5px;font-weight:700;cursor:pointer;padding:0;}

.link-btn:hover{text-decoration:underline;}

.dim-sep{color:var(--border-soft-2);font-size:11px;}

.selector-total-badge{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--green);background:rgba(3,199,90,0.12);padding:4px 9px;border-radius:20px;}

.receipt-selector-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;padding-right:2px;}

.receipt-select-row{

  display:flex;align-items:center;gap:9px;

  padding:8px 10px;border-radius:9px;background:#ffffff;

  border:1px solid var(--border-soft);font-size:12px;

}

.receipt-select-row input{accent-color:var(--cyan);flex-shrink:0;}

.receipt-select-row .rs-label{flex:1;min-width:0;display:flex;flex-direction:column;}

.receipt-select-row .rs-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.receipt-select-row .rs-meta{font-size:10.5px;color:var(--text-muted);}

.receipt-select-row .rs-amt{color:var(--cyan);font-weight:700;flex-shrink:0;}

.receipt-del-btn{

  background:none;border:none;color:var(--text-muted);font-size:15px;cursor:pointer;

  flex-shrink:0;line-height:1;padding:2px 4px;

}

.receipt-del-btn:hover{color:var(--red);}



.console-wrapper{border-radius:12px;overflow:hidden;border:1px solid var(--border-soft);background:#fafafa;}

.console-header{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef1f5;border-bottom:1px solid var(--border-soft);}

.dot{width:9px;height:9px;border-radius:50%;}

.dot.red{background:#ff5f56;}.dot.yellow{background:#ffbd2e;}.dot.green{background:#27c93f;}

.console-title{margin-left:8px;font-size:11.5px;color:var(--text-muted);font-family:monospace;}

.console-body{padding:12px;height:160px;overflow-y:auto;font-family:'Consolas',monospace;font-size:11.5px;line-height:1.7;}

.system-log{color:#666666;}

.log-success{color:var(--green);}

.log-info{color:var(--cyan);}

.log-warn{color:var(--amber);}



/* ===================== 3. Map viewport ===================== */

.map-viewport{flex:1;position:relative;background:#f4f6fa;overflow:hidden;}

.canvas-map-wrapper{position:absolute;inset:0;}

#routeMap{width:100%;height:100%;background:#f4f6fa;}

.leaflet-container{background:#f4f6fa;font-family:inherit;}

.map-tips{

  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);

  background:rgba(255,255,255,0.95);border:1px solid var(--border-soft-2);

  padding:9px 18px;border-radius:30px;font-size:12.5px;color:var(--text-main);

  z-index:400;backdrop-filter:blur(10px);white-space:nowrap;

  box-shadow:0 4px 16px rgba(0,0,0,0.08);

}



.map-header-widget{

  position:absolute;top:18px;left:18px;right:18px;

  display:flex;align-items:center;justify-content:space-between;

  padding:13px 20px;z-index:400;

}

.logo-container{display:flex;align-items:center;gap:10px;}

.separator{color:var(--border-soft-2);}

.system-title{font-size:12.5px;color:var(--text-sub);font-weight:500;}

.header-stats{display:flex;gap:22px;}

.quick-stat{text-align:right;}

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

.stat-value{font-size:15px;font-weight:700;}



.map-controls{

  position:absolute;top:84px;right:18px;z-index:400;

  display:flex;flex-direction:column;gap:10px;align-items:flex-end;

}

.control-group{

  display:flex;flex-direction:column;

  background:rgba(255,255,255,0.95);border:1px solid var(--border-soft-2);

  border-radius:12px;overflow:hidden;backdrop-filter:blur(12px);

  box-shadow:var(--shadow-card);

}

.layer-group{flex-direction:row;}

.control-btn{

  background:none;border:none;color:var(--text-sub);

  padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;

  align-items:center;gap:3px;font-size:10px;font-weight:600;

  border-right:1px solid var(--border-soft);

  transition:.15s ease;

}

.zoom-group .control-btn{border-right:none;border-bottom:1px solid var(--border-soft);padding:10px;}

.zoom-group .control-btn:last-child{border-bottom:none;}

.layer-group .control-btn:last-child{border-right:none;}

.control-btn i{width:16px;height:16px;}

.control-btn:hover{color:var(--text-main);background:rgba(0,0,0,0.03);}

.control-btn.active{color:var(--cyan);background:rgba(3,199,90,0.08);}



.map-legend-floating{

  display:flex;flex-direction:column;gap:6px;padding:10px 12px;

  font-size:11px;color:var(--text-sub);

}

.legend-item{display:flex;align-items:center;gap:7px;}

.legend-item i{width:14px;height:4px;border-radius:3px;display:inline-block;}

.legend-item.std i{background:#7d8aa8;}

.legend-item.sbt i{background:var(--cyan);}

.legend-item.gas i{background:var(--amber);border-radius:50%;width:9px;height:9px;}



.map-popup-card{

  position:absolute;top:84px;left:18px;width:260px;z-index:410;

  padding:0;overflow:hidden;

}

.popup-header{padding:13px 14px 9px;position:relative;}

.popup-close{

  position:absolute;top:8px;right:10px;background:none;border:none;

  color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1;

}

.popup-header h4{font-size:14.5px;font-weight:700;margin-top:6px;}

.popup-body{padding:0 14px 12px;}

.popup-addr{font-size:11.5px;color:var(--text-sub);display:flex;align-items:flex-start;gap:5px;}

.popup-addr i{width:13px;height:13px;margin-top:1px;flex-shrink:0;}

.popup-menu{font-size:12px;color:var(--amber);font-weight:600;margin-top:6px;}

.popup-footer{padding:0 14px 14px;}



.route-details-hud-wrapper{

  position:absolute;bottom:26px;left:18px;z-index:400;max-width:560px;

}

.hud-toggle-btn{

  background:#ffffff;border:1px solid var(--border-soft-2);

  color:var(--text-main);font-size:12px;font-weight:600;

  padding:10px 16px;border-radius:30px;cursor:pointer;

  display:flex;align-items:center;gap:8px;backdrop-filter:blur(12px);

  box-shadow:var(--shadow-card);

}

.hud-toggle-btn i{width:14px;height:14px;}

#hud-arrow{transition:transform .2s ease;}

.hud-toggle-btn.open #hud-arrow{transform:rotate(180deg);}

.route-details-table{margin-top:8px;padding:16px;width:560px;max-width:90vw;}

.route-details-table h4{font-size:13px;margin-bottom:10px;}

.premium-table{width:100%;border-collapse:collapse;font-size:11.5px;}

.premium-table th,.premium-table td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--border-soft);}

.premium-table th{color:var(--text-muted);font-weight:600;font-size:10.5px;}

.premium-table .highlight-row td{font-weight:700;background:rgba(3,199,90,0.06);}



/* ===================== Floating right report drawer ===================== */

.report-panel-container{

  position:absolute;top:0;right:-420px;bottom:0;width:420px;

  background:var(--bg-panel);border-left:1px solid var(--border-soft);

  z-index:500;transition:right .3s ease;display:flex;flex-direction:column;

  box-shadow:-4px 0 16px rgba(0,0,0,0.08);

}

.report-panel-container.open{right:0;}

.report-drawer-header{

  display:flex;justify-content:space-between;align-items:center;

  padding:18px 20px;border-bottom:1px solid var(--border-soft);

}

.report-drawer-header h3{font-size:15px;font-weight:700;}

.report-drawer-actions{display:flex;align-items:center;gap:10px;}

.btn-close-report{background:none;border:none;color:var(--text-sub);font-size:22px;cursor:pointer;line-height:1;}

.report-body-scroller{flex:1;overflow-y:auto;padding:20px;}

.report-empty{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text-muted);text-align:center;padding:60px 20px;font-size:13px;}



/* Printable document */

.print-document{background:#fff;color:#1a1a1a;border-radius:8px;padding:28px;font-size:12.5px;}

.doc-header{text-align:center;margin-bottom:16px;border-bottom:2px solid #1a1a1a;padding-bottom:12px;}

.doc-header h2{font-size:19px;letter-spacing:6px;}

.doc-serial{font-size:10.5px;color:#777;margin-top:6px;letter-spacing:0;}

.doc-info-table,.doc-details-table{width:100%;border-collapse:collapse;margin-bottom:14px;}

.doc-info-table th,.doc-info-table td,.doc-details-table th,.doc-details-table td{

  border:1px solid #ddd;padding:7px 9px;font-size:11.5px;

}

.doc-info-table th{background:#f5f5f5;width:80px;text-align:left;color:#444;}

.doc-details-table th{background:#f5f5f5;color:#444;}

.doc-section-title{font-size:12.5px;font-weight:700;margin:14px 0 6px;color:#222;}

.subtotal-row td{font-weight:700;background:#fafafa;}

.doc-summary-box{background:#f7f9fc;border:1px solid #e4e8f0;border-radius:8px;padding:12px 14px;margin-bottom:12px;}

.summary-item{display:flex;justify-content:space-between;padding:5px 0;font-size:12px;}

.summary-item.highlight{font-weight:700;border-top:1px dashed #ccc;margin-top:4px;padding-top:8px;}

.doc-ai-evaluation{background:#eefcf6;border:1px solid #cdeee0;border-radius:8px;padding:12px 14px;font-size:11.5px;line-height:1.6;margin-bottom:14px;}

.doc-ai-evaluation h5{font-size:12px;margin-bottom:6px;}

.doc-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;}

.signature-line p{font-size:11.5px;margin-bottom:10px;}

.signature,.signature-date{font-size:11.5px;margin-top:4px;}

.stamp{

  width:64px;height:64px;border-radius:50%;border:2px solid var(--red);color:var(--red);

  display:flex;flex-direction:column;align-items:center;justify-content:center;

  font-size:9px;font-weight:700;transform:rotate(-12deg);opacity:0.85;

}



/* ===================== Modals ===================== */

.modal-overlay{

  position:fixed;inset:0;background:rgba(0,0,0,0.4);

  display:flex;align-items:center;justify-content:center;z-index:1000;

  backdrop-filter:blur(4px);

}

.modal-content{width:420px;max-width:92vw;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;}

.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-soft);}

.modal-header h3{font-size:14px;}

.modal-close-btn{background:none;border:none;color:var(--text-sub);font-size:22px;cursor:pointer;line-height:1;}

.modal-body{padding:20px;overflow-y:auto;}

.receipt-scan-container{position:relative;border-radius:10px;overflow:hidden;margin-bottom:16px;}

.receipt-scan-preview{width:100%;display:block;border-radius:10px;}

.scan-laser-line{

  position:absolute;left:0;right:0;height:3px;

  background:linear-gradient(90deg,transparent,var(--green),transparent);

  box-shadow:0 0 12px var(--green);

  animation:scanline 1.6s linear infinite;

}

@keyframes scanline{0%{top:0;}100%{top:100%;}}

.scan-status-console{

  background:#f8f9fa;border-radius:8px;border:1px solid var(--border-soft);padding:12px;text-align:left;

  font-family:monospace;font-size:11.5px;max-height:140px;overflow-y:auto;color:#1e1e1e;

}

.lightbox-large-image{max-width:100%;max-height:70vh;border-radius:8px;}



/* ===================== Toasts ===================== */

.toast-container{position:fixed;bottom:26px;right:26px;z-index:2000;display:flex;flex-direction:column;gap:10px;}

.toast{

  background:rgba(255,255,255,0.98);border:1px solid var(--border-soft-2);

  border-left:4px solid var(--cyan);border-radius:10px;padding:12px 16px;

  font-size:12.5px;min-width:240px;box-shadow:var(--shadow-card);

  animation:toastIn .25s ease;color:var(--text-main);

}

.toast.success{border-left-color:var(--green);}

.toast.warn{border-left-color:var(--amber);}

.toast.error{border-left-color:var(--red);}

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



/* ===================== Leaflet marker custom ===================== */

.sb-marker{

  width:30px;height:30px;border-radius:50% 50% 50% 0;

  transform:rotate(-45deg);

  display:flex;align-items:center;justify-content:center;

  border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,0.45);

}

.sb-marker i{transform:rotate(45deg);width:14px;height:14px;color:#fff;}

.sb-marker.dep{background:var(--purple);}

.sb-marker.dest{background:var(--cyan);}

.sb-marker.food{background:var(--amber);}

.sb-marker.market{background:#ff7d7d;}

.sb-marker.hotel{background:#7d9bff;}

.sb-marker.cafe{background:#b388ff;}

.sb-marker.gas{background:#ff9f43;}

.sb-marker.gas.cheapest{

  background:#03c75a !important;

  box-shadow:0 0 0 4px rgba(3,199,90,0.35), 0 4px 12px rgba(0,0,0,0.15);

  animation:marker-pulse 1.6s infinite;

}

@keyframes marker-pulse{

  0%{box-shadow:0 0 0 0px rgba(3,199,90,0.5);}

  100%{box-shadow:0 0 0 10px rgba(3,199,90,0);}

}



.leaflet-popup-content-wrapper{

  background:#ffffff;color:var(--text-main);border-radius:10px;

}

.leaflet-popup-tip{background:#ffffff;}

.leaflet-popup-content{font-size:12.5px;}

.leaflet-control-attribution{background:rgba(255,255,255,0.7)!important;color:var(--text-muted)!important;font-size:9px!important;}

.leaflet-control-attribution a{color:var(--text-sub)!important;}



/* ===================== Responsive ===================== */

@media (max-width:1100px){

  .sidebar-drawer{width:360px;}

  .sidebar-drawer.collapsed{margin-left:-360px;}

  .report-panel-container{width:360px;right:-360px;}

}



@keyframes bounce-arrow {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(3px); }

}



/* ===================== Demo Scenario Bar ===================== */

.demo-btn {

  background: #f4f6fa;

  border: 1px solid rgba(3,199,90,0.2);

  border-radius: 7px;

  padding: 5px 10px;

  font-size: 10.5px;

  font-weight: 600;

  color: var(--text-main);

  cursor: pointer;

  white-space: nowrap;

  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;

}

.demo-btn:hover {

  background: rgba(3,199,90,0.08);

  border-color: var(--cyan);

  color: var(--cyan);

  transform: translateY(-1px);

  box-shadow: 0 3px 10px rgba(3,199,90,0.2);

}

#btn-auto-demo {

  animation: demo-pulse 2.5s ease-in-out infinite;

}

@keyframes demo-pulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(3,199,90,0.4); }

  50% { box-shadow: 0 0 0 6px rgba(3,199,90,0); }

}

#btn-auto-demo:disabled {

  opacity: 0.6;

  animation: none;

}



/* Scenario step guide */

.scenario-step {

  transition: background .2s ease;

  padding: 3px 4px;

  border-radius: 4px;

}

.scenario-step:hover {

  background: rgba(3,199,90,0.08);

}

.scenario-step.active {

  background: rgba(3,199,90,0.1);

  font-weight: 600;

}



/* Dashboard Active tab styling: hides map and widens drawer */

.dashboard-active .map-viewport {

  display: none !important;

}

.dashboard-active .sidebar-drawer {

  width: 100% !important;

  max-width: none !important;

  flex: 1 !important;

  border-right: none !important;

}

.dashboard-active .drawer-toggle {

  display: none !important;

}



/* ===================== Responsive Mobile & Tablet <= 768px ===================== */

@media (max-width: 768px) {

  .app-container {

    flex-direction: column-reverse;

  }

  

  /* 1. Sidebar menu -> Bottom Navigation */

  .sidebar-menu {

    width: 100%;

    height: 60px;

    flex-direction: row;

    justify-content: space-around;

    padding: 0 10px;

    border-right: none;

    border-top: 1px solid var(--border-soft);

    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);

    z-index: 600;

  }

  

  .brand-logo {

    display: none; /* Hide logo in bottom navigation to save space */

  }

  

  .sidebar-nav {

    flex-direction: row;

    width: auto;

    justify-content: space-around;

    gap: 0;

    align-items: center;

    flex: 1;

  }

  

  .nav-btn {

    width: 50px;

    height: 50px;

    border-radius: var(--radius-sm);

  }

  

  .sidebar-footer {

    margin-top: 0;

    display: flex;

    align-items: center;

  }

  

  .avatar {

    width: 32px;

    height: 32px;

    font-size: 9px;

  }

  

  /* Disable tooltips on mobile/tablet touch screens */

  .tooltip {

    display: none !important;

  }

  

  /* 2. Slide-out Drawer overlaying the map */

  .sidebar-drawer {

    width: calc(100% - 50px);

    max-width: 420px;

    position: absolute;

    top: 0;

    left: 0;

    height: calc(100% - 60px);

    z-index: 500;

    box-shadow: 4px 0 18px rgba(0,0,0,0.12);

    transition: transform .28s ease, margin-left .28s ease;

  }

  

  .sidebar-drawer.collapsed {

    margin-left: 0;

    transform: translateX(-100%);

  }

  

  /* Reposition drawer toggle handle to be floating on the edge */

  .drawer-toggle {

    right: -24px;

    width: 24px;

    height: 48px;

    border-radius: 0 6px 6px 0;

    z-index: 501;

  }

  

  /* 3. Map Viewport overlays */

  .map-header-widget {

    top: 12px;

    left: 12px;

    right: 12px;

    padding: 8px 12px;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

    border-radius: var(--radius-md);

  }

  

  .map-header-widget .logo-container {

    justify-content: space-between;

    margin-bottom: 2px;

  }

  

  .map-header-widget .separator {

    display: none;

  }

  

  .header-stats {

    justify-content: space-between;

    gap: 8px;

  }

  

  .quick-stat {

    text-align: left;

  }

  

  .map-controls {

    top: 110px;

    right: 12px;

  }

  

  .map-tips {

    display: none !important; /* Hide map tips on mobile to clear screen clutter */

  }

  

  .route-details-hud-wrapper {

    left: 12px;

    right: 12px;

    bottom: 74px; /* Float above the bottom navigation bar */

    max-width: none;

  }

  

  .route-details-table {

    width: 100%;

    max-width: none;

    overflow-x: auto;

    padding: 12px;

    border-radius: var(--radius-md);

  }

  

  /* 4. Report Panel overlaying the map */

  .report-panel-container {

    width: calc(100% - 50px);

    max-width: 420px;

    position: absolute;

    top: 0;

    right: 0;

    height: calc(100% - 60px);

    z-index: 550;

    transform: translateX(100%);

    transition: transform .3s ease;

  }

  

  .report-panel-container.open {

    right: 0;

    transform: translateX(0);

  }

  

  /* Details and card grid modifications */

  .card-grid {

    grid-template-columns: 1fr;

  }

  

  .receipts-grid {

    grid-template-columns: 1fr;

  }

  

  /* Demo Scenario Bar responsiveness */

  #demo-scenario-bar {

    width: calc(100% - 24px) !important;

    bottom: 8px !important;

    flex-wrap: wrap;

    justify-content: center;

    padding: 6px 10px !important;

    gap: 4px !important;

  }

}



/* ===================== Print Styles (Only print the report document) ===================== */

@media print {

  /* Common reset layout constraints of body, html, and parent wrappers to print properly */

  body, html {

    background: #ffffff !important;

    color: #000000 !important;

    font-family: 'Noto Sans KR', sans-serif !important;

    width: 100% !important;

    height: auto !important;

    overflow: visible !important;

  }



  .print-document {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    box-shadow: none !important;

    padding: 0 !important;

    margin: 0 !important;

    background: #ffffff !important;

  }



  .doc-info-table th, .doc-info-table td,

  .doc-details-table th, .doc-details-table td {

    border: 1px solid #1a1a1a !important;

    color: #000000 !important;

    background: none !important;

  }



  .doc-summary-box {

    border: 2px solid #1a1a1a !important;

    background: #f9f9f9 !important;

  }



  /* 1. When printing the settle report */

  body.printing-report-doc .app-container {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    background: #ffffff !important;

    overflow: visible !important;

  }



  body.printing-report-doc .sidebar-menu,

  body.printing-report-doc .sidebar-drawer,

  body.printing-report-doc .canvas-map-wrapper,

  body.printing-report-doc .map-viewport,

  body.printing-report-doc .map-header-widget,

  body.printing-report-doc .map-legend-floating,

  body.printing-report-doc #demo-scenario-bar,

  body.printing-report-doc .map-popup-card,

  body.printing-report-doc .route-details-hud-wrapper,

  body.printing-report-doc .report-drawer-header,

  body.printing-report-doc #report-empty-state,

  body.printing-report-doc .modal-overlay,

  body.printing-report-doc .toast-container,

  body.printing-report-doc #map-tips,

  body.printing-report-doc .map-controls-floating {

    display: none !important;

  }



  body.printing-report-doc .report-panel-container {

    display: block !important;

    position: static !important;

    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    box-shadow: none !important;

    border: none !important;

    background: #ffffff !important;

    overflow: visible !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: none !important;

    right: auto !important;

    left: auto !important;

    top: auto !important;

    bottom: auto !important;

  }



  body.printing-report-doc .report-body-scroller {

    display: block !important;

    overflow: visible !important;

    height: auto !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  /* 2. When printing the travel plan document */

  body.printing-plan-doc .sidebar-menu,

  body.printing-plan-doc .canvas-map-wrapper,

  body.printing-plan-doc .map-viewport,

  body.printing-plan-doc .map-header-widget,

  body.printing-plan-doc .map-legend-floating,

  body.printing-plan-doc #demo-scenario-bar,

  body.printing-plan-doc .map-popup-card,

  body.printing-plan-doc .route-details-hud-wrapper,

  body.printing-plan-doc .report-panel-container,

  body.printing-plan-doc .modal-overlay,

  body.printing-plan-doc .toast-container,

  body.printing-plan-doc #map-tips,

  body.printing-plan-doc .map-controls-floating,

  body.printing-plan-doc .drawer-toggle,

  body.printing-plan-doc .drawer-header,

  body.printing-plan-doc .panel-header-compact,

  body.printing-plan-doc .panel-subtitle,

  body.printing-plan-doc #plan-empty-state {

    display: none !important;

  }



  body.printing-plan-doc .app-container {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    background: #ffffff !important;

    overflow: visible !important;

  }



  body.printing-plan-doc .sidebar-drawer {

    display: block !important;

    position: static !important;

    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    background: #ffffff !important;

    overflow: visible !important;

    border: none !important;

    padding: 0 !important;

    margin: 0 !important;

    flex: none !important;

  }



  body.printing-plan-doc .sidebar-drawer .panel {

    border: none !important;

    background: none !important;

    box-shadow: none !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  body.printing-plan-doc .report-body-scroller {

    display: block !important;

    overflow: visible !important;

    height: auto !important;

    padding: 0 !important;

    margin: 0 !important;

  }

}



/* ===================== 공무원 여비 규정 스타일 ===================== */

.gov-badge {

  display: inline-block;

  padding: 3px 8px;

  font-size: 11px;

  font-weight: 700;

  border-radius: 4px;

  text-align: center;

  white-space: nowrap;

}



.gov-badge.badge-green {

  background-color: rgba(3, 199, 90, 0.1);

  color: #03c75a;

  border: 1px solid rgba(3, 199, 90, 0.2);

}



.gov-badge.badge-red {

  background-color: rgba(255, 95, 86, 0.1);

  color: #ff5f56;

  border: 1px solid rgba(255, 95, 86, 0.2);

}



.gov-badge.badge-amber {

  background-color: rgba(255, 159, 67, 0.1);

  color: #ff9f43;

  border: 1px solid rgba(255, 159, 67, 0.2);

}



/* ===================== Live Ticker & Dots Animations ===================== */

@keyframes ticker-scroll {

  0% { transform: translate3d(0, 0, 0); }

  100% { transform: translate3d(-50%, 0, 0); }

}



@keyframes pulse-red {

  0%, 100% { background-color: var(--red); opacity: 1; }

  50% { background-color: #ff7d75; opacity: 0.85; }

}



@keyframes pulse-dot-green {

  0%, 100% { transform: scale(1); opacity: 1; }

  50% { transform: scale(1.3); opacity: 0.6; }

}



.live-dot-green {

  display: inline-block;

  width: 6px;

  height: 6px;

  background-color: #03c75a;

  border-radius: 50%;

  box-shadow: 0 0 6px rgba(3, 199, 90, 0.8);

  animation: pulse-dot-green 1.8s infinite ease-in-out;

}



/* ===================== Interactive Q&A Styles ===================== */

.qa-search-box {

  display: flex;

  gap: 8px;

  margin-bottom: 15px;

}

.qa-search-input {

  flex: 1;

  background: var(--bg-panel);

  border: 1px solid var(--border-soft-2);

  color: var(--text-main);

  padding: 10px 14px;

  border-radius: var(--radius-sm);

  font-size: 12px;

  outline: none;

  transition: all 0.2s;

}

.qa-search-input:focus {

  border-color: var(--cyan);

  box-shadow: 0 0 0 2px rgba(3, 199, 90, 0.15);

}

.qa-ai-assistant {

  border: 1px solid rgba(255, 159, 67, 0.3);

  background: linear-gradient(135deg, rgba(255, 159, 67, 0.05), rgba(255, 159, 67, 0.02));

  border-radius: var(--radius-md);

  padding: 16px;

  margin-bottom: 20px;

}

.qa-ai-title {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13.5px;

  font-weight: 700;

  color: var(--amber);

  margin-bottom: 12px;

}

.qa-preset-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 12px;

}

.qa-preset-tag {

  background: rgba(255, 255, 255, 0.6);

  border: 1px solid var(--border-soft);

  color: var(--text-sub);

  padding: 4px 8px;

  border-radius: 20px;

  font-size: 10px;

  cursor: pointer;

  transition: all 0.2s;

}

.qa-preset-tag:hover {

  background: var(--amber);

  color: var(--white);

  border-color: var(--amber);

}

.qa-input-wrapper {

  display: flex;

  gap: 8px;

  margin-bottom: 12px;

}

.qa-textarea {

  flex: 1;

  background: var(--white);

  border: 1px solid var(--border-soft-2);

  color: var(--text-main);

  padding: 10px;

  border-radius: var(--radius-sm);

  font-size: 11px;

  resize: none;

  height: 48px;

  outline: none;

}

.qa-textarea:focus {

  border-color: var(--amber);

}

.btn-qa-generate {

  background: linear-gradient(135deg, var(--amber), #ff8a12);

  color: var(--white);

  border: none;

  padding: 0 16px;

  border-radius: var(--radius-sm);

  font-size: 11px;

  font-weight: 600;

  cursor: pointer;

  transition: opacity 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}

.btn-qa-generate:hover {

  opacity: 0.9;

}

.btn-qa-generate:disabled {

  background: var(--text-muted);

  cursor: not-allowed;

}

.qa-response-box {

  background: rgba(255, 255, 255, 0.9);

  border: 1px dashed var(--border-soft-2);

  border-radius: var(--radius-sm);

  padding: 12px;

  margin-bottom: 10px;

  font-size: 11px;

  line-height: 1.6;

  color: var(--text-sub);

  min-height: 50px;

  position: relative;

}

.qa-response-actions {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 8px;

}

.btn-qa-action {

  background: none;

  border: 1px solid var(--border-soft-2);

  color: var(--text-sub);

  padding: 4px 8px;

  border-radius: var(--radius-sm);

  font-size: 10px;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 4px;

  transition: all 0.2s;

}

.btn-qa-action:hover {

  background: var(--bg-deep);

  border-color: var(--text-sub);

}

.qa-badge {

  display: inline-block;

  padding: 2px 6px;

  font-size: 9px;

  font-weight: 700;

  border-radius: 4px;

  margin-left: 6px;

  vertical-align: middle;

}

.qa-badge-ai {

  background: rgba(255, 159, 67, 0.15);

  color: #d35400;

  border: 1px solid rgba(255, 159, 67, 0.3);

}

.qa-card-added {

  animation: slide-down 0.4s ease-out;

}

@keyframes slide-down {

  from { opacity: 0; transform: translateY(-10px); }

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

}



/* ===================== Login & History Loader Styles ===================== */

.login-status-area {

  display: flex;

  align-items: center;

  gap: 12px;

}

.btn-login-trigger {

  background: var(--cyan);

  color: var(--white);

  border: none;

  padding: 6px 14px;

  border-radius: var(--radius-sm);

  font-size: 11.5px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 6px;

  transition: opacity 0.2s;

}

.btn-login-trigger:hover {

  opacity: 0.9;

}

.user-profile-badge {

  background: rgba(3, 199, 90, 0.1);

  border: 1px solid rgba(3, 199, 90, 0.2);

  padding: 4px 10px;

  border-radius: 20px;

  font-size: 11px;

  font-weight: 600;

  color: var(--purple);

  display: flex;

  align-items: center;

  gap: 6px;

}

.user-profile-badge.private-user {

  background: rgba(255, 159, 67, 0.1);

  border: 1px solid rgba(255, 159, 67, 0.2);

  color: #d35400;

}

.btn-logout {

  background: none;

  border: 1px solid var(--border-soft-2);

  color: var(--text-sub);

  padding: 4px 10px;

  border-radius: var(--radius-sm);

  font-size: 10.5px;

  cursor: pointer;

  transition: all 0.2s;

}

.btn-logout:hover {

  background: var(--bg-deep);

  color: var(--text-main);

  border-color: var(--text-sub);

}



.login-options-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 15px;

}

.login-option-card {

  border: 1px solid var(--border-soft-2);

  background: rgba(255, 255, 255, 0.5);

  border-radius: var(--radius-md);

  padding: 20px;

  text-align: center;

  cursor: pointer;

  transition: all 0.2s ease;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}

.login-option-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-card);

  border-color: var(--cyan);

}

.login-option-card i {

  width: 32px;

  height: 32px;

}

.login-option-card.public-opt i {

  color: var(--cyan);

}

.login-option-card.private-opt i {

  color: var(--amber);

}

.login-option-card h4 {

  font-size: 13px;

  font-weight: 700;

  color: var(--text-main);

}

.login-option-card p {

  font-size: 10.5px;

  color: var(--text-muted);

  line-height: 1.4;

}



.btn-history-loader {

  width: 100%;

  background: rgba(255, 255, 255, 0.8);

  border: 1px dashed var(--border-soft-2);

  color: var(--text-sub);

  padding: 8px 12px;

  border-radius: var(--radius-sm);

  font-size: 11.5px;

  font-weight: 600;

  cursor: pointer;

  margin-bottom: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  transition: all 0.2s;

}

.btn-history-loader:hover {

  background: var(--white);

  border-color: var(--cyan);

  color: var(--cyan);

}

.btn-history-loader.disabled {

  background: #f1f2f6;

  border-color: var(--border-soft);

  color: var(--text-muted);

  cursor: not-allowed;

}



.history-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.history-list-item {

  border: 1px solid var(--border-soft);

  background: rgba(255, 255, 255, 0.6);

  border-radius: var(--radius-sm);

  padding: 10px 14px;

  cursor: pointer;

  transition: all 0.2s;

}

.history-list-item:hover {

  background: var(--white);

  border-color: var(--cyan);

}

.history-item-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 4px;

}

.history-item-title {

  font-size: 12px;

  font-weight: 700;

  color: var(--text-main);

}

.history-item-date {

  font-size: 10px;

  color: var(--text-muted);

}

.history-item-route {

  font-size: 11px;

  color: var(--text-sub);

  display: flex;

  align-items: center;

  gap: 4px;

}

.history-item-badge {

  display: inline-block;

  padding: 2px 6px;

  font-size: 9px;

  font-weight: 700;

  border-radius: 4px;

  background: rgba(3, 199, 90, 0.1);

  color: var(--purple);

}

.history-item-badge.private-badge {

  background: rgba(255, 159, 67, 0.1);

  color: #d35400;

}



/* ===================== GPKI & ERP Login Advanced Styles ===================== */

.cert-window {

  background: #f8f9fa;

  border: 1px solid #c8d6e5;

  border-radius: var(--radius-sm);

  padding: 12px;

  margin-top: 10px;

}

.cert-list-table {

  width: 100%;

  border-collapse: collapse;

  background: #fff;

  border: 1px solid #dcdde1;

  font-size: 11px;

}

.cert-list-table th {

  background: #f1f2f6;

  border: 1px solid #dcdde1;

  padding: 6px;

  font-weight: 700;

  color: var(--text-main);

  text-align: center;

}

.cert-list-table td {

  border: 1px solid #dcdde1;

  padding: 8px 6px;

  color: var(--text-sub);

  text-align: center;

  cursor: pointer;

}

.cert-list-table tr.selected td {

  background: rgba(3, 199, 90, 0.08) !important;

  color: var(--purple) !important;

  font-weight: 700;

  border-color: rgba(3, 199, 90, 0.3);

}

.cert-list-table tr:hover td {

  background: #f5f6fa;

}

.cert-icon-cell {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

}

.cert-icon-cell i {

  color: #2e86de;

  width: 12px;

  height: 12px;

}



.login-step-panel {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.auth-loading-overlay {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 30px 10px;

}

.auth-spinner {

  width: 32px;

  height: 32px;

  border: 3px solid rgba(3, 199, 90, 0.1);

  border-top-color: var(--purple);

  border-radius: 50%;

  animation: auth-spin 0.8s linear infinite;

}

@keyframes auth-spin {

  to { transform: rotate(360deg); }

}



.progress-bar-container {

  width: 80%;

  height: 4px;

  background: rgba(0,0,0,0.05);

  border-radius: 2px;

  overflow: hidden;

}

.progress-bar-fill {

  height: 100%;

  width: 0%;

  background: var(--purple);

  transition: width 1.2s linear;

}



.form-select-auth {

  width: 100%;

  padding: 8px 10px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--border-soft);

  background: #fff;

  color: var(--text-main);

  font-size: 11.5px;

  margin-bottom: 10px;

  font-weight: 600;

}











/* ── Saved org/company tag chips ──────────────────────── */

.saved-org-tag {

  transition: all 0.15s ease;

}

.saved-org-tag:hover {

  background: #dbeafe !important;

  border-color: #2e86de !important;

  transform: translateY(-1px);

}