/* App shell layout */
.app-shell{display:grid;grid-template-columns:248px 1fr;grid-template-rows:60px auto 1fr 44px;min-height:100vh;grid-template-areas:"sidebar header" "sidebar emergency" "sidebar main" "sidebar footer"}
.app-shell.collapsed{grid-template-columns:68px 1fr}
.ffm-emergency-bar{grid-area:emergency}
.app-header{grid-area:header;background:var(--ffm-surface);border-bottom:1px solid var(--ffm-border);display:flex;align-items:center;padding:0 1rem;gap:.75rem;position:sticky;top:0;z-index:30}
.app-header .brand{font-weight:700;color:var(--ffm-text)}
.app-header .family-name{color:var(--ffm-muted);font-size:.9rem;margin-left:.25rem}
.app-header .search{flex:1;max-width:420px;margin:0 1rem}
.app-header .search input{border-radius:999px;background:var(--ffm-bg);border:1px solid var(--ffm-border);padding-left:2.2rem}
.app-header .search{position:relative}
.app-header .search .bi{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--ffm-muted)}
.app-header .header-actions{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.app-header .header-actions .btn{padding:.35rem .6rem;font-size:.85rem}
.app-header .clock{color:var(--ffm-muted);font-size:.8rem;margin-right:.5rem;white-space:nowrap}

.app-sidebar{grid-area:sidebar;background:#0f1a2b;color:#cfdaeb;overflow-y:auto;padding:.6rem 0;position:sticky;top:0;height:100vh}
.app-sidebar .side-brand{padding:.8rem 1rem;color:#fff;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:.6rem}
.app-sidebar .side-brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#5a93c4,#2e8a78);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.app-sidebar .nav-section{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7a8aa5;padding:.7rem 1rem .3rem}
.app-sidebar a.nav-item{display:flex;align-items:center;gap:.7rem;color:#cfdaeb;padding:.55rem 1rem;text-decoration:none;font-size:.92rem;border-left:3px solid transparent}
.app-sidebar a.nav-item .bi{font-size:1.05rem;color:#8da1bf}
.app-sidebar a.nav-item:hover{background:rgba(255,255,255,.04);color:#fff}
.app-sidebar a.nav-item.active{background:rgba(90,147,196,.18);color:#fff;border-left-color:#5a93c4}
.app-sidebar a.nav-item.active .bi{color:#fff}
.app-shell.collapsed .app-sidebar .label,
.app-shell.collapsed .app-sidebar .side-brand .name,
.app-shell.collapsed .app-sidebar .nav-section{display:none}
.app-shell.collapsed .app-sidebar a.nav-item{justify-content:center}

.app-main{grid-area:main;padding:1.4rem 1.6rem;overflow-x:hidden}
.app-footer{grid-area:footer;background:var(--ffm-surface);border-top:1px solid var(--ffm-border);display:flex;align-items:center;justify-content:space-between;padding:0 1.2rem;font-size:.78rem;color:var(--ffm-muted)}

/* Page header */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.page-header h1{font-size:1.4rem;margin:0;font-weight:700}
.page-header .crumbs{color:var(--ffm-muted);font-size:.82rem;margin-bottom:.2rem}
.page-header .meta{color:var(--ffm-muted);font-size:.82rem;margin-top:.25rem}
.page-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.page-actions .search-mini{position:relative}
.page-actions .search-mini input{border-radius:999px;padding-left:2rem;min-width:220px}
.page-actions .search-mini .bi{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--ffm-muted)}

/* Modal popup (formerly side drawer) */
.ffm-drawer-backdrop{position:fixed;inset:0;background:rgba(15,26,43,.5);z-index:1040;display:none;opacity:0;transition:opacity .2s}
.ffm-drawer-backdrop.open{display:block;opacity:1}
.ffm-drawer.ffm-modal{position:fixed;top:50%;left:50%;height:auto;max-height:92vh;width:min(860px,95vw);background:var(--ffm-surface);box-shadow:0 24px 70px rgba(15,26,43,.30);border-radius:14px;z-index:1050;transform:translate(-50%,-50%) scale(.96);opacity:0;transition:opacity .2s ease, transform .2s ease;display:flex;flex-direction:column;overflow:hidden}
.ffm-drawer.ffm-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1}
.ffm-drawer .drawer-head{padding:1rem 1.2rem;border-bottom:1px solid var(--ffm-border);display:flex;align-items:center;justify-content:space-between}
.ffm-drawer .drawer-head h5{margin:0;font-weight:700}
.ffm-drawer .drawer-body{flex:1;overflow-y:auto;padding:1.2rem}
.ffm-drawer .drawer-foot{padding:.9rem 1.2rem;border-top:1px solid var(--ffm-border);display:flex;justify-content:flex-end;gap:.6rem;background:var(--ffm-surface-2)}
.ffm-drawer .drawer-foot .btn + .btn{margin-left:.1rem}

/* Responsive */
@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr;grid-template-rows:60px auto 1fr 44px;grid-template-areas:"header" "emergency" "main" "footer"}
  .app-sidebar{position:fixed;left:0;top:0;width:260px;height:100vh;transform:translateX(-100%);transition:transform .25s ease;z-index:60}
  .app-sidebar.mobile-open{transform:translateX(0)}
  .app-main{padding:1rem}
  .app-header .search{display:none}
  .app-header .clock{display:none}
}