/* ==========================================================================
   COMANDA — Layout
   Sidebar (fixed, dark navy) + Topbar (white) + Main content
   ========================================================================== */

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------------------------------------------------------------------- */
/* Sidebar                                                                 */
/* ---------------------------------------------------------------------- */

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 100%);
  color:var(--white);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:1030;
  transition:width var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

.app-shell.is-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:1.55rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand-mark{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--accent-500);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  flex-shrink:0;
}
.sidebar-brand-text{ overflow:hidden; white-space:nowrap; }
.sidebar-brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--white);
  letter-spacing:-.01em;
}
.sidebar-brand-tag{
  font-size:.7rem;
  color:var(--navy-300);
  letter-spacing:.03em;
}
.app-shell.is-collapsed .sidebar-brand-text{ display:none; }

.sidebar-nav{
  flex:1;
  overflow-y:auto;
  padding:1.1rem .9rem;
}

.sidebar-section-label{
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--navy-300);
  padding:.6rem .6rem .5rem;
}
.app-shell.is-collapsed .sidebar-section-label{ display:none; }

.sidebar-link{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.62rem .75rem;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.72);
  font-size:.9rem;
  font-weight:500;
  margin-bottom:.15rem;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.sidebar-link i{ font-size:1.05rem; flex-shrink:0; width:20px; text-align:center; }
.sidebar-link:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.sidebar-link.active{
  background:var(--accent-500);
  color:var(--white);
  box-shadow:var(--shadow-sm);
}
.sidebar-link .badge-count{
  margin-left:auto;
  background:rgba(255,255,255,.15);
  color:var(--white);
  font-size:.7rem;
  font-weight:600;
  padding:.1rem .45rem;
  border-radius:var(--radius-pill);
}
.sidebar-link.active .badge-count{ background:rgba(255,255,255,.25); }
.app-shell.is-collapsed .sidebar-link span,
.app-shell.is-collapsed .sidebar-link .badge-count{ display:none; }
.app-shell.is-collapsed .sidebar-link{ justify-content:center; }

.sidebar-footer{
  padding:1rem 1.4rem 1.4rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-user{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.sidebar-user img{
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.15);
}
.sidebar-user-name{ font-size:.85rem; font-weight:600; color:var(--white); }
.sidebar-user-role{ font-size:.72rem; color:var(--navy-300); }
.app-shell.is-collapsed .sidebar-user-text{ display:none; }

/* ---------------------------------------------------------------------- */
/* Main column (topbar + content)                                         */
/* ---------------------------------------------------------------------- */

.main-col{
  flex:1;
  margin-left:var(--sidebar-w);
  min-width:0;
  transition:margin-left var(--dur-med) var(--ease);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.app-shell.is-collapsed .main-col{ margin-left:var(--sidebar-w-collapsed); }

.topbar{
  height:var(--topbar-h);
  background:var(--white);
  border-bottom:1px solid var(--ink-100);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1.75rem;
  position:sticky;
  top:0;
  z-index:1010;
}

.sidebar-toggle{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  border:1px solid var(--ink-200);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-700);
  flex-shrink:0;
}
.sidebar-toggle:hover{ background:var(--ink-100); }

.topbar-search{
  flex:1;
  max-width:380px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-shrink:0;
}

.icon-btn{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--ink-200);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-700);
  position:relative;
  font-size:1.05rem;
  flex-shrink:0;
}
.icon-btn:hover{ background:var(--ink-100); }
.icon-btn .dot{
  position:absolute;
  top:8px; right:9px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent-500);
  border:2px solid var(--white);
}

.topbar-user{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.3rem .6rem .3rem .3rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--ink-200);
}
.topbar-user img{
  width:34px; height:34px;
  border-radius:50%;
  object-fit:cover;
}
.topbar-user-name{ font-size:.83rem; font-weight:600; color:var(--ink-900); line-height:1.1; }
.topbar-user-role{ font-size:.7rem; color:var(--ink-500); }

.content{
  flex:1;
  padding:1.75rem;
  max-width:1600px;
  width:100%;
  margin-inline:auto;
}

/* ---------------------------------------------------------------------- */
/* Mobile / offcanvas behavior                                             */
/* ---------------------------------------------------------------------- */

.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(8,13,31,.55);
  z-index:1020;
}

@media (max-width: 991.98px){
  .sidebar{
    transform:translateX(-100%);
    width:var(--sidebar-w);
  }
  .app-shell.is-mobile-open .sidebar{ transform:translateX(0); }
  .app-shell.is-mobile-open .sidebar-backdrop{ display:block; }
  .main-col{ margin-left:0; }
  .app-shell.is-collapsed .main-col{ margin-left:0; }
  .topbar-search{ display:none; }
}

@media (max-width: 575.98px){
  .content{ padding:1.1rem; }
  .topbar{ padding:0 1.1rem; }
}

/* ==========================================================================
   Auth / standalone pages (login, forgot password, etc.)
   Split screen: dark navy brand panel + white form panel
   ========================================================================== */

.auth-shell{
  min-height:100vh;
  display:flex;
}

.auth-panel-brand{
  flex:1 1 50%;
  background:
    radial-gradient(560px 420px at 15% 15%, rgba(255,106,43,.16), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:2.75rem;
  position:relative;
  overflow:hidden;
}
.auth-panel-brand::before{
  content:"";
  position:absolute;
  right:-120px; bottom:-120px;
  width:340px; height:340px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.auth-panel-brand::after{
  content:"";
  position:absolute;
  right:-60px; bottom:-60px;
  width:220px; height:220px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}

.auth-quote{
  max-width:420px;
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.01em;
  position:relative;
  z-index:1;
}
.auth-quote-by{
  margin-top:1rem;
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--navy-300);
  position:relative;
  z-index:1;
}

.auth-panel-form{
  flex:1 1 50%;
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem;
}

.auth-card{ width:100%; max-width:400px; }

.auth-divider{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--ink-300);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:1.25rem 0;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--ink-200);
}

@media (max-width: 991.98px){
  .auth-panel-brand{ display:none; }
  .auth-panel-form{ padding:1.5rem; }
}