/* --- THEME VARIABLES --- */
:root {
    --bg-color: #eef2f6;
    --text-color: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.85);
    --border-color: rgba(255, 255, 255, 0.6);
    --text-muted: #64748b;
    --input-bg: #f8fafc;
    --input-border: #cbd5e1;
    --btn-primary: #0f172a;
    --btn-primary-hover: #334155;
    --plate-bg: #e2e8f0;
    --plate-color: #475569;
    --jur-bg: #dcfce7;
    --jur-color: #166534;
    --toast-bg: #0f172a;
    --toast-error: #ef4444;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    --card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --card-bg: rgba(30, 41, 59, 0.85);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-muted: #94a3b8;
    --input-bg: #1e293b;
    --input-border: #334155;
    --btn-primary: #3b82f6;
    --btn-primary-hover: #2563eb;
    --plate-bg: #334155;
    --plate-color: #cbd5e1;
    --jur-bg: #064e3b;
    --jur-color: #6ee7b7;
    --toast-bg: #3b82f6;
    --toast-error: #ef4444;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* --- BASE STYLES --- */
* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background: var(--bg-color); margin: 0; padding: 2rem 1.5rem; color: var(--text-color); transition: background 0.3s, color 0.3s; -webkit-font-smoothing: antialiased; }
.container { max-width: 900px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.header-right { display: flex; align-items: center; gap: 0.8rem; }

/* Logo */
.logo-title-group { display: flex; align-items: center; gap: 12px; }
.logo-title-group img { height: 36px; width: auto; filter: brightness(0); transition: filter 0.3s; }
[data-theme="dark"] .logo-title-group img { filter: brightness(0) invert(1); }

/* Icons & Buttons */
.gear-btn, .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--card-bg); color: var(--text-color); text-decoration: none; font-size: 1.2rem; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: 0.2s; cursor: pointer; backdrop-filter: blur(10px); }
.gear-btn:hover, .theme-btn:hover { background: var(--btn-primary); color: white; transform: scale(1.05); }
.nav-link { background: var(--card-bg); color: var(--text-color); text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 12px; font-weight: 500; font-size: 0.85rem; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: 0.2s; backdrop-filter: blur(10px); }
.nav-link:hover { background: var(--btn-primary); color: white; }

/* Header Count */
.header-count { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-right: 0.5rem; }

/* Search Bar */
.search-bar { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 16px; padding: 0.3rem 0.3rem 0.3rem 1.2rem; margin-bottom: 1.5rem; transition: 0.2s; box-shadow: var(--card-shadow); }
.search-bar:focus-within { border-color: var(--btn-primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }
.search-bar input { border: none; background: transparent; padding: 0.6rem 0; font-size: 0.95rem; flex: 1; outline: none; color: var(--text-color); }
.search-bar .clear-btn { background: var(--border-color); border: none; border-radius: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); padding: 0; font-size: 0.8rem; }

/* Result Count */
.result-count { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; font-weight: 500; padding-left: 0.5rem; }

/* Trailers List */
.trailer-list { display: flex; flex-direction: column; gap: 1rem; }
.trailer-card { background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); padding: 1.2rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; transition: 0.2s; backdrop-filter: blur(10px); }
.trailer-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-2px); border-color: var(--input-border); }
.trailer-info { flex: 1 1 200px; min-width: 150px; }
.trailer-name { font-weight: 700; font-size: 1.1rem; color: var(--text-color); }
.trailer-name .badge { font-size: 0.65rem; background: #fee2e2; color: #991b1b; padding: 0.2rem 0.6rem; border-radius: 8px; font-weight: 600; text-transform: uppercase; margin-left: 0.5rem; }
.plate-info { font-size: 0.8rem; margin-top: 0.4rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.plate-badge { background: var(--plate-bg); padding: 0.2rem 0.6rem; border-radius: 8px; font-weight: 600; color: var(--plate-color); border: 1px solid transparent; }
.jurisdiction-badge { background: var(--jur-bg); color: var(--jur-color); padding: 0.2rem 0.6rem; border-radius: 8px; font-weight: 600; border: 1px solid transparent; }

/* Dates */
.dates { display: flex; gap: 1rem 2rem; font-size: 0.85rem; flex: 0 1 auto; }
.date-item { display: flex; flex-direction: column; }
.date-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; }
.date-value { font-weight: 600; color: var(--text-color); }

/* Timeline */
.timeline-container { flex: 1 1 220px; min-width: 200px; }
.timeline-bar { display: flex; height: 20px; width: 100%; background: var(--border-color); border-radius: 20px; overflow: hidden; border: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.timeline-fill { height: 100%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 0.65rem; font-weight: 700; color: white; }
.timeline-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; font-weight: 500; }
.timeline-label .status-text { font-weight: 700; }

/* Settings Form */
.card { background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); padding: 1.8rem; margin-bottom: 1.8rem; backdrop-filter: blur(10px); }
.card h2 { font-size: 1.15rem; margin-top: 0; margin-bottom: 1.5rem; color: var(--text-color); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-bottom: 1.5rem; }
.input-group { display: flex; flex-direction: column; gap: 0.4rem; }
.input-group label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
.input-group input, .input-group select { padding: 0.75rem 1rem; border: 1px solid var(--input-border); border-radius: 12px; font-size: 0.9rem; background: var(--input-bg); color: var(--text-color); font-family: inherit; transition: border 0.2s, box-shadow 0.2s; }
.input-group input:focus, .input-group select:focus { outline: none; border-color: var(--btn-primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }
.add-btn { background: var(--btn-primary); color: white; border: none; padding: 0.85rem 1.5rem; border-radius: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: 0.2s; width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.add-btn:hover { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
.actions { display: flex; gap: 0.6rem; margin-left: auto; }
.btn-edit { background: transparent; border: 1px solid var(--input-border); color: var(--text-color); padding: 0.4rem 0.9rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-edit:hover { background: var(--border-color); }
.btn-danger { background: transparent; border: 1px solid #fca5a5; color: #ef4444; padding: 0.4rem 0.9rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-danger:hover { background: #fef2f2; }
[data-theme="dark"] .btn-danger { border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .btn-danger:hover { background: #7f1d1d; color: white; }
.btn-save { background: #10b981; color: white; border: none; padding: 0.4rem 0.9rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-save:hover { background: #059669; }
.btn-cancel { background: var(--border-color); border: none; padding: 0.4rem 0.9rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--text-color); transition: 0.2s; }
.btn-cancel:hover { background: var(--input-border); }
.edit-form { display: flex; flex-wrap: wrap; gap: 0.8rem; width: 100%; align-items: center; }
.edit-form .input-group { flex: 1 1 120px; }
.edit-form .input-group input, .edit-form .input-group select { padding: 0.5rem; font-size: 0.85rem; }

/* Utility */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: 0.95rem; background: var(--bg-color); border-radius: 16px; border: 2px dashed var(--input-border); }
.highlight { background: #fef08a; color: #000; border-radius: 4px; padding: 0 2px; }

/* Toast */
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--toast-bg); color: white; padding: 0.8rem 1.8rem; border-radius: 12px; font-weight: 600; font-size: 0.9rem; opacity: 0; transition: 0.3s; pointer-events: none; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: var(--toast-error); }

/* --- NEW CARD FLASH ANIMATION --- */
@keyframes brightFlash {
    0% { 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.9); 
        border-color: #3b82f6; 
        background: rgba(59, 130, 246, 0.2);
    }
    50% { 
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); 
        border-color: #3b82f6; 
        background: transparent;
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); 
        border-color: var(--border-color); 
        background: var(--card-bg);
    }
}

.flash-new {
    animation: brightFlash 1s ease-out 4;
    z-index: 10;
    position: relative;
}