/* /softa_acc/tourism/assets/css/tourism_dashboard.css */
:root{
  --sidebar:#173d6d;
  --sidebar2:#1d4b81;
  --main-bg:#eef3f9;
  --card:#ffffff;
  --border:#dde6f1;
  --text:#13233f;
  --muted:#6c7a90;
  --primary:#2f6fe4;
  --primary-dark:#235fd0;
  --green:#18a957;
  --blue:#2f6fe4;
  --orange:#f5b126;
  --purple:#7c3aed;
  --cyan:#23b8df;
  --red:#ff5d5d;
  --shadow:0 8px 18px rgba(15,23,42,.05);
  --font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;width:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--main-bg);
  overflow:hidden;
}

.app-shell{width:100vw;height:100vh}
.app{
  width:100%;
  height:100%;
  display:flex;
  overflow:hidden;
  transition:all .28s ease;
}

/* sidebar */
.sidebar{
  width:242px;
  min-width:242px;
  height:100vh;
  padding:14px 12px 12px;
  background:linear-gradient(180deg,var(--sidebar2),var(--sidebar));
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  transition:width .28s ease,min-width .28s ease,padding .28s ease,transform .28s ease;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

.brand{display:flex;align-items:flex-start;gap:10px;padding:0 2px}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:#2f6fe4;color:#fff;font-weight:900;font-size:22px;
  flex:0 0 36px;
}
.brand-stack{min-width:0}
.brand-name{font-size:24px;font-weight:900;line-height:1;white-space:nowrap}
.brand-sub{font-size:13px;font-weight:700;color:#7fd2ff;margin-top:4px;white-space:nowrap}

.profile{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.profile-avatar{
  width:38px;height:38px;border-radius:12px;
  background:
    radial-gradient(circle at 50% 34%, #ffd8b3 0 24%, transparent 25%),
    radial-gradient(circle at 50% 72%, #0f172a 0 34%, transparent 35%),
    rgba(255,255,255,.16);
  flex:0 0 38px;
}
.profile-meta{min-width:0}
.profile-name{font-size:13px;font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-email{font-size:11px;opacity:.88;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.profile-actions a{color:#fff;text-decoration:none;font-size:11px;font-weight:800;opacity:.95;white-space:nowrap}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-section-title{
  margin:8px 10px 1px;
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.72);
}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  color:#fff;text-decoration:none;font-weight:800;font-size:14px;
  min-height:42px;
}
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.active{
  background:#2f6fe4;
  border:1px solid rgba(255,255,255,.10);
}
.nav-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px}
.nav-ico svg{width:18px;height:18px;fill:#fff}
.nav-label{white-space:nowrap}

.side-actions{display:flex;gap:8px;margin-top:2px}
.btn{
  border:0;border-radius:12px;
  padding:10px 12px;
  font-weight:900;font-size:14px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;
}
.btn-soft{flex:1;background:#2f6fe4;color:#fff}
.btn-upgrade{flex:1;background:#14a44d;color:#fff}
.btn-primary{
  background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  color:#fff;padding:11px 16px;border-radius:14px;
  box-shadow:0 10px 18px rgba(47,111,228,.16);
}
.btn-text{white-space:nowrap}

.side-card{
  position:relative;
  margin-top:2px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.side-card-title{font-size:14px;font-weight:900;margin-bottom:8px}
.side-card-stat{font-size:13px;font-weight:800;color:#fff}
.side-card-sub{font-size:13px;font-weight:800;color:#fff;margin-top:4px}
.side-card-arrow{
  position:absolute;right:14px;bottom:10px;
  font-size:20px;font-weight:900;color:#fff;opacity:.9;
}

/* collapsed sidebar */
.app.sidebar-collapsed .sidebar{
  width:76px;
  min-width:76px;
  padding:14px 8px 12px;
}
.app.sidebar-collapsed .brand{
  justify-content:center;
  padding:0;
}
.app.sidebar-collapsed .brand-stack,
.app.sidebar-collapsed .profile-meta,
.app.sidebar-collapsed .nav-section-title,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .btn-text,
.app.sidebar-collapsed .side-card{
  display:none !important;
}
.app.sidebar-collapsed .profile{
  justify-content:center;
  padding:8px;
}
.app.sidebar-collapsed .nav-item{
  justify-content:center;
  padding:10px 0;
}
.app.sidebar-collapsed .side-actions{
  flex-direction:column;
  gap:8px;
}
.app.sidebar-collapsed .btn{
  width:100%;
  padding:10px 0;
}
.app.sidebar-collapsed .btn-upgrade{
  display:none;
}

/* main */
.main{
  flex:1;
  height:100vh;
  padding:12px 14px 12px;
  background:
    radial-gradient(900px 500px at 14% 12%, rgba(81,148,241,.10), transparent 60%),
    linear-gradient(180deg, #eef3f9 0%, #f6f9fd 100%);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

/* topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex:0 0 auto;
}
.top-filters{display:flex;gap:10px;flex-wrap:nowrap}
.filter{
  min-width:160px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px 12px;
  box-shadow:var(--shadow);
}
.filter-label{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:3px}
.filter-select{
  width:100%;
  border:0;background:transparent;outline:none;
  color:var(--text);font-size:14px;font-weight:900;
}

.top-actions{display:flex;align-items:center;gap:10px}
.sidebar-toggle,
.gear-link{
  width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--text);font-size:16px;box-shadow:var(--shadow);
}
.sidebar-toggle{cursor:pointer}
.date-pill{
  min-width:195px;height:40px;padding:0 12px;
  border-radius:12px;background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow);font-weight:900;font-size:14px;
}

.newwrap{position:relative}
.newmenu{
  position:absolute;top:calc(100% + 8px);right:0;width:240px;display:none;
  padding:8px;border-radius:14px;background:rgba(255,255,255,.98);
  border:1px solid var(--border);box-shadow:0 24px 44px rgba(0,0,0,.15);z-index:999;
}
.newmenu.show{display:block}
.newmenu a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:13px;
}
.newmenu a:hover{background:#f1f5fb}
.newtag{
  font-size:10px;font-weight:900;color:#5f6d82;background:#eef2f7;
  padding:3px 7px;border-radius:999px;
}

/* warnings */
.warn{
  padding:8px 12px;border-radius:12px;
  background:rgba(250,204,21,.15);
  border:1px solid rgba(250,204,21,.28);
  color:#7c5a00;font-weight:800;font-size:13px;
}
.oktoast{
  position:fixed;top:14px;right:14px;z-index:9999;
  padding:8px 12px;border-radius:12px;
  background:rgba(22,163,74,.15);
  border:1px solid rgba(22,163,74,.24);
  color:#166534;font-weight:900;font-size:13px;
}

/* metrics */
.metrics{
  display:grid;
  grid-template-columns:1.45fr 1.45fr 1.45fr 1.45fr .95fr .95fr;
  gap:10px;
  flex:0 0 auto;
}
.metric{
  min-height:82px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:10px 10px;
  display:flex;gap:10px;align-items:flex-start;
}
.metric-icon{
  width:34px;height:34px;border-radius:50%;
  flex:0 0 34px;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;
}
.metric-icon.green{background:var(--green)}
.metric-icon.blue{background:var(--blue)}
.metric-icon.orange{background:var(--orange)}
.metric-icon.purple{background:var(--purple)}

.metric-body{flex:1;min-width:0}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.metric-title{
  font-size:10px;font-weight:900;text-transform:uppercase;color:#31435f;line-height:1.15;
}
.metric-info{
  width:15px;height:15px;border-radius:50%;
  background:#f0f2f7;color:#6b7280;font-size:10px;
  display:grid;place-items:center;font-weight:900;
}
.metric-value{
  font-size:12px;line-height:1.1;font-weight:950;color:#172554;margin-top:5px;
}
.metric-foot{
  margin-top:5px;font-size:10px;font-weight:800;color:#718096;line-height:1.15;
}
.metric-foot .up{color:#16a34a}
.metric-foot .down{color:#ef4444}

.metric-mini{
  display:flex;flex-direction:column;justify-content:space-between;
}
.metric-mini .metric-value{font-size:13px;margin-top:5px}
.metric-mini-note{
  margin-top:6px;font-size:10px;color:#6b7280;font-weight:700;line-height:1.15;
}
.metric-mini-note .up{color:#16a34a}

/* cards */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
}
.card-head{
  padding:10px 12px 6px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.card-title{font-size:14px;font-weight:950;color:#18284a}
.card-sub{margin-top:3px;font-size:11px;color:var(--muted)}
.card-tools{display:flex;align-items:center;gap:6px}
.tool-pill,.tool-badge{
  padding:6px 10px;border-radius:12px;background:#f7f8fb;border:1px solid var(--border);
  font-size:12px;font-weight:800;color:#334155;
}
.tool-badge{min-width:34px;text-align:center}
.icon-btn{
  width:30px;height:30px;border-radius:10px;border:1px solid var(--border);
  background:#fff;cursor:pointer;
}
.viewall{color:#2f6fe4;text-decoration:none;font-weight:900;font-size:12px}

/* top section */
.grid-top{
  display:grid;
  grid-template-columns:2fr 1.2fr 1.65fr;
  gap:10px;
  align-items:stretch;
  flex:0 0 auto;
}
.chart-card .chart-wrap{
  padding:0 10px 8px;
  height:175px;
}
.chart-card .chart-wrap canvas{
  width:100% !important;height:100% !important;
}

/* booking overview */
.overview-stack{
  padding:6px 10px 10px;
  display:flex;flex-direction:column;gap:8px;
}
.overview-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:14px;background:#f8fafc;border:1px solid #edf2f7;
}
.overview-left{display:flex;align-items:center;gap:10px}
.overview-icon{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px;
}
.overview-icon.green{background:#16a34a}
.overview-icon.amber{background:#f5b126}
.overview-title{font-size:13px;font-weight:900;color:#20304d}
.overview-sub{font-size:11px;color:#6b7280;font-weight:700;margin-top:2px}
.overview-right{text-align:right}
.overview-main{font-size:16px;font-weight:950;color:#172554}
.overview-subgrid{
  display:grid;grid-template-columns:auto auto;gap:4px 10px;
  margin-top:3px;font-size:11px;color:#6b7280;font-weight:700;
}
.overview-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px;
  font-size:13px;font-weight:900;color:#2f6fe4;
}

/* donut + legend */
.donut-legend-wrap{
  padding:2px 10px 10px;
  display:grid;
  grid-template-columns:145px 1fr;
  gap:8px;
  align-items:center;
}
.donut-box{
  position:relative;
  height:140px;
  display:grid;place-items:center;
}
.donut-box canvas{
  width:128px !important;height:128px !important;
}
.donut-center{
  position:absolute;text-align:center;
}
.donut-big{font-size:14px;font-weight:950;color:#172554}
.donut-small{margin-top:2px;color:#6b7280;font-size:11px;font-weight:700}

.expense-legend{display:flex;flex-direction:column;gap:7px}
.legend-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;font-weight:700;color:#46566f;
}
.legend-left{display:flex;align-items:center;gap:8px}
.legend-right{display:flex;align-items:center;gap:10px}
.legend-right strong{color:#5a6b85}
.legend-dot{
  width:9px;height:9px;border-radius:50%;display:inline-block;
}
.legend-blue{background:#2f6fe4}
.legend-yellow{background:#f5b126}
.legend-green{background:#18a957}
.legend-gray{background:#7c8aa5}
.legend-cyan{background:#23b8df}

/* mid section */
.grid-mid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:10px;
  flex:0 0 auto;
}
.table{padding:0 10px 8px}
.tr{
  display:grid;gap:10px;align-items:center;
  padding:7px 10px;border-radius:12px;
}
.tr.th{
  background:transparent !important;border:0 !important;margin-bottom:0 !important;
  padding-top:1px;padding-bottom:5px;
  font-size:11px;font-weight:900;color:#64748b;
}
.tr:not(.th){
  background:#f8fafc;border:1px solid #edf2f7;margin-bottom:5px;font-size:12px;
}
.empty-row{display:grid !important}
.bookings-table .tr{grid-template-columns:90px 1.1fr 1fr 95px 95px}
.departures-table .tr{grid-template-columns:1.3fr 90px 74px 84px}
.pending-table .tr{grid-template-columns:1fr 1.1fr 90px 90px}
.trip-performance-table .tr{grid-template-columns:1.35fr 95px 70px 110px 105px 105px 70px}

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

.tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;
}
.tag.ok{background:rgba(22,163,74,.15);color:#15803d}
.tag.paid{background:rgba(37,99,235,.15);color:#1d4ed8}
.tag.due{background:rgba(245,165,36,.18);color:#a16207}

.seat-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;padding:4px 8px;border-radius:999px;
  background:rgba(22,163,74,.12);color:#166534;font-size:11px;font-weight:900;
}
.pending-amount{color:#ef4444;font-weight:900}

/* bottom */
.grid-bottom{
  flex:1 1 auto;
  min-height:0;
}
.trip-performance-card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.trip-performance-card .table{
  flex:1 1 auto;
  min-height:0;
  padding-bottom:8px;
}
.trip-performance-table{
  overflow:auto;
}
.trip-performance-table .tr:not(.th){
  margin-bottom:4px;
}
.profit-green{color:#16a34a;font-weight:950}
.margin-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;padding:4px 8px;border-radius:10px;
  background:rgba(22,163,74,.14);color:#15803d;font-size:11px;font-weight:900;
}

/* rotator */
.rotating-show{
  animation:fadeRotateIn .8s ease;
}
@keyframes fadeRotateIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:1450px){
  .metrics{grid-template-columns:repeat(3,1fr)}
  .grid-top{grid-template-columns:1fr}
  .grid-mid{grid-template-columns:1fr}
  .donut-legend-wrap{grid-template-columns:1fr}
}
@media (max-width:1200px){
  body{overflow:auto}
  .sidebar{
    width:242px !important;
    min-width:242px !important;
    padding:14px 12px 12px !important;
  }
  .app.sidebar-collapsed .sidebar{
    width:242px !important;
    min-width:242px !important;
    padding:14px 12px 12px !important;
  }
  .app.sidebar-collapsed .brand-stack,
  .app.sidebar-collapsed .profile-meta,
  .app.sidebar-collapsed .nav-section-title,
  .app.sidebar-collapsed .nav-label,
  .app.sidebar-collapsed .btn-text,
  .app.sidebar-collapsed .side-card{
    display:initial !important;
  }
  .app.sidebar-collapsed .nav-item{
    justify-content:flex-start !important;
    padding:10px 12px !important;
  }
  .sidebar{display:none}
  .main{height:auto;overflow:auto}
  .topbar{flex-direction:column;align-items:stretch}
  .top-actions{justify-content:space-between}
  .trip-performance-table .tr,
  .bookings-table .tr,
  .departures-table .tr,
  .pending-table .tr{
    grid-template-columns:1fr;
  }
}