*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f5f7;color:#161616}.hidden{display:none!important}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#071b3a 0%,#0f4fa8 62%,#f2b705 100%)}.login-card{width:min(430px,92vw);background:#fff;border-radius:24px;padding:38px;box-shadow:0 24px 80px #0005}.brand{font-weight:900;font-size:22px}.brand span{display:inline-grid;place-items:center;background:#1257b8;color:#fff;border-radius:8px;padding:5px 8px;margin-right:7px}.login-card h1{margin:35px 0 6px;font-size:30px}.login-card p{margin:0 0 28px;color:#777}.login-card label{display:block;font-weight:700;margin:14px 0}.login-card input{width:100%;margin-top:7px;padding:13px;border:1px solid #ddd;border-radius:10px}.login-card button,button.primary{width:100%;border:0;background:#1257b8;color:#fff;padding:14px;border-radius:10px;font-weight:800;cursor:pointer}.error{color:#c00;margin-top:12px}.app{display:flex;min-height:100vh}.sidebar{width:255px;background:#101010;color:#fff;padding:25px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.sidebar .brand{margin:5px 10px 25px}.role{margin:0 10px 20px;color:#aaa;font-size:12px;text-transform:uppercase;letter-spacing:1px}.nav{display:block;width:100%;text-align:left;background:transparent;border:0;color:#ddd;padding:12px 13px;border-radius:9px;margin:3px 0;cursor:pointer;font-size:14px}.nav:hover,.nav.active{background:#1257b8;color:#fff}.side-bottom{margin-top:auto}.side-bottom a,.side-bottom button{display:block;color:#bbb;text-decoration:none;background:none;border:0;padding:11px 10px;cursor:pointer;font-size:14px}.main{margin-left:255px;width:calc(100% - 255px);padding:28px 34px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:11px;letter-spacing:2px;color:#1257b8;font-weight:900}h2{margin:5px 0;font-size:30px}.userbox{text-align:right}.userbox span{display:block;color:#888;font-size:12px;margin-top:3px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{background:#fff;border-radius:15px;padding:20px;border:1px solid #eee}.card .label{color:#777;font-size:13px}.metric{font-size:30px;font-weight:900;margin-top:9px}.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}.panel{background:#fff;border:1px solid #eee;border-radius:15px;padding:20px}.panel h3{margin:0 0 16px}.row{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #eee}.muted{color:#777}.toolbar{display:flex;gap:10px;margin-bottom:15px}.toolbar input,.toolbar select,.form input,.form select,.form textarea{padding:11px;border:1px solid #ddd;border-radius:9px;background:#fff}.toolbar input{flex:1}.smallbtn{border:0;background:#111;color:#fff;border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:700}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden}.table th,.table td{padding:13px;border-bottom:1px solid #eee;text-align:left;font-size:13px}.table th{background:#fafafa;color:#666}.badge{padding:5px 8px;border-radius:99px;background:#eee;font-size:11px;font-weight:800}.badge.green{background:#dcfce7;color:#166534}.badge.red{background:#fee2e2;color:#991b1b}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form textarea{min-height:100px;grid-column:1/-1}.form .full{grid-column:1/-1}.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:20px;z-index:10}.modalbox{background:#fff;border-radius:18px;padding:24px;width:min(650px,100%);max-height:90vh;overflow:auto}.modalhead{display:flex;justify-content:space-between}.close{border:0;background:#eee;border-radius:8px;padding:7px;cursor:pointer}@media(max-width:900px){.sidebar{position:static;width:100%;height:auto}.app{display:block}.main{margin:0;width:100%;padding:20px}.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.app .sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}.side-bottom{display:flex}.form{grid-template-columns:1fr}}@media(max-width:520px){.cards{grid-template-columns:1fr 1fr}header{align-items:flex-start}.userbox{display:none}}

/* MiCarSales CRM blue/gold management styling */
.login-card{border-top:5px solid #1257b8}
.login-card button,button.primary{background:#1257b8}
.login-card button:hover,button.primary:hover{background:#0d4695}
.sidebar{background:#071b3a}
.nav:hover,.nav.active{background:#1257b8}
.eyebrow{color:#1257b8}
.smallbtn{background:#1257b8}
.smallbtn:hover{background:#0d4695}
.card{border-top:3px solid #1257b8}
.metric{color:#071b3a}
.panel h3{color:#071b3a}
.table th{background:#eef5ff;color:#234}
.badge{background:#eef5ff;color:#1257b8}
.badge.green{background:#dcfce7;color:#166534}
.badge.red{background:#fee2e2;color:#991b1b}
/* ==========================================
   MOBILE CRM — CLEAN FULL SCREEN LAYOUT
========================================== */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* APP */
    .app {
        display: block;
        width: 100%;
        min-height: 100vh;
    }

    /* SIDEBAR */
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 16px 12px;
        display: block;
    }

    .sidebar .brand {
        margin: 3px 8px 12px;
    }

    .role {
        margin: 0 8px 12px;
    }

    /* CRM NAVIGATION */
    .app .sidebar nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        gap: 8px;

        padding: 4px 2px 10px;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        touch-action: pan-x;
    }

    .app .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .nav {
        flex: 0 0 auto;

        width: auto !important;
        min-width: max-content;

        margin: 0;

        padding: 10px 13px;

        white-space: nowrap;

        font-size: 13px;
    }

    /* BOTTOM LINKS */
    .side-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-top: 10px;

        border-top: 1px solid rgba(255,255,255,.12);
        padding-top: 8px;
    }

    .side-bottom a,
    .side-bottom button {
        padding: 9px 8px;
    }

    /* MAIN CONTENT */
    .main {
        margin: 0;
        width: 100%;
        max-width: 100%;

        padding: 18px 12px 30px;

        overflow-x: hidden;
    }

    /* HEADER */
    .main > header {
        display: block;

        width: 100%;

        margin-bottom: 20px;
    }

    .main h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .eyebrow {
        font-size: 10px;
    }

    .userbox {
        display: block;
        text-align: left;
        margin-top: 8px;
    }

    /* DASHBOARD CARDS */
    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .card {
        min-width: 0;
        padding: 15px;
        border-radius: 12px;
    }

    .card .label {
        font-size: 11px;
    }

    .metric {
        font-size: 23px;
        word-break: break-word;
    }

    /* CONTENT GRID */
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 12px;
        margin-top: 12px;
    }

    .panel {
        width: 100%;
        min-width: 0;
        padding: 15px;
        border-radius: 12px;
    }

    /* ROWS */
    .row {
        gap: 8px;
        flex-wrap: wrap;
    }

    /* TOOLBAR */
    .toolbar {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .toolbar input,
    .toolbar select {
        min-width: 0;
        width: 100%;
    }

    .smallbtn {
        width: 100%;
    }

    /* TABLES — ALLOW SWIPING */
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .table th,
    .table td {
        padding: 11px;
        font-size: 12px;
    }

    /* FORMS */
    .form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .form textarea,
    .form .full {
        grid-column: auto;
    }

    .form input,
    .form select,
    .form textarea {
        width: 100%;
        min-width: 0;
    }

    /* MODALS */
    .modal {
        padding: 10px;
        align-items: center;
    }

    .modalbox {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        padding: 18px;
        border-radius: 14px;
    }
}


/* ==========================================
   VERY SMALL PHONES
========================================== */

@media (max-width: 380px) {

    .sidebar {
        padding: 13px 9px;
    }

    .sidebar .brand {
        font-size: 19px;
    }

    .nav {
        font-size: 12px;
        padding: 9px 11px;
    }

    .main {
        padding: 15px 9px 25px;
    }

    .cards {
        gap: 8px;
    }

    .card {
        padding: 12px;
    }

    .metric {
        font-size: 20px;
    }

    .panel {
        padding: 12px;
    }
}
/* ==========================================
   VEHICLE INVENTORY CARDS
========================================== */

.vehicle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
    margin-top:20px;
}

.vehicle-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.07);
    transition:.2s ease;
}

.vehicle-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.vehicle-photo{
    width:100%;
    height:210px;
    object-fit:cover;
    display:block;
    background:#f1f1f1;
}

.no-photo{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:55px;
}

.vehicle-info{
    padding:18px;
}

.vehicle-info h3{
    margin:0 0 8px;
    font-size:19px;
    font-weight:700;
    color:#171717;
}

.vehicle-price{
    font-size:22px;
    font-weight:800;
    margin-bottom:10px;
    color:#111;
}

.vehicle-details{
    font-size:14px;
    color:#777;
    margin-bottom:16px;
}

.vehicle-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.sell-btn{
    background:#111 !important;
    color:#fff !important;
    border:none !important;
    padding:10px 18px !important;
    border-radius:8px !important;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.sell-btn:hover{
    background:#e30613 !important;
    transform:translateY(-1px);
}

.badge.green{
    background:#dcfce7;
    color:#166534;
}

.badge.red{
    background:#fee2e2;
    color:#991b1b;
}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:700px){

    .vehicle-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .vehicle-photo{
        height:220px;
    }

    .vehicle-info h3{
        font-size:18px;
    }

    .vehicle-price{
        font-size:20px;
    }

}