/* ═══════════════════════════════════════════════════════ KUTYRA — Premium Salon Management Theme Black / Gold / Cream aesthetic ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap'); /* ── Variables ─────────────────────────────────────────── */ :root { --bg-primary: #0e0e0f; --bg-secondary: #161618; --bg-card: #1c1c1f; --bg-card-hover: #232327; --bg-sidebar: #0f1729; --gold: #c9a84c; --gold-light: #e2c97e; --gold-dark: #a07c30; --gold-subtle: rgba(201,168,76,0.12); --gold-glow: rgba(201,168,76,0.25); --cream: #f5f0e8; --cream-muted: #d4cfc5; --white: #ffffff; --text-primary: #f0ece3; --text-secondary: #9a9590; --text-muted: #5c5855; --text-gold: #c9a84c; --border: rgba(255,255,255,0.07); --border-gold: rgba(201,168,76,0.3); --sidebar-width: 260px; --topbar-height: 64px; --success: #4caf7d; --danger: #e05555; --warning: #e0a030; --info: #4a90d9; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-gold: 0 0 20px rgba(201,168,76,0.15); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ═══════════════════════════════════════════════════════ THÈMES (choix par compte — appliqué via data-theme sur ) - défaut / [data-theme="authentic"] : look doré / sombre KUTYRA (= :root ci-dessus) - [data-theme="dark"] : sombre neutre, accent bleu ardoise - [data-theme="light"] : clair, fond crème/blanc, accent doré assombri On ne redéfinit que les variables : tout le reste de la feuille les consomme. ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg-primary: #0c0d10; --bg-secondary: #131519; --bg-card: #181b20; --bg-card-hover: #20242b; --bg-sidebar: #0a0b0e; --gold: #6b8cce; --gold-light: #93acdd; --gold-dark: #4f6fb0; --gold-subtle: rgba(107,140,206,0.14); --gold-glow: rgba(107,140,206,0.22); --text-primary: #e6e9ef; --text-secondary: #9aa1ad; --text-muted: #5d636e; --text-gold: #93acdd; --border: rgba(255,255,255,0.08); --border-gold: rgba(107,140,206,0.35); --shadow-gold: 0 0 20px rgba(107,140,206,0.15); } [data-theme="light"] { --bg-primary: #f0ece3; --bg-secondary: #f7f4ee; --bg-card: #ffffff; --bg-card-hover: #f3efe6; --bg-sidebar: #faf8f3; --gold: #b8923c; --gold-light: #9a7b2e; --gold-dark: #7e6526; --gold-subtle: rgba(184,146,60,0.14); --gold-glow: rgba(184,146,60,0.18); --text-primary: #1c1c1f; --text-secondary: #5c5855; --text-muted: #94908a; --text-gold: #8f6f28; --border: rgba(0,0,0,0.10); --border-gold: rgba(184,146,60,0.40); --shadow: 0 4px 20px rgba(0,0,0,0.08); --shadow-gold: 0 0 16px rgba(184,146,60,0.12); } /* Sélecteur de thème (topbar) */ .theme-menu { position: relative; } .theme-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-secondary); transition: var(--transition); } .theme-menu > summary::-webkit-details-marker { display: none; } .theme-menu > summary:hover { border-color: var(--border-gold); color: var(--gold-light); } .theme-menu-panel { position: absolute; right: 0; top: 46px; z-index: 200; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; min-width: 180px; } .theme-menu-panel form { margin: 0; } .theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 13px; border-radius: var(--radius-sm); font-family: var(--font-body); } .theme-opt:hover { background: var(--bg-card-hover); color: var(--text-primary); } .theme-opt.active { color: var(--gold-light); font-weight: 600; } .theme-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--border); } .theme-swatch-authentic { background: linear-gradient(135deg, #c9a84c, #0f1729); } .theme-swatch-dark { background: linear-gradient(135deg, #6b8cce, #0c0d10); } .theme-swatch-light { background: linear-gradient(135deg, #b8923c, #f0ece3); } /* Sélecteur de thème dans la barre claire du tableau de bord (palette --d-*) */ .dash-theme .theme-menu > summary { border-color: var(--d-border); color: var(--d-text-soft); } .dash-theme .theme-menu > summary:hover { border-color: var(--d-gold); color: var(--d-gold-dark); } .dash-theme .theme-menu-panel { background: var(--d-card); border-color: var(--d-border); } .dash-theme .theme-opt { color: var(--d-text-soft); } .dash-theme .theme-opt:hover { background: var(--d-bg); color: var(--d-text); } .dash-theme .theme-opt.active { color: var(--d-gold-dark); } /* ── Reset & Base ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Layout ───────────────────────────────────────────── */ .app-wrapper { display: flex; min-height: 100vh; } /* ── Sidebar ──────────────────────────────────────────── */ .sidebar { width: var(--sidebar-width); height: 100vh; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; transition: var(--transition); } .sidebar-logo { padding: 28px 24px 20px; border-bottom: 1px solid var(--border); } .logo-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #0e0e0f; box-shadow: var(--shadow-gold); } .logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold-light); letter-spacing: 2px; } .logo-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 1px; } .sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; } .nav-section-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 4px; margin-top: 8px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary); font-size: 14px; font-weight: 400; transition: var(--transition); margin-bottom: 2px; position: relative; } .nav-item:hover { background: var(--bg-card); color: var(--text-primary); } .nav-item.active { background: var(--gold-subtle); color: var(--gold-light); font-weight: 500; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--gold); border-radius: 0 3px 3px 0; } .nav-icon { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; } .nav-item.active .nav-icon { opacity: 1; } /* ── Groupe de navigation repliable (ex. Finance) ── */ .nav-group { margin-bottom: 2px; } .nav-group > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; cursor: pointer; list-style: none; transition: var(--transition); } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary:hover { background: var(--bg-card); color: var(--text-primary); } .nav-group > summary.active { color: var(--gold-light); font-weight: 500; } .nav-caret { width: 14px; height: 14px; margin-left: auto; opacity: 0.7; transition: transform 0.2s; flex-shrink: 0; } .nav-group[open] > summary .nav-caret { transform: rotate(180deg); } .nav-subitems { margin: 2px 0 4px; } .nav-item.nav-subitem { padding-left: 44px; font-size: 13px; } .nav-item.nav-subitem .nav-icon { width: 15px; height: 15px; } /* ── Item désactivé (module à venir) ── */ .nav-item.nav-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .soon-badge { margin-left: auto; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); padding: 2px 6px; border-radius: 10px; } /* ── Outils de tableau : recherche, tri, pagination ── */ .table-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .table-search { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; flex: 1; min-width: 220px; max-width: 420px; } .table-search input { background: transparent; border: none; outline: none; color: var(--text-primary); width: 100%; font-size: 14px; } .table-search svg { width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0; } .sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; } .sort-link:hover { color: var(--gold-light); } .sort-arrow { font-size: 10px; color: var(--gold); } .pagination-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; } .page-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: var(--transition); } .page-btn:hover { background: var(--bg-card); color: var(--text-primary); } .page-btn.disabled { opacity: 0.4; pointer-events: none; } .page-info { font-size: 13px; color: var(--text-muted); } .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); } /* ── Main Content ─────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* ── Topbar ───────────────────────────────────────────── */ .topbar { height: var(--topbar-height); background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 16px; position: sticky; top: 0; z-index: 50; } .topbar-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-primary); flex: 1; } .salon-selector { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: var(--transition); } .salon-selector:hover { border-color: var(--border-gold); color: var(--gold-light); } .salon-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; flex-shrink: 0; } .topbar-search { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; width: 220px; } .topbar-search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: var(--font-body); width: 100%; } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 36px; height: 36px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--text-secondary); text-decoration: none; } .icon-btn:hover { border-color: var(--border-gold); color: var(--gold-light); } .avatar { width: 36px; height: 36px; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #0e0e0f; cursor: pointer; text-decoration: none; flex-shrink: 0; } /* ── Page Body ────────────────────────────────────────── */ .page-body { flex: 1; padding: 28px; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .page-header h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--text-primary); } .page-header p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } /* ── Cards ────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 15px; font-weight: 500; color: var(--text-primary); } .card-body { padding: 22px; } /* ── KPI Cards ────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; transition: var(--transition); } .kpi-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); transform: translateY(-2px); } .kpi-card.featured { border-color: var(--border-gold); background: linear-gradient(135deg, var(--bg-card), #1e1c16); } .kpi-card.featured::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: radial-gradient(circle at top right, var(--gold-glow), transparent 70%); } .kpi-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .kpi-value { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--text-primary); line-height: 1.1; } .kpi-card.featured .kpi-value { color: var(--gold-light); } .kpi-suffix { font-size: 14px; color: var(--text-secondary); margin-left: 4px; } .kpi-trend { display: flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 8px; color: var(--success); } .kpi-icon { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; background: var(--gold-subtle); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--gold); } /* ── Buttons ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font-body); font-weight: 500; border: none; cursor: pointer; text-decoration: none; transition: var(--transition); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #0e0e0f; } .btn-primary:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: var(--shadow-gold); transform: translateY(-1px); } .btn-secondary { background: var(--bg-card-hover); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--border-gold); } .btn-danger { background: rgba(224,85,85,0.15); color: var(--danger); border: 1px solid rgba(224,85,85,0.2); } .btn-danger:hover { background: rgba(224,85,85,0.25); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-gold); } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-lg { padding: 12px 24px; font-size: 15px; } /* ── Tables ───────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .k-table { width: 100%; border-collapse: collapse; } .k-table th { padding: 10px 16px; text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 500; } .k-table td { padding: 14px 16px; font-size: 14px; color: var(--text-primary); border-bottom: 1px solid var(--border); vertical-align: middle; } .k-table tr:last-child td { border-bottom: none; } .k-table tr:hover td { background: var(--bg-card-hover); } .k-table .td-muted { color: var(--text-secondary); font-size: 13px; } .k-table .td-gold { color: var(--gold-light); font-weight: 500; } /* ── Badges / Status ──────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; } .badge-success { background: rgba(76,175,125,0.15); color: var(--success); } .badge-warning { background: rgba(224,160,48,0.15); color: var(--warning); } .badge-danger { background: rgba(224,85,85,0.15); color: var(--danger); } .badge-gold { background: var(--gold-subtle); color: var(--gold-light); } .badge-neutral { background: rgba(255,255,255,0.06); color: var(--text-secondary); } .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ── Forms ────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; } .form-control { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; font-family: var(--font-body); padding: 10px 14px; outline: none; transition: var(--transition); } .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-subtle); } .form-control::placeholder { color: var(--text-muted); } select.form-control { cursor: pointer; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } /* ── Staff Avatar ─────────────────────────────────────── */ .staff-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, #2a2820, #3d3720); border: 1px solid var(--border-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--gold-light); flex-shrink: 0; } .staff-info { display: flex; align-items: center; gap: 12px; } .staff-name { font-size: 14px; font-weight: 500; color: var(--text-primary); } .staff-role { font-size: 12px; color: var(--text-secondary); } /* ── POS Layout ───────────────────────────────────────── */ .pos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; height: calc(100vh - var(--topbar-height) - 56px); } .pos-catalog { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .pos-cart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; } .pos-cart-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .pos-cart-title { font-size: 15px; font-weight: 500; color: var(--text-primary); } .pos-items { flex: 1; overflow-y: auto; padding: 12px; } .pos-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-primary); border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--border); } .pos-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .pos-item-icon.service { background: rgba(201,168,76,0.15); } .pos-item-icon.product { background: rgba(74,144,217,0.15); } .pos-item-label { flex: 1; font-size: 13px; color: var(--text-primary); } .pos-item-qty { font-size: 12px; color: var(--text-muted); } .pos-item-price { font-size: 14px; font-weight: 500; color: var(--gold-light); } .pos-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; transition: var(--transition); } .pos-remove-btn:hover { color: var(--danger); background: rgba(224,85,85,0.1); } .pos-totals { padding: 16px 20px; border-top: 1px solid var(--border); } .pos-total-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; color: var(--text-secondary); } .pos-total-row.total { font-size: 20px; font-family: var(--font-display); font-weight: 600; color: var(--text-primary); border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; } .pos-total-row.total .pos-total-amount { color: var(--gold-light); } .pos-checkout { padding: 16px 20px; border-top: 1px solid var(--border); } .payment-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .payment-btn { padding: 10px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); font-size: 13px; font-family: var(--font-body); cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 4px; } .payment-btn.selected { border-color: var(--gold); background: var(--gold-subtle); color: var(--gold-light); } /* ── Catalog Tabs ─────────────────────────────────────── */ .catalog-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-card); border-radius: var(--radius-sm); border: 1px solid var(--border); width: fit-content; } .catalog-tab { padding: 6px 16px; border-radius: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: var(--transition); border: none; background: none; font-family: var(--font-body); } .catalog-tab.active { background: var(--bg-card-hover); color: var(--text-primary); } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .catalog-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; transition: var(--transition); text-align: left; width: 100%; font-family: var(--font-body); } .catalog-item:hover { border-color: var(--border-gold); background: var(--bg-card-hover); transform: translateY(-1px); } .catalog-item-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; } .catalog-item-price { font-size: 14px; color: var(--gold-light); font-weight: 500; } .catalog-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ── Confirmation ─────────────────────────────────────── */ .confirmation-card { max-width: 500px; margin: 60px auto; text-align: center; } .confirmation-icon { width: 72px; height: 72px; background: rgba(76,175,125,0.15); border: 2px solid rgba(76,175,125,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 32px; } /* ── Login ────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); position: relative; overflow: hidden; } .login-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 30% 40%, rgba(201,168,76,0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 80% 70%, rgba(201,168,76,0.04) 0%, transparent 60%); pointer-events: none; } .login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 44px; width: 100%; max-width: 420px; position: relative; z-index: 1; } .login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .login-logo .logo-icon { width: 48px; height: 48px; font-size: 22px; } .login-logo .logo-text { font-size: 28px; } .login-heading { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 8px; } .login-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 32px; } /* ── Alerts ───────────────────────────────────────────── */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-success { background: rgba(76,175,125,0.12); border: 1px solid rgba(76,175,125,0.2); color: var(--success); } .alert-danger { background: rgba(224,85,85,0.12); border: 1px solid rgba(224,85,85,0.2); color: var(--danger); } .alert-warning { background: rgba(224,160,48,0.12); border: 1px solid rgba(224,160,48,0.2); color: var(--warning); } /* ── Empty State ──────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; } .empty-state h3 { font-size: 16px; color: var(--text-secondary); margin-bottom: 8px; } /* ── Utilities ────────────────────────────────────────── */ .text-gold { color: var(--gold-light); } .text-muted { color: var(--text-secondary); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .fw-500 { font-weight: 500; } .font-display { font-family: var(--font-display); } .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .w-full { width: 100%; } /* ── Scrollbar ────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Divider ──────────────────────────────────────────── */ .divider { height: 1px; background: var(--border); margin: 20px 0; } /* ── Page grid ────────────────────────────────────────── */ .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .content-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } /* ── Ticket ───────────────────────────────────────────── */ .ticket { font-family: var(--font-display); border: 1px dashed var(--border-gold); border-radius: var(--radius); padding: 28px; max-width: 440px; } .ticket-header { text-align: center; padding-bottom: 16px; border-bottom: 1px dashed var(--border); margin-bottom: 20px; } .ticket-logo { font-size: 28px; font-weight: 700; color: var(--gold-light); letter-spacing: 3px; } .ticket-number { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 1px; } /* ═══════════════════════════════════════════════════════ DASHBOARD — Thème CLAIR (maquette KUTYRA) Beige / Blanc / Or / Bleu marine ═══════════════════════════════════════════════════════ */ .dash-theme { --d-bg: #f4f1ea; --d-card: #ffffff; --d-navy: #14213d; --d-navy-soft: #1c2c4c; --d-gold: #c9a14a; --d-gold-light: #e0c485; --d-gold-dark: #a8853a; --d-text: #1a1a1a; --d-text-soft: #5a5a5a; --d-text-muted: #9a958c; --d-border: #e8e2d6; --d-success: #4a9e6f; --d-cream-grad: linear-gradient(135deg, #f0e9d8, #e6dcc4); } /* Le dashboard remplace le fond sombre */ .dash-theme .main-content { background: var(--d-bg); } /* ── Topbar clair ─────────────────────────────────────── */ .dash-topbar { height: 76px; background: var(--d-bg); border-bottom: 1px solid var(--d-border); display: flex; align-items: center; padding: 0 32px; gap: 20px; position: sticky; top: 0; z-index: 50; } .dash-search { display: flex; align-items: center; gap: 10px; background: var(--d-card); border: 1px solid var(--d-border); border-radius: 50px; padding: 11px 20px; width: 340px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } .dash-search svg { color: var(--d-text-muted); } .dash-search input { background: none; border: none; outline: none; color: var(--d-text); font-size: 14px; width: 100%; font-family: var(--font-body); } .dash-search input::placeholder { color: var(--d-text-muted); } .dash-date { flex: 1; text-align: center; font-size: 15px; font-weight: 500; color: var(--d-navy); letter-spacing: 0.2px; } .dash-topbar-right { display: flex; align-items: center; gap: 16px; } .dash-icon-btn { width: 42px; height: 42px; background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: var(--d-navy); transition: var(--transition); text-decoration: none; } .dash-icon-btn:hover { border-color: var(--d-gold); } .dash-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: var(--d-gold); color: #fff; border-radius: 50px; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--d-bg); } .dash-salon-select { display: flex; align-items: center; gap: 8px; background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--d-navy); cursor: pointer; } .dash-profile { display: flex; align-items: center; gap: 12px; } .dash-profile-info { text-align: right; line-height: 1.2; } .dash-profile-name { font-size: 14px; font-weight: 600; color: var(--d-navy); } .dash-profile-role { font-size: 12px; color: var(--d-gold-dark); } .dash-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--d-gold), var(--d-gold-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; border: 2px solid var(--d-gold-light); } /* ── Body clair ───────────────────────────────────────── */ .dash-body { padding: 28px 32px 40px; } .dash-welcome { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--d-navy); margin-bottom: 24px; } /* ── KPI cards claires ────────────────────────────────── */ .dash-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 24px; } .dash-kpi { background: var(--d-card); border: 1px solid var(--d-border); border-radius: 16px; padding: 22px 20px; text-align: center; box-shadow: 0 2px 8px rgba(20,33,61,0.04); position: relative; transition: var(--transition); } .dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,33,61,0.08); } .dash-kpi-label { font-size: 13px; font-weight: 500; color: var(--d-text-soft); line-height: 1.35; margin-bottom: 14px; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; } .dash-kpi-info { width: 16px; height: 16px; border-radius: 50%; background: var(--d-gold-light); color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-kpi-corner { position: absolute; top: 16px; right: 16px; min-width: 22px; height: 22px; background: #efe9da; color: var(--d-text-soft); border-radius: 6px; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 6px; } .dash-kpi-value { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--d-gold-dark); line-height: 1; margin-bottom: 10px; } .dash-kpi-value.navy { color: var(--d-navy); } .dash-kpi-sub { font-size: 12px; color: var(--d-text-muted); } .dash-kpi-trend { font-size: 12px; font-weight: 600; color: var(--d-success); display: inline-flex; align-items: center; gap: 3px; } .dash-kpi-trend.down { color: #c0573f; } /* ── Cartes graphiques ────────────────────────────────── */ .dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; } .dash-panel { background: var(--d-card); border: 1px solid var(--d-border); border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(20,33,61,0.04); } .dash-panel-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--d-navy); margin-bottom: 20px; } .dash-chart-wrap { position: relative; height: 280px; } .dash-legend { display: flex; gap: 24px; justify-content: center; margin-top: 16px; font-size: 13px; color: var(--d-text-soft); } .dash-legend-item { display: flex; align-items: center; gap: 7px; } .dash-legend-dot { width: 10px; height: 10px; border-radius: 50%; } /* ── Panneaux du bas ──────────────────────────────────── */ .dash-bottom { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 18px; } .dash-panel-header { background: var(--d-cream-grad); margin: -24px -24px 18px; padding: 16px 24px; border-radius: 16px 16px 0 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--d-navy); border-bottom: 1px solid var(--d-border); } /* Collaborateurs */ .collab-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--d-border); } .collab-row:last-child { border-bottom: none; } .collab-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--d-navy), var(--d-navy-soft)); color: var(--d-gold-light); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; } .collab-name { flex: 1; font-size: 15px; font-weight: 500; color: var(--d-text); } .collab-ca { font-size: 15px; font-weight: 700; color: var(--d-gold-dark); } /* Transactions */ .dash-tx-table { width: 100%; border-collapse: collapse; } .dash-tx-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--d-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--d-border); } .dash-tx-table td { padding: 12px 10px; font-size: 13px; color: var(--d-text); border-bottom: 1px solid var(--d-border); } .dash-tx-table tr:last-child td { border-bottom: none; } .dash-tx-amount { font-weight: 700; color: var(--d-navy); } /* Actions rapides */ .dash-action-btn { display: block; width: 100%; text-align: center; padding: 14px; border-radius: 12px; margin-bottom: 12px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: var(--transition); border: 1px solid transparent; } .dash-action-btn:last-child { margin-bottom: 0; } .dash-action-primary { background: var(--d-navy); color: #fff; } .dash-action-primary:hover { background: var(--d-navy-soft); } .dash-action-gold { background: var(--d-cream-grad); color: var(--d-navy); border-color: var(--d-gold-light); } .dash-action-gold:hover { background: linear-gradient(135deg, #e8dec5, #ddd0b0); } .dash-action-ghost { background: var(--d-card); color: var(--d-text-soft); border-color: var(--d-border); } .dash-action-ghost:hover { border-color: var(--d-gold); } @media (max-width: 1280px) { .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); } .dash-charts, .dash-bottom { grid-template-columns: 1fr; } } /* ── Logo chevron stacked (maquette) ──────────────────── */ .logo-mark-stacked { flex-direction: column; gap: 6px; align-items: center; text-align: center; } .logo-mark-stacked .logo-text { font-size: 20px; letter-spacing: 5px; font-weight: 600; } .logo-chevron { display: block; } /* Sidebar : fond piloté par la variable de thème (navy en thème authentique) */ .sidebar { background: var(--bg-sidebar); } .sidebar-logo { padding: 32px 24px 24px; text-align: center; }