/* ============================================================
   ComplianceVault — UI utility layer (Bootstrap 5-flavored)
   ------------------------------------------------------------
   Local replacement for `bootstrap.min.css` utilities so on-prem
   deployments don't need a CDN. Loaded BEFORE the inline app
   styles in index.php so component CSS (.btn, .card, …) wins.
   Covers margins, padding, flex, grid, gap, typography, colors,
   borders and a few polish improvements to the legacy UI.
   ============================================================ */

/* ----- Box model + base typography polish ----- */
*,*::before,*::after{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-break{word-wrap:break-word;word-break:break-word}

/* ----- Spacing scale (0..6 = 0, 4, 8, 16, 24, 32, 48px) ----- */
.m-0{margin:0!important}.m-1{margin:4px!important}.m-2{margin:8px!important}.m-3{margin:16px!important}.m-4{margin:24px!important}.m-5{margin:32px!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:4px!important}.mt-2{margin-top:8px!important}.mt-3{margin-top:16px!important}.mt-4{margin-top:24px!important}.mt-5{margin-top:32px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:4px!important}.mb-2{margin-bottom:8px!important}.mb-3{margin-bottom:16px!important}.mb-4{margin-bottom:24px!important}.mb-5{margin-bottom:32px!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:4px!important}.ms-2{margin-left:8px!important}.ms-3{margin-left:16px!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:4px!important}.me-2{margin-right:8px!important}.me-3{margin-right:16px!important}.me-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.my-2{margin-top:8px!important;margin-bottom:8px!important}.my-3{margin-top:16px!important;margin-bottom:16px!important}
.p-0{padding:0!important}.p-1{padding:4px!important}.p-2{padding:8px!important}.p-3{padding:16px!important}.p-4{padding:24px!important}.p-5{padding:32px!important}
.pt-2{padding-top:8px!important}.pt-3{padding-top:16px!important}.pt-4{padding-top:24px!important}
.pb-2{padding-bottom:8px!important}.pb-3{padding-bottom:16px!important}.pb-4{padding-bottom:24px!important}
.px-2{padding-left:8px!important;padding-right:8px!important}.px-3{padding-left:16px!important;padding-right:16px!important}.px-4{padding-left:24px!important;padding-right:24px!important}
.py-2{padding-top:8px!important;padding-bottom:8px!important}.py-3{padding-top:16px!important;padding-bottom:16px!important}.py-4{padding-top:24px!important;padding-bottom:24px!important}

/* ----- Display + flex ----- */
.d-none{display:none!important}.d-block{display:block!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}
.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-grid{display:grid!important}
.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}
.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-fill{flex:1 1 auto!important}
.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}
.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}
.align-items-center{align-items:center!important}.align-items-stretch{align-items:stretch!important}.align-items-baseline{align-items:baseline!important}
.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}
.gap-1{gap:4px!important}.gap-2{gap:8px!important}.gap-3{gap:16px!important}.gap-4{gap:24px!important}.gap-5{gap:32px!important}

/* ----- Grid (12-col) ----- */
.row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}
.row > [class^="col"]{padding-left:8px;padding-right:8px}
.col{flex:1 1 0;min-width:0}
.col-auto{flex:0 0 auto;width:auto}
.col-1{flex:0 0 8.333333%;max-width:8.333333%}
.col-2{flex:0 0 16.666666%;max-width:16.666666%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.333333%;max-width:33.333333%}
.col-5{flex:0 0 41.666666%;max-width:41.666666%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333333%;max-width:58.333333%}
.col-8{flex:0 0 66.666666%;max-width:66.666666%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.333333%;max-width:83.333333%}
.col-12{flex:0 0 100%;max-width:100%}
@media(min-width:768px){
    .col-md-3{flex:0 0 25%;max-width:25%}
    .col-md-4{flex:0 0 33.333333%;max-width:33.333333%}
    .col-md-6{flex:0 0 50%;max-width:50%}
    .col-md-8{flex:0 0 66.666666%;max-width:66.666666%}
    .col-md-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:1024px){
    .col-lg-3{flex:0 0 25%;max-width:25%}
    .col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}
    .col-lg-6{flex:0 0 50%;max-width:50%}
    .col-lg-8{flex:0 0 66.666666%;max-width:66.666666%}
}

/* ----- Typography ----- */
.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}
.fs-1{font-size:32px!important}.fs-2{font-size:24px!important}.fs-3{font-size:20px!important}.fs-4{font-size:18px!important}
.fs-5{font-size:16px!important}.fs-6{font-size:14px!important}.fs-7{font-size:13px!important}.fs-8{font-size:12px!important}
.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}
.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}
.lh-1{line-height:1!important}.lh-sm{line-height:1.3!important}.lh-base{line-height:1.5!important}

/* ----- Colors / state ----- */
.text-primary{color:var(--primary)!important}
.text-success{color:var(--success)!important}
.text-warning{color:var(--warning)!important}
.text-danger{color:var(--danger)!important}
.text-muted{color:var(--text-muted)!important}
.text-secondary{color:var(--text-secondary)!important}
.bg-light{background:var(--surface-alt)!important}
.bg-white{background:var(--surface)!important}
.bg-primary-soft{background:var(--primary-bg)!important;color:var(--primary)!important}

/* ----- Borders + radius ----- */
.border{border:1px solid var(--border)!important}.border-0{border:0!important}
.border-bottom{border-bottom:1px solid var(--border)!important}.border-top{border-top:1px solid var(--border)!important}
.rounded{border-radius:var(--radius)!important}.rounded-lg{border-radius:var(--radius-lg)!important}.rounded-pill{border-radius:999px!important}
.shadow-sm{box-shadow:var(--shadow)!important}.shadow{box-shadow:var(--shadow-md)!important}

/* ----- Width / height ----- */
.w-100{width:100%!important}.w-75{width:75%!important}.w-50{width:50%!important}.w-25{width:25%!important}.w-auto{width:auto!important}
.h-100{height:100%!important}.mw-100{max-width:100%!important}

/* ----- Position ----- */
.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:sticky!important}

/* ============================================================
   POLISH — small improvements on top of the existing custom CSS
   ============================================================ */

/* Slightly tighter, more refined buttons */
.btn{font-weight:500;letter-spacing:0.01em;border-radius:var(--radius);transition:transform .04s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,0.25)}
.btn-primary{box-shadow:0 1px 0 rgba(0,0,0,0.04)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* Form controls — bigger hit area, gentler border */
.form-group input,.form-group select,.form-group textarea{transition:border-color .15s ease,box-shadow .15s ease}
.form-group input:hover:not(:focus),.form-group select:hover:not(:focus){border-color:#cbd5e1}

/* Cards lift on hover */
.card{transition:box-shadow .15s ease,border-color .15s ease}
.card:hover{box-shadow:var(--shadow-md)}

/* Table refinements */
table.cv-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.cv-table th{position:sticky;top:0;background:var(--surface-alt);font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:0.04em;padding:10px 14px;border-bottom:1px solid var(--border)}
table.cv-table td{padding:10px 14px;border-bottom:1px solid var(--border-light)}
table.cv-table tr:hover td{background:var(--primary-bg)}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;line-height:1.6}
.pill-success{background:#dcfce7;color:#15803d}
.pill-warning{background:#fef3c7;color:#a16207}
.pill-danger{background:#fee2e2;color:#b91c1c}
.pill-info{background:#dbeafe;color:#1d4ed8}
.pill-muted{background:#e2e8f0;color:#475569}

/* Empty state */
.cv-empty{padding:48px 24px;text-align:center;color:var(--text-muted)}
.cv-empty svg{width:48px;height:48px;opacity:0.4;margin-bottom:12px}
.cv-empty h4{font-size:15px;color:var(--text-secondary);margin-bottom:6px;font-weight:600}
.cv-empty p{font-size:13px;margin-bottom:16px}

/* Toast polish — slide-in animation */
.toast{animation:cvSlideIn .25s cubic-bezier(0.16,1,0.3,1)}
@keyframes cvSlideIn{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Login page — modernize */
.login-wrap{position:relative;overflow:hidden}
.login-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(37,99,235,0.18),transparent 45%),radial-gradient(circle at 80% 90%,rgba(14,165,233,0.15),transparent 50%);pointer-events:none}
.login-right{position:relative;z-index:2}
.login-left h1{letter-spacing:-0.02em;margin-bottom:12px}
.login-left p{line-height:1.65}

/* Sidebar polish */
.sidebar{background:linear-gradient(180deg,#0f172a 0%,#0b1224 100%)}
.sidebar-header{padding:18px 16px}
.sidebar-nav .nav-section{font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;opacity:0.5;padding:14px 16px 6px}
.sidebar-nav .nav-item{font-size:13px;padding:9px 14px;margin:1px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--sidebar-text);transition:background-color .15s ease,color .15s ease}
.sidebar-nav .nav-item svg{width:16px;height:16px;flex-shrink:0}
.sidebar-nav .nav-item:hover{background:var(--sidebar-hover);color:#fff}
.sidebar-nav .nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:500}

/* Content header */
.content-header{padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px}
.content-header h1{font-size:20px;font-weight:600;letter-spacing:-0.01em}

/* Stat cards on dashboard */
.cv-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;display:flex;align-items:center;gap:16px;transition:transform .12s ease,box-shadow .15s ease}
.cv-stat:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cv-stat .ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--primary-bg);color:var(--primary)}
.cv-stat .ico svg{width:22px;height:22px}
.cv-stat .lbl{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;font-weight:500}
.cv-stat .val{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-0.02em}

/* Scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.25);border-radius:10px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.45)}

/* Focus ring everywhere for accessibility */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:none}
.btn:focus-visible{outline-offset:3px}

/* Dark mode tweaks for new classes */
body.dark .bg-light{background:#1e293b!important}
body.dark .pill-success{background:rgba(34,197,94,0.18);color:#86efac}
body.dark .pill-warning{background:rgba(234,179,8,0.18);color:#fde047}
body.dark .pill-danger{background:rgba(239,68,68,0.18);color:#fca5a5}
body.dark .pill-info{background:rgba(59,130,246,0.18);color:#93c5fd}
body.dark .pill-muted{background:rgba(100,116,139,0.18);color:#cbd5e1}
body.dark table.cv-table th{background:#1e293b}
body.dark .cv-stat{background:var(--surface)}

/* Print-friendly tweaks */
@media print{
    .sidebar,.content-header,.btn,.toast-container,.modal-overlay,.nav-badge,#notifBadge{display:none!important}
    body,.app-wrap,.main-content,.content-body{background:#fff!important;color:#000!important}
    .cv-stat,.card,table{box-shadow:none!important;border:1px solid #cbd5e1!important}
}