:root{
  --sidebar-bg:#0b234a;
  --sidebar-bg-deep:#0a1f44;
  --sidebar-text:#c8d4e8;
  --sidebar-heading:#7f97bb;
  --sidebar-active-bg:#fff;
  --sidebar-active-text:#0a1f44;
  --sidebar-active-accent:#d2a91e;
  --primary-blue:#3563e9;
  --primary-blue-hover:#2f57d5;
  --primary-blue-soft:#edf3ff;
  --page-bg:#f6f8fc;
  --card-bg:#fff;
  --card-soft-bg:#f8fafd;
  --text-primary:#0b2248;
  --text-secondary:#667894;
  --text-muted:#8a9ab3;
  --border-default:#e2e8f1;
  --border-soft:#edf1f6;
  --success:#17b26a;
  --success-soft:#eaf9f1;
  --warning:#c99712;
  --warning-soft:#fff7dd;
  --danger:#d64545;
  --danger-soft:#fdeeee;
  --purple:#7c4dff;
  --purple-soft:#f1ecff;
  --theme-shadow:0 8px 24px rgba(15,35,70,.05);
  --theme-shadow-hover:0 14px 32px rgba(15,35,70,.09);
  --theme-radius:18px;
  --theme-control-height:46px;
  --navy:var(--sidebar-bg-deep);
  --blue:var(--primary-blue);
  --bg:var(--page-bg);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --line:var(--border-default);
}

html{background:var(--page-bg)}
body{
  color:var(--text-primary);
  background:var(--page-bg);
  font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body,button,input,select,textarea{font-family:inherit}

aside{
  background:var(--sidebar-bg);
  padding:28px 24px 20px;
  box-shadow:none;
  border-right:1px solid rgba(255,255,255,.06);
  font-family:Calibri,"Segoe UI",Arial,sans-serif!important;
}
aside *{font-family:Calibri,"Segoe UI",Arial,sans-serif!important}
#workspaceName{font-size:22px;font-weight:700;letter-spacing:-.25px;color:#fff}
aside>.muted{color:#91a7ca;font-size:13px;font-weight:400}
aside nav{scrollbar-color:#48618a transparent}
.nav-label{color:var(--sidebar-heading);font-size:10px;letter-spacing:1.45px}
.nav{
  min-height:48px;
  padding:11px 14px;
  color:var(--sidebar-text);
  border-radius:13px;
  font-size:15px;
  font-weight:550;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.nav:hover{background:rgba(255,255,255,.075);color:#fff;transform:none}
.nav.active{
  position:relative;
  color:var(--sidebar-active-text);
  background:var(--sidebar-active-bg);
  box-shadow:0 8px 24px rgba(4,18,44,.18);
}
.nav.active:before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--sidebar-active-accent);
}
#nav .nav-icon,.external-nav-head>span{
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:#a8bbd9;
  font-size:0;
}
#nav .nav.active .nav-icon{color:var(--sidebar-active-text)}
.theme-icon{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.external-nav-head{border-radius:13px;color:var(--sidebar-text)}
.external-nav-head:hover{background:rgba(255,255,255,.075)}
aside .profile{border-color:rgba(255,255,255,.12);padding-top:18px}
.profile-avatar{background:#4c6ee6;border-radius:12px}
.profile-copy strong{font-size:14px}.profile-copy small{color:#96a9c8}

main>header{
  min-height:88px;
  padding:18px 32px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border-default);
  box-shadow:none;
  gap:24px;
}
main>header h1{font-size:32px;line-height:1.12;font-weight:750;letter-spacing:-.8px;color:var(--text-primary)}
main>header p{margin-top:5px;color:var(--text-secondary);font-size:14px}
main>header>div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
main>header select{min-width:220px;width:auto;height:52px}

#app{padding:28px 32px 40px;background:var(--page-bg)}
h1,h2,h3,h4{color:var(--text-primary)}
h2{font-size:22px;letter-spacing:-.3px}
h3{font-size:18px;letter-spacing:-.15px}
.muted,small{color:var(--text-secondary)}

button,.button{
  min-height:44px;
  padding:10px 16px;
  border-radius:12px;
  background:var(--primary-blue);
  color:#fff;
  font-weight:650;
  box-shadow:0 5px 14px rgba(53,99,233,.16);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
button:hover,.button:hover{background:var(--primary-blue-hover);transform:translateY(-1px);box-shadow:0 8px 18px rgba(53,99,233,.22)}
button:active,.button:active{transform:translateY(0)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(53,99,233,.22);outline-offset:2px}
.secondary{
  background:#fff;
  color:var(--text-primary);
  border:1px solid var(--border-default);
  box-shadow:none;
}
.secondary:hover{background:var(--card-soft-bg);color:var(--primary-blue);box-shadow:none}
.danger{background:var(--danger-soft);color:var(--danger);box-shadow:none}
.danger:hover{background:#fbdfe0;color:#bd3333;box-shadow:none}

input,select,textarea{
  min-height:var(--theme-control-height);
  padding:11px 13px;
  color:var(--text-primary);
  background:#fff;
  border:1px solid var(--border-default);
  border-radius:11px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input:hover,select:hover,textarea:hover{border-color:#cbd6e6}
input:focus,select:focus,textarea:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(53,99,233,.1)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
.field label{color:#536781;font-size:12px;font-weight:650;margin-bottom:7px}

.card,.stat,.row,.role-card,.tenant-card,.status-card{
  background:var(--card-bg);
  border:1px solid var(--border-default);
  border-radius:var(--theme-radius);
  box-shadow:var(--theme-shadow);
}
.card{padding:22px;margin-top:20px}
.stat{padding:20px}
.stat strong{font-size:28px;letter-spacing:-.5px}
.row{padding:16px}
.card:hover,.stat:hover{border-color:#d8e1ee}

.table,.table-wrap,.table-container{border-radius:15px;overflow:auto}
.bookings-filter-grid,.report-filter-grid,.finance-filter-grid,.issuance-filter-grid{min-width:0;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}
.bookings-filter-grid>*,
.report-filter-grid>*,
.finance-filter-grid>*,
.issuance-filter-grid>*{min-width:0;max-width:100%}
.dashboard-notifications{max-width:min(380px,calc(100vw - 24px))}
table{background:#fff}
th{
  padding:13px 14px;
  background:#f7f9fc;
  color:#63758f;
  font-size:11px;
  font-weight:750;
  letter-spacing:.35px;
}
td{padding:14px;border-color:var(--border-soft)}
tbody tr{transition:background .14s ease}
tbody tr:hover{background:#f8faff}

.badge,[class*="status-badge"],[class*="status-pill"]{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1.1;
  border:1px solid transparent;
}
.Accepted,.Approved,.Issued,.Confirmed,.Completed{background:var(--success-soft)!important;color:#087a49!important}
.Waiting,.Pending,.Awaiting{background:var(--warning-soft)!important;color:#8c6500!important}
.Rejected,.Cancelled{background:var(--danger-soft)!important;color:#b63838!important}
.Draft{background:#eef2f6!important;color:#607089!important}

.section{border-color:var(--border-default);margin:24px 0 14px}
.steps{gap:8px}.step{min-height:44px;background:#eaf0f8;color:#63758f;border-radius:11px;box-shadow:none}.step.active{background:var(--primary-blue);color:#fff}
.approval{border:1px solid #f2dfac;border-radius:13px}
#toast{
  z-index:100000;
  right:24px;
  bottom:24px;
  max-width:min(440px,calc(100vw - 32px));
  color:#fff;
  background:var(--sidebar-bg-deep);
  border-radius:13px;
  box-shadow:0 18px 50px rgba(10,31,68,.28);
}

.theme-kpi-icon{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:14px;
  color:var(--primary-blue);
  background:var(--primary-blue-soft);
}
.theme-kpi-icon .theme-icon{width:25px;height:25px}
.theme-kpi-icon.success{color:#0d9b5b;background:var(--success-soft)}
.theme-kpi-icon.warning{color:#a67800;background:var(--warning-soft)}
.theme-kpi-icon.purple{color:var(--purple);background:var(--purple-soft)}

/* Issuance uses the requested simple office typography without changing its structure. */
.issuance-builder,
.issuance-toolbar,
.issuance-stats,
.issuance-list,
.issuance-card,
.issuance-card *,
.full-quoted-details,
.full-quoted-details *,
.issuance-detail,
.issuance-detail *,
.issuance-queue,
.issuance-queue *{
  font-family:Calibri,"Segoe UI",Arial,sans-serif!important;
}

/* Compact customer-account rows while preserving every field and action. */
.compact-accounts>.account-line{
  min-height:68px;
  padding:10px 6px!important;
  gap:12px;
}
.compact-accounts>.account-line>div{
  grid-template-columns:minmax(72px,.42fr) minmax(110px,.62fr) minmax(180px,1fr) auto!important;
  gap:14px!important;
}
.compact-accounts>.account-line .finance-payment-badge{
  width:max-content;
  min-width:84px;
  margin:0!important;
  justify-content:center;
  align-self:center;
}
.compact-accounts>.account-line>[data-account-view]{
  min-height:38px;
  padding:7px 14px;
}

.presence-panel{border-color:var(--border-default);box-shadow:none}
.presence-head h3{font-size:18px}.presence-toggle{background:var(--primary-blue)}

@media(min-width:851px){
  body{grid-template-columns:300px minmax(0,1fr)}
  body.presence-active{grid-template-columns:300px minmax(0,1fr) 285px}
  body.presence-active.presence-collapsed{grid-template-columns:300px minmax(0,1fr) 68px}
}
@media(max-width:1100px){
  main>header{align-items:flex-start}
  main>header>div:last-child{max-width:65%}
}
@media(max-width:1450px) and (min-width:851px){
  body.presence-active,body.presence-active.presence-collapsed,
  body.dashboard-workspace-shell.presence-active,
  body.dashboard-workspace-shell.presence-active.presence-collapsed{grid-template-columns:300px minmax(0,1fr)!important}
  .presence-panel{display:none!important}
}
@media(max-width:850px){
  body{display:block}
  aside{width:min(320px,88vw);padding:22px 18px}
  main>header{min-height:auto;padding:16px}
  main>header h1{font-size:26px}
  main>header>div:last-child{max-width:none;width:100%;justify-content:flex-start}
  main>header select{min-width:0;flex:1}
  #app{padding:18px 16px 32px}
  .card{padding:17px;border-radius:15px}
  .compact-accounts>.account-line{align-items:flex-start}
  .compact-accounts>.account-line>div{grid-template-columns:1fr 1fr!important}
  .compact-accounts>.account-line .finance-payment-badge{grid-column:1/-1}
}
@media(max-width:560px){
  main>header{gap:12px}
  main>header>div:last-child{gap:8px}
  main>header button{min-height:42px;padding:9px 12px}
  .grid,.stats,.brands{grid-template-columns:1fr}
  th,td{white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}