/*
 * root.css - Feuille de styles globale pour marketingcallcenter.net
 * Partagée entre publicApp et webApp
 *
 * Palette de couleurs :
 *   Primaire : #f89800 (orange)
 *   Secondaire : #ffffff (blanc)
 *   Tertiaire : #000000 (noir)
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

/* ========================================
    Réinitialisation CSS & Box Sizing
    ======================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* ========================================
    Variables CSS (propriétés personnalisées)
    ======================================== */
:root {
    /* Primary colors */
    --color-primary: #f89800;
    --color-primary-hover: #d17f00;
    --color-secondary: #ffffff;
    --color-tertiary: #000000;

    /* Shades and variations (optional) */
    --color-primary-light: #ffab33;
    --color-primary-dark: #d17f00;
    --color-gray-light: rgba(255, 255, 255, 0.5);
    --color-gray-medium: #999999;
    --color-gray-dark: #333333;
    --color-gray-darker: #393E46;
    --color-gray-darkest: #222831;

    /* Text colors */
    --color-text: #333333;
    --color-text-light: #e9e6e6;
    --color-text-dark: #000000;
    --color-text-disabled: #999999;

    /* Primary opacity variations */
    --color-primary-opacity-10: rgba(248, 152, 0, 0.1);
    --color-primary-opacity-20: rgba(248, 152, 0, 0.2);
    --color-primary-opacity-30: rgba(248, 152, 0, 0.3);

    /* Background colors */
    --color-background: #fafbfc;
    --color-background-overlay: rgba(255, 255, 255, 0.03);
    --color-background-disabled: #f5f5f5;

    /* Border colors */
    --color-border: #cccccc;
    --color-border-light: #e8eaed;

    /* Icon colors */
    --icon-red-bg: #e74c3c;
    --icon-red-bg-opacity: rgba(220, 38, 38, 0.1);
    --icon-red-text: #ef4444;

    /* Status colors */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-error: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;

    /* Gradients */
    --bg-success-gradient: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    /* Typography */
    --font-family-base: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'Montserrat', system-ui, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Border radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 8px;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-base: all 0.3s ease;

    /* Spacing additional */
    --spacing-xxl: 4rem;

    /* UI Elements */
    --color-overlay: rgba(0, 0, 0, 0.6);

    /* Shadows */
    --shadow-card-light: 0 2px 8px rgba(248, 152, 0, 0.2);
    --shadow-card-medium: 0 6px 20px rgba(248, 152, 0, 0.4);
    --shadow-card-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-md: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-card-strong: 0 24px 64px rgba(0, 0, 0, 0.15);
    --shadow-focus-primary: 0 0 0 3px rgba(248, 152, 0, 0.1);
    --shadow-focus-error: 0 0 0 3px rgba(220, 53, 69, 0.1);

    /* Action buttons colors */
    --btn-view-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --btn-view-bg-hover: linear-gradient(135deg, #059669 0%, #047857 100%);
    --btn-view-color: #ffffff;
    --btn-view-border: #10b981;
    --btn-view-shadow: rgba(16, 185, 129, 0.3);

    --btn-edit-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --btn-edit-bg-hover: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --btn-edit-color: #ffffff;
    --btn-edit-border: #3b82f6;
    --btn-edit-shadow: rgba(59, 130, 246, 0.4);

    --btn-delete-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --btn-delete-bg-hover: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --btn-delete-color: #ffffff;
    --btn-delete-border: #ef4444;
    --btn-delete-shadow: rgba(239, 68, 68, 0.4);

    --btn-visibility-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --btn-visibility-bg-hover: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    --btn-visibility-color: #ffffff;
    --btn-visibility-border: #8b5cf6;
    --btn-visibility-shadow: rgba(139, 92, 246, 0.4);

    /* Action button semantic tokens */
    --btn-action-edit-bg: var(--color-primary);
    --btn-action-edit-bg-hover: var(--color-primary-dark);
    --btn-action-edit-color: var(--color-text-light);

    /* Make Add action use the primary (yellow/orange) color */
    --btn-action-add-bg: var(--btn-action-edit-bg);
    --btn-action-add-bg-hover: var(--btn-action-edit-bg-hover);
    --btn-action-add-color: var(--btn-action-edit-color);

    --btn-action-delete-bg: var(--btn-delete-bg);
    --btn-action-delete-bg-hover: var(--btn-delete-bg-hover);
    --btn-action-delete-color: var(--btn-delete-color);

    --btn-action-view-bg: var(--btn-edit-bg);
    /* blue */
    --btn-action-view-bg-hover: var(--btn-edit-bg-hover);
    --btn-action-view-color: var(--btn-edit-color);

    --btn-action-visibility-bg: var(--btn-visibility-bg);
    --btn-action-visibility-bg-hover: var(--btn-visibility-bg-hover);
    --btn-action-visibility-color: var(--btn-visibility-color);
}


/* ========================================
    Typographie
    ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--color-primary-dark);
}

strong,
b {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}

/* ========================================
    Boutons
    ======================================== */
button,
.btn {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color var(--transition-speed) ease, transform 0.1s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-2px);
}

button:active,
.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-secondary);
}

.btn-secondary {
    background-color: var(--color-tertiary);
    color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-gray-dark);
    color: var(--color-secondary);
}

/* ========================================
   Action button utilities (semantic)
   Use these classes across the app for consistent action colors
   ======================================== */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-weight: 700;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
}

.btn-action i {
    display: inline-block
}

.btn-action-edit {
    background: var(--btn-action-edit-bg);
    color: var(--btn-action-edit-color);
    border: 1px solid transparent;
}

.btn-action-edit:hover {
    background: var(--btn-action-edit-bg-hover)
}

.btn-action-add {
    background: var(--btn-action-add-bg);
    color: var(--btn-action-add-color);
    border: 1px solid transparent;
}

.btn-action-add:hover {
    background: var(--btn-action-add-bg-hover)
}

.btn-action-delete {
    background: var(--btn-action-delete-bg);
    color: var(--btn-action-delete-color);
    border: 1px solid transparent;
}

.btn-action-delete:hover {
    background: var(--btn-action-delete-bg-hover)
}

.btn-action-view {
    background: var(--btn-action-view-bg);
    color: var(--btn-action-view-color);
    border: 1px solid transparent;
}

.btn-action-view:hover {
    background: var(--btn-action-view-bg-hover)
}

.btn-action-visibility {
    background: var(--btn-action-visibility-bg);
    color: var(--btn-action-visibility-color);
    border: 1px solid transparent;
}

.btn-action-visibility:hover {
    background: var(--btn-action-visibility-bg-hover);
    box-shadow: 0 4px 12px var(--btn-visibility-shadow);
}

/* Style différent quand le contenu est publié (visible=1) */
.btn-action-visibility[data-visible="1"] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-action-visibility[data-visible="1"]:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Icon-only variants */
.btn-action.btn-icon {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.btn-action.btn-icon i {
    font-size: 0.875rem
}

/* Simple icon delete button (transparent with colored icon) */
.btn-icon-delete {
    background: transparent;
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition-base);
    border-radius: var(--border-radius-sm);
    color: var(--icon-red-text);
}

.btn-icon-delete:hover {
    background: var(--icon-red-bg-opacity);
    transform: scale(1.1);
}

/* ========================================
    Utilitaires
    ======================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-white {
    background-color: var(--color-secondary);
}

.bg-black {
    background-color: var(--color-tertiary);
}

/* ========================================
    Aides de mise en page (pied de page fixe)
    Assure que le pied de page reste en bas même sur les pages courtes
    ======================================== */
html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-tertiary);
}

main {
    flex: 1 0 auto;
}

/* ========================================
    Aides pour responsive
    ======================================== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
    }

    .container {
        padding: 5px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 13px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}