/* ==========================================================================
   OSAT v5.0 - FEUILLE DE STYLE PRINCIPALE (Master CSS)
   ========================================================================== */

/* --- 1. VARIABLES DE THÈMES --- */
:root { --bg-body:#09090b; --bg-card:#18181b; --border-color:#27272a; --text-main:#e4e4e7; --text-muted:#a1a1aa; --accent:#10b981; --rouge:#ef4444; --orange:#f59e0b; --vert:#10b981; --header-bg:#18181b; --input-bg:#000000; --btn-text:#000; --badge-bg:#27272a; --badge-text:#ffffff;}
[data-theme="light"] { --bg-body:#f4f7f6; --bg-card:#ffffff; --border-color:#dfe6e9; --text-main:#111827; --text-muted:#6b7280; --accent:#059669; --rouge:#dc2626; --orange:#d97706; --vert:#059669; --header-bg:#ffffff; --input-bg:#f9fafb; --btn-text:#fff; --badge-bg:#dfe6e9; --badge-text:#111827;}
[data-theme="blue"] { --bg-body:#0f172a; --bg-card:#1e293b; --border-color:#334155; --text-main:#f8fafc; --text-muted:#94a3b8; --accent:#38bdf8; --rouge:#f87171; --orange:#fbbf24; --vert:#34d399; --header-bg:#1e293b; --input-bg:#0f172a; --btn-text:#000; --badge-bg:#334155; --badge-text:#ffffff;}
[data-theme="contrast"] { --bg-body:#000000; --bg-card:#000000; --border-color:#ffffff; --text-main:#ffffff; --text-muted:#ffff00; --accent:#00ffff; --rouge:#ff3333; --orange:#ff9900; --vert:#33ff33; --header-bg:#000000; --input-bg:#000000; --btn-text:#000; --badge-bg:#ffffff; --badge-text:#000000;}

/* --- 2. STRUCTURE GLOBALE --- */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; display: flex; flex-direction: column; min-height: 100vh; transition: background 0.3s, color 0.3s; }
.main-content { flex: 1; padding: 25px 20px; max-width: 1000px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.card { background: var(--bg-card); padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s;}
.card h2 { margin-top: 0; color: var(--text-main); font-weight: normal; font-size: 1.4em;}
.page-footer { width: 100%; text-align: center; padding: 20px; color: var(--text-muted); font-weight: bold; font-size: 0.85em; border-top: 1px solid var(--border-color); background: var(--header-bg); box-sizing: border-box; transition: 0.3s;}

/* --- 3. EN-TÊTE ET NAVIGATION --- */
.header-bar { background: var(--header-bg); padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; position: sticky; top: 0; z-index: 1000; transition: 0.3s;}
.header-brand { display: flex; align-items: center; flex-wrap: wrap;} 
.header-logo { margin: 0; font-size: 1.5em; color: var(--text-main); font-weight: bold; display:flex; align-items:center; gap:8px;} 
.header-title { color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; margin-left: 15px; padding-left: 15px; border-left: 2px solid var(--border-color);}
.nav-container { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } 
.desktop-menu { display: flex; gap: 8px; } 
.nav-link { background: transparent; color: var(--text-muted); padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 0.9em; transition: 0.2s; border: 1px solid transparent;} 
.nav-link:hover { color: var(--text-main); border-color: var(--border-color); } 
.nav-link.active { background: var(--text-main); color: var(--bg-body); font-weight: bold; }
.mobile-menu { display: none; padding: 8px 15px; border-radius: 6px; background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-color); font-family: inherit;}
.nav-btn { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; width: auto; font-family: inherit;} 
.nav-btn:hover { border-color: var(--text-muted); }
.nav-logout { color: var(--rouge); text-decoration: none; font-weight: bold; font-size: 0.9em; padding: 6px 12px; border: 1px solid var(--rouge); border-radius: 6px; transition: 0.2s;} 
.nav-logout:hover { background: var(--rouge); color: var(--bg-body); } 
.user-badge { color: var(--text-muted); font-size: 0.85em; margin-right: 10px;}

/* --- 4. FORMULAIRES, BOUTONS ET TABLEAUX --- */
input[type="text"], input[type="tel"], input[type="password"], select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; background: var(--input-bg); color: var(--text-main); font-family: inherit; font-size:1em; transition:0.3s;}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
form button, .btn-action { background-color: var(--badge-bg); color: var(--badge-text); border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s;}
form button:hover, .btn-action:hover { filter: brightness(1.2); }
.btn-maj { background: var(--accent); color: var(--btn-text); } .btn-maj:hover { filter: brightness(1.1); }
.btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--rouge); border: 1px solid rgba(239, 68, 68, 0.3); } .btn-danger:hover { background: var(--rouge); color: var(--bg-body); }

table { width: 100%; border-collapse: collapse; margin-top: 15px;} 
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; } 
th { background: var(--input-bg); color: var(--text-muted); text-transform: uppercase; font-size: 0.85em;}

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; vertical-align: middle;} .switch input { opacity: 0; width: 0; height: 0; } 
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .4s; border-radius: 24px;} 
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%;} 
input:checked + .slider { background-color: var(--accent); } 
input:checked + .slider:before { transform: translateX(26px); }
input:disabled + .slider { opacity: 0.3; cursor: not-allowed; }

/* Tabs (Onglets) */
.tabs { display: flex; gap: 10px; margin-bottom: 25px; justify-content: center; flex-wrap: wrap;}
.tab-btn { padding: 10px 20px; background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; font-weight: bold; border-radius: 20px; font-size: 1em; transition: 0.2s; font-family: inherit;}
.tab-btn.active { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }
.tab-content { display: none; }

/* Lightbox Photos */
#lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; cursor: zoom-out;} 
#lightbox img { max-width: 95%; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); object-fit: contain;} 
.lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; }

/* --- 5. COMPOSANTS SPÉCIFIQUES PAGES --- */
/* Supervision / Tickets */
.team-banner { text-align: center; padding: 10px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.9em; letter-spacing: 1px; font-weight: bold; transition: 0.3s;}
.filter-bar { display: flex; justify-content: center; gap: 10px; margin-top: 25px; flex-wrap: wrap; padding: 0 20px;}
.filter-btn { padding: 8px 16px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.2s; font-family: inherit;}
.filter-btn:hover { color: var(--text-main); border-color: var(--text-main);}
.filter-btn.active { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }
.ticket { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; position: relative; overflow: hidden; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s;}
.ticket.panne_signalee::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rouge);}
.ticket.intervention_en_cours::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--orange);}
.ticket.resolu::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--vert);}
.ticket.resolu { opacity: 0.7; } .ticket.resolu:hover { opacity: 1; }
.ticket-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.badge-cat { background: var(--badge-bg); color: var(--badge-text); padding: 6px 12px; border-radius: 4px; font-size: 0.85em; text-transform: uppercase; font-weight: bold;}
.status { font-size: 0.85em; font-weight: 900; letter-spacing: 1px; display: flex; align-items: center; gap: 6px;}
.status::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; }
.status-rouge { color: var(--rouge); } .status-rouge::before { background: var(--rouge); box-shadow: 0 0 8px var(--rouge); }
.status-orange { color: var(--orange); } .status-orange::before { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.status-vert { color: var(--vert); } .status-vert::before { background: var(--vert); box-shadow: 0 0 8px var(--vert); }
.ticket-body h3 { margin: 0 0 10px 0; color: var(--text-main); font-size: 1.3em; font-weight: normal;}
.ticket-body p { margin: 0; color: var(--text-muted); font-size: 1.05em; line-height: 1.5;}
.contact-info { margin-top: 15px; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-size: 0.9em;}
.historique { border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 0.9em; }
.note { border-left: 2px solid var(--border-color); padding-left: 12px; margin-top: 10px; color: var(--text-main);}
details { background: var(--input-bg); padding: 12px; border-radius: 8px; margin-top: 15px; border: 1px solid var(--border-color); }
summary { font-weight: bold; cursor: pointer; color: var(--text-main); outline: none;}
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 15px; }
.photo-grid img { width: 100%; border-radius: 6px; border: 1px solid var(--border-color); cursor: zoom-in; transition: 0.2s;}
.photo-grid img:hover { border-color: var(--text-muted); }
@keyframes pulseAlert { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.dot-alert { display:inline-block; width:12px; height:12px; border-radius:50%; animation: pulseAlert 1.5s infinite; }

/* Archives */
.log-entry { background: var(--bg-card); padding: 20px; margin-bottom: 20px; border-left: 4px solid var(--accent); border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); border-radius: 8px; transition: 0.3s;}
.badge-actif { background: rgba(16, 185, 129, 0.2); color: var(--vert); padding: 4px 10px; border-radius: 4px; font-weight: bold; border: 1px solid var(--vert);}
.badge-supprime { background: rgba(239, 68, 68, 0.2); color: var(--rouge); padding: 4px 10px; border-radius: 4px; font-weight: bold; border: 1px solid var(--rouge);}

/* Impression PDF (Archives) */
@media print {
    body { background: white !important; color: black !important; }
    .main-content { max-width: 100%; padding: 0; }
    .btn-action, .page-footer { display: none !important; }
    .log-entry { border: 1px solid #ccc !important; page-break-inside: avoid; background: white !important; color: black !important; box-shadow: none !important; }
    strong { color: #333 !important; }
    .badge-actif, .badge-supprime { border: 1px solid #000 !important; color: #000 !important; background: transparent !important; }
    details { border: none !important; background: transparent !important; padding: 0 !important; }
    summary { display: none !important; } 
    .photo-grid { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
    .photo-grid img { max-width: 200px !important; height: auto !important; border: 1px solid #ccc !important;}
}

/* --- 6. RESPONSIVE MOBILE (SMARTPHONES) --- */
@media (max-width: 768px) { 
    .desktop-menu { display: none; } 
    .mobile-menu { display: block; width: auto; max-width: 120px; padding: 6px 8px; font-size: 0.8em; margin: 0; white-space: nowrap;} 
    .header-bar { flex-direction: column; align-items: center; padding: 10px; gap: 8px;} 
    .nav-container { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 5px; overflow-x: auto; padding-bottom: 2px;} 
    .header-title { border: none; padding: 0; margin: 0; display: block; width: 100%; text-align: center; margin-top: 5px;}
    .nav-btn, .nav-logout { padding: 6px 8px; font-size: 0.8em; white-space: nowrap; }
    .user-badge { font-size: 0.8em; margin: 0; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    
    /* Magie CSS pour les tableaux Administrateur sur Mobile */
    .admin-ticket-table, .admin-ticket-table tbody, .admin-ticket-table tr, .admin-ticket-table td { display: block; width: 100%; box-sizing: border-box; }
    .admin-ticket-table thead { display: none; }
    .admin-ticket-table tr { margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--input-bg); padding: 12px; }
    .admin-ticket-table td { text-align: left !important; padding: 6px 0 !important; border: none !important; }
    .admin-ticket-table td:first-child { padding-bottom: 12px !important; border-bottom: 1px dashed var(--border-color) !important; margin-bottom: 8px; }
    .admin-ticket-table td select { width: 100%; margin-bottom: 10px; font-size: 1.1em; padding: 12px;}
    .admin-ticket-table .action-cell div { justify-content: flex-start !important; }
}
@media (max-width: 480px) { 
    .hide-mobile { display: none; } 
}