/* ================================================================
   MAVERICON PROJECTS — Design System
   Part of the CIDT Group
   Palette: Mavericon Red #D4141A · Ink #1A1D23 · Slate #5B6472
            Mist #F5F6F8 · White #FFFFFF · Line #E4E7EC
            Success #1E8E5A · Amber #E8A33D
   Type: Space Grotesk (display) · Manrope (body) · IBM Plex Mono (data)
   ================================================================ */

:root {
    --red: #D71920;
    --red-dark: #A90F16;
    --red-tint: #FDEBEC;
    --ink: #062B55;
    --ink-soft: #123E69;
    --slate: #55718E;
    --mist: #F3FAFF;
    --white: #FFFFFF;
    --line: #CFE8F6;
    --success: #1E8E5A;
    --success-tint: #E8F6EF;
    --amber: #B4790A;
    --amber-tint: #FBF1DF;
    --blue: #079CE5;
    --blue-tint: #E2F5FF;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(6,43,85,.08), 0 1px 0 rgba(6,43,85,.03);
    --shadow-md: 0 12px 32px rgba(6,43,85,.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--mist);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand-word {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px;
}

.mono, .metric-value, .code-tag, code {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Layout shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 248px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #062B55 0%, #041E3A 100%);
    color: #C9CCD3;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    overflow-y: auto;
    z-index: 20;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-logo { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background:#fff; }

.sidebar .brand .name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
    line-height: 1.15;
}
.sidebar .brand .sub { font-size: 10.5px; color: #8A8F9B; letter-spacing: .03em; }

.nav-group { padding: 14px 12px; }
.nav-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6B7180;
    padding: 10px 10px 6px;
}
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: #C9CCD3;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 2px;
}
.nav-link:hover { background: rgba(255,255,255,0.06); text-decoration: none; color: #fff; }
.nav-link.active { background: var(--red); color: #fff; }
.nav-link .ico { width: 16px; text-align: center; opacity: .9; }

.sidebar-footer {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: #7d8290;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left:248px; width:calc(100% - 248px); }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 19px; margin: 0; }
.topbar .crumbs { font-size: 12.5px; color: var(--slate); }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.user-chip .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--red-tint); color: var(--red-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-family: 'Space Grotesk', sans-serif; font-size: 12px;
}
.user-chip .role { color: var(--slate); font-size: 11.5px; }

.content { padding: 24px 28px 48px; max-width: 1400px; width: 100%; }

/* ---------------- Auth screens ---------------- */
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background-color: #eef9ff;
    background-image:
      linear-gradient(rgba(7,156,229,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(7,156,229,.07) 1px, transparent 1px),
      radial-gradient(circle at 75% 25%, rgba(7,156,229,.20), transparent 36%);
    background-size: 44px 44px, 44px 44px, auto;
    padding: 24px;
}
.auth-card {
    width: 100%; max-width: 400px;
    background: var(--white);
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(7,156,229,.22);
}
.auth-card .mark {
    width: 42px; height: 42px; background: var(--red); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Space Grotesk',sans-serif; font-weight: 700; font-size: 19px;
    margin-bottom: 16px;
}
.auth-card h1 { font-size: 21px; margin-bottom: 2px; }
.auth-card .tag { color: var(--slate); font-size: 12.5px; margin-bottom: 22px; }

/* ---------------- Forms ---------------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 5px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--white);
    color: var(--ink);
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.help-text { font-size: 11.5px; color: var(--slate); margin-top: 4px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); text-decoration: none; }
.btn-block { width: 100%; }
.btn-secondary { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--mist); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--slate); }
.btn-danger { background: #fff; color: var(--red); border-color: var(--red-tint); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.alert {
    padding: 11px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px;
    border: 1px solid;
}
.alert-error { background: var(--red-tint); border-color: #F3C6C6; color: var(--red-dark); }
.alert-success { background: var(--success-tint); border-color: #BEE6D2; color: var(--success); }
.alert-info { background: var(--blue-tint); border-color: #C9DAF3; color: var(--blue); }

/* ---------------- Cards / KPIs ---------------- */
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2, .form-row, .form-row-3 { grid-template-columns: 1fr; } }

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.card-header h3 { font-size: 15px; margin: 0; }

.kpi { padding: 18px 20px; }
.kpi .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin-bottom: 8px; }
.kpi .metric-value { font-size: 26px; font-weight: 700; }
.kpi .delta { font-size: 12px; margin-top: 4px; }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--red); }
.kpi .accent-bar { height: 3px; border-radius: 3px; background: var(--red); width: 40px; margin-bottom: 10px; }

/* ---------------- Tables ---------------- */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--slate); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--mist);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAFB; }
.table-wrap { overflow-x: auto; }

/* ---------------- Badges ---------------- */
.badge {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: capitalize;
}
.badge-grey { background: #EEF0F2; color: var(--slate); }
.badge-red { background: var(--red-tint); color: var(--red-dark); }
.badge-green { background: var(--success-tint); color: var(--success); }
.badge-amber { background: var(--amber-tint); color: var(--amber); }
.badge-blue { background: var(--blue-tint); color: var(--blue); }

/* ---------------- Progress ---------------- */
.progress { height: 7px; background: var(--line); border-radius: 6px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--red); }

/* ---------------- Kanban ---------------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px,1fr)); gap: 14px; overflow-x: auto; }
.kanban-col { background: var(--mist); border-radius: var(--radius); padding: 12px; min-height: 200px; }
.kanban-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); margin-bottom: 10px; display:flex; justify-content:space-between; }
.kanban-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 7px;
    padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--shadow); cursor: grab;
}
.kanban-card .title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.kanban-card .meta { display: flex; justify-content: space-between; align-items: center; }
.kanban-card.dragging { opacity: .4; }
.kanban-col.dragover { outline: 2px dashed var(--red); outline-offset: -4px; }

/* ---------------- Misc ---------------- */
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h2 { font-size: 17px; margin: 0; }
.text-slate { color: var(--slate); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--slate); }
.empty-state .ico { font-size: 34px; margin-bottom: 10px; }
.risk-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; max-width: 320px; }
.risk-cell { aspect-ratio: 1; border-radius: 4px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--slate); border-bottom: 2px solid transparent; cursor: pointer; }
.tab.active { color: var(--red); border-color: var(--red); }
.stat-row { display: flex; gap: 24px; flex-wrap: wrap; }
.cookie-banner{position:fixed;left:270px;right:22px;bottom:18px;z-index:100;background:#fff;border:1px solid var(--line);border-left:5px solid var(--red);box-shadow:var(--shadow-md);border-radius:10px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.cookie-banner span{color:var(--slate);font-size:12px}.cookie-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:780px){.sidebar{position:relative;width:100%;height:auto}.app-shell{display:block}.main{margin-left:0;width:100%}.cookie-banner{left:12px;right:12px;display:block}.cookie-actions{margin-top:12px}.topbar{padding:12px 16px}.content{padding:18px 14px}.nav-group{padding:8px 12px}}