/* ==========================================================
   LAUNDRY CRM — Layout: Sidebar, Topbar, Content Grid
   ========================================================== */

/* ── App Shell ─────────────────────────────────────────── */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-width);
  height:100vh;
  position:fixed;
  top:0;left:0;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:var(--z-sidebar);
  transition:width var(--transition-base);
  overflow:hidden;
}
.sidebar.collapsed{
  width:var(--sidebar-collapsed);
}
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-header-text,
.sidebar.collapsed .sidebar-section-title{
  display:none;
}
.sidebar.collapsed .sidebar-logo{
  justify-content:center;
  padding:0 var(--space-md);
}
.sidebar.collapsed .nav-item{
  justify-content:center;
  padding:10px;
}
.sidebar.collapsed .nav-item .nav-icon{
  margin-right:0;
}

/* Sidebar Logo */
.sidebar-logo{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-lg) var(--space-xl);
  height:var(--topbar-height);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-logo-icon{
  width:36px;height:36px;
  background:linear-gradient(135deg,var(--accent),#0e7490);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:800;
  flex-shrink:0;
}
.sidebar-header-text{
  display:flex;flex-direction:column;
  white-space:nowrap;
}
.sidebar-brand{
  font-size:1rem;font-weight:800;color:var(--text-primary);
  letter-spacing:-0.02em;
}
.sidebar-brand-sub{
  font-size:0.65rem;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:0.1em;
}

/* Sidebar Navigation */
.sidebar-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--space-md) var(--space-sm);
}
.sidebar-section-title{
  font-size:0.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-tertiary);
  padding:var(--space-lg) var(--space-md) var(--space-sm);
  white-space:nowrap;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:10px var(--space-lg);
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  font-size:0.8125rem;
  font-weight:500;
  cursor:pointer;
  transition:all var(--transition-fast);
  white-space:nowrap;
  margin-bottom:2px;
  position:relative;
}
.nav-item:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
}
.nav-item.active{
  background:var(--accent-muted);
  color:var(--accent);
}
.nav-item.active::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:3px;height:60%;
  background:var(--accent);
  border-radius:0 var(--radius-full) var(--radius-full) 0;
}
.nav-icon{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-size:15px;
}
.sidebar-label{
  white-space:nowrap;
}
.nav-badge{
  margin-left:auto;
  background:var(--danger);
  color:#fff;
  font-size:0.65rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:var(--radius-full);
  min-width:20px;
  text-align:center;
}

/* Sidebar Footer */
.sidebar-footer{
  padding:var(--space-lg);
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-collapse-btn{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  color:var(--text-tertiary);
  font-size:0.75rem;
  transition:all var(--transition-fast);
}
.sidebar-collapse-btn:hover{
  background:var(--bg-hover);
  color:var(--text-secondary);
}

/* ── Main Wrapper ──────────────────────────────────────── */
.main-wrapper{
  flex:1;
  margin-left:var(--sidebar-width);
  transition:margin-left var(--transition-base);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.sidebar.collapsed ~ .main-wrapper{
  margin-left:var(--sidebar-collapsed);
}

/* ── Topbar ────────────────────────────────────────────── */
.topbar{
  height:var(--topbar-height);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 var(--space-xl);
  gap:var(--space-lg);
  position:sticky;
  top:0;
  z-index:var(--z-topbar);
  flex-shrink:0;
}
.topbar-left{
  display:flex;align-items:center;gap:var(--space-lg);flex:1;
}
.topbar-right{
  display:flex;align-items:center;gap:var(--space-lg);
}

/* Topbar Search */
.topbar-search{
  position:relative;
  max-width:400px;
  flex:1;
}
.topbar-search input{
  width:100%;
  padding:8px 12px 8px 36px;
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-size:0.8125rem;
  transition:all var(--transition-fast);
}
.topbar-search input::placeholder{
  color:var(--text-tertiary);
}
.topbar-search input:focus{
  border-color:var(--accent);
  background:var(--bg-primary);
  box-shadow:var(--accent-glow);
}
.topbar-search .search-icon{
  position:absolute;
  left:10px;top:50%;
  transform:translateY(-50%);
  color:var(--text-tertiary);
  font-size:14px;
  pointer-events:none;
}
.topbar-search .search-shortcut{
  position:absolute;
  right:10px;top:50%;
  transform:translateY(-50%);
  font-size:0.65rem;
  color:var(--text-tertiary);
  background:var(--bg-quaternary);
  padding:2px 6px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border);
}

/* Branch Selector */
.branch-selector{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:6px 12px;
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:0.8125rem;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.branch-selector:hover{
  border-color:var(--accent);
  color:var(--text-primary);
}
.branch-selector select{
  background:transparent;
  border:none;
  color:inherit;
  font-size:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  padding-right:4px;
}
.branch-selector select:focus{
  outline:none;
}

/* Topbar Actions */
.topbar-action{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  transition:all var(--transition-fast);
  position:relative;
  font-size:16px;
}
.topbar-action:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
}
.topbar-action .action-badge{
  position:absolute;
  top:4px;right:4px;
  width:8px;height:8px;
  background:var(--danger);
  border-radius:50%;
  border:2px solid var(--bg-secondary);
}

/* Theme Toggle */
.theme-toggle{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  transition:all var(--transition-fast);
  font-size:16px;
}
.theme-toggle:hover{
  background:var(--bg-hover);
  color:var(--warning);
}

/* User Avatar */
.topbar-user{
  display:flex;align-items:center;gap:var(--space-sm);
  cursor:pointer;
  padding:4px 8px;
  border-radius:var(--radius-md);
  transition:all var(--transition-fast);
}
.topbar-user:hover{
  background:var(--bg-hover);
}
.user-avatar{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--accent),#a855f7);
  border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:0.75rem;font-weight:700;
  flex-shrink:0;
}
.user-info{
  display:flex;flex-direction:column;
}
.user-name{
  font-size:0.8125rem;font-weight:600;color:var(--text-primary);
  white-space:nowrap;
}
.user-role{
  font-size:0.65rem;color:var(--text-tertiary);
  text-transform:capitalize;
}

/* ── Content Area ──────────────────────────────────────── */
.content-area{
  flex:1;
  padding:var(--space-xl);
  overflow-y:auto;
  animation:fadeIn 0.2s ease;
}

/* Page Header */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-xl);
  flex-wrap:wrap;
  gap:var(--space-lg);
}
.page-header-left{
  display:flex;flex-direction:column;gap:var(--space-xs);
}
.page-title{
  font-size:1.5rem;
  font-weight:800;
  color:var(--text-primary);
  letter-spacing:-0.02em;
}
.page-subtitle{
  font-size:0.8125rem;
  color:var(--text-secondary);
}
.page-header-actions{
  display:flex;gap:var(--space-sm);align-items:center;
}

/* ── Login Overlay ─────────────────────────────────────── */
.login-overlay{
  position:fixed;
  inset:0;
  background:var(--bg-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.login-card{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--space-3xl);
  width:100%;
  max-width:400px;
  box-shadow:var(--shadow-xl);
  text-align:center;
}
.login-logo{
  width:56px;height:56px;
  background:linear-gradient(135deg,var(--accent),#0e7490);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;font-weight:900;
  margin:0 auto var(--space-xl);
}
.login-title{
  font-size:1.25rem;font-weight:800;
  margin-bottom:var(--space-xs);
}
.login-subtitle{
  font-size:0.8125rem;color:var(--text-secondary);
  margin-bottom:var(--space-2xl);
}
.login-pin-group{
  display:flex;gap:var(--space-md);
  justify-content:center;
  margin-bottom:var(--space-xl);
}
.pin-input{
  width:52px;height:56px;
  text-align:center;
  font-size:1.5rem;
  font-weight:700;
  background:var(--bg-tertiary);
  border:2px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  transition:all var(--transition-fast);
}
.pin-input:focus{
  border-color:var(--accent);
  box-shadow:var(--accent-glow);
}
.login-users{
  margin-top:var(--space-xl);
  padding-top:var(--space-xl);
  border-top:1px solid var(--border);
}
.login-users-title{
  font-size:0.75rem;
  color:var(--text-tertiary);
  margin-bottom:var(--space-md);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.login-user-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.login-user-item{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition-fast);
  text-align:left;
}
.login-user-item:hover{
  background:var(--bg-hover);
}
.login-user-item .user-avatar{
  width:28px;height:28px;font-size:0.65rem;
}
.login-user-item-info{
  display:flex;flex-direction:column;
}
.login-user-item-name{
  font-size:0.8125rem;font-weight:600;color:var(--text-primary);
}
.login-user-item-role{
  font-size:0.7rem;color:var(--text-tertiary);
}
.login-user-item-pin{
  margin-left:auto;
  font-size:0.7rem;
  color:var(--text-tertiary);
  font-family:monospace;
}
.login-error{
  color:var(--danger);
  font-size:0.8125rem;
  margin-top:var(--space-md);
  display:none;
}

/* ── Mobile Sidebar Overlay ────────────────────────────── */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:calc(var(--z-sidebar) - 1);
}

/* ── Mobile Menu Toggle ────────────────────────────────── */
.mobile-menu-btn{
  display:none;
  width:36px;height:36px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  font-size:18px;
}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:1024px){
  .sidebar{
    transform:translateX(-100%);
    width:var(--sidebar-width);
  }
  .sidebar.mobile-open{
    transform:translateX(0);
  }
  .sidebar.mobile-open ~ .sidebar-overlay{
    display:block;
  }
  .main-wrapper{
    margin-left:0!important;
  }
  .mobile-menu-btn{
    display:flex;
  }
  .topbar-search{
    max-width:200px;
  }
  .topbar .search-shortcut{
    display:none;
  }
}
@media(max-width:640px){
  .content-area{
    padding:var(--space-lg);
  }
  .page-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .topbar-search{
    display:none;
  }
  .user-info{
    display:none;
  }
}