/* SaKaLaNs Workspace Design System v2.0
   Visual system only. No business logic, auth, Firestore, roles or Guardian policy changes. */

:root{
  --sak-ws-canvas:#f3f7fa;
  --sak-ws-panel:#ffffff;
  --sak-ws-panel-soft:#f8fbfd;
  --sak-ws-line:#dce7ee;
  --sak-ws-line-strong:#c9dbe6;
  --sak-ws-ink:#17364b;
  --sak-ws-muted:#6c8190;
  --sak-ws-brand:#148fc7;
  --sak-ws-brand-2:#4db8df;
  --sak-ws-success:#2d8b68;
  --sak-ws-warning:#a8751c;
  --sak-ws-danger:#b45b5b;
  --sak-ws-shadow:0 18px 48px rgba(30,72,98,.075);
  --sak-ws-shadow-soft:0 7px 22px rgba(30,72,98,.055);
  --sak-ws-r-xl:22px;
  --sak-ws-r-lg:16px;
  --sak-ws-r-md:12px;
  --sak-ws-r-sm:9px;
}

/* Canvas */
body:has(#appShell:not(.hidden)){
  background:
    radial-gradient(circle at 86% -10%,rgba(71,176,220,.12),transparent 28rem),
    linear-gradient(180deg,#f8fbfd 0%,var(--sak-ws-canvas) 100%)!important;
}

#appShell .content{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:24px 30px 44px!important;
}

/* Main page surface */
#appShell .page-card{
  position:relative;
  overflow:hidden;
  min-height:min(720px,calc(100vh - 142px));
  padding:28px!important;
  border:1px solid rgba(204,221,231,.95)!important;
  border-radius:var(--sak-ws-r-xl)!important;
  background:linear-gradient(180deg,#fff 0%,#fcfdfe 100%)!important;
  box-shadow:var(--sak-ws-shadow)!important;
}

#appShell .page-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--sak-ws-brand),var(--sak-ws-brand-2),transparent 72%);
  opacity:.86;
}

/* Headers */
#appShell .page-head{
  display:flex;
  align-items:flex-start!important;
  justify-content:space-between;
  gap:22px;
  margin:0 0 22px!important;
  padding:0 0 20px!important;
  border-bottom:1px solid #e8eff3;
}

#appShell .page-card>.eyebrow:first-child,
#appShell .page-head .eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:0 0 8px!important;
  padding:5px 9px;
  border:1px solid #d7ebf3;
  border-radius:999px;
  background:#f0f8fb;
  color:#2785aa!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.13em!important;
}

#appShell .page-card h2,
#appShell .page-head h2{
  margin:0 0 7px!important;
  color:var(--sak-ws-ink)!important;
  font-size:clamp(27px,2.1vw,36px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  font-weight:780!important;
}

#appShell .page-card>p:not(.eyebrow),
#appShell .page-head p:not(.eyebrow){
  max-width:800px;
  margin-top:0!important;
  color:var(--sak-ws-muted)!important;
  font-size:13.5px!important;
  line-height:1.62!important;
}

/* Panels and cards */
#appShell .portal-panel,
#appShell .workspace-section,
#appShell .integration-card,
#appShell .dash-card,
#appShell .time-overview-card,
#appShell .review-card,
#appShell .routing-panel,
#appShell .review-queue-wrap,
#appShell .routing-log-wrap,
#appShell .system,
#appShell .data-import-card,
#appShell [class*="travel-agency"] [class*="panel"],
#appShell [class*="travel-agency"] [class*="card"]{
  border:1px solid var(--sak-ws-line)!important;
  border-radius:var(--sak-ws-r-lg)!important;
  background:var(--sak-ws-panel)!important;
  box-shadow:var(--sak-ws-shadow-soft)!important;
}

#appShell .portal-panel,
#appShell .workspace-section,
#appShell .time-overview-card,
#appShell .routing-panel,
#appShell .review-queue-wrap,
#appShell .routing-log-wrap,
#appShell .data-import-card{
  padding:20px!important;
}

#appShell .portal-panel:hover,
#appShell .integration-card:hover,
#appShell .dash-card:hover,
#appShell .system:hover{
  border-color:var(--sak-ws-line-strong)!important;
  box-shadow:0 12px 30px rgba(30,72,98,.075)!important;
}

/* Form density and hierarchy */
#appShell label{
  color:#496676!important;
  font-size:11.5px!important;
  font-weight:760!important;
}

#appShell input:not([type="checkbox"]):not([type="radio"]),
#appShell select,
#appShell textarea{
  min-height:42px!important;
  border:1px solid #cbdbe5!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--sak-ws-ink)!important;
  box-shadow:inset 0 1px 2px rgba(23,54,75,.025)!important;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}

#appShell textarea{min-height:92px!important;resize:vertical}

#appShell input:not([type="checkbox"]):not([type="radio"]):focus,
#appShell select:focus,
#appShell textarea:focus{
  outline:none!important;
  border-color:#79c3df!important;
  box-shadow:0 0 0 3px rgba(31,151,199,.10)!important;
}

/* Fix oversized checkboxes from legacy global input rules */
#appShell input[type="checkbox"],
#appShell input[type="radio"]{
  min-height:0!important;
  width:17px!important;
  min-width:17px!important;
  height:17px!important;
  padding:0!important;
  margin:0 7px 0 0!important;
  box-shadow:none!important;
  vertical-align:middle;
  accent-color:var(--sak-ws-brand);
}

#appShell label:has(>input[type="checkbox"]),
#appShell label:has(>input[type="radio"]){
  display:inline-flex!important;
  align-items:center!important;
  gap:4px;
  min-height:30px;
  font-size:12px!important;
  font-weight:650!important;
  color:#526d7d!important;
}

/* Buttons */
#appShell button.primary,
#appShell .primary{
  min-height:40px!important;
  padding:9px 17px!important;
  border-radius:10px!important;
  border:1px solid #1389bd!important;
  background:linear-gradient(135deg,#168fc5,#31a8d7)!important;
  color:#fff!important;
  font-weight:760!important;
  box-shadow:0 7px 17px rgba(20,143,197,.16)!important;
}

#appShell button.primary:hover,
#appShell .primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(20,143,197,.20)!important;
}

#appShell button.secondary,
#appShell .secondary{
  min-height:38px!important;
  padding:8px 14px!important;
  border-radius:10px!important;
  border:1px solid #cddce5!important;
  background:#fff!important;
  color:#416071!important;
  font-weight:720!important;
}

/* Tabs */
#appShell .time-tabs,
#appShell .travel-agency-tabs,
#appShell [class*="tabs"]{
  gap:6px!important;
  padding:4px!important;
  border:1px solid #dce8ee!important;
  border-radius:12px!important;
  background:#f7fafc!important;
}

#appShell .time-tab,
#appShell [class*="tab"] button,
#appShell button[class*="tab"]{
  min-height:34px!important;
  padding:7px 12px!important;
  border-radius:9px!important;
  font-size:12px!important;
}

/* Guardian status */
#appShell .guardian-note,
#appShell .travel-guardian-note,
#appShell [class*="guardian"][class*="note"]{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:46px;
  padding:10px 14px!important;
  border:1px solid #d1e7dd!important;
  border-radius:12px!important;
  background:#f6fbf8!important;
  color:#49695c!important;
  box-shadow:none!important;
}

#appShell .guardian-note b,
#appShell .travel-guardian-note b{
  color:#2c7558!important;
}

/* Empty states should be compact and intentional */
#appShell .empty,
#appShell .empty-inline{
  position:relative;
  min-height:74px!important;
  padding:16px 18px 16px 46px!important;
  border:1px dashed #ccdce5!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#fbfdfe,#f5f9fb)!important;
  color:#708593!important;
  display:flex;
  align-items:center;
  line-height:1.5;
}

#appShell .empty::before,
#appShell .empty-inline::before{
  content:"•";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8f4f8;
  color:#4598b7;
  font-size:14px;
  font-weight:900;
}

/* Tables */
#appShell table{
  width:100%;
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden;
  border:1px solid var(--sak-ws-line)!important;
  border-radius:13px!important;
  background:#fff!important;
}
#appShell th{
  background:#f6f9fb!important;
  color:#587181!important;
  font-size:10.5px!important;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:800!important;
}
#appShell td,#appShell th{
  padding:11px 12px!important;
  border-bottom-color:#eaf0f3!important;
}
#appShell tr:last-child td{border-bottom:0!important}

/* Travel Agency: reduce the giant-form look */
#appShell #travelAgencyView .page-card,
#appShell #travelagency .page-card,
#appShell [class*="travel-agency-page"]{
  background:linear-gradient(180deg,#fff,#fbfdfe)!important;
}

#appShell [class*="travel-agency"] form{
  gap:11px!important;
}

#appShell [class*="travel-agency"] fieldset{
  border:1px solid #dce7ed!important;
  border-radius:13px!important;
  background:#fbfdfe!important;
  padding:13px 14px!important;
}

#appShell [class*="travel-agency"] legend{
  padding:0 6px!important;
  color:#587080!important;
  font-size:11px!important;
  font-weight:800!important;
}

#appShell [class*="travel-agency"] .empty,
#appShell [class*="travel-agency"] [class*="empty"]{
  min-height:96px!important;
}

/* Reports gets a more deliberate empty workspace */
#appShell #reports .page-card{
  max-width:none;
}
#appShell #reports .empty{
  max-width:760px;
  margin-top:22px;
}

/* Sidebar polish without changing structure */
#appShell .side-nav .nav-section-label{
  margin-top:15px!important;
  color:#8a9aa5!important;
  font-size:9.5px!important;
  letter-spacing:.14em!important;
  font-weight:850!important;
}
#appShell .side-nav button{
  min-height:39px!important;
  padding:9px 12px!important;
  border-radius:10px!important;
}
#appShell .side-nav button.active{
  box-shadow:inset 3px 0 0 var(--sak-ws-brand)!important;
}

/* Keep overall desktop workspaces compact */
#appShell .workspace{min-width:0}
#appShell footer{color:#82939e!important;opacity:.82}

@media(max-width:1000px){
  #appShell .content{padding:18px 16px 90px!important}
  #appShell .page-card{padding:21px!important;border-radius:18px!important;min-height:auto}
  #appShell .page-head{flex-direction:column;gap:10px}
  #appShell .page-card h2,#appShell .page-head h2{font-size:28px!important}
}

@media(max-width:640px){
  #appShell .content{padding-inline:12px!important}
  #appShell .page-card{padding:16px!important;border-radius:15px!important}
  #appShell .portal-panel,#appShell .workspace-section,#appShell .time-overview-card{padding:15px!important}
  #appShell td,#appShell th{padding:9px 10px!important}
}