/* ============================================================ S-CLOUD — LOGBOOK THEME Palette: forest dark + amber gold + parchment ============================================================ */ :root { /* ── Global shorthand vars (used by modules) ── */ --purple: #7A4183; --green: #27AE60; /* Brand colors */ --ks-purple-horizon: #7A4183; --ks-blue-sky: #41B6E6; --ks-coral-sunshine: #F87C56; --ks-gray-shadow: #5B6770; /* Logbook sidebar palette */ --lb-bg-top: #1a2d1a; /* dark forest green */ --lb-bg-mid: #12202e; /* deep navy */ --lb-bg-bot: #0d1510; /* near-black green */ --lb-gold: #c8a84b; /* aged gold */ --lb-gold-dim: rgba(200,168,75,0.18); --lb-gold-border: rgba(200,168,75,0.30); --lb-cream: #f0ead6; /* parchment/ivory */ --lb-cream-dim: rgba(240,234,214,0.70); --lb-hover-bg: rgba(200,168,75,0.08); --lb-active-bg: rgba(200,168,75,0.14); --lb-divider: rgba(200,168,75,0.18); --lb-icon-bg: rgba(200,168,75,0.12); --lb-icon-border: rgba(200,168,75,0.22); --lb-sub-border: rgba(200,168,75,0.20); /* App body */ --ks-bg-body: #f4f5f7; --ks-bg-card: #ffffff; --ks-border-soft: #e0e3e8; /* Sidebar dimensions */ --ks-sidebar-w-col: 74px; --ks-sidebar-w-exp: 256px; } /* ============================================================ 3 THÈMES — light | mid | dark (data-theme sur ) ============================================================ */ /* --- LIGHT : HKI Brand — Blanc pur, Purple Horizon, Blue Sky --- */ [data-theme="light"] { /* Page — fond très clair, cartes blanches */ --ks-bg-body: #f4f7f9; --ks-bg-card: #ffffff; --ks-text-main: #2D3748; --ks-text-muted: #5B6770; /* Gray Shadow (brand) */ --ks-border-soft: #DDE1E4; --ks-card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); /* HKI Brand Colors */ --purple: #7A4183; /* Purple Horizon */ --green: #059669; --ks-purple-horizon: #7A4183; --ks-blue-sky: #41B6E6; /* Blue Sky */ --ks-coral-sunshine: #F87C56; /* Coral Sunshine */ --ks-gray-shadow: #5B6770; /* Gray Shadow */ --ks-pale-blue: #9CDBD9; /* Pale Blue Morning */ --ks-yellow-sunset: #F1C400; /* Yellow Sunset */ --ks-pale-gray-dusk: #A7ACA2; /* Pale Gray Dusk */ /* Sidebar — Purple Horizon gradient (branded) */ --lb-bg-top: #6b3575; --lb-bg-mid: #5a2c63; --lb-bg-bot: #472050; --lb-gold: #F1C400; /* Yellow Sunset (accent sidebar) */ --lb-gold-dim: rgba(241,196,0,0.12); --lb-gold-border: rgba(241,196,0,0.30); --lb-cream: #ffffff; --lb-cream-dim: rgba(255,255,255,0.82); --lb-hover-bg: rgba(241,196,0,0.10); --lb-active-bg: rgba(241,196,0,0.18); --lb-divider: rgba(255,255,255,0.12); --lb-icon-bg: rgba(241,196,0,0.12); --lb-icon-border: rgba(241,196,0,0.28); --lb-sub-border: rgba(241,196,0,0.20); } /* --- MID : Logbook chaleureux, parchemin & or --- */ [data-theme="mid"] { /* Page */ --ks-bg-body: #e8e3d9; --ks-bg-card: #f5f1e8; --ks-text-main: #2c2720; --ks-text-muted: #7a7367; --ks-border-soft: #d4cfc3; --ks-card-shadow: 0 2px 8px rgba(44,39,32,0.07); /* Brand colors */ --purple: #7A4183; --green: #2d7a4f; --ks-purple-horizon: #7A4183; --ks-blue-sky: #2563eb; --ks-coral-sunshine: #e07642; --ks-gray-shadow: #7a7367; /* Sidebar — forêt / navy (Logbook original) */ --lb-bg-top: #1a2d1a; --lb-bg-mid: #12202e; --lb-bg-bot: #0d1510; --lb-gold: #c8a84b; --lb-gold-dim: rgba(200,168,75,0.12); --lb-gold-border: rgba(200,168,75,0.30); --lb-cream: #f0ead6; --lb-cream-dim: rgba(240,234,214,0.75); --lb-hover-bg: rgba(200,168,75,0.08); --lb-active-bg: rgba(200,168,75,0.15); --lb-divider: rgba(200,168,75,0.18); --lb-icon-bg: rgba(200,168,75,0.10); --lb-icon-border: rgba(200,168,75,0.25); --lb-sub-border: rgba(200,168,75,0.18); } /* --- DARK : Palette purple-grey profonde (inspiré TropTop SA) --- */ [data-theme="dark"] { /* Page backgrounds */ --ks-bg-body: #2a2a3d; --ks-bg-card: #32324a; --ks-text-main: #f5f4ff; --ks-text-muted: #a8a7c8; --ks-border-soft: #4a4a6a; --ks-card-shadow: 0 4px 16px rgba(0,0,0,0.35); /* Brand colors — bright variants for dark bg */ --purple: #a78bfa; --green: #34d399; --ks-purple-horizon: #a78bfa; --ks-blue-sky: #818cf8; --ks-coral-sunshine: #fb923c; --ks-gray-shadow: #a8a7c8; /* Sidebar — deep purple */ --lb-bg-top: #252538; --lb-bg-mid: #1e1e30; --lb-bg-bot: #18182a; --lb-gold: #a78bfa; --lb-gold-dim: rgba(167,139,250,0.15); --lb-gold-border: rgba(167,139,250,0.35); --lb-cream: #f5f4ff; --lb-cream-dim: rgba(245,244,255,0.70); --lb-hover-bg: rgba(167,139,250,0.10); --lb-active-bg: rgba(167,139,250,0.18); --lb-divider: rgba(167,139,250,0.18); --lb-icon-bg: rgba(167,139,250,0.12); --lb-icon-border: rgba(167,139,250,0.28); --lb-sub-border: rgba(167,139,250,0.22); } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: var(--ks-bg-body); color: var(--ks-text-main); transition: background-color 0.2s ease, color 0.2s ease; } .app-container { min-height: 100vh; display: flex; } .app-main { background-color: var(--ks-bg-body); flex: 1 1 auto; min-width: 0; transition: background-color 0.2s ease; } .app-content-inner.card { border-radius: 0.75rem; border: 1px solid var(--ks-border-soft); background-color: var(--ks-bg-card) !important; color: var(--ks-text-main); box-shadow: var(--ks-card-shadow) !important; } .app-footer { border-top: 1px solid var(--ks-border-soft); background-color: var(--ks-bg-card); color: var(--ks-text-muted); } .card { background-color: var(--ks-bg-card) !important; color: var(--ks-text-main); border-color: var(--ks-border-soft) !important; } .table { color: var(--ks-text-main); } .text-muted { color: var(--ks-text-muted) !important; } /* ============================================================ SIDEBAR — LOGBOOK STYLE (v2 – hover-driven) ============================================================ */ .ks-sidebar { width: var(--ks-sidebar-w-col); display: flex; flex-direction: column; transition: width 0.28s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; z-index: 10; flex: 0 0 auto; background: linear-gradient(180deg, var(--lb-bg-top) 0%, var(--lb-bg-mid) 55%, var(--lb-bg-bot) 100%); border-right: 1px solid var(--lb-divider); box-shadow: 2px 0 12px rgba(0,0,0,.12); } .ks-sidebar:hover, .ks-sidebar.ks-sidebar-expanded { width: var(--ks-sidebar-w-exp); } /* ── Inner wrapper ── */ .ks-sidebar-inner { display: flex; flex-direction: column; height: 100%; width: var(--ks-sidebar-w-exp); } /* ── Brand / Logo ── */ .ks-sidebar-brand { display: flex; align-items: center; gap: 0.65rem; padding: 1.1rem 0.75rem 0.9rem; border-bottom: 1px solid var(--lb-divider); min-height: 62px; background: rgba(0,0,0,.08); } .ks-brand-text { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-gold) !important; white-space: nowrap; } .ks-brand-logo { max-height: 40px; width: auto; object-fit: contain; border-radius: 8px; } /* ── Navigation ── */ .ks-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.6rem 0.5rem 0.35rem; scrollbar-width: thin; scrollbar-color: var(--lb-divider) transparent; } .ks-nav::-webkit-scrollbar { width: 4px; } .ks-nav::-webkit-scrollbar-thumb { background: var(--lb-divider); border-radius: 4px; } .ks-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* ── Dividers ── */ .ks-nav-divider { height: 1px; background: var(--lb-divider); margin: 0.45rem 0.6rem; } /* ── Nav-icon ── */ .nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 0.5rem; background: var(--lb-icon-bg); border: 1px solid var(--lb-icon-border); color: var(--lb-gold); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .ks-nav-icon--brand { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 0.6rem; } .ks-nav-icon--md { width: 34px; height: 34px; font-size: 0.9rem; } .ks-nav-icon--sm { width: 28px; height: 28px; font-size: 0.78rem; } /* ── Colored icon palette (Heroicons-style) ── */ .ks-icon-blue { color: #41B6E6 !important; background: rgba(65,182,230,0.12) !important; border-color: rgba(65,182,230,0.28) !important; } .ks-icon-green { color: #34d399 !important; background: rgba(52,211,153,0.12) !important; border-color: rgba(52,211,153,0.28) !important; } .ks-icon-red { color: #f87171 !important; background: rgba(248,113,113,0.12) !important; border-color: rgba(248,113,113,0.28) !important; } .ks-icon-purple { color: #a78bfa !important; background: rgba(167,139,250,0.12) !important; border-color: rgba(167,139,250,0.28) !important; } .ks-icon-orange { color: #fb923c !important; background: rgba(251,146,60,0.12) !important; border-color: rgba(251,146,60,0.28) !important; } .ks-icon-yellow { color: #fbbf24 !important; background: rgba(251,191,36,0.14) !important; border-color: rgba(251,191,36,0.28) !important; } .ks-icon-teal { color: #5eead4 !important; background: rgba(94,234,212,0.12) !important; border-color: rgba(94,234,212,0.28) !important; } .ks-icon-pink { color: #f472b6 !important; background: rgba(244,114,182,0.12) !important; border-color: rgba(244,114,182,0.28) !important; } .ks-icon-indigo { color: #818cf8 !important; background: rgba(129,140,248,0.12) !important; border-color: rgba(129,140,248,0.28) !important; } .ks-icon-amber { color: #fcd34d !important; background: rgba(252,211,77,0.14) !important; border-color: rgba(252,211,77,0.28) !important; } .ks-icon-emerald { color: #6ee7b7 !important; background: rgba(110,231,183,0.12) !important; border-color: rgba(110,231,183,0.28) !important; } .ks-icon-rose { color: #fda4af !important; background: rgba(253,164,175,0.12) !important; border-color: rgba(253,164,175,0.28) !important; } .ks-icon-cyan { color: #67e8f9 !important; background: rgba(103,232,249,0.12) !important; border-color: rgba(103,232,249,0.28) !important; } .ks-icon-gold { color: var(--lb-gold) !important; } /* Hover : brighten the colored icon */ .ks-nav-link:hover .nav-icon[class*="ks-icon-"], .ks-nav-section-btn:hover .nav-icon[class*="ks-icon-"] { filter: brightness(1.25) saturate(1.1); transform: scale(1.08); } /* Active : more vivid colored icon */ .ks-nav-link.ks-nav-active .nav-icon[class*="ks-icon-"] { filter: brightness(1.2) saturate(1.15); } /* ── Nav-text: hidden collapsed, visible expanded ── */ .nav-text { white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.28s cubic-bezier(.4,0,.2,1), opacity 0.22s ease; color: var(--lb-cream-dim); font-size: 0.845rem; } .ks-sidebar:hover .nav-text, .ks-sidebar.ks-sidebar-expanded .nav-text { max-width: 200px; opacity: 1; } /* ── Standard nav links ── */ .ks-nav-link { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.45rem; border-radius: 0.6rem; text-decoration: none !important; color: var(--lb-cream-dim); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; border: 1px solid transparent; } .ks-nav-link:hover { background: var(--lb-hover-bg); border-color: var(--lb-gold-border); color: var(--lb-cream); } .ks-nav-link:hover .nav-icon { background: var(--lb-gold-dim); border-color: var(--lb-gold); transform: scale(1.06); } /* Active: gold left bookmark ribbon */ .ks-nav-link.ks-nav-active { background: var(--lb-active-bg); border-color: var(--lb-gold-border); color: var(--lb-cream) !important; box-shadow: inset 3px 0 0 var(--lb-gold); } .ks-nav-link.ks-nav-active .nav-icon { background: var(--lb-gold-dim); border-color: var(--lb-gold); color: var(--lb-gold); } .ks-nav-link.ks-nav-active .nav-text { color: var(--lb-cream) !important; font-weight: 600; } /* ── Section toggle button ── */ .ks-nav-section-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.4rem 0.45rem; border-radius: 0.6rem; cursor: pointer; color: var(--lb-cream-dim); border: 1px solid transparent; transition: background 0.18s ease, border-color 0.18s ease; } .ks-nav-section-btn:hover { background: var(--lb-hover-bg); border-color: var(--lb-gold-border); color: var(--lb-cream); } .ks-nav-section-btn:hover .nav-icon { background: var(--lb-gold-dim); border-color: var(--lb-gold); transform: scale(1.06); } .ks-nav-section-left { display: flex; align-items: center; gap: 0.55rem; } .ks-nav-caret { font-size: 0.7rem; color: var(--lb-gold) !important; opacity: 0.5; transition: transform 0.25s ease, opacity 0.2s ease; } .ks-nav-section-btn[aria-expanded="true"] .ks-nav-caret { transform: rotate(180deg); opacity: 0.8; } /* ── Sub-list (indented items) ── */ .ks-nav-sub { list-style: none; margin: 0.25rem 0 0.15rem 0.6rem; padding: 0.15rem 0 0.15rem 0.6rem; border-left: 2px solid var(--lb-sub-border); display: flex; flex-direction: column; gap: 2px; } /* ── Footer ── */ .ks-sidebar-footer { padding: 0.5rem 0.5rem 0.75rem; border-top: 1px solid var(--lb-divider); background: rgba(0,0,0,.06); } /* ============================================================ LIGHT THEME — HKI Brand (Purple Horizon sidebar, Blue Sky focus) ============================================================ */ /* ── Sidebar (Purple Horizon gradient) ── */ [data-theme="light"] .ks-sidebar { box-shadow: 2px 0 24px rgba(122,65,131,0.15); border-right-color: rgba(241,196,0,0.10); } [data-theme="light"] .ks-sidebar-brand { background: rgba(0,0,0,.15); } [data-theme="light"] .ks-sidebar-footer { background: rgba(0,0,0,.10); } /* ── Body subtle gradient (Purple Horizon + Blue Sky) ── */ [data-theme="light"] body.app-layout { background-image: radial-gradient(ellipse at 8% 8%, rgba(122,65,131,0.035) 0%, transparent 50%), radial-gradient(ellipse at 92% 88%, rgba(65,182,230,0.03) 0%, transparent 50%); background-attachment: fixed; } /* ── Forms ── */ [data-theme="light"] .form-control, [data-theme="light"] .form-select { background-color: #ffffff !important; color: #2D3748 !important; border-color: #DDE1E4 !important; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { border-color: #41B6E6 !important; /* Blue Sky */ box-shadow: 0 0 0 3px rgba(65,182,230,0.12) !important; background-color: #ffffff !important; } [data-theme="light"] .form-control::placeholder { color: #A7ACA2 !important; /* Pale Gray Dusk */ } [data-theme="light"] .form-control:disabled, [data-theme="light"] .form-control[readonly] { background-color: #f4f7f9 !important; color: #A7ACA2 !important; } [data-theme="light"] .form-check-input { background-color: #fff; border-color: #DDE1E4; } [data-theme="light"] .form-check-input:checked { background-color: #7A4183; /* Purple Horizon */ border-color: #7A4183; } [data-theme="light"] .input-group-text { background-color: #f4f7f9 !important; color: #5B6770 !important; /* Gray Shadow */ border-color: #DDE1E4 !important; } /* ── Tables ── */ [data-theme="light"] .table { color: #2D3748; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(156,219,217,0.06); /* Pale Blue Morning tint */ --bs-table-hover-bg: rgba(156,219,217,0.10); --bs-table-border-color: #DDE1E4; } [data-theme="light"] .sc-table thead th, [data-theme="light"] .sc-table-head th { background: #7A4183 !important; /* Purple Horizon */ color: #fff !important; font-weight: 700; border: none !important; } [data-theme="light"] .sc-table tbody tr[data-href]:hover { background-color: rgba(65,182,230,0.06); /* Blue Sky tint */ } /* ── Modals ── */ [data-theme="light"] .modal-content { background-color: #ffffff !important; border-color: #DDE1E4 !important; box-shadow: 0 20px 60px rgba(91,103,112,0.18); } /* ── Alerts (brand-tinted) ── */ [data-theme="light"] .alert-success { background-color: rgba(156,219,217,0.15) !important; /* Pale Blue Morning */ border-color: rgba(156,219,217,0.35) !important; color: #065f46 !important; } [data-theme="light"] .alert-danger { background-color: rgba(248,124,86,0.10) !important; /* Coral Sunshine */ border-color: rgba(248,124,86,0.25) !important; color: #991b1b !important; } [data-theme="light"] .alert-warning { background-color: rgba(241,196,0,0.10) !important; /* Yellow Sunset */ border-color: rgba(241,196,0,0.28) !important; color: #78600c !important; } [data-theme="light"] .alert-info { background-color: rgba(65,182,230,0.10) !important; /* Blue Sky */ border-color: rgba(65,182,230,0.25) !important; color: #0c5a7a !important; } /* ── Buttons ── */ [data-theme="light"] .btn-primary { background-color: #7A4183 !important; /* Purple Horizon */ border-color: #7A4183 !important; color: #fff !important; } [data-theme="light"] .btn-primary:hover { background-color: #5c2f61 !important; border-color: #5c2f61 !important; } [data-theme="light"] .btn-outline-secondary { color: #5B6770 !important; /* Gray Shadow */ border-color: #DDE1E4 !important; } [data-theme="light"] .btn-outline-secondary:hover { background-color: #f4f7f9 !important; color: #2D3748 !important; border-color: #A7ACA2 !important; /* Pale Gray Dusk */ } [data-theme="light"] .btn-success { background-color: #059669 !important; border-color: #059669 !important; } /* ── Badges (brand-tinted) ── */ [data-theme="light"] .badge.bg-light { background-color: #f4f7f9 !important; color: #5B6770 !important; } [data-theme="light"] .badge.bg-secondary { background-color: rgba(91,103,112,0.12) !important; /* Gray Shadow */ color: #5B6770 !important; } [data-theme="light"] .badge.bg-success { background-color: rgba(156,219,217,0.18) !important; /* Pale Blue Morning */ color: #065f46 !important; } [data-theme="light"] .badge.bg-warning { background-color: rgba(241,196,0,0.15) !important; /* Yellow Sunset */ color: #78600c !important; } [data-theme="light"] .badge.bg-danger { background-color: rgba(248,124,86,0.14) !important; /* Coral Sunshine */ color: #991b1b !important; } [data-theme="light"] .badge.bg-info { background-color: rgba(65,182,230,0.14) !important; /* Blue Sky */ color: #0c5a7a !important; } /* ── Pagination ── */ [data-theme="light"] .page-link { background-color: #fff; color: #5B6770; border-color: #DDE1E4; } [data-theme="light"] .page-link:hover { background-color: #f4f7f9; color: #2D3748; } [data-theme="light"] .page-item.active .page-link { background-color: #7A4183; border-color: #7A4183; color: #fff; } /* ── DataTables ── */ [data-theme="light"] .dataTables_wrapper .dataTables_info, [data-theme="light"] .dataTables_wrapper .dataTables_length label, [data-theme="light"] .dataTables_wrapper .dataTables_filter label { color: #5B6770 !important; } [data-theme="light"] .dataTables_wrapper .dataTables_length select, [data-theme="light"] .dataTables_wrapper .dataTables_filter input { background-color: #fff !important; color: #2D3748 !important; border: 1px solid #DDE1E4 !important; border-radius: 6px; } [data-theme="light"] .dataTables_wrapper .dataTables_filter input:focus { border-color: #41B6E6 !important; box-shadow: 0 0 0 3px rgba(65,182,230,0.12) !important; } [data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #5B6770 !important; background: #fff !important; border: 1px solid #DDE1E4 !important; } [data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #f4f7f9 !important; color: #2D3748 !important; border-color: #A7ACA2 !important; } [data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #7A4183 !important; color: #fff !important; border-color: #7A4183 !important; } /* ── Breadcrumbs ── */ [data-theme="light"] .breadcrumb-item a { color: #7A4183; } [data-theme="light"] .breadcrumb-item.active { color: #5B6770; } /* ── Links (Purple Horizon) ── */ [data-theme="light"] a:not(.btn):not(.nav-link):not(.ks-nav-link):not(.topbar-icon-btn):not(.topbar-lang-btn):not(.topbar-user-link):not(.topbar-institution-link):not(.ks-kpi-link):not([class*="dropdown"]) { color: #7A4183; } [data-theme="light"] a:not(.btn):hover { color: #5c2f61; } /* ── Detail views ── */ [data-theme="light"] .ks-info { border-color: #DDE1E4; background: #f8fafc; } [data-theme="light"] .ks-label { color: #5B6770; } [data-theme="light"] .ks-value { color: #2D3748; } [data-theme="light"] .sc-card-hover { background: #ffffff !important; border: 1px solid #DDE1E4; box-shadow: 0 1px 3px rgba(91,103,112,0.08); } [data-theme="light"] .sc-card-hover:hover { box-shadow: 0 4px 16px rgba(122,65,131,0.10); } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #2D3748; } [data-theme="light"] hr { border-color: #DDE1E4; } [data-theme="light"] .text-brand { color: #7A4183 !important; } /* ============================================================ MID THEME — Parchemin chaud / Or & Forêt (Logbook) ============================================================ */ /* ── Sidebar (Forêt/Navy) ── */ [data-theme="mid"] .ks-sidebar { box-shadow: 2px 0 24px rgba(13,21,16,0.18); border-right-color: rgba(200,168,75,0.10); } [data-theme="mid"] .ks-sidebar-brand { background: rgba(0,0,0,.15); } [data-theme="mid"] .ks-sidebar-footer { background: rgba(0,0,0,.10); } /* ── Body subtle gradient (warm parchment + gold) ── */ [data-theme="mid"] body.app-layout { background-image: radial-gradient(ellipse at 10% 10%, rgba(200,168,75,0.04) 0%, transparent 50%), radial-gradient(ellipse at 90% 88%, rgba(122,65,131,0.03) 0%, transparent 50%); background-attachment: fixed; } /* ── Forms ── */ [data-theme="mid"] .form-control, [data-theme="mid"] .form-select { background-color: #f9f6f0 !important; color: #2c2720 !important; border-color: #d4cfc3 !important; } [data-theme="mid"] .form-control:focus, [data-theme="mid"] .form-select:focus { border-color: #c8a84b !important; /* Or logbook */ box-shadow: 0 0 0 3px rgba(200,168,75,0.12) !important; background-color: #fffef8 !important; } [data-theme="mid"] .form-control::placeholder { color: #a09888 !important; } [data-theme="mid"] .form-control:disabled, [data-theme="mid"] .form-control[readonly] { background-color: #e2ddd2 !important; color: #a09888 !important; } [data-theme="mid"] .form-check-input { background-color: #f9f6f0; border-color: #d4cfc3; } [data-theme="mid"] .form-check-input:checked { background-color: #7A4183; border-color: #7A4183; } [data-theme="mid"] .input-group-text { background-color: #e2ddd2 !important; color: #7a7367 !important; border-color: #d4cfc3 !important; } /* ── Tables ── */ [data-theme="mid"] .table { color: #2c2720; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(200,168,75,0.06); /* Gold tint */ --bs-table-hover-bg: rgba(200,168,75,0.10); --bs-table-border-color: #d4cfc3; } [data-theme="mid"] .sc-table thead th, [data-theme="mid"] .sc-table-head th { background: #7A4183 !important; /* Purple Horizon */ color: #fff !important; font-weight: 700; border: none !important; } [data-theme="mid"] .sc-table tbody tr[data-href]:hover { background-color: rgba(200,168,75,0.06); } /* ── Modals ── */ [data-theme="mid"] .modal-content { background-color: #f5f1e8 !important; border-color: #d4cfc3 !important; box-shadow: 0 20px 60px rgba(44,39,32,0.15); } [data-theme="mid"] .modal-header { border-bottom-color: #d4cfc3 !important; } [data-theme="mid"] .modal-footer { border-top-color: #d4cfc3 !important; } /* ── Alerts (warm-tinted) ── */ [data-theme="mid"] .alert-success { background-color: rgba(45,122,79,0.10) !important; border-color: rgba(45,122,79,0.22) !important; color: #065f46 !important; } [data-theme="mid"] .alert-danger { background-color: rgba(220,53,69,0.08) !important; border-color: rgba(220,53,69,0.18) !important; color: #991b1b !important; } [data-theme="mid"] .alert-warning { background-color: rgba(200,168,75,0.14) !important; /* Gold */ border-color: rgba(200,168,75,0.28) !important; color: #78600c !important; } [data-theme="mid"] .alert-info { background-color: rgba(37,99,235,0.08) !important; border-color: rgba(37,99,235,0.18) !important; color: #1e40af !important; } /* ── Buttons ── */ [data-theme="mid"] .btn-primary { background-color: #7A4183 !important; border-color: #7A4183 !important; color: #fff !important; } [data-theme="mid"] .btn-primary:hover { background-color: #5c2f61 !important; border-color: #5c2f61 !important; } [data-theme="mid"] .btn-outline-secondary { color: #7a7367 !important; border-color: #d4cfc3 !important; } [data-theme="mid"] .btn-outline-secondary:hover { background-color: #e2ddd2 !important; color: #2c2720 !important; border-color: #c8a84b !important; } [data-theme="mid"] .btn-success { background-color: #2d7a4f !important; border-color: #2d7a4f !important; } /* ── Badges (warm-tinted) ── */ [data-theme="mid"] .badge.bg-light { background-color: #e8e3d9 !important; color: #7a7367 !important; } [data-theme="mid"] .badge.bg-secondary { background-color: rgba(122,115,103,0.14) !important; color: #7a7367 !important; } [data-theme="mid"] .badge.bg-success { background-color: rgba(45,122,79,0.14) !important; color: #065f46 !important; } [data-theme="mid"] .badge.bg-warning { background-color: rgba(200,168,75,0.18) !important; /* Gold */ color: #78600c !important; } [data-theme="mid"] .badge.bg-danger { background-color: rgba(220,53,69,0.12) !important; color: #991b1b !important; } [data-theme="mid"] .badge.bg-info { background-color: rgba(37,99,235,0.10) !important; color: #1e40af !important; } /* ── Pagination ── */ [data-theme="mid"] .page-link { background-color: #f5f1e8; color: #7a7367; border-color: #d4cfc3; } [data-theme="mid"] .page-link:hover { background-color: #e8e3d9; color: #2c2720; } [data-theme="mid"] .page-item.active .page-link { background-color: #7A4183; border-color: #7A4183; color: #fff; } /* ── DataTables ── */ [data-theme="mid"] .dataTables_wrapper .dataTables_info, [data-theme="mid"] .dataTables_wrapper .dataTables_length label, [data-theme="mid"] .dataTables_wrapper .dataTables_filter label { color: #7a7367 !important; } [data-theme="mid"] .dataTables_wrapper .dataTables_length select, [data-theme="mid"] .dataTables_wrapper .dataTables_filter input { background-color: #f9f6f0 !important; color: #2c2720 !important; border: 1px solid #d4cfc3 !important; border-radius: 6px; } [data-theme="mid"] .dataTables_wrapper .dataTables_filter input:focus { border-color: #c8a84b !important; box-shadow: 0 0 0 3px rgba(200,168,75,0.12) !important; } [data-theme="mid"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #7a7367 !important; background: #f5f1e8 !important; border: 1px solid #d4cfc3 !important; } [data-theme="mid"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #e8e3d9 !important; color: #2c2720 !important; border-color: #c8a84b !important; } [data-theme="mid"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #7A4183 !important; color: #fff !important; border-color: #7A4183 !important; } [data-theme="mid"] table.dataTable thead th { background: #7A4183 !important; color: #fff !important; border: none !important; } /* ── Breadcrumbs ── */ [data-theme="mid"] .breadcrumb-item a { color: #7A4183; } [data-theme="mid"] .breadcrumb-item.active { color: #7a7367; } /* ── Links ── */ [data-theme="mid"] a:not(.btn):not(.nav-link):not(.ks-nav-link):not(.topbar-icon-btn):not(.topbar-lang-btn):not(.topbar-user-link):not(.topbar-institution-link):not(.ks-kpi-link):not([class*="dropdown"]) { color: #7A4183; } [data-theme="mid"] a:not(.btn):hover { color: #5c2f61; } /* ── Detail views ── */ [data-theme="mid"] .ks-info { border-color: #d4cfc3; background: #ede9df; } [data-theme="mid"] .ks-label { color: #7a7367; } [data-theme="mid"] .ks-value { color: #2c2720; } [data-theme="mid"] .sc-card-hover { background: #f5f1e8 !important; border: 1px solid #d4cfc3; box-shadow: 0 2px 8px rgba(44,39,32,0.07); } [data-theme="mid"] .sc-card-hover:hover { box-shadow: 0 6px 16px rgba(44,39,32,0.12); } [data-theme="mid"] h1, [data-theme="mid"] h2, [data-theme="mid"] h3, [data-theme="mid"] h4, [data-theme="mid"] h5, [data-theme="mid"] h6 { color: #2c2720; } [data-theme="mid"] hr { border-color: #d4cfc3; } [data-theme="mid"] .text-brand { color: #7A4183 !important; } /* ============================================================ DARK THEME — Full component overrides ============================================================ */ /* ── Sidebar ── */ [data-theme="dark"] .ks-sidebar { box-shadow: 2px 0 24px rgba(0,0,0,.45); border-right-color: rgba(167,139,250,0.12); } [data-theme="dark"] .ks-sidebar-brand { background: rgba(0,0,0,.18); } [data-theme="dark"] .ks-sidebar-footer { background: rgba(0,0,0,.14); } /* ── Body subtle gradient ── */ [data-theme="dark"] body.app-layout { background-image: radial-gradient(ellipse at 10% 10%, rgba(122,65,131,0.06) 0%, transparent 50%), radial-gradient(ellipse at 90% 90%, rgba(99,102,241,0.05) 0%, transparent 50%); background-attachment: fixed; } /* ── Bootstrap form controls ── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #252538 !important; color: #f5f4ff !important; border-color: #4a4a6a !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167,139,250,0.12) !important; background-color: #2a2a3d !important; } [data-theme="dark"] .form-control::placeholder { color: #8080a8 !important; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #1e1e30 !important; color: #8080a8 !important; } [data-theme="dark"] .form-check-input { background-color: #252538; border-color: #4a4a6a; } [data-theme="dark"] .form-check-input:checked { background-color: #7A4183; border-color: #7A4183; } [data-theme="dark"] .input-group-text { background-color: #3a3a55 !important; color: #a8a7c8 !important; border-color: #4a4a6a !important; } /* ── Bootstrap tables ── */ [data-theme="dark"] .table { color: #d8d7ee; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(58,58,85,0.3); --bs-table-hover-bg: rgba(58,58,85,0.6); --bs-table-border-color: rgba(74,74,106,0.5); } [data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: rgba(74,74,106,0.5); } [data-theme="dark"] .sc-table thead th, [data-theme="dark"] .sc-table-head th { background: #5c2f61 !important; /* Purple Horizon (dark variant) */ color: #e8dff0 !important; font-weight: 700; border: none !important; } [data-theme="dark"] .sc-table tbody tr[data-href]:hover { background-color: #3a3a55; } /* ── Bootstrap modals ── */ [data-theme="dark"] .modal-content { background-color: #32324a !important; color: #f5f4ff; border-color: #4a4a6a !important; } [data-theme="dark"] .modal-header { border-bottom-color: #4a4a6a !important; } [data-theme="dark"] .modal-footer { border-top-color: #4a4a6a !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── Bootstrap dropdowns ── */ [data-theme="dark"] .dropdown-menu { background-color: #32324a !important; border-color: #4a4a6a !important; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } [data-theme="dark"] .dropdown-item { color: #d8d7ee !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #3a3a55 !important; color: #f5f4ff !important; } [data-theme="dark"] .dropdown-divider { border-top-color: #4a4a6a !important; } /* ── Bootstrap alerts ── */ [data-theme="dark"] .alert-success { background-color: rgba(52,211,153,0.10) !important; border-color: rgba(52,211,153,0.25) !important; color: #6ee7b7 !important; } [data-theme="dark"] .alert-danger { background-color: rgba(239,68,68,0.10) !important; border-color: rgba(239,68,68,0.25) !important; color: #fca5a5 !important; } [data-theme="dark"] .alert-warning { background-color: rgba(245,158,11,0.10) !important; border-color: rgba(245,158,11,0.25) !important; color: #fcd34d !important; } [data-theme="dark"] .alert-info { background-color: rgba(59,130,246,0.10) !important; border-color: rgba(59,130,246,0.25) !important; color: #93c5fd !important; } /* ── Bootstrap buttons ── */ [data-theme="dark"] .btn-primary { background-color: #7A4183 !important; border-color: #7A4183 !important; } [data-theme="dark"] .btn-primary:hover { background-color: #5c2f61 !important; border-color: #5c2f61 !important; } [data-theme="dark"] .btn-outline-secondary { color: #a8a7c8 !important; border-color: #4a4a6a !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #3a3a55 !important; color: #f5f4ff !important; border-color: #565678 !important; } [data-theme="dark"] .btn-outline-danger { color: #ff6b8a !important; border-color: rgba(239,68,68,0.30) !important; background: rgba(239,68,68,0.08); } [data-theme="dark"] .btn-outline-danger:hover { background: rgba(239,68,68,0.18) !important; color: #ff6b8a !important; border-color: rgba(239,68,68,0.45) !important; } [data-theme="dark"] .btn-success { background-color: #059669 !important; border-color: #059669 !important; } [data-theme="dark"] .btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; } /* ── Bootstrap badges ── */ [data-theme="dark"] .badge.bg-light { background-color: #3a3a55 !important; color: #d8d7ee !important; } [data-theme="dark"] .badge.bg-secondary { background-color: rgba(128,128,168,0.20) !important; color: #a8a7c8 !important; } [data-theme="dark"] .badge.bg-success { background-color: rgba(52,211,153,0.18) !important; color: #34d399 !important; } [data-theme="dark"] .badge.bg-warning { background-color: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; } [data-theme="dark"] .badge.bg-danger { background-color: rgba(239,68,68,0.18) !important; color: #f87171 !important; } [data-theme="dark"] .badge.bg-info { background-color: rgba(59,130,246,0.18) !important; color: #60a5fa !important; } /* ── Bootstrap list-group / pagination ── */ [data-theme="dark"] .list-group-item { background-color: #32324a !important; color: #d8d7ee !important; border-color: #4a4a6a !important; } [data-theme="dark"] .list-group-item:hover { background-color: #3a3a55 !important; } [data-theme="dark"] .page-link { background-color: #32324a; color: #a8a7c8; border-color: #4a4a6a; } [data-theme="dark"] .page-link:hover { background-color: #3a3a55; color: #f5f4ff; } [data-theme="dark"] .page-item.active .page-link { background-color: #7A4183; border-color: #7A4183; color: #fff; } [data-theme="dark"] .page-item.disabled .page-link { background-color: #252538; color: #8080a8; border-color: #3a3a55; } /* ── DataTables ── */ [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_length label, [data-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: #a8a7c8 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: #252538 !important; color: #f5f4ff !important; border: 1px solid #4a4a6a !important; border-radius: 6px; } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167,139,250,0.12) !important; } [data-theme="dark"] table.dataTable tbody tr { background-color: transparent !important; } [data-theme="dark"] table.dataTable tbody tr:hover { background-color: #3a3a55 !important; } [data-theme="dark"] table.dataTable.stripe tbody tr.odd, [data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: rgba(58,58,85,0.3) !important; } [data-theme="dark"] table.dataTable.stripe tbody tr.even, [data-theme="dark"] table.dataTable.display tbody tr.even { background-color: transparent !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #a8a7c8 !important; background: #32324a !important; border: 1px solid #4a4a6a !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #3a3a55 !important; color: #f5f4ff !important; border-color: #565678 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #7A4183 !important; color: #fff !important; border-color: #7A4183 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #8080a8 !important; background: #252538 !important; border-color: #3a3a55 !important; } [data-theme="dark"] table.dataTable thead th { background: #5c2f61 !important; color: #e8dff0 !important; border: none !important; } /* ── Nav tabs ── */ [data-theme="dark"] .nav-tabs { border-bottom-color: #4a4a6a !important; } [data-theme="dark"] .nav-tabs .nav-link { color: #a8a7c8 !important; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: #565678 !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: #32324a !important; color: #a78bfa !important; border-color: #4a4a6a #4a4a6a #32324a !important; } /* ── Breadcrumbs ── */ [data-theme="dark"] .breadcrumb-item a { color: #a78bfa; } [data-theme="dark"] .breadcrumb-item.active { color: #a8a7c8; } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #8080a8; } /* ── Scrollbar ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #2a2a3d; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #565678; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #8080a8; } /* ── Text / misc utility ── */ [data-theme="dark"] .text-dark { color: #f5f4ff !important; } [data-theme="dark"] .text-body { color: #d8d7ee !important; } [data-theme="dark"] .text-secondary { color: #a8a7c8 !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f5f4ff; } [data-theme="dark"] hr { border-color: #4a4a6a; } [data-theme="dark"] .shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .border { border-color: #4a4a6a !important; } [data-theme="dark"] .bg-white { background-color: #32324a !important; } [data-theme="dark"] .bg-light { background-color: #3a3a55 !important; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.ks-nav-link):not(.topbar-icon-btn):not(.topbar-lang-btn):not(.topbar-user-link):not(.topbar-institution-link):not(.ks-kpi-link):not([class*="dropdown"]) { color: #a78bfa; } [data-theme="dark"] a:not(.btn):hover { color: #c4b5fd; } /* ── S-Cloud detail views (ks-info blocks) ── */ [data-theme="dark"] .ks-info { border-color: rgba(74,74,106,0.4); background: rgba(58,58,85,0.3); } [data-theme="dark"] .ks-label { color: #8080a8; } [data-theme="dark"] .ks-value { color: #f5f4ff; } [data-theme="dark"] .sc-card-hover { background: #32324a !important; border: 1px solid #4a4a6a; box-shadow: 0 4px 16px rgba(0,0,0,.35); } [data-theme="dark"] .sc-card-hover:hover { box-shadow: 0 8px 28px rgba(0,0,0,.45); } [data-theme="dark"] .text-brand { color: #a78bfa !important; } [data-theme="dark"] .btn-primary-dark { background: #7A4183; border-color: #7A4183; } [data-theme="dark"] .btn-primary-dark:hover { background: #5c2f61; border-color: #5c2f61; } /* ── Auth layout ── */ .auth-layout .ks-sidebar, .auth-layout .app-topbar, .auth-layout .app-footer { display: none !important; } .auth-layout .app-container { min-height: 100vh; } .auth-layout .app-main { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; } .auth-layout .app-content-inner.card { box-shadow: none !important; border: none !important; max-width: 500px; width: 100%; margin: auto; } /* ============================================================ GLOBAL TABLE DESIGN — sc-table / sc-table-head ============================================================ */ .sc-table thead th, .sc-table-head th { background: var(--purple, #7A4183) !important; color: #fff !important; font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: none !important; padding: .6rem .75rem; } .sc-table tbody td, .sc-table tbody th { vertical-align: middle; color: var(--ks-text-main); border-bottom: 1px solid var(--ks-border-soft); } .sc-table tbody tr[data-href]:hover { background-color: var(--ks-border-soft); cursor: pointer; } /* ============================================================ GLOBAL FORM DESIGN — sc-form ============================================================ */ .sc-form .form-control, .sc-form .form-select { background-color: var(--ks-bg-body); color: var(--ks-text-main); border-color: var(--ks-border-soft); } .sc-form .form-control:focus, .sc-form .form-select:focus { background-color: var(--ks-bg-body); color: var(--ks-text-main); border-color: var(--purple); box-shadow: 0 0 0 .2rem rgba(122,65,131,.18); } .sc-form .form-label { color: var(--ks-text-muted, var(--ks-text-main)); font-weight: 600; } /* ============================================================ MODALE DE CONFIRMATION GLOBALE — .ks-modal ============================================================ */ .ks-modal { display: none; position: fixed; inset: 0; background: rgba(18, 25, 38, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); justify-content: center; align-items: center; z-index: 1080; padding: 1rem; animation: ksModalFadeIn 0.18s ease; } .ks-modal-content { background: var(--ks-bg-card); color: var(--ks-text-main); border-radius: 1rem; padding: 1.5rem; width: 100%; max-width: 520px; border: 1px solid var(--ks-border-soft); box-shadow: 0 18px 60px rgba(80, 72, 180, 0.15); animation: ksModalSlideIn 0.22s ease; } .ks-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(122, 65, 131, 0.20), transparent); } @keyframes ksModalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ksModalSlideIn { from { transform: translateY(-12px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* ============================================================ MODALE CRUD — .ks-modal-crud Conteneur plus large pour formulaires et vues détail. ============================================================ */ .ks-modal-crud { position: relative; width: 96vw; max-width: 1600px; max-height: 92vh; overflow-y: auto; padding: 0; } .ks-crud-close-btn { position: absolute; top: .75rem; right: .75rem; z-index: 10; opacity: .7; transition: opacity .15s; } .ks-crud-close-btn:hover { opacity: 1; } .ks-crud-body { padding: 1.5rem; } /* Ajustements des vues chargées dans la modale */ #ksCrudBody .sc-card-hover, #ksCrudBody > .card { border: none; box-shadow: none; background: transparent; } #ksCrudBody [class*="col-lg-6"], #ksCrudBody [class*="col-lg-7"] { flex: 0 0 100%; max-width: 100%; } #ksCrudBody .mb-4:first-child > h2 { font-size: 1.15rem; } @media (max-width: 767.98px) { .ks-modal-crud { max-width: 98vw; max-height: 95vh; margin: .5rem; } } /* ── Responsive ────────────────────────────── */ @media (max-width: 991.98px) { .sc-form .row > [class*="col-"] { margin-bottom: .5rem; } } /* ============================================================ MOBILE DRAWER (≤ 991.98px) — Sprint 3 Sidebar transformée en drawer slide-in depuis la gauche. Hamburger button visible uniquement sur mobile. ============================================================ */ .ks-mobile-hamburger { display: none; background: transparent; border: 1px solid var(--ks-border-soft); border-radius: 8px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; color: var(--ks-text-main); margin-right: .5rem; } .ks-mobile-hamburger:hover { background: var(--lb-gold-dim); } .ks-mobile-hamburger svg { width: 22px; height: 22px; } /* Backdrop drawer */ .ks-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1040; opacity: 0; transition: opacity .2s ease; } .ks-drawer-backdrop.show { display: block; opacity: 1; } @media (max-width: 991.98px) { /* Affiche le hamburger sur mobile */ .ks-mobile-hamburger { display: inline-flex; } /* Sidebar passe en drawer hors écran par défaut */ .ks-sidebar { position: fixed !important; top: 0; left: 0; width: var(--ks-sidebar-w-exp, 256px) !important; max-width: 85vw; height: 100vh !important; transform: translateX(-100%); transition: transform .25s ease; z-index: 1050; overflow-y: auto; box-shadow: 4px 0 20px rgba(0,0,0,.18); } .ks-sidebar.ks-drawer-open { transform: translateX(0); } /* Main content prend toute la largeur */ .app-main { margin-left: 0 !important; } /* Tableau plus compact */ .sc-table { font-size: .85rem; } .sc-table th, .sc-table td { padding: .4rem .5rem; } /* Topbar : masquer le selecteur entité par défaut, forcer le menu compact */ .topbar { padding-left: .5rem !important; padding-right: .5rem !important; } .topbar-institution { font-size: .9rem; letter-spacing: .02em; } .topbar-right { gap: .25rem !important; } .topbar-sep { display: none !important; } /* Form login : empile colonnes */ .ks-login-wrap { flex-direction: column !important; } .ks-login-brand { flex: 0 0 auto !important; padding: 1.5rem !important; } .ks-login-brand img { width: 60px !important; height: 60px !important; } .ks-login-brand h1 { font-size: 1.3rem !important; } .ks-login-brand p, .ks-login-brand .ks-brand-org { display: none !important; } } /* Très petits écrans (téléphones portrait) */ @media (max-width: 480px) { .topbar-institution { display: none; } .sc-table { font-size: .78rem; } .topbar-icon-btn, a.topbar-icon-btn { width: 32px !important; height: 32px !important; } }