/* Apple Light theme (global overrides)
   Scoped to: body.theme-apple-light
   Load AFTER style.css/app.css
*/
:root{
  --al-bg:#f5f5f7;
  --al-surface:#ffffff;
  --al-surface-2:rgba(255,255,255,.78);
  --al-text:#111827;
  --al-muted:rgba(17,24,39,.60);
  --al-border:rgba(17,24,39,.10);
  --al-border-strong:rgba(17,24,39,.16);
  --al-shadow-sm:0 2px 10px rgba(17,24,39,.06);
  --al-shadow-md:0 10px 30px rgba(17,24,39,.10);
  --al-radius:12px;
  --al-radius-sm:10px;
  --al-primary:#0a84ff;
  --al-primary-ink:#0a5fd3;
  --al-focus:0 0 0 4px rgba(10,132,255,.18);
}

/* Base */
body.theme-apple-light{
  background:var(--al-bg);
  color:var(--al-text);
}
body.theme-apple-light a{ color:inherit; }
body.theme-apple-light .muted{ color:var(--al-muted); }

/* Shell background */
body.theme-apple-light .app-shell,
body.theme-apple-light .app-content{
  background:transparent;
}

/* Frosted top areas */
body.theme-apple-light .app-topbar,
body.theme-apple-light .app-topnav-main{
  background:rgba(245,245,247,.78);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--al-border);
}

/* Sidebar -> dark (Apple Light content) */
body.theme-apple-light .app-sidebar{
  background: rgba(11,18,32,.96);
  border-right: 1px solid rgba(255,255,255,.08);
}
body.theme-apple-light .app-sidebar .nav-section-title{
  color: rgba(255,255,255,.45);
}
body.theme-apple-light .app-sidebar a,
body.theme-apple-light .app-sidebar .nav-item > a{
  color: rgba(255,255,255,.86);
}
body.theme-apple-light .app-sidebar .nav-item a:hover{
  background: rgba(255,255,255,.06);
}
body.theme-apple-light .app-sidebar .nav-item a.active,
body.theme-apple-light .app-sidebar .nav-item.active > a{
  background: rgba(10,132,255,.18);
  color: #ffffff;
}
body.theme-apple-light .app-sidebar .nav-sub a.active{
  background: rgba(10,132,255,.14);
  color: #ffffff;
}
body.theme-apple-light .app-sidebar .icon,
body.theme-apple-light .app-sidebar svg{
  opacity: .92;
}


/* Cards */
body.theme-apple-light .card,
body.theme-apple-light .panel,
body.theme-apple-light .widget{
  background:var(--al-surface);
  border:1px solid var(--al-border);
  border-radius:var(--al-radius);
  box-shadow:var(--al-shadow-sm);
}
body.theme-apple-light .card--soft{
  background:rgba(255,255,255,.92);
}
body.theme-apple-light .card-head,
body.theme-apple-light .card-header,
body.theme-apple-light .widget-header{
  border-bottom:1px solid rgba(17,24,39,.08);
}
body.theme-apple-light .widget-actions{
  opacity:.55;
  transition:opacity .12s ease;
}
body.theme-apple-light .card:hover .widget-actions,
body.theme-apple-light .widget:hover .widget-actions{
  opacity:1;
}

/* Page header */
body.theme-apple-light .page-header{ background:transparent; }
body.theme-apple-light .page-title{ letter-spacing:-0.01em; }
body.theme-apple-light .page-subtitle{ color:var(--al-muted); }

/* Inputs */
body.theme-apple-light .input,
body.theme-apple-light input[type="text"],
body.theme-apple-light input[type="email"],
body.theme-apple-light input[type="password"],
body.theme-apple-light input[type="number"],
body.theme-apple-light input[type="search"],
body.theme-apple-light input[type="date"],
body.theme-apple-light input[type="time"],
body.theme-apple-light select,
body.theme-apple-light textarea{
  border-radius:var(--al-radius-sm);
  border:1px solid rgba(17,24,39,.12);
  background:var(--al-surface-2);
}
body.theme-apple-light .input:focus,
body.theme-apple-light input:focus,
body.theme-apple-light select:focus,
body.theme-apple-light textarea:focus{
  outline:none;
  border-color:rgba(10,132,255,.35);
  box-shadow:var(--al-focus);
  background:var(--al-surface);
}
body.theme-apple-light .help,
body.theme-apple-light .form-help,
body.theme-apple-light .hint{
  color:rgba(17,24,39,.55);
}

/* Buttons */
body.theme-apple-light .btn{
  border-radius:var(--al-radius-sm);
}
body.theme-apple-light .btn-primary,
body.theme-apple-light .btn.btn-primary{
  background:var(--al-primary);
  border-color:transparent;
  color:#fff;
}
body.theme-apple-light .btn-secondary,
body.theme-apple-light .btn.btn-secondary{
  background:rgba(17,24,39,.06);
  border-color:rgba(17,24,39,.10);
  color:var(--al-text);
}
body.theme-apple-light .btn-ghost,
body.theme-apple-light .btn.btn-ghost{
  background:transparent;
  border-color:rgba(17,24,39,.10);
}
body.theme-apple-light .btn:focus{ outline:none; box-shadow:var(--al-focus); }
body.theme-apple-light .btn:hover{ box-shadow:var(--al-shadow-sm); }

/* Badges */
body.theme-apple-light .badge{
  border-radius:999px;
  border:1px solid var(--al-border);
}
body.theme-apple-light .badge-primary{
  background:rgba(10,132,255,.12);
  color:var(--al-primary-ink);
  border-color:rgba(10,132,255,.22);
}
body.theme-apple-light .badge-soft,
body.theme-apple-light .badge-neutral{
  background:rgba(17,24,39,.06);
  border-color:rgba(17,24,39,.10);
  color:rgba(17,24,39,.86);
}
body.theme-apple-light .badge-success{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.22);
  color:#166534;
}
body.theme-apple-light .badge-warning{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.22);
  color:#92400e;
}
body.theme-apple-light .badge-danger{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.22);
  color:#b91c1c;
}

/* Tables */
body.theme-apple-light .table-wrapper{
  border:1px solid var(--al-border);
  border-radius:var(--al-radius);
  background:var(--al-surface);
  box-shadow:var(--al-shadow-sm);
  overflow:hidden;
}
body.theme-apple-light table thead th{
  background:rgba(245,245,247,.90);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* =========================================================
   Layout: fixed dark sidebar + main content always follows
   - Sidebar is fixed (so it stays in place)
   - Main area uses margin-left based on sidebar width
   - Collapsed state follows existing: .app-shell.is-sidebar-collapsed
   ========================================================= */
body.theme-apple-light{
  --al-sidebar-w: 260px;
  --al-sidebar-w-collapsed: 74px;
}

/* Override legacy grid shell to a simple fixed-sidebar layout */
body.theme-apple-light .app-shell{
  display:block !important;
  min-height:100vh;
}

body.theme-apple-light .app-sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:var(--al-sidebar-w);
  overflow-y:auto;
  overflow-x:hidden;
  z-index:60;
}

body.theme-apple-light .app-main{
  margin-left:var(--al-sidebar-w);
  min-height:100vh;
}

/* Content: full width, but with Apple-like breathing room */
body.theme-apple-light .app-content{
  width:100%;
  padding:16px 16px 28px;
}
body.theme-apple-light .page-container{
  width:100%;
  margin:0 auto;
  padding:18px 18px;
  max-width:1600px;
}
@media (min-width:900px){
  .page-container{ padding:22px 24px; }
}
@media (min-width:1400px){
  .page-container{ max-width:1760px; padding:26px 28px; }
}
@media (min-width:1700px){
  .page-container{ max-width:1920px; padding:30px 32px; }
}
@media (min-width:2100px){
  .page-container{ max-width:2048px; }
}

/* Footer aligns with content width */
body.theme-apple-light .app-footer .container{
  width:100%;
  margin:0 auto;
  padding:18px 18px;
  max-width:1600px;
}
@media (min-width:900px){
  .container{ padding:22px 24px; }
}
@media (min-width:1400px){
  .container{ max-width:1760px; padding:26px 28px; }
}
@media (min-width:1700px){
  .container{ max-width:1920px; padding:30px 32px; }
}
@media (min-width:2100px){
  .container{ max-width:2048px; }
}
@media (min-width: 900px){
  body.theme-apple-light .app-footer .container{ padding:0 22px; }
}
@media (min-width: 1200px){
  body.theme-apple-light .app-footer .container{ padding:0 26px; }
}

@media (min-width: 900px){
  body.theme-apple-light .app-content{ padding:20px 22px 32px; }
}
@media (min-width: 1200px){
  body.theme-apple-light .app-content{ padding:24px 26px 36px; }
}
@media (min-width: 1600px){
  body.theme-apple-light .app-content{ padding:28px 30px 40px; }
}

/* Collapsed sidebar (triggered by existing JS in layout.php) */
body.theme-apple-light .app-shell.is-sidebar-collapsed .app-sidebar{
  width:var(--al-sidebar-w-collapsed);
}
body.theme-apple-light .app-shell.is-sidebar-collapsed .app-main{
  margin-left:var(--al-sidebar-w-collapsed);
}

/* Mobile: sidebar overlays, main is full width */
@media (max-width: 980px){
  body.theme-apple-light .app-sidebar{
    transform:translateX(-100%);
    transition:transform .18s ease;
    width:var(--al-sidebar-w);
  }
  body.theme-apple-light .app-main{
    margin-left:0;
  }
  /* Open via body.sidebar-open */
  body.theme-apple-light.sidebar-open .app-sidebar{
    transform:translateX(0);
  }

  /* Hide the secondary topnav on small screens */
  body.theme-apple-light .app-topnav-main{ display:none; }

  /* Show mobile menu button */
  body.theme-apple-light .sidebar-mobile-btn{ display:inline-flex; }
}

/* Mobile menu button default hidden on desktop */
body.theme-apple-light .sidebar-mobile-btn{ display:none; }

/* Backdrop for mobile sidebar overlay */
body.theme-apple-light .sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:55;
}
body.theme-apple-light.sidebar-open .sidebar-backdrop{
  opacity:1;
  pointer-events:auto;
}

/* Tables: allow horizontal scroll on small screens */
@media (max-width: 980px){
  body.theme-apple-light .table-wrapper{ overflow-x:auto; }
  body.theme-apple-light table{ min-width: 720px; }
}
body.theme-apple-light table tbody tr:hover td{
  background:rgba(17,24,39,.02);
}

/* Tabs */
body.theme-apple-light .tabs,
body.theme-apple-light .tabbar{
  border-bottom:1px solid var(--al-border);
}
body.theme-apple-light .tab,
body.theme-apple-light .tabs a{
  border-radius:10px;
}
body.theme-apple-light .tab.active,
body.theme-apple-light .tabs a.active{
  background:rgba(10,132,255,.10);
  color:var(--al-primary-ink);
}

/* Dropdowns / menus */
body.theme-apple-light .dropdown-menu,
body.theme-apple-light .menu{
  background:var(--al-surface);
  border:1px solid var(--al-border);
  border-radius:12px;
  box-shadow:var(--al-shadow-md);
}

/* Modals */
body.theme-apple-light .modal,
body.theme-apple-light .dialog{
  border-radius:14px;
  border:1px solid var(--al-border);
  box-shadow:var(--al-shadow-md);
}

/* Alerts / flash */
body.theme-apple-light .flash{
  border-radius:12px;
  box-shadow:var(--al-shadow-sm);
}
body.theme-apple-light .flash-info{
  background:rgba(10,132,255,.10);
  border:1px solid rgba(10,132,255,.20);
  color:var(--al-primary-ink);
}

/* Pagination */
body.theme-apple-light .pagination a,
body.theme-apple-light .pagination button{
  border-radius:10px;
  border:1px solid var(--al-border);
  background:rgba(255,255,255,.72);
}
body.theme-apple-light .pagination .active{
  background:rgba(10,132,255,.10);
  border-color:rgba(10,132,255,.20);
  color:var(--al-primary-ink);
}


.app-content{
  /* override legacy constraints so content can use full available width */
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0;
}


/* --- Colored pills (projects/status/type/health) --- */
body.theme-apple-light .pill,
body.theme-apple-light .badge,
body.theme-apple-light .tag{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px;
  border-radius:999px;
  font-size:12px; font-weight:700;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(17,24,39,.04);
  color:rgba(17,24,39,.85);
  white-space:nowrap;
}
body.theme-apple-light .pill-dot{
  width:8px; height:8px; border-radius:999px;
  background:currentColor; opacity:.9;
}

body.theme-apple-light .pill--draft{ background:rgba(148,163,184,.18); border-color:rgba(148,163,184,.30); color:#475569; }
body.theme-apple-light .pill--nieuw{ background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.25); color:#1d4ed8; }
body.theme-apple-light .pill--bezig{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.25); color:#92400e; }
body.theme-apple-light .pill--done{  background:rgba(34,197,94,.14);  border-color:rgba(34,197,94,.25);  color:#166534; }
body.theme-apple-light .pill--paused{background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.22);  color:#991b1b; }

body.theme-apple-light .pill--onschedule{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); color:#166534; }
body.theme-apple-light .pill--risk{      background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); color:#92400e; }
body.theme-apple-light .pill--late{      background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.20); color:#991b1b; }

body.theme-apple-light .pill--type-websites{ background:rgba(10,132,255,.12); border-color:rgba(10,132,255,.22); color:#0a5fd3; }
body.theme-apple-light .pill--type-grafisch{ background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.22); color:#6d28d9; }
body.theme-apple-light .pill--type-hosting{  background:rgba(20,184,166,.12); border-color:rgba(20,184,166,.22); color:#0f766e; }
body.theme-apple-light .pill--type-kleding{  background:rgba(244,63,94,.10);  border-color:rgba(244,63,94,.18);  color:#be123c; }
body.theme-apple-light .pill--type-overige{  background:rgba(100,116,139,.14); border-color:rgba(100,116,139,.24); color:#475569; }


/* Kleding status pills */
body.theme-apple-light .pill--status-magazijn{  background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); color:#166534; }
body.theme-apple-light .pill--status-uitgeleend{ background:rgba(10,132,255,.12); border-color:rgba(10,132,255,.22); color:#0a5fd3; }
body.theme-apple-light .pill--status-showroom{   background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); color:#92400e; }
body.theme-apple-light .pill--status-afgeschreven{ background:rgba(100,116,139,.14); border-color:rgba(100,116,139,.24); color:#475569; }

/* health badge variants if used */
body.theme-apple-light .badge.badge-health-green{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); color:#166534; }
body.theme-apple-light .badge.badge-health-amber{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); color:#92400e; }
body.theme-apple-light .badge.badge-health-red{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.20); color:#991b1b; }