
/* WordPress-safe Vehicle Trip Management */
#vehicle-trip-management,
#vehicle-trip-management *,
#vehicle-trip-management *::before,
#vehicle-trip-management *::after {
    box-sizing: border-box;
}

#vehicle-trip-management {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 0 80px 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
    background: rgba(255,255,255,0.95);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    isolation: isolate;
}

.admin-bar #vehicle-trip-management .toast-container {
    top: 52px !important;
}

.admin-bar #vehicle-trip-management .password-overlay {
    padding-top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar #vehicle-trip-management .toast-container {
        top: 66px !important;
    }

    .admin-bar #vehicle-trip-management .password-overlay {
        padding-top: 46px !important;
    }
}

#vehicle-trip-management{ width:100%!important; min-height:100vh; display:flex; flex-direction:column; background:rgba(255,255,255,0.95); margin-bottom:80px!important; }

        /* ── Nav ── */
        #vehicle-trip-management .nav-tabs{ display:flex; background:#f8f9fa; border-bottom:3px solid #e9ecef; overflow-x:auto; width:100%; }
        #vehicle-trip-management .nav-tab{ flex:1; padding:15px 10px!important; background:none; border:none; cursor:pointer; font-size:14px; font-weight:600; color:#666; transition:all 0.3s; position:relative; white-space:nowrap; min-width:100px; }
        #vehicle-trip-management .nav-tab:hover{ background:#e9ecef; color:#667eea; }
        #vehicle-trip-management .nav-tab.active{ color:#667eea; background:white; }
        #vehicle-trip-management .nav-tab.active::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#667eea; }

        /* ── Content ── */
        #vehicle-trip-management .app-content{ flex:1; width:100%; padding:20px!important; }
        #vehicle-trip-management .tab-content{ display:none; animation:fadeIn 0.5s; width:100%; }
        #vehicle-trip-management .tab-content.active{ display:block; }
        @keyframes fadeIn{ from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);} }

        /* ── Toast ── */
        #vehicle-trip-management .toast-container{ position:fixed; top:20px; right:20px; z-index:999999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
        #vehicle-trip-management .toast{ background:white; padding:15px 20px!important; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,0.3); display:flex; align-items:center; gap:10px; min-width:300px; max-width:400px; transform:translateX(400px); opacity:0; transition:all 0.3s ease; border-left:4px solid; pointer-events:all; }
        #vehicle-trip-management .toast.show{ transform:translateX(0); opacity:1; }
        #vehicle-trip-management .toast.success{border-left-color:#11998e;} #vehicle-trip-management .toast.error{border-left-color:#e74c3c;} #vehicle-trip-management .toast.warning{border-left-color:#f39c12;} #vehicle-trip-management .toast.info{border-left-color:#667eea;}
        #vehicle-trip-management .toast-icon{font-size:20px;} #vehicle-trip-management .toast-content{flex:1;} #vehicle-trip-management .toast-title{font-weight:600;color:#333;margin-bottom:2px;} #vehicle-trip-management .toast-message{font-size:14px;color:#666;}
        #vehicle-trip-management .toast-close{background:none;border:none;font-size:18px;cursor:pointer;color:#999;padding:0!important;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
        #vehicle-trip-management .live-badge{ background:#11998e; color:white; padding:2px 8px!important; border-radius:12px; font-size:11px; margin-left:8px!important; animation:pulse 2s infinite; }
        @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.5;} }

        /* ── Form ── */
        #vehicle-trip-management .entry-form{ background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%); padding-top:10px!important; padding-left:25px!important; padding-right:25px!important; padding-bottom:25px!important; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1); width:100%; }
        #vehicle-trip-management .entry-form h2{ margin-bottom:20px!important; color:#333; }
        #vehicle-trip-management .form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-bottom:20px!important; width:100%; }
        #vehicle-trip-management .form-group{ display:flex; flex-direction:column; }
        #vehicle-trip-management .form-group label{ font-weight:600; color:#333; margin-bottom:8px!important; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; }
        #vehicle-trip-management .form-group input{ padding:12px!important; border:2px solid #ddd; border-radius:8px; font-size:16px; transition:all 0.3s; background:white; width:100%; }
        #vehicle-trip-management .form-group input:focus{ outline:none; border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,0.1); }
        #vehicle-trip-management .checkbox-group{ flex-direction:row; align-items:center; gap:10px; margin:15px 0!important; }
        #vehicle-trip-management .checkbox-group input[type="checkbox"]{ width:20px; height:20px; cursor:pointer; }
        #vehicle-trip-management .checkbox-group label{ margin-bottom:0!important; cursor:pointer; font-size:14px; }
        #vehicle-trip-management .extra-revenue-section{ background:#fff3cd; border:2px solid #ffc107; border-radius:10px; padding:20px!important; margin:15px 0!important; display:none; width:100%; }
        #vehicle-trip-management .extra-revenue-section.active{ display:block; }
        #vehicle-trip-management .calculations{ background:white; padding:20px!important; border-radius:10px; margin-top:30px!important; margin-bottom:30px!important; border-left:5px solid #667eea; width:100%; }
        #vehicle-trip-management .calc-row{ display:flex; justify-content:space-between; padding:10px 0!important; border-bottom:1px solid #eee; }
        #vehicle-trip-management .calc-row:last-child{ border-bottom:none; font-size:1.2em; font-weight:bold; color:#667eea; }

        /* ── Buttons ── */
        #vehicle-trip-management .btn{ padding:12px 25px!important; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.3s; text-transform:uppercase; letter-spacing:1px; margin:5px!important; display:inline-flex; align-items:center; gap:8px; }
        #vehicle-trip-management .btn-primary{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; box-shadow:0 4px 15px rgba(102,126,234,0.4); }
        #vehicle-trip-management .btn-primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 20px rgba(102,126,234,0.6); }
        #vehicle-trip-management .btn-primary:disabled{ opacity:0.7; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
        #vehicle-trip-management .btn-success{ background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%); color:white; }
        #vehicle-trip-management .btn-success:hover{ transform:translateY(-2px); }
        #vehicle-trip-management .btn-warning{ background:linear-gradient(135deg,#f39c12 0%,#f1c40f 100%); color:white; }
        #vehicle-trip-management .btn-warning:hover{ transform:translateY(-2px); }
        #vehicle-trip-management .btn-danger{ background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%); color:white; }
        #vehicle-trip-management .btn-danger:hover{ transform:translateY(-2px); }
        #vehicle-trip-management .btn-pdf{ background:linear-gradient(135deg,#c0392b 0%,#e74c3c 100%); color:white; box-shadow:0 4px 15px rgba(192,57,43,0.4); }
        #vehicle-trip-management .btn-pdf:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(192,57,43,0.6); }
        #vehicle-trip-management .btn-small{ padding:6px 12px!important; font-size:12px; }

        /* ── Spinner ── */
        #vehicle-trip-management .spinner{
            display:inline-block; width:16px; height:16px;
            border:2px solid rgba(255,255,255,0.4);
            border-top-color:#fff;
            border-radius:50%;
            animation:spin 0.7s linear infinite;
            flex-shrink:0;
        }
        @keyframes spin{ to { transform: rotate(360deg); } }

        /* ── Tables ── */
        #vehicle-trip-management .data-table{ width:100%; border-collapse:collapse; margin-top:20px!important; background:white; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
        #vehicle-trip-management .data-table th{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:15px 12px!important; text-align:left; font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:1px; }
        #vehicle-trip-management .data-table td{ padding:12px!important; border-bottom:1px solid #eee; font-size:14px; }
        #vehicle-trip-management .data-table tr:hover{ background:#f8f9fa; }
        #vehicle-trip-management .data-table tr:last-child td{ border-bottom:none; }
        #vehicle-trip-management .profit{color:#11998e;font-weight:bold;} #vehicle-trip-management .loss{color:#e74c3c;font-weight:bold;}
        #vehicle-trip-management .actions{ display:flex; gap:5px; }

        /* ── Search ── */
        #vehicle-trip-management .search-bar-wrap{ display:flex; align-items:center; gap:10px; margin-bottom:0px!important; }
        #vehicle-trip-management .search-bar{ position:relative; flex:1; }
        #vehicle-trip-management .search-bar input{ width:100%; padding:11px 42px 11px 16px!important; border:2px solid #ddd; border-radius:10px; font-size:14px; background:white; transition:all 0.3s; outline:none; }
        #vehicle-trip-management .search-bar input:focus{ border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,0.1); }
        #vehicle-trip-management .search-bar .search-icon{ position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:16px; pointer-events:none; color:#aaa; }
        #vehicle-trip-management .search-bar .clear-search{ position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:16px; cursor:pointer; color:#aaa; background:none; border:none; padding:0!important; display:none; }
        #vehicle-trip-management .search-bar .clear-search:hover{ color:#e74c3c; }
        #vehicle-trip-management .search-count{ font-size:12px; color:#888; white-space:nowrap; font-weight:600; min-width:80px; text-align:right; }
        #vehicle-trip-management .search-count span{ color:#667eea; font-weight:700; }
        #vehicle-trip-management mark{ background:#e8edff; color:#333; border-radius:2px; padding:0 2px!important; }

        /* ── Show More ── */
        #vehicle-trip-management .show-more-table-btn{ display:block; width:100%; padding:12px!important; margin-top:10px!important; background:linear-gradient(135deg,#f5f7fa,#e0e7ef); border:2px dashed #b0bec5; border-radius:8px; font-size:13px; font-weight:600; color:#546e7a; cursor:pointer; text-align:center; transition:all 0.2s; }
        #vehicle-trip-management .show-more-table-btn:hover{ background:linear-gradient(135deg,#e0e7ef,#cfd8dc); color:#667eea; border-color:#667eea; }

        /* ── Password overlay ── */
        #vehicle-trip-management .password-overlay{ position:fixed; top:0; left:0; width:100vw!important; height:100vh!important; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
        #vehicle-trip-management .password-box{ background:white; padding:30px!important; border-radius:15px; box-shadow:0 20px 60px rgba(0,0,0,0.4); text-align:center; min-width:300px; max-width:400px; }
        #vehicle-trip-management .password-box h3{ color:#333; margin-bottom:5px!important; font-size:1.4em; }
        #vehicle-trip-management .password-box p{ color:#666; font-size:13px; margin-bottom:20px!important; }
        #vehicle-trip-management .password-box input{ width:100%!important; padding:12px!important; border:2px solid #ddd; border-radius:8px; font-size:16px; text-align:center; letter-spacing:4px; margin-bottom:15px!important; }
        #vehicle-trip-management .password-box input:focus{ outline:none; border-color:#667eea; }
        #vehicle-trip-management .password-error{ color:#e74c3c; font-size:13px; margin-top:-10px!important; margin-bottom:10px!important; display:none; }

        /* ── Firebase Setup ── */
        #vehicle-trip-management .setup-panel{ background:#e8f5e9; border:2px solid #4caf50; padding:20px!important; border-radius:10px; margin-bottom:20px!important; width:100%; }
        #vehicle-trip-management .setup-panel h3{ color:#2e7d32; margin-bottom:10px!important; }
        #vehicle-trip-management .firebase-config-form{ display:grid; gap:10px; margin-top:15px!important; }
        #vehicle-trip-management .firebase-config-form input{ padding:10px!important; border:2px solid #81c784; border-radius:8px; font-size:13px; width:100%; font-family:monospace; background:white; }
        #vehicle-trip-management .firebase-config-form input:focus{ outline:none; border-color:#4caf50; }

        #vehicle-trip-management .hidden{ display:none !important; }

        @media (max-width:768px){
            #vehicle-trip-management .nav-tab{padding:12px 8px!important;font-size:12px;min-width:80px;}
            #vehicle-trip-management .app-content{padding:15px!important;} #vehicle-trip-management .entry-form{padding:15px!important;}
            #vehicle-trip-management .form-grid{grid-template-columns:1fr;gap:15px;}
            #vehicle-trip-management .data-table{font-size:12px;display:block;overflow-x:auto;}
            #vehicle-trip-management .data-table th, #vehicle-trip-management .data-table td{padding:8px!important;white-space:nowrap;}
            #vehicle-trip-management .actions{flex-direction:column;}
            #vehicle-trip-management .btn{padding:10px 20px!important;font-size:12px;}
            #vehicle-trip-management .toast{min-width:250px;max-width:calc(100vw - 40px);}
        }
        @media (min-width:1200px){ #vehicle-trip-management .form-grid{grid-template-columns:repeat(3,1fr);} }
    

/* WordPress overlay containment fix — v1.0.1 */
#vehicle-trip-management .password-overlay.hidden {
    display: none !important;
}

#vehicle-trip-management .password-overlay:not(.hidden) {
    display: flex !important;
}

#vehicle-trip-management .password-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}

#vehicle-trip-management .password-box {
    width: min(400px, calc(100vw - 30px)) !important;
    min-width: 0 !important;
}

#vehicle-trip-management .toast-container {
    position: fixed !important;
}
