/* =========================================================
   PIF - ONE GLOBAL CSS (clean, modern, consistent)
   ========================================================= */

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
    background:
            radial-gradient(900px 500px at 15% -10%, rgba(59,130,246,.35), transparent 60%),
            radial-gradient(800px 500px at 95% 0%, rgba(16,185,129,.20), transparent 60%),
            linear-gradient(180deg, #070b14, #0a1020 45%, #070b14);
    color: rgba(255,255,255,.92);
    line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid rgba(59,130,246,.55); outline-offset: 2px; border-radius: 12px; }

:root{
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.65);
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(255,255,255,.085);
    --border: rgba(255,255,255,.10);
    --border2: rgba(255,255,255,.15);

    --primary: #3b82f6;
    --primary2: #2563eb;
    --success: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;

    --r: 18px;
    --r2: 14px;
    --shadow: 0 18px 55px rgba(0,0,0,.55);
    --shadow2: 0 10px 24px rgba(0,0,0,.35);
}

/* Layout */
.container{
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

main.container{
    padding: 26px 0 44px;
    min-height: calc(100vh - 120px);
}

.section{ margin: 18px 0 28px; }

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

@media (max-width: 980px){
    .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
    .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; }
    .container{ width: min(1180px, calc(100% - 26px)); }
}

/* Topbar */
.topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(10,16,32,.92), rgba(7,11,20,.75));
    border-bottom: 1px solid var(--border);
}

.topbar-inner{
    height: 72px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
}

.brand{ display:flex; align-items:center; gap: 10px; }
.brand-link{ display:flex; align-items:center; gap: 10px; }

.brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 8px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.95));
    border: 1px solid rgba(59,130,246,.40);
    box-shadow: var(--shadow2);
    font-weight: 950;
    letter-spacing: .08em;
    color:#fff;
    font-size: 12px;
}

.brand-name{
    font-weight: 950;
    letter-spacing: -.4px;
    color: var(--text);
}

.nav{
    display:flex;
    align-items:center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content:flex-end;
}

.nav-link{
    padding: 9px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,.80);
    font-weight: 850;
    border: 1px solid transparent;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.nav-link:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.10);
    transform: translateY(-1px);
}
.nav-link.active{
    background: rgba(59,130,246,.16);
    border-color: rgba(59,130,246,.35);
    color:#fff;
}

/* Typography */
.page-title{
    margin: 0 0 8px;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 950;
    letter-spacing: -.6px;
    color: var(--text);
}
.page-subtitle{
    margin: 0 0 18px;
    color: var(--muted);
    font-weight: 650;
    max-width: 75ch;
}

h2{
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

p{ color: var(--muted); }

/* Panels / Cards */
.panel{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow);
}

.card{
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px;
    box-shadow: var(--shadow2);
}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-weight: 900;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,.28);
}
.btn:active{ transform: translateY(0px); }

.btn-primary{
    background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.95));
    border-color: rgba(59,130,246,.45);
    color:#fff;
}
.btn-primary:hover{
    border-color: rgba(59,130,246,.65);
    background: linear-gradient(180deg, rgba(59,130,246,1), rgba(29,78,216,1));
}
.btn-ghost{
    background: transparent;
    border-color: rgba(255,255,255,.18);
}
.btn-sm{ padding: 8px 11px; border-radius: 12px; font-size: 13px; }

/* Badges */
.badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.86);
}
.badge-admin{
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.12);
}

/* Forms */
form{ max-width: 560px; }
label{
    display:block;
    margin: 10px 0 6px;
    color: rgba(255,255,255,.78);
    font-weight: 850;
    font-size: 13px;
}
input, select, textarea{
    width: 100%;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(7,11,20,.55);
    color: var(--text);
    outline:none;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
textarea{ min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45); }
input:focus, select:focus, textarea:focus{
    border-color: rgba(59,130,246,.55);
    box-shadow: 0 0 0 4px rgba(59,130,246,.18);
    background: rgba(7,11,20,.75);
}

/* Tables (Admin-friendly) */
.table-wrap{
    overflow:auto;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.035);
    box-shadow: var(--shadow2);
}
table{
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
th, td{
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    vertical-align: top;
    color: rgba(255,255,255,.82);
}
th{
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(10,16,32,.92);
    color: rgba(255,255,255,.92);
    font-weight: 950;
}
tr:hover td{ background: rgba(255,255,255,.03); }

/* Messages */
.msg{
    border-radius: var(--r);
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.88);
    font-weight: 850;
    box-shadow: var(--shadow2);
    margin: 0 0 14px;
}
.msg-success{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.msg-error{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }
.msg-warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }

/* Index / Dashboard blocks */
.hero{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content:flex-end;
}

.kpi{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
}
.kpi .kpi-label{
    color: var(--muted);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.kpi .kpi-value{
    color: var(--text);
    font-weight: 950;
    font-size: 22px;
    letter-spacing: -.3px;
}

.quick-actions{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}
@media (max-width: 980px){ .quick-actions{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .quick-actions{ grid-template-columns: 1fr; } }

.quick-actions a{
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow2);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.quick-actions a:hover{
    transform: translateY(-2px);
    border-color: rgba(59,130,246,.35);
    background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(255,255,255,.04));
}
.quick-actions .qa-title{
    color: rgba(255,255,255,.92);
    font-weight: 950;
}
.quick-actions .qa-sub{
    margin-top: 4px;
    color: rgba(255,255,255,.62);
    font-weight: 750;
    font-size: 13px;
}

/* Footer */
.footer{
    border-top: 1px solid var(--border);
    background: rgba(7,11,20,.55);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,.62);
    text-align:center;
    padding: 18px 0;
}
.footer p{ margin: 0; font-weight: 800; }