@import url('/assets/brand/business-os-brand.css');
@import url('/control/assets/css/business-os-control-theme.css');
:root {
    --navy:#10233f;
    --navy-dark:#09182c;
    --gold:#fac542;
    --surface:#f5f7fb;
    --white:#fff;
    --text:#14213a;
    --muted:#667085;
    --line:#e4e9f0;
}

* { box-sizing:border-box; }

body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--surface);
    color:var(--text);
}

.login-body {
    min-height:100vh;
    background:linear-gradient(135deg,var(--navy-dark),#173e6d);
}

.login-shell {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:30px;
}

.login-card {
    width:min(460px,100%);
    background:#fff;
    padding:42px;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.25);
}

.brand,.sidebar-brand {
    display:flex;
    align-items:center;
    gap:12px;
}

.brand small,.sidebar-brand small {
    display:block;
    color:var(--muted);
    margin-top:4px;
}

.brand-mark {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--navy);
    color:var(--gold);
    font-weight:800;
}

.login-heading { margin:42px 0 30px; }

.eyebrow {
    color:#d99e00;
    font-size:12px;
    letter-spacing:2px;
    font-weight:800;
}

h1 {
    font-size:38px;
    margin:10px 0;
}

.login-heading p,.panel p {
    color:var(--muted);
    line-height:1.6;
}

label {
    display:block;
    font-weight:700;
    margin:18px 0;
}

input {
    width:100%;
    margin-top:8px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:16px;
}

button {
    width:100%;
    border:0;
    padding:15px;
    border-radius:8px;
    background:var(--gold);
    color:var(--navy-dark);
    font-weight:800;
    font-size:15px;
    cursor:pointer;
}

.alert {
    background:#fff4e5;
    border:1px solid #ffd58a;
    padding:13px;
    border-radius:8px;
    margin-bottom:20px;
}

.security-note {
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:25px;
}

.control-layout {
    min-height:100vh;
    display:grid;
    grid-template-columns:260px 1fr;
}

.sidebar {
    background:var(--navy-dark);
    color:white;
    padding:28px 22px;
    display:flex;
    flex-direction:column;
}

.sidebar-brand small { color:#aebbd0; }

.sidebar nav {
    margin-top:50px;
    display:grid;
    gap:7px;
}

.sidebar nav a,.logout {
    color:#cbd5e5;
    text-decoration:none;
    padding:13px 14px;
    border-radius:8px;
}

.sidebar nav a:hover,.sidebar nav a.active {
    background:#173458;
    color:white;
}

.logout { margin-top:auto; }

.dashboard { padding:40px; }

.dashboard header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.admin-name {
    background:white;
    padding:12px 18px;
    border:1px solid var(--line);
    border-radius:9px;
}

.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin:30px 0;
}

.cards article,.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
}

.cards span {
    display:block;
    color:var(--muted);
    font-weight:700;
}

.cards strong {
    display:block;
    font-size:28px;
    margin:16px 0 8px;
}

.cards small { color:var(--muted); }

.panel { margin-top:20px; }

@media(max-width:900px) {
    .control-layout { grid-template-columns:1fr; }
    .sidebar { display:none; }
    .cards { grid-template-columns:1fr 1fr; }
}

@media(max-width:560px) {
    .cards { grid-template-columns:1fr; }
    .dashboard { padding:22px; }
}