/* ==========================================================
   OTOCHECK / AdzDIAG-style Theme
   Grayscale design system: app-bar, nav, cards, buttons, inputs
   ========================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root{
    --oc-bg-from:#f9fafb;
    --oc-bg-to:#c8ccd3;
    --oc-card:#ffffff;
    --oc-card-border:#e5e7eb;
    --oc-card-soft:#f3f4f6;
    --oc-shadow-sm:0 1px 2px rgba(15,23,42,.05);
    --oc-shadow:0 10px 30px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --oc-shadow-lg:0 22px 50px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
    --oc-text:#1f2937;
    --oc-text-dim:#6b7280;
    --oc-text-muted:#9ca3af;
    --oc-heading:#111827;
    --oc-accent:#374151;
    --oc-accent-dark:#1f2937;
    --oc-accent-mid:#4b5563;
    --oc-success:#15803d;
    --oc-success-bg:#ecfdf5;
    --oc-danger:#b91c1c;
    --oc-danger-bg:#fef2f2;
    --oc-warn:#b45309;
    --oc-radius-sm:10px;
    --oc-radius:14px;
    --oc-radius-lg:18px;
    --oc-radius-xl:22px;
    --oc-input-bg:#f3f4f6;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{
    margin:0; padding:0;
    background:linear-gradient(0deg, var(--oc-bg-to), var(--oc-bg-from)) !important;
    background-attachment:fixed !important;
    color:var(--oc-text) !important;
    font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
}
img{max-width:100%; height:auto;}
hr{border:0; border-top:1px solid var(--oc-card-border); margin:18px 0;}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{
    color:var(--oc-heading); font-weight:700;
    letter-spacing:-0.01em; margin:0 0 8px;
}
h1{font-size:28px; line-height:1.2;}
h2{font-size:22px; line-height:1.3;}
h3{font-size:18px; line-height:1.4;}
.oc-display{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-weight:800; letter-spacing:-0.02em; color:var(--oc-heading);
}
.oc-eyebrow{
    color:var(--oc-text-dim); font-size:11px;
    letter-spacing:0.18em; text-transform:uppercase;
    font-weight:700; margin-bottom:6px; display:block;
}
.oc-subtle{color:var(--oc-text-dim); font-size:14px;}
a{color:var(--oc-accent); text-decoration:none;}
a:hover{color:var(--oc-accent-dark);}

/* ---------- App bar ---------- */
.oc-appbar{
    background:rgba(255,255,255,0.92);
    border-bottom:1px solid var(--oc-card-border);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    padding:12px 28px;
    display:flex; align-items:center; gap:20px;
    position:sticky; top:0; z-index:50;
}
.oc-appbar-brand{display:flex; align-items:center; gap:10px; color:var(--oc-heading);}
.oc-brand-logo{
    width:54px; height:54px; border-radius:10px;
    background:linear-gradient(135deg, #2a2e36, #0f1115);
    color:#e5e7eb;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-weight:800;
    line-height:1; padding:6px;
    box-shadow:0 8px 18px rgba(15,23,42,.25);
    position:relative; overflow:hidden;
    flex-direction:column; gap:2px;
}
.oc-brand-logo::before{
    content:""; position:absolute; inset:0;
    background-image:
        radial-gradient(circle at 12% 30%, rgba(255,255,255,.18) 1px, transparent 1.5px),
        radial-gradient(circle at 85% 70%, rgba(255,255,255,.12) 1px, transparent 1.5px),
        radial-gradient(circle at 55% 20%, rgba(255,255,255,.12) 1px, transparent 1.5px),
        radial-gradient(circle at 25% 80%, rgba(255,255,255,.12) 1px, transparent 1.5px);
    opacity:.7;
}
.oc-brand-logo span{position:relative; font-size:13px; letter-spacing:0.04em;}
.oc-brand-name{font-family:'JetBrains Mono', monospace; font-weight:800; font-size:18px; letter-spacing:0.06em; color:var(--oc-heading);}
.oc-appbar-brand-blank{display:inline-block; width:40px; height:40px;}
.oc-brand-emboss{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-weight:800; font-size:36px;
    letter-spacing:0.14em;
    line-height:1;
    user-select:none;
    color:#94a3b8;
    text-shadow:
        0 1px 0 #ffffff,
        0 2px 0 #f1f5f9,
        0 3px 0 #e2e8f0,
        0 4px 0 #cbd5e1,
        0 -1px 0 #475569,
        0 -2px 0 #334155,
        2px 6px 10px rgba(15,23,42,0.35),
        0 0 22px rgba(148,163,184,0.18);
}
.oc-brand-emboss-year{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-weight:800; font-size:22px;
    vertical-align:8px;
    letter-spacing:0.10em; margin-left:8px;
    color:#fbbf24;
    text-shadow:
        0 1px 0 #fde68a,
        0 2px 0 #f59e0b,
        0 -1px 0 #7c2d12,
        2px 4px 8px rgba(180,83,9,0.35);
}
.oc-appbar-spacer{flex:1;}
.oc-appbar-user{display:flex; align-items:center; gap:12px;}
.oc-avatar{
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(135deg, #9ca3af, #4b5563);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px;
    box-shadow:var(--oc-shadow-sm);
}
.oc-appbar-user-info{line-height:1.35; font-size:12.5px;}
.oc-appbar-user-name{color:var(--oc-heading); font-weight:700; font-size:14px;}
.oc-appbar-user-meta{color:var(--oc-text-dim); font-size:12px;}
.oc-appbar-user-line{display:flex; gap:6px; align-items:baseline; white-space:nowrap;}
.oc-appbar-user-label{color:var(--oc-text-dim); font-weight:500;}
.oc-appbar-user-value{color:var(--oc-heading); font-weight:700; font-family:'JetBrains Mono', ui-monospace, monospace;}
.oc-license-ok{color:var(--oc-success); font-weight:600;}
.oc-license-warn{color:var(--oc-warn); font-weight:600;}
.oc-license-bad{color:var(--oc-danger); font-weight:600;}

/* Appbar right-side action stack (Logout above, Utility dropdown below) */
.oc-appbar-user-actions{display:flex; flex-direction:column; gap:6px; align-items:stretch;}
.oc-appbar-action{padding:6px 12px !important; font-size:11px !important; letter-spacing:0.05em; justify-content:center;}
.oc-appbar-utility{position:relative;}
.oc-appbar-utility-toggle{width:100%; cursor:pointer; background:var(--oc-card-soft); border:1px solid var(--oc-card-border); color:var(--oc-text); border-radius:var(--oc-radius-sm); display:inline-flex; align-items:center; gap:6px;}
.oc-appbar-utility-toggle:hover{background:#fff;}
.oc-appbar-utility-menu{
    position:absolute; top:calc(100% + 6px); right:0;
    background:#fff; border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius); box-shadow:var(--oc-shadow-lg);
    padding:6px; min-width:230px;
    display:none; z-index:80;
}
.oc-appbar-utility:hover .oc-appbar-utility-menu,
.oc-appbar-utility:focus-within .oc-appbar-utility-menu{display:block;}

/* ---------- Nav menu (compact) ---------- */
.oc-nav{
    display:flex; justify-content:center; flex-wrap:wrap;
    column-gap:3px; row-gap:2px;
    padding:4px 10px;
    background:rgba(255,255,255,0.7);
    border-bottom:1px solid var(--oc-card-border);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    position:sticky; top:78px; z-index:40;
}
.oc-nav-item{
    padding:7px 12px; border-radius:8px;
    color:var(--oc-text-dim); font-weight:600; font-size:13px;
    text-decoration:none; white-space:nowrap;
    transition:background .15s, color .15s;
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid transparent;
}
.oc-nav-item svg{width:14px; height:14px;}
.oc-nav-item:hover{background:rgba(31,41,55,0.06); color:var(--oc-heading);}
.oc-nav-item.is-active{background:var(--oc-accent-dark); color:#f9fafb; border-color:var(--oc-accent-dark);}
.oc-nav-item.is-active:hover{background:var(--oc-heading); color:#fff;}
.oc-nav-dropdown{position:relative;}
.oc-nav-dropdown-caret{margin-left:2px; font-size:10px;}
.oc-nav-dropdown-menu{
    position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
    background:#fff; border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius); box-shadow:var(--oc-shadow-lg);
    padding:8px; min-width:230px;
    display:none; z-index:60;
}
.oc-nav-dropdown:hover .oc-nav-dropdown-menu,
.oc-nav-dropdown:focus-within .oc-nav-dropdown-menu{display:block;}
.oc-nav-dropdown-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:8px;
    color:var(--oc-text); text-decoration:none;
    font-size:13px; font-weight:500;
}
.oc-nav-dropdown-item svg{width:16px; height:16px; color:var(--oc-text-dim); flex-shrink:0;}
.oc-nav-dropdown-item:hover{background:var(--oc-card-soft); color:var(--oc-heading);}

/* ---------- Page wrapper ---------- */
.oc-page{
    max-width:1480px; margin:0 auto;
    padding:28px 24px 40px; width:100%;
}
.oc-page.is-wide{max-width:none; padding:28px 32px 40px;}
.oc-page.is-narrow{max-width:980px;}

/* ---------- Card ---------- */
.oc-card{
    background:rgba(255,255,255,0.95);
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius);
    padding:20px;
    box-shadow:var(--oc-shadow);
    margin-bottom:18px;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.oc-card-flat{box-shadow:none;}
.oc-card h2,.oc-card h3{margin-top:0;}

.oc-page-head{display:flex; align-items:center; gap:22px; padding:22px 28px;}
.oc-page-head-text{flex:1; min-width:0;}
.oc-page-head-icon{
    flex-shrink:0; width:84px; height:84px;
    border-radius:var(--oc-radius-lg);
    background:linear-gradient(135deg, var(--oc-accent), var(--oc-accent-dark));
    color:#f3f4f6;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 28px rgba(31,41,55,.25);
}
.oc-page-head-icon svg{width:46px; height:46px;}

/* ---------- Grids ---------- */
.oc-grid-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:18px;}
.oc-grid-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:18px;}
.oc-grid-4{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-bottom:18px;}
.oc-grid-asym{display:grid; grid-template-columns:0.85fr 1.15fr 1.15fr; gap:16px; margin-bottom:18px;}

/* ---------- Selector heads ---------- */
.oc-selector{padding:16px;}
.oc-selector-head{
    display:flex; align-items:center; gap:10px;
    color:var(--oc-accent); font-weight:700; font-size:12px;
    letter-spacing:0.10em; text-transform:uppercase; margin-bottom:12px;
}
.oc-step-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:var(--oc-radius-sm);
    background:linear-gradient(135deg, var(--oc-card-soft), var(--oc-card-border));
    color:var(--oc-accent); border:1px solid var(--oc-card-border);
}
.oc-step-icon svg{width:16px; height:16px;}

/* ---------- Listbox ---------- */
.oc-listbox{
    width:100%; padding:6px;
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius-sm);
    background:var(--oc-card-soft);
    color:var(--oc-text);
    font:13px/1.5 'Inter', system-ui, sans-serif;
    outline:none; min-height:380px;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.oc-listbox:focus{
    border-color:var(--oc-text-dim); background:#fff;
    box-shadow:0 0 0 3px rgba(107,114,128,.16);
}
.oc-listbox option{padding:8px 12px; margin:2px 0; border-radius:8px; cursor:pointer; color:var(--oc-text);}
.oc-listbox option:checked{
    background:linear-gradient(90deg, var(--oc-accent-dark), var(--oc-accent-mid)) !important;
    color:#fff !important; font-weight:600 !important;
}
.oc-listbox::-webkit-scrollbar{width:10px;}
.oc-listbox::-webkit-scrollbar-track{background:var(--oc-card-soft); border-radius:12px;}
.oc-listbox::-webkit-scrollbar-thumb{background:#c1c5cd; border-radius:12px; border:2px solid var(--oc-card-soft);}
.oc-listbox::-webkit-scrollbar-thumb:hover{background:var(--oc-text-muted);}

/* ---------- Form inputs ---------- */
.oc-label{
    flex-shrink:0; width:130px;
    color:var(--oc-accent); font-weight:700; font-size:12px;
    letter-spacing:0.06em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:8px;
}
.oc-label svg{width:16px; height:16px; color:var(--oc-text-dim); flex-shrink:0;}
.oc-input, .oc-select, textarea.oc-input{
    padding:10px 14px;
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius-sm);
    background:var(--oc-input-bg);
    color:var(--oc-text);
    font:14px/1.4 'Inter', system-ui, sans-serif;
    outline:none; width:100%;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.oc-input-mono{font-family:'JetBrains Mono', ui-monospace, monospace;}
.oc-input:focus, .oc-select:focus, textarea.oc-input:focus{
    border-color:var(--oc-text-dim); background:#fff;
    box-shadow:0 0 0 3px rgba(107,114,128,.16);
}
.oc-file{
    width:100%; padding:11px 14px;
    border:1px dashed var(--oc-card-border);
    border-radius:var(--oc-radius-sm);
    background:var(--oc-input-bg); color:var(--oc-accent);
    cursor:pointer; font:13px 'Inter', sans-serif;
}
.oc-file:disabled{opacity:0.5; cursor:not-allowed;}
.oc-checkbox{display:inline-flex; align-items:center; gap:8px; color:var(--oc-text); font-size:13px;}

/* ---------- Rows ---------- */
.oc-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.oc-row-actions{justify-content:flex-end; padding-top:6px;}
.oc-stack{display:flex; flex-direction:column; gap:14px;}

/* ---------- Buttons ---------- */
.oc-btn{
    padding:12px 22px; border:none;
    border-radius:var(--oc-radius-sm);
    font:700 13px/1 'Inter', sans-serif;
    letter-spacing:0.06em; text-transform:uppercase;
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .08s, box-shadow .15s, background .15s, color .15s;
    text-decoration:none;
}
.oc-btn:disabled{opacity:0.5; cursor:not-allowed;}
.oc-btn-primary{
    background:linear-gradient(135deg, var(--oc-accent-dark), var(--oc-accent-mid));
    color:#f9fafb; box-shadow:0 6px 16px rgba(31,41,55,.25);
}
.oc-btn-primary:hover:not(:disabled){
    background:linear-gradient(135deg, var(--oc-heading), var(--oc-accent));
    transform:translateY(-1px); box-shadow:0 10px 22px rgba(17,24,39,.32);
    color:#fff;
}
.oc-btn-primary:active:not(:disabled){transform:translateY(0); box-shadow:0 4px 10px rgba(17,24,39,.25);}
.oc-btn-ghost{background:var(--oc-card-soft); color:var(--oc-text); border:1px solid var(--oc-card-border);}
.oc-btn-ghost:hover:not(:disabled){background:#fff;}
.oc-btn-block{width:100%;}

/* ---------- Messages ---------- */
.oc-msg{padding:12px 16px; border-radius:var(--oc-radius-sm); font-weight:600; margin-bottom:12px;}
.oc-msg-error{background:var(--oc-danger-bg); border:1px solid #fecaca; color:var(--oc-danger);}
.oc-msg-ok{background:var(--oc-success-bg); border:1px solid #a7f3d0; color:var(--oc-success);}
.oc-msg-warn{background:#fffbeb; border:1px solid #fde68a; color:var(--oc-warn);}
.oc-msg:empty{display:none;}
.oc-mcu-msg{color:var(--oc-success); font-weight:700; font-size:12px; letter-spacing:0.04em;}

/* ---------- Chip icon ---------- */
.oc-chip-icon{
    flex-shrink:0; width:48px; height:48px;
    border-radius:var(--oc-radius-sm);
    background:linear-gradient(135deg, var(--oc-card-border), #c5cad1);
    color:var(--oc-accent); border:1px solid var(--oc-card-border);
    display:flex; align-items:center; justify-content:center;
}
.oc-chip-icon svg{width:26px; height:26px;}

/* ---------- Progress ---------- */
.oc-progress{
    border:1px solid var(--oc-card-border) !important;
    background:var(--oc-card-soft) !important;
    border-radius:var(--oc-radius-sm) !important;
    padding:4px !important;
    margin:4px 0 14px !important;
    text-align:center !important;
}
.oc-progress-bar{
    background:linear-gradient(90deg, var(--oc-accent-dark), var(--oc-text-dim)) !important;
    height:18px !important;
    color:#ffffff !important;
    font-weight:700 !important; font-size:12px;
    border-radius:8px !important;
    width:0%;
    transition:width .3s;
}

/* ---------- Spinner ---------- */
.oc-spinner{
    width:22px; height:22px;
    border:3px solid var(--oc-card-border); border-top:3px solid var(--oc-accent);
    border-radius:50%;
    animation:oc-spin .8s linear infinite;
    display:inline-block; vertical-align:middle; margin-right:8px;
}
@keyframes oc-spin{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}

/* ---------- Selected info ---------- */
.oc-selected{display:flex; align-items:center; gap:16px; padding:14px 18px;}
#selected_immo{
    font:600 14px/1.4 'Inter', system-ui, sans-serif !important;
    color:var(--oc-text) !important; text-decoration:none !important;
    flex:1; min-width:0;
}

/* ---------- Footer ---------- */
.oc-footer{
    margin-top:40px; padding:22px 28px;
    background:rgba(255,255,255,0.9);
    border-top:1px solid var(--oc-card-border);
    color:var(--oc-text-dim); font-size:13px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    backdrop-filter:blur(10px);
}
.oc-footer-spacer{flex:1;}
.oc-footer a{color:var(--oc-text-dim); margin:0 8px;}
.oc-footer a:hover{color:var(--oc-heading);}
.oc-socials{display:flex; gap:6px;}
.oc-socials a{
    width:32px; height:32px; border-radius:8px;
    background:var(--oc-card-soft); border:1px solid var(--oc-card-border);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--oc-text-dim); margin:0;
}
.oc-socials a:hover{background:#fff; color:var(--oc-heading);}

/* ---------- Login ---------- */
.oc-login-shell{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:40px 16px; position:relative;
}
.oc-login-decor{
    position:fixed; inset:0;
    color:rgba(31,41,55,.12);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:12px; line-height:1.65;
    overflow:hidden; user-select:none;
    z-index:0; padding:14px;
    white-space:pre; pointer-events:none;
}
.oc-login-card{
    position:relative; z-index:1;
    width:380px; max-width:100%;
    background:#fff;
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius-lg);
    box-shadow:var(--oc-shadow-lg);
    padding:28px 28px 24px;
}
.oc-login-title{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-weight:800; font-size:22px;
    letter-spacing:0.08em;
    margin:0 0 18px; color:var(--oc-heading);
}
.oc-login-field{margin-bottom:14px;}
.oc-login-field label{
    display:block; font-size:11px;
    letter-spacing:0.12em; text-transform:uppercase;
    font-weight:700; color:var(--oc-text-dim);
    margin-bottom:6px;
}
.oc-login-field input[type="text"],
.oc-login-field input[type="password"]{
    width:100%; padding:11px 14px;
    border:1px solid var(--oc-card-border);
    background:var(--oc-input-bg);
    border-radius:var(--oc-radius-sm);
    color:var(--oc-text);
    font:14px 'Inter', sans-serif; outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.oc-login-field input:focus{
    border-color:var(--oc-text-dim); background:#fff;
    box-shadow:0 0 0 3px rgba(107,114,128,.15);
}
.oc-login-link{
    text-align:center; margin-top:14px;
    color:var(--oc-text-dim); font-size:13px;
}
.oc-login-link a{color:var(--oc-heading); font-weight:700; letter-spacing:0.06em;}
.oc-login-error{
    background:var(--oc-danger-bg); border:1px solid #fecaca;
    color:var(--oc-danger); font-weight:600;
    padding:10px 12px; border-radius:var(--oc-radius-sm);
    margin-bottom:14px; font-size:13px;
}

/* ---------- Utility ---------- */
.oc-hidden{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important;}
.oc-mt-0{margin-top:0 !important;}
.oc-mt-2{margin-top:8px !important;}
.oc-mt-3{margin-top:14px !important;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
    .oc-grid-2, .oc-grid-3, .oc-grid-4, .oc-grid-asym{grid-template-columns:1fr;}
    .oc-listbox{min-height:240px;}
    .oc-page-head{flex-direction:column; text-align:center;}
    .oc-appbar{padding:10px 14px; flex-wrap:wrap;}
    .oc-nav{flex-wrap:wrap; padding:6px;}
    .oc-nav-item{padding:8px 12px; font-size:13px;}
}

/* ---------- Override legacy stylesheets ---------- */
body{background-color:transparent !important;}
.container, .row{width:auto !important; max-width:none !important;}

/* Kill the legacy "PRO VERSION 2026" header background image and replace
   with a soft gray gradient (light → mid gray, never goes to pure black). */
header:not(.oc-appbar):not(.oc-page-head):not(.oc-tool-head){
    background: linear-gradient(180deg, #f3f4f6 0%, #d1d5db 55%, #9ca3af 100%) !important;
    background-image: linear-gradient(180deg, #f3f4f6 0%, #d1d5db 55%, #9ca3af 100%) !important;
    background-color: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* ==========================================================
   Universal form theme - applies to legacy tool pages
   (Immo_Cleaner.php uses .oc-listbox / .oc-input / .oc-btn
   classes which take precedence over these rules.)
   ========================================================== */

/* Listbox / select[size] */
select[size]:not(.oc-listbox){
    width:100% !important;
    padding:6px !important;
    border:1px solid var(--oc-card-border) !important;
    border-radius:var(--oc-radius-sm) !important;
    background:var(--oc-card-soft) !important;
    color:var(--oc-text) !important;
    font:13px/1.5 'Inter', system-ui, sans-serif !important;
    outline:none !important;
    min-height:340px !important;
    box-shadow:var(--oc-shadow-sm) !important;
    transition:border-color .15s, box-shadow .15s, background .15s !important;
}
select[size]:not(.oc-listbox):focus{
    border-color:var(--oc-text-dim) !important;
    background:#fff !important;
    box-shadow:0 0 0 3px rgba(107,114,128,.16) !important;
}
select[size]:not(.oc-listbox) option{
    padding:8px 12px !important;
    margin:2px 0 !important;
    border-radius:8px !important;
    cursor:pointer !important;
    color:var(--oc-text) !important;
}
select[size]:not(.oc-listbox) option:checked{
    background:linear-gradient(90deg, var(--oc-accent-dark), var(--oc-accent-mid)) !important;
    color:#fff !important; font-weight:600 !important;
}
select[size]:not(.oc-listbox)::-webkit-scrollbar{width:10px;}
select[size]:not(.oc-listbox)::-webkit-scrollbar-track{background:var(--oc-card-soft); border-radius:12px;}
select[size]:not(.oc-listbox)::-webkit-scrollbar-thumb{background:#c1c5cd; border-radius:12px; border:2px solid var(--oc-card-soft);}
select[size]:not(.oc-listbox)::-webkit-scrollbar-thumb:hover{background:var(--oc-text-muted);}

/* Column labels above listboxes (legacy <center>Brands</center>) */
.col-md-2 > center, .col-md-5 > center, .col-md-3 > center, .col-md-4 > center{
    color:var(--oc-accent) !important;
    font:700 11px/1.4 'Inter', sans-serif !important;
    letter-spacing:0.10em !important;
    text-transform:uppercase !important;
    padding:0 0 8px !important;
    display:block !important;
}

/* Page title (legacy <h1> inside .container .row) */
.container .row > h1{
    font:800 24px/1.2 'JetBrains Mono', ui-monospace, monospace !important;
    letter-spacing:0.04em !important;
    color:var(--oc-heading) !important;
    text-transform:uppercase !important;
    margin:14px 0 18px !important;
}

/* "Select dump" / similar labels in upload rows */
#upload label, label[for="dump2"], label[for="dump"]{
    color:var(--oc-accent) !important;
    font:700 12px/1.4 'Inter', sans-serif !important;
    letter-spacing:0.06em !important;
    text-transform:uppercase !important;
}

/* File input (legacy tool pages) */
input[type="file"]:not(.oc-file){
    padding:9px 12px;
    border:1px dashed var(--oc-card-border);
    border-radius:var(--oc-radius-sm);
    background:var(--oc-input-bg);
    color:var(--oc-accent);
    cursor:pointer;
    font:13px 'Inter', sans-serif;
}
input[type="file"]:not(.oc-file):disabled{opacity:0.5; cursor:not-allowed;}

/* Submit / button (legacy) */
input[type="submit"]:not(.oc-btn):not(.oc-btn-primary){
    padding:11px 24px;
    border:none;
    border-radius:var(--oc-radius-sm);
    background:linear-gradient(135deg, var(--oc-accent-dark), var(--oc-accent-mid));
    color:#f9fafb;
    font:700 13px/1 'Inter', sans-serif;
    letter-spacing:0.06em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(31,41,55,.25);
    transition:transform .08s, box-shadow .15s, background .15s;
}
input[type="submit"]:not(.oc-btn):not(.oc-btn-primary):hover:not(:disabled){
    background:linear-gradient(135deg, var(--oc-heading), var(--oc-accent));
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(17,24,39,.32);
}
input[type="submit"]:not(.oc-btn):not(.oc-btn-primary):disabled{opacity:0.5; cursor:not-allowed;}

/* Text inputs (legacy) */
input[type="text"]:not(.oc-input):not(.oc-listbox):not([id="mcu_id"]),
input[type="password"]:not(.oc-input){
    padding:9px 12px;
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius-sm);
    background:#ffffff;
    color:var(--oc-text);
    font:14px/1.4 'Inter', system-ui, sans-serif;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}
input[type="text"]:not(.oc-input):not(.oc-listbox):focus,
input[type="password"]:not(.oc-input):focus{
    border-color:var(--oc-text-dim);
    box-shadow:0 0 0 3px rgba(107,114,128,.16);
}

/* MCU ID input (legacy pages) - monospace */
input[id="mcu_id"]{
    padding:9px 12px !important;
    border:1px solid var(--oc-card-border) !important;
    border-radius:var(--oc-radius-sm) !important;
    background:#ffffff !important;
    color:var(--oc-text) !important;
    font:14px/1.4 'JetBrains Mono', ui-monospace, monospace !important;
    width:400px !important; max-width:100% !important;
    outline:none !important;
}
input[id="mcu_id"]:focus{
    border-color:var(--oc-text-dim) !important;
    box-shadow:0 0 0 3px rgba(107,114,128,.16) !important;
}

/* Progress bar (legacy ids #progress-div / #progress-bar) */
#progress-div{
    border:1px solid var(--oc-card-border) !important;
    background:var(--oc-card-soft) !important;
    padding:4px !important;
    margin:14px 0 !important;
    border-radius:var(--oc-radius-sm) !important;
    text-align:center !important;
}
#progress-bar{
    background:linear-gradient(90deg, var(--oc-accent-dark), var(--oc-text-dim)) !important;
    height:18px !important; color:#ffffff !important;
    font:700 12px/18px 'Inter', sans-serif !important;
    border-radius:8px !important;
    -webkit-transition:width .3s; transition:width .3s;
}
#targetLayer{
    width:100%; text-align:center !important;
    color:var(--oc-heading) !important;
    font:700 14px/1.4 'Inter', sans-serif !important;
    padding:6px 0 !important;
}

/* Selected immo line on legacy pages */
#selected_immo, #selected_old_immo, #selected_airbag, #selected_dump{
    font:600 14px/1.4 'Inter', system-ui, sans-serif !important;
    color:var(--oc-heading) !important;
    text-decoration:none !important;
    padding:10px 14px !important;
    margin:12px 0 !important;
    background:rgba(255,255,255,0.85) !important;
    border:1px solid var(--oc-card-border) !important;
    border-radius:var(--oc-radius-sm) !important;
    display:block !important;
}

/* MCU ID container box on legacy pages */
#mcudiv:not(.oc-row){
    padding:10px 14px;
    background:rgba(255,255,255,0.85);
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius-sm);
    margin:10px 0;
}
#mcudiv label[for="mcu_id"]{
    color:var(--oc-accent);
    font:700 12px/1.4 'Inter', sans-serif;
    letter-spacing:0.06em; text-transform:uppercase;
    margin-right:10px;
}

/* "Select dump" colored hint and demo message in legacy pages */
#upload{color:var(--oc-text) !important; font:14px 'Inter', sans-serif !important;}

/* Make the legacy outer .row container play nicely with the new appbar */
.container > .row{
    max-width:1480px;
    margin:14px auto 32px !important;
    padding:0 24px;
}

/* Soften Bootstrap col-md gutters so columns breathe more */
.container .row > .col-md-2,
.container .row > .col-md-3,
.container .row > .col-md-4,
.container .row > .col-md-5{
    padding:6px 8px;
}

/* ==========================================================
   #cssmenu (legacy Codrops icon menu) - gray theme overrides
   ========================================================== */
#cssmenu{
    background:transparent !important;
    padding:8px 0 16px !important;
}
#cssmenu > ul{
    list-style:none !important;
    padding:0 !important; margin:0 !important;
    display:flex !important; flex-wrap:wrap !important;
    justify-content:center !important; gap:10px !important;
    max-width:1480px; margin:0 auto !important;
}
#cssmenu > ul > li{
    background:rgba(255,255,255,0.94) !important;
    border:1px solid var(--oc-card-border) !important;
    border-radius:10px !important;
    box-shadow:var(--oc-shadow-sm) !important;
    overflow:visible !important;
    transition:transform .12s, box-shadow .15s, border-color .15s !important;
    flex:0 0 auto !important;
    min-width:96px;
    position:relative;
}
#cssmenu > ul > li:hover{
    transform:translateY(-2px) !important;
    border-color:var(--oc-text-dim) !important;
    box-shadow:0 14px 28px rgba(15,23,42,.10) !important;
}
#cssmenu > ul > li a{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    height:auto !important;
    min-height:56px;
    padding:7px 8px !important;
    color:var(--oc-text) !important;
    text-decoration:none !important;
    background:transparent !important;
    border:none !important;
    border-radius:10px !important;
    font:600 10px/1.25 'Inter', sans-serif !important;
    letter-spacing:0.03em;
    text-transform:uppercase;
    transition:color .15s !important;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li a:focus,
#cssmenu > ul > li a:active{
    color:var(--oc-heading) !important;
    background:transparent !important;
    text-decoration:none !important;
    height:auto !important;
}
#cssmenu .icon{
    padding:0 !important; margin:0 0 3px !important;
    color:var(--oc-accent);
    line-height:0 !important;
}
#cssmenu .icon svg,
#cssmenu .icon i svg{
    width:16px !important; height:16px !important;
    display:inline-block; vertical-align:middle;
    color:var(--oc-accent);
}
#cssmenu .icon i{display:inline-block; line-height:0;}
#cssmenu br{display:none;}
#cssmenu > ul{gap:6px !important;}
#cssmenu .icon + span{margin:0 !important;}
#cssmenu .icon svg,
#cssmenu .icon i svg{
    transition: color .18s ease, transform .18s ease !important;
}
#cssmenu > ul > li:hover .icon svg,
#cssmenu > ul > li:hover .icon i svg{
    transform: scale(1.1);
}
/* Each menu item gets a distinct vivid color on hover */
#cssmenu > ul > li:nth-child(8n+1):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+1):hover .icon i svg{ color:#2563eb !important; } /* blue */
#cssmenu > ul > li:nth-child(8n+2):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+2):hover .icon i svg{ color:#16a34a !important; } /* green */
#cssmenu > ul > li:nth-child(8n+3):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+3):hover .icon i svg{ color:#d97706 !important; } /* amber */
#cssmenu > ul > li:nth-child(8n+4):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+4):hover .icon i svg{ color:#dc2626 !important; } /* red */
#cssmenu > ul > li:nth-child(8n+5):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+5):hover .icon i svg{ color:#7c3aed !important; } /* purple */
#cssmenu > ul > li:nth-child(8n+6):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+6):hover .icon i svg{ color:#0891b2 !important; } /* cyan */
#cssmenu > ul > li:nth-child(8n+7):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+7):hover .icon i svg{ color:#db2777 !important; } /* pink */
#cssmenu > ul > li:nth-child(8n+8):hover .icon svg,
#cssmenu > ul > li:nth-child(8n+8):hover .icon i svg{ color:#eab308 !important; } /* yellow */

/* Submenu (Utility dropdown) */
#cssmenu > ul > li > ul{
    list-style:none;
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    background:#fff;
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius);
    box-shadow:var(--oc-shadow-lg);
    padding:6px;
    min-width:240px;
    display:none;
    z-index:60;
    margin:0;
}
#cssmenu > ul > li:hover > ul,
#cssmenu > ul > li:focus-within > ul{display:block;}
#cssmenu > ul > li > ul li{
    list-style:none;
    background:transparent !important;
    border:none !important;
    border-radius:0;
}
#cssmenu > ul > li > ul li a{
    display:block !important;
    text-align:left !important;
    padding:8px 12px !important;
    border-radius:8px !important;
    color:var(--oc-text) !important;
    text-decoration:none !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font:500 13px/1.3 'Inter', sans-serif !important;
    height:auto !important; min-height:0 !important;
}
#cssmenu > ul > li > ul li a:hover{
    background:var(--oc-card-soft) !important;
    color:var(--oc-heading) !important;
}

/* Hide legacy per-child colored backgrounds and borders */
.nav li:nth-child(12n+1),
.nav li:nth-child(12n+2),
.nav li:nth-child(12n+3),
.nav li:nth-child(12n+4),
.nav li:nth-child(12n+5),
.nav li:nth-child(12n+6),
.nav li:nth-child(12n+7),
.nav li:nth-child(12n+8),
.nav li:nth-child(12n+9),
.nav li:nth-child(12n+10),
.nav li:nth-child(12n+11),
.nav li:nth-child(12n+12){background:transparent !important;}
.no-touch .nav li a:hover,
.no-touch .nav li a:active,
.no-touch .nav li a:focus,
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+6) a:hover{
    border-bottom:none !important;
    background:transparent !important;
}

/* ==========================================================
   Tool page head: icon + title + subtitle slim card
   ========================================================== */
.oc-tool-head{
    display:flex; align-items:center; gap:18px;
    max-width:1480px;
    margin:14px auto 20px;
    padding:14px 22px;
    background:rgba(255,255,255,0.94);
    border:1px solid var(--oc-card-border);
    border-radius:var(--oc-radius);
    box-shadow:var(--oc-shadow);
    text-align:left;
}
.oc-tool-head-icon{
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--oc-accent), var(--oc-accent-dark));
    color:#f3f4f6;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(31,41,55,.22);
}
.oc-tool-head-icon svg{width:28px; height:28px;}
.oc-tool-head-body{flex:1; min-width:0;}
.oc-tool-head-title{
    margin:0 !important;
    font:800 22px/1.2 'JetBrains Mono', ui-monospace, monospace !important;
    letter-spacing:0.04em !important;
    color:var(--oc-heading) !important;
    text-transform:uppercase !important;
    text-align:left;
}
.oc-tool-head-sub{
    margin:3px 0 0 !important;
    color:var(--oc-text-dim) !important;
    font:13px/1.4 'Inter', sans-serif !important;
}