:root{font-family:Inter,system-ui,Arial,sans-serif;color:#10233e;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#071e36,#0a4b39)}.card{background:#fff;border-radius:18px;box-shadow:0 12px 40px #0012;}.login-card{width:min(460px,92vw);padding:32px}.brand{font-size:28px;font-weight:800;color:#e59b00}.muted{color:#6b7c90}.field{margin:16px 0}.field label{display:block;font-size:13px;margin-bottom:7px}.field input,.field select{width:100%;padding:12px 14px;border:1px solid #d8e0ea;border-radius:10px;background:#fff}.btn{border:0;border-radius:10px;padding:12px 16px;background:#087b49;color:#fff;font-weight:700;cursor:pointer}.btn.secondary{background:#eef3f8;color:#23364c}.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.side{background:#071f37;color:#fff;padding:22px 14px}.side h2{margin:0 10px 20px;color:#ffc43b}.nav a{display:block;color:#d7e5ef;padding:10px 12px;margin:4px 0;border-radius:9px;text-decoration:none}.nav a.active,.nav a:hover{background:#174a71;color:#fff}.main{padding:24px}.top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.pill{background:#fff;border:1px solid #dce5ef;border-radius:10px;padding:10px 12px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.kpi{padding:16px}.kpi .v{font-size:26px;font-weight:800;margin:8px 0}.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:14px}.panel{padding:18px;min-height:200px}.bars{display:flex;align-items:end;gap:8px;height:140px;padding-top:20px}.bar{flex:1;background:#1d7dd8;border-radius:6px 6px 0 0;min-height:10px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid #edf1f5;padding:10px 6px;font-size:13px}.tag{padding:4px 8px;border-radius:999px;background:#e7f6ee;color:#087b49;font-size:12px}.alert{padding:10px;border:1px solid #ffd9d9;background:#fff6f6;border-radius:9px;margin:8px 0}.role-badge{font-size:12px;background:#edf4ff;padding:7px 10px;border-radius:999px}@media(max-width:900px){.shell{grid-template-columns:1fr}.side{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}@media(max-width:520px){.kpis{grid-template-columns:1fr}.main{padding:14px}.top{align-items:flex-start;flex-direction:column}}
.small-user{margin:14px 10px 18px;padding:12px;background:rgba(255,255,255,.08);border-radius:10px;font-weight:700}.small-user span{font-size:12px;font-weight:400;opacity:.75}.permission-list{display:flex;gap:8px;flex-wrap:wrap}.alert{padding:10px 12px;border-radius:8px;background:#fff3cd;color:#7a5a00;margin:8px 0}.field input{box-sizing:border-box}

/* ===== MFA QR enrollment ===== */

.mfa-qr-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 22px 0 18px;
}

.mfa-qr {
    width: 220px;
    height: 220px;
    max-width: 100%;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #d9e1e8;
}

.mfa-manual {
    margin: 12px 0 20px;
    font-size: 14px;
}

.mfa-manual summary {
    cursor: pointer;
    font-weight: 600;
    color: #41556b;
    margin-bottom: 12px;
}

.mfa-manual[open] summary {
    margin-bottom: 12px;
}

/* =========================================================
   PENTA OIL OS — MODULE WORKSPACES
   ========================================================= */

.nav a{
    cursor:pointer;
    user-select:none;
}

.module-page{
    width:100%;
}

.module-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.module-heading h1{
    margin:8px 0 4px;
    font-size:30px;
}

.module-user{
    display:flex;
    align-items:center;
    gap:10px;
}

.module-back{
    border:0;
    background:transparent;
    color:#557089;
    padding:0;
    cursor:pointer;
    font-weight:700;
}

.module-back:hover{
    color:#087b49;
}

.module-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:14px;
}

.module-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6b7c90;
}

.module-placeholder{
    text-align:center;
    padding:50px 24px;
}

.placeholder-icon{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    border-radius:18px;
    background:#eef5fb;
    font-size:28px;
}

.table-wrap{
    width:100%;
    overflow-x:auto;
}

.mini-btn{
    border:0;
    background:#edf4ff;
    color:#174a71;
    padding:7px 11px;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
}

.mini-btn:hover{
    background:#dcecff;
}

.btn.danger{
    background:#b42318;
}

.module-actions .btn{
    margin:4px 6px 4px 0;
}

.detail-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.detail-list{
    display:flex;
    flex-direction:column;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:11px 0;
    border-bottom:1px solid #edf1f5;
}

.detail-row:last-child{
    border-bottom:0;
}

.detail-row span{
    color:#6b7c90;
    text-transform:capitalize;
}

.detail-row strong{
    text-align:right;
}

.inline-form{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #edf1f5;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.report-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.report-card{
    min-height:180px;
}

@media(max-width:1100px){
    .detail-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    .module-heading{
        flex-direction:column;
    }

    .form-grid,
    .report-grid{
        grid-template-columns:1fr;
    }
}

/* ===== USER CREATION FORM ===== */

.user-create-card{
    margin-bottom:16px;
}

.form-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}

.form-title-row h3{
    margin-top:0;
}

.form-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.check-row{
    display:flex !important;
    align-items:center;
    gap:10px;
    margin-top:14px;
    cursor:pointer;
}

.check-row input{
    width:auto !important;
}

.login-hint{
    margin-top:8px;
    padding:8px 10px;
    border-radius:8px;
    background:#fff3cd;
    color:#7a5a00;
    font-size:13px;
    font-weight:700;
}