:root { --navy:#102a43; --navy-2:#173f63; --ink:#172033; --muted:#5f6f82; --line:#dbe3ec; --canvas:#f4f7fb; --panel:#ffffff; --teal:#0f766e; --teal-soft:#e8f6f4; --amber:#a15c06; --amber-soft:#fff7e8; --danger:#b42318; --danger-soft:#fff0ef; --success:#18794e; --success-soft:#ecfdf3; --radius:14px; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:#0d5c91; text-decoration:none; } a:hover { text-decoration:underline; } .shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; } .sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:22px 16px; color:#dce8f4; background:var(--navy); } .brand,.auth-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; } .brand strong,.auth-brand strong { display:block; font-size:18px; letter-spacing:.01em; } .brand small,.auth-brand small { display:block; font-size:12px; opacity:.75; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:white; background:var(--teal); font-size:12px; font-weight:800; letter-spacing:.06em; } .tenant-chip { margin:28px 0 18px; padding:14px; border:1px solid rgba(220,232,244,.2); border-radius:12px; background:rgba(255,255,255,.06); } .tenant-chip strong { display:block; margin:2px 0 8px; font-size:14px; color:#fff; } .tenant-chip a { color:#9edbd5; font-size:12px; } .eyebrow { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .sidebar .eyebrow { color:#9ab0c4; } nav { display:grid; gap:5px; } nav a { padding:10px 12px; border-radius:9px; color:#c8d9e8; font-weight:600; } nav a:hover,nav a.active { color:white; background:rgba(255,255,255,.12); text-decoration:none; } .logout-form { margin-top:auto; } .link-button { padding:9px 12px; border:0; color:#c8d9e8; background:transparent; cursor:pointer; font:inherit; } .content { max-width:1440px; width:100%; padding:32px clamp(22px,4vw,60px) 60px; } .page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; } h1 { margin:3px 0 0; font-size:30px; line-height:1.2; } h2 { margin:4px 0 12px; font-size:21px; line-height:1.25; } p { margin:0 0 12px; } .user-summary { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); text-align:right; } .user-summary strong,.user-summary span { display:block; } .user-summary span { color:var(--muted); font-size:12px; } .hero-panel,.content-panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 1px 2px rgba(20,40,65,.04); } .hero-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; margin-bottom:20px; background:linear-gradient(135deg,#fff 0%,#f0faf9 100%); } .content-panel { padding:24px; margin-bottom:20px; } .narrow-panel { max-width:760px; } .metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; } .metric-grid article { padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); } .metric-grid span,.metric-grid small { display:block; color:var(--muted); } .metric-grid strong { display:block; margin:4px 0; color:var(--navy); font-size:29px; } .panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; } .two-panel-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:20px; } .form-grid { display:grid; gap:15px; } .two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); } .full-width { grid-column:1 / -1; } label { display:grid; gap:6px; color:#334155; font-size:13px; font-weight:700; } input,select,textarea { width:100%; padding:10px 11px; border:1px solid #b8c6d6; border-radius:8px; color:var(--ink); background:white; font:inherit; } input:focus,select:focus,textarea:focus { outline:3px solid rgba(15,118,110,.18); border-color:var(--teal); } .checkbox { display:flex; align-items:center; gap:8px; font-weight:500; } .checkbox input { width:auto; } .checkbox-label { display:flex; align-items:center; gap:8px; font-weight:600; } .checkbox-label input { width:auto; } button,.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; border-radius:8px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; } .primary-button { border:1px solid var(--teal); color:white; background:var(--teal); } .primary-button:hover { background:#0b625c; text-decoration:none; } .secondary-button { border:1px solid #afc1d1; color:var(--navy); background:white; } .secondary-button:hover { background:#f8fafc; text-decoration:none; } .notice { margin:0 0 18px; padding:13px 15px; border-left:4px solid; border-radius:7px; } .notice ul { margin:7px 0 0; padding-left:20px; } .notice.success { border-color:var(--success); color:#155d3b; background:var(--success-soft); } .notice.error { border-color:var(--danger); color:#8e2018; background:var(--danger-soft); } .notice.warning { border-color:var(--amber); color:#734506; background:var(--amber-soft); } table { width:100%; border-collapse:collapse; } th,td { padding:10px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { color:var(--muted); background:#f8fafc; font-size:11px; letter-spacing:.05em; text-transform:uppercase; } td small,.muted { color:var(--muted); } .table-wrap { overflow-x:auto; } .role-chip,.status-pill { display:inline-block; padding:3px 7px; border-radius:999px; color:#0d615a; background:var(--teal-soft); font-size:12px; font-weight:700; } .status-pill { color:#29435c; background:#e8f0f8; } .detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; } .detail-grid div { padding:11px; border:1px solid var(--line); border-radius:9px; } dt { color:var(--muted); font-size:12px; } dd { margin:3px 0 0; font-weight:700; } code { padding:2px 4px; border-radius:4px; background:#edf2f7; color:#234; font-size:12px; } .auth-page { display:grid; min-height:100vh; place-items:center; padding:28px; background:radial-gradient(circle at 10% 10%,#d9f2ee,transparent 35%),var(--canvas); } .auth-card,.setup-card { width:min(100%,480px); padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 18px 50px rgba(16,42,67,.12); } .setup-card { width:min(100%,720px); } .auth-brand { margin-bottom:26px; color:var(--navy); } .auth-brand small { color:var(--muted); } .auth-card h1,.setup-card h1 { margin:0 0 9px; } .pagination { margin-top:15px; } @media (max-width:900px) { .shell { grid-template-columns:1fr; } .sidebar { position:relative; height:auto; } .sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .logout-form { margin-top:16px; } .metric-grid,.detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .two-panel-grid { grid-template-columns:1fr; } } @media (max-width:620px) { .content { padding:22px 16px 40px; } .page-header,.hero-panel,.panel-heading { display:grid; } .metric-grid,.detail-grid,.two-columns { grid-template-columns:1fr; } .sidebar nav { grid-template-columns:1fr; } .auth-page { padding:14px; } .auth-card,.setup-card { padding:24px; } }