/* ============================================
   AP Annotator - ULTRA MEGA FORCE DISPLAY
   Spécificité maximale pour override Tailwind
   Date : 27 janvier 2026
   Version : NUCLEAR ☢️
   ============================================ */

/* ========== STRATÉGIE ==========
   1. Utiliser html body pour augmenter la spécificité
   2. Dupliquer les sélecteurs pour plus de poids
   3. Utiliser !important partout
   4. Cibler les classes Tailwind spécifiquement
   ================================ */

/* ========== GLOBAL: TAILLES DE BASE ========== */

html body {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

html body * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========== HEADER: MEGA SIZED ========== */

html body header,
html body header.text-white {
    padding: 24px 28px !important;
    min-height: 90px !important;
}

html body header h1,
html body header h1.text-3xl,
html body header h1.font-bold {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

html body header p,
html body header p.text-sm {
    font-size: 18px !important;
    margin-top: 6px !important;
    opacity: 0.95 !important;
}

html body header button,
html body header button.bg-white {
    font-size: 18px !important;
    padding: 14px 24px !important;
    min-height: 54px !important;
    font-weight: 600 !important;
}

html body header button span {
    display: inline !important;
    margin-left: 10px !important;
    font-size: 18px !important;
}

html body header button i,
html body header i {
    font-size: 22px !important;
    margin-right: 8px !important;
}

/* ========== SECTIONS: BIG SPACING ========== */

html body section,
html body section.bg-white {
    padding: 40px 28px !important;
    margin-bottom: 36px !important;
}

html body section h2,
html body section h2.text-2xl,
html body section h2.font-bold {
    font-size: 30px !important;
    margin-bottom: 28px !important;
    font-weight: 800 !important;
}

html body section p {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* ========== UPLOAD SECTION: EVERYTHING BIG ========== */

html body #uploadSection {
    padding: 48px 32px !important;
}

html body #uploadSection h2 {
    font-size: 32px !important;
    margin-bottom: 36px !important;
}

html body #uploadSection i,
html body #uploadSection i.fas {
    font-size: 72px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

html body #uploadSection p {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

html body #uploadSection .text-sm,
html body #uploadSection p.text-sm {
    font-size: 17px !important;
}

/* Upload zones */
html body #fileUploadZone,
html body #dropZone,
html body #webcamBtn,
html body .upload-zone {
    padding: 48px 36px !important;
    min-height: 220px !important;
}

/* ========== BANNER: HIGHLY VISIBLE ========== */

html body .bg-blue-50 {
    padding: 24px 28px !important;
    font-size: 18px !important;
}

html body .bg-blue-50 p {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

html body .bg-blue-50 strong {
    font-size: 19px !important;
    font-weight: 800 !important;
}

html body .bg-blue-50 i {
    font-size: 28px !important;
    margin-right: 14px !important;
}

/* ========== BUTTONS: MEGA SIZED ========== */

html body button,
html body button.bg-blue-600,
html body button.bg-white,
html body button.bg-red-500,
html body button.bg-green-600 {
    font-size: 18px !important;
    padding: 16px 28px !important;
    min-height: 54px !important;
    font-weight: 700 !important;
}

html body button i {
    font-size: 20px !important;
    margin-right: 10px !important;
}

html body button span {
    font-size: 18px !important;
}

/* Specific buttons */
html body #btnLoadProjectHome {
    padding: 20px 36px !important;
    font-size: 20px !important;
    min-height: 64px !important;
}

html body #btnLoadProjectHome i {
    font-size: 24px !important;
}

html body #btnManageAP {
    padding: 16px 28px !important;
    font-size: 18px !important;
}

/* Export buttons - CRITICAL */
html body #btnExportHQ,
html body #btnExportMQ,
html body #btnExportLQ {
    font-size: 18px !important;
    padding: 16px 28px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* ========== TOOLBAR: BIG BUTTONS ========== */

html body .toolbar {
    padding: 20px 24px !important;
    gap: 20px !important;
}

html body .tool-btn {
    min-width: 54px !important;
    min-height: 54px !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 26px !important;
}

html body .toolbar span {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-right: 14px !important;
}

/* ========== PANELS: GENEROUS SPACING ========== */

html body .panel,
html body .bg-white.rounded-xl,
html body .bg-white.shadow-lg {
    padding: 36px !important;
}

html body .panel h3,
html body .bg-white h3 {
    font-size: 26px !important;
    margin-bottom: 28px !important;
    font-weight: 800 !important;
}

/* ========== FORMS: LARGE & CLEAR ========== */

html body label {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    display: block !important;
    line-height: 1.6 !important;
}

html body input,
html body textarea,
html body select {
    font-size: 18px !important;
    padding: 16px 18px !important;
    min-height: 54px !important;
    border-width: 2px !important;
}

html body input[type="range"] {
    height: 14px !important;
}

html body input[type="range"]::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
}

html body input[type="range"]::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
}

/* Value displays */
html body span[id$="Value"] {
    font-size: 18px !important;
    font-weight: 700 !important;
    min-width: 70px !important;
}

/* ========== GRID: MORE SPACE ========== */

html body .grid {
    gap: 28px !important;
}

html body .grid > div {
    padding: 28px !important;
}

/* ========== MODALS: VERY READABLE ========== */

html body .modal-content {
    padding: 48px !important;
}

html body .modal-header {
    margin-bottom: 36px !important;
}

html body .modal-title {
    font-size: 30px !important;
    font-weight: 800 !important;
}

html body .modal-body {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* ========== ACTIONS SECTION: STACKED ON MOBILE ========== */

html body .actions,
html body #actionsSection,
html body [class*="actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 24px !important;
}

html body .actions button,
html body #actionsSection button {
    font-size: 18px !important;
    padding: 16px 28px !important;
    min-height: 56px !important;
    flex: 1 1 auto !important;
    min-width: 220px !important;
}

/* ========== MOBILE: EVEN BIGGER ========== */

@media (max-width: 768px) {
    html body {
        font-size: 18px !important;
    }
    
    html body header h1 {
        font-size: 26px !important;
    }
    
    html body header p {
        font-size: 16px !important;
    }
    
    html body section {
        padding: 28px 20px !important;
    }
    
    html body section h2 {
        font-size: 26px !important;
    }
    
    html body #uploadSection {
        padding: 28px 20px !important;
    }
    
    html body #uploadSection i {
        font-size: 64px !important;
    }
    
    html body #uploadSection p {
        font-size: 19px !important;
    }
    
    html body .upload-zone,
    html body #fileUploadZone,
    html body #dropZone,
    html body #webcamBtn {
        padding: 40px 28px !important;
        min-height: 200px !important;
    }
    
    html body button {
        font-size: 19px !important;
        padding: 18px 28px !important;
        min-height: 58px !important;
    }
    
    html body .tool-btn {
        min-width: 58px !important;
        min-height: 58px !important;
        width: 58px !important;
        height: 58px !important;
        font-size: 28px !important;
    }
    
    html body label {
        font-size: 19px !important;
    }
    
    html body input,
    html body textarea,
    html body select {
        font-size: 19px !important;
        padding: 18px !important;
        min-height: 58px !important;
    }
    
    /* ACTIONS: FULL WIDTH STACK */
    html body .actions,
    html body #actionsSection {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    
    html body .actions button,
    html body #actionsSection button,
    html body #btnExportHQ,
    html body #btnExportMQ,
    html body #btnExportLQ,
    html body #btnSave,
    html body #btnLoad {
        width: 100% !important;
        min-width: auto !important;
        font-size: 19px !important;
        padding: 20px 28px !important;
        min-height: 62px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    html body .actions button span,
    html body #actionsSection button span {
        display: inline !important;
        font-size: 19px !important;
    }
    
    html body .actions button i,
    html body #actionsSection button i {
        font-size: 22px !important;
    }
}

/* ========== SMALL MOBILE: MAXIMUM READABILITY ========== */

@media (max-width: 480px) {
    html body {
        font-size: 19px !important;
    }
    
    html body header h1 {
        font-size: 24px !important;
    }
    
    html body section h2 {
        font-size: 24px !important;
    }
    
    html body button {
        font-size: 20px !important;
        padding: 20px 28px !important;
        min-height: 64px !important;
    }
    
    html body #btnExportHQ,
    html body #btnExportMQ,
    html body #btnExportLQ {
        font-size: 20px !important;
        padding: 22px 28px !important;
        min-height: 66px !important;
    }
}

/* ========== OVERRIDE TAILWIND UTILITY CLASSES ========== */

html body .text-xs { font-size: 16px !important; }
html body .text-sm { font-size: 17px !important; }
html body .text-base { font-size: 18px !important; }
html body .text-lg { font-size: 20px !important; }
html body .text-xl { font-size: 22px !important; }
html body .text-2xl { font-size: 26px !important; }
html body .text-3xl { font-size: 32px !important; }

html body .p-1 { padding: 10px !important; }
html body .p-2 { padding: 14px !important; }
html body .p-3 { padding: 18px !important; }
html body .p-4 { padding: 24px !important; }
html body .p-6 { padding: 36px !important; }
html body .p-8 { padding: 48px !important; }

html body .m-1 { margin: 10px !important; }
html body .m-2 { margin: 14px !important; }
html body .m-3 { margin: 18px !important; }
html body .m-4 { margin: 24px !important; }
html body .m-6 { margin: 36px !important; }

html body .gap-1 { gap: 10px !important; }
html body .gap-2 { gap: 14px !important; }
html body .gap-3 { gap: 18px !important; }
html body .gap-4 { gap: 24px !important; }

html body .space-x-2 > * + * { margin-left: 14px !important; }
html body .space-x-3 > * + * { margin-left: 18px !important; }
html body .space-x-4 > * + * { margin-left: 24px !important; }

html body .space-y-2 > * + * { margin-top: 14px !important; }
html body .space-y-3 > * + * { margin-top: 18px !important; }
html body .space-y-4 > * + * { margin-top: 24px !important; }

/* ========== MINIMUM TOUCH TARGETS ========== */

html body button,
html body a,
html body input,
html body select,
html body textarea,
html body .clickable {
    min-width: 48px !important;
    min-height: 48px !important;
}

/* ========== CONTAINER: GENEROUS PADDING ========== */

html body .container {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

@media (max-width: 768px) {
    html body .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ========== BADGE MODE: LARGER ========== */

html body #currentMode {
    font-size: 18px !important;
    padding: 12px 24px !important;
    min-height: 46px !important;
}

@media (max-width: 768px) {
    html body #currentMode {
        font-size: 17px !important;
        padding: 10px 20px !important;
    }
}

/* ========== DARK MODE TOGGLE: BIGGER ========== */

html body .dark-mode-toggle {
    width: 62px !important;
    height: 62px !important;
}

html body .dark-mode-toggle i {
    font-size: 28px !important;
}

@media (max-width: 768px) {
    html body .dark-mode-toggle {
        width: 58px !important;
        height: 58px !important;
    }
    
    html body .dark-mode-toggle i {
        font-size: 26px !important;
    }
}

/* ========== ZOOM CONTROLS: LARGER ========== */

html body .zoom-controls {
    padding: 14px 24px !important;
    gap: 20px !important;
}

html body .zoom-btn {
    min-width: 54px !important;
    min-height: 54px !important;
    font-size: 24px !important;
}

html body .zoom-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    min-width: 80px !important;
}

/* ========== CANVAS CONTAINER: MORE SPACE ========== */

html body #canvasContainer {
    padding: 24px !important;
    min-height: 600px !important;
}

/* ========== LEGEND: READABLE ========== */

html body #legend {
    font-size: 17px !important;
    padding: 20px !important;
}

html body #legend .legend-item {
    font-size: 17px !important;
    padding: 10px 0 !important;
}

/* ========== TOAST: LARGE ========== */

html body .toast {
    font-size: 18px !important;
    padding: 20px 24px !important;
    min-height: 70px !important;
}

html body .toast i {
    font-size: 24px !important;
}

/* ========== SYNC INDICATOR: VISIBLE ========== */

html body .sync-indicator {
    width: 18px !important;
    height: 18px !important;
    border-width: 4px !important;
}

/* ========== TABLE: READABLE ========== */

html body table {
    font-size: 17px !important;
}

html body table th {
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 18px !important;
}

html body table td {
    font-size: 17px !important;
    padding: 16px !important;
}

/* ========== CRITICAL: EXPORT SECTION VISIBILITY ========== */

/* Make sure export section and buttons are ALWAYS visible */
html body #actionsSection {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body #btnExportHQ,
html body #btnExportMQ,
html body #btnExportLQ,
html body #btnSave,
html body #btnLoad {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========== FINAL NUCLEAR OPTION ========== */

/* Force everything to be visible and sized properly */
html body * {
    min-height: initial !important;
}

html body button *,
html body input *,
html body select *,
html body textarea * {
    font-size: inherit !important;
}

/* END OF ULTRA MEGA FORCE DISPLAY */