/* ============================================
   AP Annotator - Correctifs Affichage AGRESSIFS
   FORÇAGE tailles & espacements
   Date : 27 janvier 2026
   ============================================ */

/* ========== GLOBAL: TAILLES DE BASE AUGMENTÉES ========== */

* {
    /* Force minimum font size EVERYWHERE */
    font-size: inherit;
}

body {
    font-size: 16px !important; /* Base size increased */
    line-height: 1.6 !important;
}

/* ========== HEADER: TAILLES FORCÉES ========== */

header {
    padding: 20px 24px !important;
    min-height: 80px;
}

header h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
}

header p {
    font-size: 16px !important;
    margin-top: 4px !important;
}

header button {
    font-size: 16px !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
}

header button span {
    display: inline !important;
    margin-left: 8px !important;
}

header i {
    font-size: 20px !important;
}

/* ========== SECTIONS: ESPACEMENTS AUGMENTÉS ========== */

section {
    padding: 32px !important;
    margin-bottom: 32px !important;
}

section h2 {
    font-size: 26px !important;
    margin-bottom: 24px !important;
    font-weight: 700 !important;
}

section p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* ========== UPLOAD SECTION: TOUT PLUS GRAND ========== */

#uploadSection {
    padding: 40px !important;
}

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

#uploadSection i {
    font-size: 64px !important; /* Icons MUCH bigger */
    margin-bottom: 16px !important;
}

#uploadSection p {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

#uploadSection .text-sm {
    font-size: 15px !important;
}

/* Upload zones - bigger */
.upload-zone,
#fileUploadZone,
#dropZone,
#webcamBtn {
    padding: 40px 32px !important;
    min-height: 200px !important;
}

/* ========== BANNER INFO: LISIBLE ========== */

.bg-blue-50 {
    padding: 20px 24px !important;
    font-size: 16px !important;
}

.bg-blue-50 p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.bg-blue-50 strong {
    font-size: 17px !important;
    font-weight: 700 !important;
}

.bg-blue-50 i {
    font-size: 24px !important;
    margin-right: 12px !important;
}

/* ========== BUTTONS: TOUS PLUS GRANDS ========== */

button {
    font-size: 16px !important;
    padding: 14px 24px !important;
    min-height: 48px !important;
    font-weight: 600 !important;
}

button i {
    font-size: 18px !important;
    margin-right: 8px !important;
}

button span {
    font-size: 16px !important;
}

/* Specific buttons */
#btnLoadProjectHome {
    padding: 16px 32px !important;
    font-size: 18px !important;
    min-height: 56px !important;
}

#btnLoadProjectHome i {
    font-size: 20px !important;
}

#btnManageAP {
    padding: 14px 24px !important;
    font-size: 16px !important;
}

/* ========== TOOLBAR: BUTTONS PLUS GRANDS ========== */

.toolbar {
    padding: 16px 20px !important;
    gap: 16px !important;
}

.tool-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
}

.toolbar span {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-right: 12px !important;
}

/* ========== PANELS: ESPACÉS ========== */

.panel,
.bg-white {
    padding: 32px !important;
}

.panel h3,
.bg-white h3 {
    font-size: 22px !important;
    margin-bottom: 24px !important;
    font-weight: 700 !important;
}

/* ========== FORMS: LABELS & INPUTS PLUS GRANDS ========== */

label {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
    line-height: 1.5 !important;
}

input,
textarea,
select {
    font-size: 16px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    border-width: 2px !important;
}

input[type="range"] {
    height: 12px !important;
}

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

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

/* Values display */
span[id$="Value"] {
    font-size: 16px !important;
    font-weight: 600 !important;
    min-width: 60px !important;
}

/* ========== GRID: PLUS D'ESPACE ========== */

.grid {
    gap: 24px !important;
}

.grid > div {
    padding: 24px !important;
}

/* ========== MODALS: LISIBLES ========== */

.modal-content {
    padding: 40px !important;
}

.modal-header {
    margin-bottom: 32px !important;
}

.modal-title {
    font-size: 26px !important;
    font-weight: 700 !important;
}

.modal-body {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.modal-body label {
    font-size: 16px !important;
}

.modal-body input {
    font-size: 16px !important;
}

/* ========== TABLE: LISIBLE ========== */

table {
    font-size: 15px !important;
}

table th {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px !important;
}

table td {
    font-size: 15px !important;
    padding: 14px !important;
}

/* ========== ACTIONS SECTION: BUTTONS EMPILÉS MOBILE ========== */

.actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 20px !important;
}

.actions button {
    font-size: 16px !important;
    padding: 14px 24px !important;
    min-height: 52px !important;
    flex: 1 1 auto !important;
    min-width: 200px !important;
}

@media (max-width: 768px) {
    .actions {
        flex-direction: column !important;
        padding: 16px !important;
    }
    
    .actions button {
        width: 100% !important;
        min-width: auto !important;
        font-size: 17px !important;
        padding: 16px 24px !important;
        min-height: 56px !important;
    }
    
    .actions button span {
        display: inline !important;
        font-size: 17px !important;
    }
}

/* ========== ZOOM CONTROLS: PLUS GRANDS ========== */

.zoom-controls {
    padding: 12px 20px !important;
    gap: 16px !important;
}

.zoom-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 20px !important;
}

.zoom-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    min-width: 70px !important;
}

/* ========== CANVAS CONTAINER: PLUS D'ESPACE ========== */

#canvasContainer {
    padding: 20px !important;
    min-height: 500px !important;
}

/* ========== MOBILE: ENCORE PLUS GRAND ========== */

@media (max-width: 768px) {
    body {
        font-size: 17px !important;
    }
    
    header h1 {
        font-size: 24px !important;
    }
    
    header p {
        font-size: 15px !important;
    }
    
    section {
        padding: 24px 16px !important;
    }
    
    section h2 {
        font-size: 24px !important;
    }
    
    #uploadSection {
        padding: 24px 16px !important;
    }
    
    #uploadSection i {
        font-size: 56px !important;
    }
    
    #uploadSection p {
        font-size: 17px !important;
    }
    
    .upload-zone,
    #fileUploadZone,
    #dropZone,
    #webcamBtn {
        padding: 32px 24px !important;
        min-height: 180px !important;
    }
    
    button {
        font-size: 17px !important;
        padding: 16px 24px !important;
        min-height: 52px !important;
    }
    
    .tool-btn {
        min-width: 52px !important;
        min-height: 52px !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 24px !important;
    }
    
    label {
        font-size: 17px !important;
    }
    
    input,
    textarea,
    select {
        font-size: 17px !important;
        padding: 16px !important;
        min-height: 52px !important;
    }
}

/* ========== SMALL MOBILE: MAXIMUM LISIBILITÉ ========== */

@media (max-width: 480px) {
    body {
        font-size: 18px !important;
    }
    
    header h1 {
        font-size: 22px !important;
    }
    
    section h2 {
        font-size: 22px !important;
    }
    
    button {
        font-size: 18px !important;
        padding: 18px 24px !important;
        min-height: 56px !important;
    }
}

/* ========== BADGE MODE: PLUS GRAND ========== */

#currentMode {
    font-size: 16px !important;
    padding: 10px 20px !important;
    min-height: 40px !important;
}

@media (max-width: 768px) {
    #currentMode {
        font-size: 15px !important;
        padding: 8px 16px !important;
    }
}

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

.sync-indicator {
    width: 16px !important;
    height: 16px !important;
    border-width: 3px !important;
}

@media (max-width: 768px) {
    .sync-indicator {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ========== DARK MODE TOGGLE: PLUS GRAND ========== */

.dark-mode-toggle {
    width: 56px !important;
    height: 56px !important;
}

.dark-mode-toggle i {
    font-size: 24px !important;
}

@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 52px !important;
        height: 52px !important;
    }
    
    .dark-mode-toggle i {
        font-size: 22px !important;
    }
}

/* ========== LEGEND: LISIBLE ========== */

#legend {
    font-size: 15px !important;
    padding: 16px !important;
}

#legend .legend-item {
    font-size: 15px !important;
    padding: 8px 0 !important;
}

@media (max-width: 768px) {
    #legend {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

/* ========== TOAST NOTIFICATIONS: LISIBLES ========== */

.toast {
    font-size: 16px !important;
    padding: 16px 20px !important;
    min-height: 60px !important;
}

.toast i {
    font-size: 20px !important;
}

/* ========== FORCE ANTI-ALIASING ========== */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========== MINIMUM TOUCH TARGETS (ACCESSIBILITY) ========== */

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

/* ========== CONTAINERS: PADDING GÉNÉREUX ========== */

.container {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

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

/* ========== OVERRIDE TAILWIND SMALL SIZES ========== */

.text-xs { font-size: 14px !important; }
.text-sm { font-size: 15px !important; }
.text-base { font-size: 16px !important; }
.text-lg { font-size: 18px !important; }
.text-xl { font-size: 20px !important; }
.text-2xl { font-size: 24px !important; }
.text-3xl { font-size: 28px !important; }

.p-1 { padding: 8px !important; }
.p-2 { padding: 12px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 20px !important; }
.p-6 { padding: 32px !important; }
.p-8 { padding: 40px !important; }

.m-1 { margin: 8px !important; }
.m-2 { margin: 12px !important; }
.m-3 { margin: 16px !important; }
.m-4 { margin: 20px !important; }
.m-6 { margin: 32px !important; }

/* ========== GAP: PLUS D'ESPACE ========== */

.gap-1 { gap: 8px !important; }
.gap-2 { gap: 12px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 20px !important; }

.space-x-2 > * + * { margin-left: 12px !important; }
.space-x-3 > * + * { margin-left: 16px !important; }
.space-x-4 > * + * { margin-left: 20px !important; }

.space-y-2 > * + * { margin-top: 12px !important; }
.space-y-3 > * + * { margin-top: 16px !important; }
.space-y-4 > * + * { margin-top: 20px !important; }

/* ========== IMPORTANT: PRIORITÉ MAXIMALE ========== */

/* Force tout ce qui précède avec !important est déjà appliqué */
/* Ce fichier DOIT être chargé EN DERNIER pour override tout */