:root {
    --color-primary: #3B82F6;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    --color-primary-text: #111827;
    --color-secondary-text: #6B7280;
    --color-background-page: #ecf2fe;
    --color-background-card: #FFFFFF;
    --color-background-input: #FFFFFF;
    --color-white: #FFFFFF;
    --color-border: #E5E7EB;
    
    --font-family-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --border-radius-main: 0.75rem; /* 12px */
    --border-radius-sm: 0.375rem;
    --box-shadow-main: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

html, body {
    height: 100%;
}
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--color-background-page);
    color: var(--color-secondary-text);
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6{
    color: var(--color-primary-text);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1{font-size:2rem;}
h2.section-title, h2 {font-size:1.75rem; margin-bottom: 1.5rem;}
h3{font-size:1.5rem;}
h4{font-size:1.25rem;}
p{margin-top: 0; margin-bottom:1rem;color:var(--color-secondary-text);}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-layout{display:flex;position:relative;transition:padding-left 0.3s ease-in-out;}
.sidebar{width:260px;margin:1rem;height:calc(100vh - 2rem);background-color:var(--color-background-card);padding:20px 16px;border-radius:var(--border-radius-main);box-shadow:var(--box-shadow-main);display:flex;flex-direction:column;position:sticky;top:1rem;transition: all 0.3s ease-in-out;overflow-y:auto;overflow-x:hidden;}
.app-layout.sidebar-loading .sidebar { transition: none !important; }
.sidebar-header{padding-bottom:1.5rem;text-align:center;display:flex;align-items:center;justify-content:flex-start;gap:12px;border-bottom:1px solid var(--color-border);flex-shrink:0;}

.sidebar-header-icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; }
.sidebar-header-icon svg { width: 24px; height: 24px; fill: var(--color-primary-text); }
.sidebar-title{font-size:1rem;font-weight:600;color:var(--color-primary-text);white-space:nowrap;transition:opacity 0.2s ease-in-out, width 0.3s ease-in-out, margin 0.3s ease-in-out;}
.sidebar-nav{margin-top:1rem;overflow-y:auto;flex-grow:1;}
.sidebar-nav ul{list-style:none;padding:0;}
.sidebar-nav a{margin:0 0 0.5rem 0;display:flex;align-items:center;padding:12px 16px;color:var(--color-primary-text);text-decoration:none;transition:all 0.2s ease-in-out;border-radius:var(--border-radius-main);}
.nav-icon-container{width:32px;height:32px;border-radius:0.5rem;background:var(--color-background-page);display:grid;place-items:center;margin-right:12px;box-shadow:var(--box-shadow-main);transition:all 0.2s ease-in-out; flex-shrink: 0;}
.nav-icon-container svg{width:18px;height:18px;fill:var(--color-primary-text);transition:fill 0.2s ease-in-out; flex-shrink: 0;}
.nav-text{font-weight:500;color:var(--color-secondary-text);white-space:nowrap;transition:opacity 0.2s ease-in-out, font-weight 0.2s ease-in-out, color 0.2s ease-in-out, width 0.3s ease-in-out;}
.sidebar-nav a:hover .nav-icon-container{background:var(--color-primary);}
.sidebar-nav a:hover .nav-icon-container svg{fill:white;}
.sidebar-nav a:hover .nav-text{color:var(--color-primary-text);font-weight:600;}
.sidebar-nav a.active{background-color:transparent;}
.sidebar-nav a.active .nav-icon-container{background:var(--color-primary);}
.sidebar-nav a.active .nav-icon-container svg{fill:white;}
.sidebar-nav a.active .nav-text{color:var(--color-primary-text);font-weight:600;}
.nav-section-header{padding:16px 16px 8px;font-size:0.75rem;font-weight:700;color:var(--color-secondary-text);text-transform:uppercase;white-space:nowrap;transition:opacity 0.2s ease-in-out, height 0.3s, padding 0.3s, margin 0.3s;}

.sidebar-footer{margin-top:auto;padding-top:1rem;flex-shrink:0;}
.sidebar-toggle-button{background-color: var(--color-background-page); border: none; border-radius: 0.5rem; width: 100%; padding: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 1rem; color: var(--color-secondary-text); font-weight: 500;}
.sidebar-toggle-button svg{width: 20px; height: 20px; fill: currentColor; flex-shrink: 0;}
.sidebar-toggle-button:hover { background-color: #e5e7eb; }
.sidebar-toggle-button .icon-maximize { display: none; }
.help-box-icon svg{width:16px;height:16px;fill:var(--color-primary);}
.help-box-title, .help-box-text, .help-box-button { transition: opacity 0.2s ease-in-out; }
.help-box-title{color:white;font-weight:600;font-size:1rem;}
.help-box-text{color:white;opacity:0.8;font-size:0.9rem;}
.help-box-button{display:block;width:100%;padding:10px;background:white;color:var(--color-primary-text);border-radius:0.5rem;font-weight:600;margin-top:1rem;text-align:center;transition:transform 0.2s;}
.help-box-button:hover{transform:scale(1.02);}
.sidebar-help-box{padding:20px;border-radius:var(--border-radius-main);background-image:linear-gradient(310deg,#4299e1,#3b82f6);color:white;text-align:center;margin-bottom:1rem;transition:all 0.3s ease-in-out;}
.help-box-icon{width:32px;height:32px;border-radius:0.5rem;background:white;display:grid;place-items:center;margin:-36px auto 10px;box-shadow:var(--box-shadow-main); transition: margin 0.3s ease-in-out;}
.sidebar-upgrade-btn{display:block;width:100%;padding:12px;text-align:center;font-weight:600;color:white;border-radius:0.5rem;background-image:linear-gradient(310deg,#21d4fd,#2152ff);margin-bottom:1rem;transition:all 0.2s ease-in-out;}
.sidebar-upgrade-btn:hover{transform:scale(1.02);}
.upgrade-text-short { display: none; }

.main-content{flex-grow:1;padding:1.5rem;}
.main-content-header{display:none;}

/* Dashboard Styles */
.dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 24px; }
.welcome-banner { grid-column: span 12; background: linear-gradient(310deg,#21d4fd,#2152ff); border-radius: var(--border-radius-main); padding: 32px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.welcome-banner-content h2 { font-size: 2rem; font-weight: 700; margin-bottom: 8px;color: var(--color-white); }
.welcome-banner-content p { font-size: 1rem; color: var(--color-white); max-width: 450px; margin-bottom: 24px; }
.welcome-banner-illustration { height: 200px; width: auto; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.stat-card-container { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card { background-color: var(--color-background-card); border-radius: var(--border-radius-main); padding: 24px; display: flex; align-items: center; gap: 16px; box-shadow: var(--box-shadow-main); }
.stat-card-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.stat-card-icon svg { width: 24px; height: 24px; fill: white; flex-shrink: 0; }
.stat-card-icon.bg-blue { background-color: #3B82F6; }
.stat-card-icon.bg-green { background-color: #10B981; }
.stat-card-icon.bg-yellow { background-color: #F59E0B; }
.stat-card-icon.bg-red { background-color: #EF4444; }
.stat-card-info .number { font-size: 1.75rem; font-weight: 700; color: var(--color-primary-text); }
.stat-card-info .label { font-size: 0.875rem; color: var(--color-secondary-text); }
.overview-card { background-color: var(--color-background-card); border-radius: var(--border-radius-main); padding: 24px; box-shadow: var(--box-shadow-main); margin-bottom: 24px;}
.overview-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.overview-card-header h3 { margin: 0; font-size: 1.125rem; }
.chart-container { height: 300px; position: relative; }

/* Styles for Lists, Forms, Modals */
.list-container { display:flex; flex-direction:column; gap:0; margin-top:20px; background-color:var(--color-background-card); padding: 8px 24px; border-radius:var(--border-radius-main); box-shadow:var(--box-shadow-main); }
.list-item { padding: 16px 0; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.list-item:last-child { border-bottom: none; }
.list-item-link { display: block; text-decoration: none; color: inherit; }
.list-item-link:hover .list-item { background-color: #F9FAFB; }
.list-item-link .list-item { box-shadow: none; background-color: transparent; border-radius: 0; padding: 16px 0; margin: 0; }
.list-item-link .list-item:hover { background-color: transparent; }

.list-item > div { flex-shrink: 0; }
.list-item-identity { display: flex; align-items: center; gap: 16px; flex-grow: 1; flex-basis: 250px; }
.list-item-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-background-page); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; border: 1px solid var(--color-border); }
.list-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font-weight: 600; font-size: 1rem; color: var(--color-secondary-text); }
.list-item-name{font-weight:600;}
.list-item-name a.name-link { color: var(--color-primary-text); text-decoration: none; }
.list-item-name a.name-link:hover { color: var(--color-primary); text-decoration: none; }
.list-item-name small { font-weight: 400; color: var(--color-secondary-text); }
.list-item-client,.list-item-ambassador{flex-grow:1;flex-basis:120px;font-size:0.9rem;}
.list-item-email{font-size:0.9rem;word-break:break-all; flex-grow:1; flex-basis: 200px; }
.list-item-identity .list-item-email { flex-grow: 0; font-size: 0.8rem; }
.list-item-promo-code { display: flex; flex-direction: column; text-align: center; background: #f3f4f6; padding: 4px 12px; border-radius: var(--border-radius-sm); }
.list-item-promo-code span { font-size: 0.7rem; font-weight: 600; color: var(--color-secondary-text); letter-spacing: 0.5px; }
.list-item-promo-code strong { font-size: 0.9rem; color: var(--color-primary); }
.list-item-dates { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-secondary-text); }
.list-item-stats { display: flex; gap: 1rem; color: var(--color-secondary-text); }
.list-item-status{display:flex;gap:10px;flex-grow:1;flex-basis:220px;}
.list-item-actions{flex-grow:0;flex-basis:auto;margin-left:auto;display:flex;gap:10px;align-items:center;}
.list-item-actions form{margin:0;}
.list-item-actions .button{padding:6px 14px;font-size:0.875rem;}
.status-toggle { display: inline-block; }
.status-toggle input[type="checkbox"] { display: none; }
.status-toggle span { cursor: pointer; }

.form-section { background-color:var(--color-background-card); padding:24px; border-radius:var(--border-radius-main); box-shadow:var(--box-shadow-main); margin-bottom:24px; }
.filter-form { background-color:var(--color-background-card); padding:24px; border-radius:var(--border-radius-main); box-shadow:var(--box-shadow-main); margin-bottom:24px; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.filter-group{flex:1 1 200px;}
.filter-group-action{flex:0 1 auto;}
.filter-form button{padding:10px 24px;height:fit-content;}
.form-group{margin-bottom:20px;}
.form-group label{color:var(--color-primary-text);display:block;margin-bottom:8px;font-weight:500;font-size:0.95rem;}
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="password"],.form-group input[type="number"],.form-group input[type="url"],.form-group input[type="date"],.form-group select,.form-group textarea{ background-color: var(--color-background-input); border:1px solid var(--color-border); width:100%; padding:10px 12px; border-radius:var(--border-radius-sm); font-size:1rem; transition: all 0.2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{box-shadow:0 0 0 3px rgba(59,130,246,0.3);border-color:var(--color-primary);}
.text-hint { font-size: 0.85rem; color: var(--color-secondary-text); margin-top: -12px; }
.text-hint code { background-color: #e5e7eb; padding: 2px 5px; border-radius: 4px; font-family: monospace; }

.button{transition:all 0.2s ease-in-out;padding:10px 20px;border:none;border-radius:var(--border-radius-sm);font-size:1rem;font-weight:600;cursor:pointer;}
.button:hover{transform:translateY(-1px);box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.button-primary{background: var(--color-primary);border:none;color:white;}
.button-secondary{background-color: var(--color-secondary-text); color:white;}
.button-error{background-color: var(--color-danger); color:white;}
.button-warning{background-color: var(--color-warning); color:white;}
.button-info{background-color: var(--color-info); color:white;}
.button-success{background-color: var(--color-success); color:white;}

.message{padding: 1rem;border-radius: var(--border-radius-main);margin-bottom:1.5rem;border: 1px solid transparent;}
.message.success{border-color:var(--color-success);background-color: #F0FDF4;color: #14532D;}
.message.error{border-color:var(--color-danger);background-color: #FEF2F2;color: #991B1B;}
.message.info{border-color:var(--color-info);background-color: #EFF6FF;color: #1E40AF;}
.message.warning{border-color:var(--color-warning);background-color: #FFFBEB;color: #92400E;}

.status-badge{padding:4px 10px;font-size:0.8rem;min-width:80px;text-align:center;border-radius:var(--border-radius-main);font-weight:600;}
.status-pending_validation, .status-pending { background-color: #FFFBEB;color: #B45309; }
.status-validated, .status-available, .status-active, .status-used { background-color: #F0FDF4;color: #15803D; }
.status-declined, .status-expired { background-color: #FEF2F2;color: #B91C1C; }
.status-inactive { background-color: #F1F5F9;color: #475569; }

.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.5);padding-top:60px;animation:fadeIn 0.3s ease-out;}
.modal-content{background-color:var(--color-background-card);margin:5% auto;padding:30px;border-radius:var(--border-radius-main);box-shadow:var(--box-shadow-main);width:90%;max-width:600px;position:relative;animation:slideIn 0.3s ease-out;}
.close-button{color:var(--color-secondary-text);font-size:32px;font-weight:bold;position:absolute;top:10px;right:20px;cursor:pointer;transition:color 0.2s ease-in-out;}
.close-button:hover,.close-button:focus{color:var(--color-primary-text);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideIn{from{transform:translateY(-50px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.public-page, .login-page{background-color:var(--color-background-page); display: grid; place-items: center; height: 100vh;}
.public-container, .login-box{background-color:var(--color-background-card);padding: 40px; border-radius: var(--border-radius-main);box-shadow:var(--box-shadow-main); width: 100%; max-width: 450px;}
.public-container .login-box { padding: 0; box-shadow: none; border: none; }

/* Sidebar Minimisé */
.app-layout.is-minimized .sidebar { width: 96px; }
.app-layout.is-minimized .sidebar-title, .app-layout.is-minimized .nav-text { width: 0; opacity: 0; overflow: hidden; margin-left: 0; pointer-events: none; }
.app-layout.is-minimized .nav-section-header { height: 0; padding-top: 0; padding-bottom: 0; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.app-layout.is-minimized .nav-icon-container { margin-right: 0; }
.app-layout.is-minimized .sidebar-nav a { justify-content: center; }
.app-layout.is-minimized .sidebar-toggle-button .icon-minimize { display: none; }
.app-layout.is-minimized .sidebar-toggle-button .icon-maximize { display: block; }
.app-layout.is-minimized .help-box-title, .app-layout.is-minimized .help-box-text, .app-layout.is-minimized .help-box-button { display: none; }
.app-layout.is-minimized .sidebar-help-box { padding: 10px; }
.app-layout.is-minimized .sidebar-help-box .help-box-icon { margin: 0; }
.app-layout.is-minimized .upgrade-text-full { display: none; }
.app-layout.is-minimized .upgrade-text-short { display: inline; }
.app-layout.is-minimized .sidebar-upgrade-btn { font-size: 0.9rem; }

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: repeat(1, 1fr); }
    .welcome-banner { grid-column: span 1; flex-direction: column; text-align: center; }
    .welcome-banner-illustration { display: none; }
    .stat-card-container { grid-template-columns: repeat(2, 1fr); grid-column: span 1; }
    .overview-card { grid-column: span 1; }
}
@media screen and (max-width: 768px) {
    .main-content { padding: 1rem; }
    .stat-card-container { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; top: 0; margin: 0; height: 100vh; width: 280px; border-radius: 0; transform: translateX(-100%); background-color: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(200%) blur(30px); z-index: 100; box-shadow: var(--box-shadow-main); transition: transform 0.3s ease-in-out; }
    .sidebar.is-visible { transform: translateX(0); }
    .main-content-header { display: flex; align-items: center; padding-bottom: 1rem; }
    .main-content-header .title { margin: 0; font-size: 1.25rem;}
    .menu-toggle { display: block; background:none; border:none; cursor:pointer; margin-right: 1rem;}
    .menu-toggle svg{width:24px;height:24px;fill:var(--color-primary-text);}
    .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
    .sidebar-overlay.is-visible { opacity: 1; visibility: visible; }
    .sidebar-toggle-button { display: none; }
    .list-item {flex-direction: column; align-items: flex-start; gap: 12px;}
    .list-item > div { width: 100%; text-align: left !important; flex-basis: auto !important; display: block;}
    .list-item-actions, .list-item-dates, .list-item-status {padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--color-border); margin-left: 0; justify-content: flex-start; }
}