/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #111;
    width: 100%;
}

/* =====================================================
   LAYOUT
===================================================== */

.app-shell {
    width: 100%;
    max-width: 100%;
    padding: 20px;
}

/* =====================================================
   TOP BAR
===================================================== */

.navbar {
    width: 100%;
    padding: 10px 24px;   /* smaller than before */
    display: flex;
    align-items: center;
}

.nav-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

/* LOGO CONTAINER */
.nav-logo {
    display: flex;
    align-items: center;
}

/* 🔥 MAIN FIX HERE */
.nav-logo img {
    height: 42px;        /* was 60px+ → now compact */
    width: auto;
    max-height: 42px;
    object-fit: contain;
    display: block;
}

/* RIGHT SIDE AUTH */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-welcome {
    font-size: 0.9rem;
    color: #666;
}

.auth-link {
    text-decoration: none;
    font-weight: 600;
    color: #111;
}

.auth-link:hover {
    opacity: 0.7;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn {
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.primary {
    background: #000;
    color: white;
}

.secondary {
    background: #eee;
    color: #111;
}

.danger {
    background: #dc2626;
    color: white;
}

.small {
    padding: 6px 10px;
    font-size: 12px;
}

/* =====================================================
   METRICS
===================================================== */

.metrics {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.card {
    flex: 1;
    background: #f5f5f5;
    padding: 12px;
    border-radius: 10px;
}

/* =====================================================
   TABLE
===================================================== */

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

/* =====================================================
   AI DROPDOWN SYSTEM (IMPORTANT FIX)
===================================================== */

/* THIS WAS MISSING — THIS FIXES YOUR ISSUE */
.hidden {
    display: none !important;
}

.ai-row td {
    background: #fafafa;
}



/* =====================================================
   BADGES
===================================================== */

.pill {
    background: #eee;
    padding: 4px 8px;
    border-radius: 6px;
}

.profit {
    color: green;
    font-weight: bold;
}

/* =====================================================
   DEALER PREFERENCES MODAL
===================================================== */

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;

    background:rgba(0,0,0,.65);

    justify-content:center;
    align-items:center;

    padding:30px;
}

.modal-box{
    width:900px;
    max-width:95vw;
    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:20px;

    padding:32px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);
}

.modal-box h3{
    font-size:28px;
    margin-bottom:6px;
}

.modal-sub{
    color:#666;
    margin-bottom:24px;
}

.pref-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.pref-card{
    background:#f8f8f8;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:16px;
}

.pref-card label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
}

.modal-box textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: none;
}

.modal-box textarea{
    min-height:120px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:20px;
}

.action-row{
    display:flex;
    gap:12px;
    margin-top:24px;
}

.action-row .btn{
    flex:1;
}

.full{
    width:100%;
}

@media(max-width:900px){

    .pref-grid{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
    }

}/* =====================================================
   AI DROPDOWN
===================================================== */

.hidden {
    display: none !important;
}

.ai-row td {
    background: #fafafa;
    padding: 0;
}

.ai-container {
    padding: 14px;
    color: #111;
}

.ai-summary {
    margin-bottom: 12px;
    line-height: 1.4;
    color: #111;
}

.ai-grid {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.ai-box {
    flex: 1;
    background: #f7f7f7;
    padding: 12px;
    border-radius: 8px;
    color: #111;

    /* FIX */
    white-space: normal;
    font-size: 13px;
    line-height: 1.4;
}

.ai-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.ai-box ul {
    margin: 0;
    padding-left: 18px;
    list-style-position: outside;
}

.ai-box li {
    margin: 4px 0;
    padding: 0;
    line-height: 1.3;
}

.ai-footer {
    color: #111;
    font-size: 14px;
    margin-top: 10px;
}

.pros .ai-title {
    color: green;
}

.cons .ai-title {
    color: red;
}


.progress-wrap {
    width: 100%;
    height: 18px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #111;
    transition: width .3s;
}

/* =====================================================
   DASHBOARD TOP BAR
===================================================== */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.top-actions form{
    margin:0;
}

.top-actions .btn{
    height:42px;
    min-width:130px;
}

.modal.active {
    display: flex !important;
}

.video-wrap {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;   /* 🔥 THIS is what actually clips the video */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    background: #000;
}

.video-wrap video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* or cover if you want zoomed */
}