/* ===== GATE AUTOMATION · Design System ===== */


:root{


  --primary:#0f766e; --primary-600:#0d5f59; --primary-soft:#ccfbf1;


  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc;


  --border:#e2e8f0; --text:#0f172a; --text-muted:#64748b;


  --danger:#dc2626; --danger-soft:#fee2e2;


  --warning:#d97706; --warning-soft:#fef3c7;


  --success:#16a34a; --success-soft:#dcfce7;


  --info:#2563eb; --info-soft:#dbeafe;


  --radius:12px; --radius-sm:8px;


  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);


  --shadow-lg:0 10px 30px rgba(15,23,42,.14);


  --sidebar-w:260px;


}


[data-theme="dark"]{


  --primary:#14b8a6; --primary-600:#0d9488; --primary-soft:#134e4a;


  --bg:#0b1220; --surface:#111a2e; --surface-2:#0e1626;


  --border:#1e2a42; --text:#e2e8f0; --text-muted:#94a3b8;


  --danger:#f87171; --danger-soft:#3f1d1d;


  --warning:#fbbf24; --warning-soft:#3b2f0e;


  --success:#4ade80; --success-soft:#12321e;


  --info:#60a5fa; --info-soft:#14243f;


  --shadow:0 1px 3px rgba(0,0,0,.4);


  --shadow-lg:0 10px 30px rgba(0,0,0,.5);


}


*{box-sizing:border-box}


html,body{margin:0;padding:0}


body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}


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


h1,h2,h3{margin:0 0 .5rem;font-weight:600}


code{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px}


.muted{color:var(--text-muted)}


.num{text-align:right;font-variant-numeric:tabular-nums}





/* Layout */


.shell{display:flex;min-height:100vh}


.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;overflow-y:auto;transition:transform .25s ease}


.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}





/* Brand */


.brand{display:flex;flex-direction:column;padding:14px 14px;border-bottom:1px solid var(--border);background:var(--surface)}


.brand__link{text-decoration:none;display:flex;flex-direction:column;gap:6px;color:inherit;width:100%}


.brand__logo-wrap{width:100%;height:54px;border-radius:8px;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:center;padding:4px 10px;box-sizing:border-box}


.brand__logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}


.brand__text{display:flex;justify-content:space-between;align-items:center;padding:0 2px}


.brand__name{font-weight:750;font-size:12px;letter-spacing:.04em;color:var(--text)}


.brand__sub{font-size:9.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}





/* Navigation Accordion */


.nav{flex:1;padding:10px 8px;overflow-y:auto}


.nav__group{margin-bottom:6px}


.nav__group-header{


  width:100%;


  display:flex;


  align-items:center;


  justify-content:space-between;


  background:transparent;


  border:none;


  padding:7px 10px;


  border-radius:var(--radius-sm);


  color:var(--text);


  font-size:12px;


  font-weight:700;


  cursor:pointer;


  text-align:left;


  transition:background .15s, color .15s;


  user-select:none;


}


.nav__group-header:hover{


  background:var(--surface-2);


  color:var(--primary);


}


.nav__group-header.has-active{


  color:var(--primary);


  font-weight:750;


}


.nav__group-title-text{


  display:flex;


  align-items:center;


  gap:8px;


}


.nav__group-icon{


  font-size:13px;


}


.nav__group-label{


  text-transform:uppercase;


  letter-spacing:.5px;


  font-size:10.5px;


}


.nav__group-arrow{


  font-size:10px;


  opacity:0.6;


  transition:transform .2s ease;


  transform:rotate(-90deg);


}


.nav__group.is-open .nav__group-arrow{


  transform:rotate(0deg);


}


.nav__group-items{


  display:none;


  padding:2px 0 2px 4px;


  margin-top:2px;


  border-left:2px solid var(--border);


  margin-left:14px;


}


.nav__group.is-open .nav__group-items{


  display:block;


}


.nav__item{


  display:flex;


  align-items:center;


  gap:8px;


  padding:6px 10px;


  border-radius:var(--radius-sm);


  color:var(--text);


  font-size:12px;


  font-weight:500;


  margin-bottom:2px;


  text-decoration:none;


  transition:background .15s, color .15s;


}


.nav__item:hover{background:var(--surface-2)}


.nav__item.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600}


.nav__icon{width:18px;text-align:center;font-size:12px}





/* Sidebar footer */


.sidebar__footer{padding:12px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;justify-content:space-between}


.user-chip{display:flex;gap:8px;align-items:center;min-width:0}


.user-chip__avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:700;flex:none}


.user-chip__name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.user-chip__role{font-size:11px;color:var(--text-muted)}





/* Topbar */


.topbar{display:flex;align-items:center;gap:14px;padding:12px 22px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}


.topbar__title{flex:1}


.topbar__title h1{font-size:17px;margin:0}


.topbar__actions{display:flex;gap:8px}


.icon-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--text);font-size:16px}


.icon-btn:hover{background:var(--surface-2)}


#menu-toggle{display:none}





/* Content */


.content{flex:1;padding:22px}


.content--full{min-height:100vh}


.page{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px}


.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}


.page-head h2{font-size:19px;margin:0}


.page-head__actions{display:flex;gap:8px}


.back-link{display:inline-block;font-size:12.5px;margin-bottom:4px}





/* Cards */


.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}


.card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}


.card__header h2{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}





/* KPI */


.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}


.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;gap:12px;align-items:center}


.kpi.warn{border-color:var(--warning)}


.kpi__icon{font-size:24px;width:44px;height:44px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center}


.kpi__label{font-size:12px;color:var(--text-muted)}


.kpi__value{font-size:20px;font-weight:700;display:block}





/* Grids */


.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}


.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}


.stat-card h3{font-size:13px;color:var(--text-muted);margin:0 0 6px}


.stat-card strong{font-size:26px}


.stat-card span{color:var(--text-muted);font-size:12px}





/* Tables */


.table-wrap{overflow-x:auto}


.table{width:100%;border-collapse:collapse;font-size:13.5px}


.table th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);color:var(--text-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}


.table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}


.table tbody tr:hover{background:var(--surface-2)}


.row-clickable{cursor:pointer}





/* Badges */


.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}


.badge--default{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}


.badge--success{background:var(--success-soft);color:var(--success)}


.badge--warning{background:var(--warning-soft);color:var(--warning)}


.badge--danger{background:var(--danger-soft);color:var(--danger)}


.badge--info{background:var(--info-soft);color:var(--info)}





/* Buttons */


.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;transition:background .15s,border .15s}


.btn:hover{background:var(--surface-2)}


.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}


.btn--primary:hover{background:var(--primary-600)}


.btn--danger{background:var(--danger);border-color:var(--danger);color:#fff}


.btn--ghost{background:transparent;border-color:transparent}


.btn--block{width:100%;justify-content:center}


.btn--sm{padding:5px 10px;font-size:12px}





/* Forms */


.input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:13.5px}


.input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent}


label{display:block;font-size:12.5px;font-weight:600;margin-bottom:10px;color:var(--text-muted)}


label .input{margin-top:4px;font-weight:400}


.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}


.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}


.toolbar .input{max-width:280px}





/* Description list */


.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13.5px}


.dl dt{color:var(--text-muted);font-weight:600}


.dl dd{margin:0}


.note{font-size:12.5px;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:8px 10px;margin-top:8px}





/* Modal */


.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:100;padding:16px;backdrop-filter:blur(2.5px)}


.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg),0 25px 50px -12px rgba(0,0,0,.25);width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;position:relative;transition:max-width .2s ease,width .2s ease,height .2s ease}


.modal.is-resizable{resize:both;overflow:hidden;min-width:360px;min-height:240px}


.modal--sm{max-width:440px}


.modal--md{max-width:620px}


.modal--lg{max-width:880px}


.modal--xl{max-width:1180px}


.modal--wide{max-width:1340px}


.modal--fit{width:fit-content;max-width:min(96vw,1340px);min-width:min(90vw,680px)}


.modal--maximized{max-width:98vw !important;width:98vw !important;height:95vh !important;max-height:95vh !important;resize:none !important;border-radius:var(--radius-sm)}





.modal__header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;gap:12px;cursor:default;user-select:none}


.modal__header h2{margin:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.modal__header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}


.modal__header-actions .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);background:transparent;border:1px solid transparent;color:var(--text-muted);cursor:pointer;font-size:14px;transition:all .15s ease}


.modal__header-actions .icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}


.modal__header-actions .icon-btn[data-close]:hover{background:rgba(239,68,68,.12);color:var(--danger,#ef4444);border-color:rgba(239,68,68,.25)}





.modal__body{padding:18px 20px;overflow-y:auto;overflow-x:auto;flex:1}


.modal__subtitle{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin:10px 0}


.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0;background:var(--surface);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}


.modal__resize-handle{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0%,transparent 45%,var(--text-muted) 45%,transparent 55%,transparent 68%,var(--text-muted) 68%,transparent 78%,transparent 88%,var(--text-muted) 88%);opacity:.35;transition:opacity .15s;z-index:10}


.modal__resize-handle:hover{opacity:1}





/* Toast */


#toast-root{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:200}


.toast{background:var(--text);color:var(--bg);padding:11px 16px;border-radius:var(--radius-sm);font-weight:500;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);transition:.25s;max-width:340px}


.toast.show{opacity:1;transform:none}


.toast--error{background:var(--danger);color:#fff}


.toast--success{background:var(--success);color:#fff}





/* Alerts */


.alert{border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-top:10px}


.alert--danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}





/* Empty states */


.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}


.empty-state__icon{font-size:40px;margin-bottom:10px}


.empty-state h2{color:var(--text);margin:0 0 6px}





/* Login */


.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,var(--primary-soft),var(--bg));padding:20px}


.login__card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px;width:100%;max-width:400px}


.login__brand{font-weight:700;font-size:15px;color:var(--primary);margin-bottom:8px}


.login__card h1{font-size:20px}


.login__demo{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;align-items:center;font-size:12px}





/* Accounting & Finance Extensions */


.tabs-nav{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;padding-bottom:2px}


.tab-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:none;background:transparent;color:var(--text-muted);font-weight:600;font-size:13px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}


.tab-btn:hover{background:var(--surface-2);color:var(--text)}


.tab-btn.is-active{background:var(--primary-soft);color:var(--primary)}


.tab-btn .badge{font-size:11px;padding:1px 6px;margin-left:4px}





.pill-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}


.pill-btn{padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}


.pill-btn:hover{background:var(--surface-2);color:var(--text)}


.pill-btn.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}











.recon-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:380px}


.recon-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px}


.recon-item{padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}


.recon-item:hover{border-color:var(--primary)}


.recon-item.is-selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 2px var(--primary-soft)}





.print-card{background:#fff;color:#000;padding:24px;border:1px solid #ddd;border-radius:8px;font-family:'Segoe UI',sans-serif}


.print-card h2{color:#0f766e}


.print-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:12.5px}


.print-table th,.print-table td{border:1px solid #ccc;padding:6px 8px;text-align:left}


.print-table th{background:#f3f4f6;font-weight:700}





.alert-banner{padding:12px 16px;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-weight:500;font-size:13px}


.alert-banner--warn{background:var(--warning-soft);color:var(--warning);border:1px solid var(--warning)}


.alert-banner--danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}


.alert-banner--info{background:var(--info-soft);color:var(--info);border:1px solid var(--info)}





.cash-count-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}





/* Responsive */


@media (max-width:900px){


  .grid-2{grid-template-columns:1fr}


  .recon-split{grid-template-columns:1fr}


  .sidebar{transform:translateX(-100%)}


  .sidebar.is-open{transform:none;box-shadow:var(--shadow-lg)}


  .main{margin-left:0}


  #menu-toggle{display:grid}


}


@media (max-width:560px){


  .form-grid{grid-template-columns:1fr}


  .content{padding:14px}


}





/* ===== RH Player Cards (FIFA Style) ===== */


.fifa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:16px}


.fifa-card{background:linear-gradient(145deg, #1e293b, #0f172a);border:2px solid #e2b714;border-radius:18px;color:#f8fafc;padding:18px;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.35);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}


.fifa-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(226,183,20,0.25)}


.fifa-card--gold{border-color:#fbbf24;background:linear-gradient(145deg, #1e293b 0%, #312e81 50%, #1e1b4b 100%)}


.fifa-card--silver{border-color:#94a3b8;background:linear-gradient(145deg, #1e293b 0%, #334155 100%)}


.fifa-card--bronze{border-color:#d97706;background:linear-gradient(145deg, #1c1917 0%, #292524 100%)}





.fifa-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}


.fifa-card__ovr-block{text-align:center}


.fifa-card__ovr{font-size:38px;font-weight:900;line-height:1;color:#fbbf24;text-shadow:0 2px 8px rgba(0,0,0,0.6);font-family:ui-monospace,sans-serif}


.fifa-card__pos{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#e2e8f0;margin-top:4px}


.fifa-card__avatar-wrap{position:relative;width:90px;height:90px;border-radius:50%;border:3px solid #fbbf24;overflow:hidden;background:#0f172a;box-shadow:0 4px 12px rgba(0,0,0,0.4)}


.fifa-card__avatar-wrap img{width:100%;height:100%;object-fit:cover}


.fifa-card__avatar-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg, #0d9488, #0284c7);color:#fff;font-weight:800}





.fifa-card__name-block{text-align:center;border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:10px;margin-bottom:12px}


.fifa-card__name{font-size:17px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin:0;color:#fff}


.fifa-card__sub{font-size:11.5px;color:#94a3b8;margin-top:2px}





.fifa-card__stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:14px}


.fifa-stat{display:flex;justify-content:space-between;align-items:center;font-size:12px}


.fifa-stat__val{font-weight:800;color:#38bdf8;font-size:14px;width:24px;text-align:right}


.fifa-stat__lbl{color:#cbd5e1;font-weight:600;font-size:11px;letter-spacing:.4px}





.fifa-card__footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid rgba(255,255,255,0.1);font-size:11px;color:#94a3b8}


.fifa-badge-pill{background:rgba(251,191,36,0.15);border:1px solid #fbbf24;color:#fbbf24;font-size:10px;padding:2px 8px;border-radius:12px;font-weight:700;text-transform:uppercase}





/* Radar & Skill Bars */


.skill-bar-wrap{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}


.skill-bar-head{display:flex;justify-content:space-between;font-size:12px;font-weight:600}


.skill-bar-track{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;border:1px solid var(--border)}


.skill-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary),#0ea5e9);transition:width .4s ease}





/* Signature Pad */


.sig-canvas-wrap{border:2px dashed var(--border);border-radius:var(--radius);background:#ffffff;position:relative;margin:10px 0}


.sig-canvas{width:100%;height:180px;display:block;cursor:crosshair;touch-action:none}


.sig-tools{display:flex;justify-content:space-between;align-items:center;margin-top:8px}





/* Workflow Stepper */


.stepper{display:flex;gap:4px;align-items:center;overflow-x:auto;padding:8px 0}


.step-item{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:11.5px;font-weight:600;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);white-space:nowrap}


.step-item.is-done{background:var(--success-soft);color:var(--success);border-color:var(--success)}


.step-item.is-active{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}


.step-arrow{color:var(--text-muted);font-size:12px}





/* Direction KPI Progress */


.kpi-progress{margin-top:8px}


.kpi-progress-bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}


.kpi-progress-val{height:100%;background:var(--primary);border-radius:3px}











/* ─── Badge Utilisateur en Haut à Droite (Header Topbar) ─── */


.topbar-user {


  display: inline-flex;


  align-items: center;


  gap: 9px;


  background: var(--surface-2);


  border: 1px solid var(--border);


  padding: 3px 12px 3px 6px;


  border-radius: 999px;


  box-shadow: var(--shadow-sm);


  transition: all var(--trans);


  margin-left: 6px;


}


.topbar-user:hover {


  border-color: var(--primary-light);


  box-shadow: var(--shadow);


}


.topbar-user__avatar {


  width: 28px;


  height: 28px;


  border-radius: 50%;


  background: linear-gradient(135deg, var(--primary), var(--primary-dark));


  color: #fff;


  font-weight: 700;


  font-size: 12.5px;


  display: grid;


  place-items: center;


  flex-shrink: 0;


  box-shadow: 0 1px 3px rgba(0,0,0,0.12);


}


.topbar-user__details {


  display: flex;


  flex-direction: column;


  line-height: 1.15;


  text-align: left;


}


.topbar-user__name {


  font-size: 12px;


  font-weight: 700;


  color: var(--text);


  white-space: nowrap;


}


.topbar-user__role {


  font-size: 10px;


  font-weight: 600;


  color: var(--primary);


  white-space: nowrap;


}


.topbar-user__logout {


  background: transparent;


  border: 1px solid transparent;


  border-radius: 6px;


  padding: 2px 5px;


  font-size: 13px;


  color: var(--text-muted);


  cursor: pointer;


  margin-left: 3px;


  transition: all var(--trans);


  display: grid;


  place-items: center;


}


.topbar-user__logout:hover {


  color: var(--danger);


  background: rgba(239, 68, 68, 0.12);


  border-color: rgba(239, 68, 68, 0.25);


  transform: scale(1.05);


}