/* Catys — feuille de styles commune (login, inscription, dashboard) */
:root{
  --ink:#161826;
  --ink-soft:#2A2D40;
  --rail:#1B1E2E;
  --rail-line:#2E3148;
  --bg:#F2F3F7;
  --panel:#FFFFFF;
  --line:#E4E5EE;
  --text:#1B1E2B;
  --text-dim:#6B6E85;
  --text-faint:#9497AC;
  --signal:#2F6FED;
  --signal-dim:#EAF0FE;
  --amber:#F2A93B;
  --danger:#E5484D;
  --danger-bg:#FDEBEC;
  --success:#12A594;
  --success-bg:#E5F7F4;

  --radius-s:8px;
  --radius-m:14px;
  --shadow-1:0 1px 2px rgba(22,24,38,.06);
  --shadow-2:0 10px 30px -12px rgba(22,24,38,.18);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.btn-primary,.nav-item span,.tile-title,.tab{
  font-family:'Space Grotesk',system-ui,sans-serif;
}
button, input, select{font-family:inherit;}
::selection{background:var(--signal); color:#fff;}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}

/* ---------- Auth pages (login / inscription) ---------- */
body.auth-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.login-card, .register-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-2);
  width:100%;
  max-width:420px;
  padding:36px 32px;
}
.register-card{max-width:520px;}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--ink);
  font-weight:700;
  font-size:22px;
  margin-bottom:24px;
}

.header{text-align:center; margin-bottom:28px;}
.title{font-size:22px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.subtitle{font-size:13.5px; color:var(--text-dim);}

.form{display:flex; flex-direction:column; gap:16px;}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){.field-row{grid-template-columns:1fr;}}

.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-dim);}

.input-wrap{position:relative; display:flex; align-items:center;}
.input-wrap svg.input-icon{
  position:absolute; left:12px; width:18px; height:18px;
  stroke:var(--text-faint); pointer-events:none;
}
.input-wrap input, .field select{
  width:100%;
  padding:11px 12px 11px 40px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  font-size:14px;
  color:var(--text);
  background:var(--bg);
  transition:border-color .15s ease, background-color .15s ease;
}
.field select{
  padding-left:12px;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239497AC' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.input-wrap input:focus, .field select:focus{border-color:var(--signal); background:#fff;}
.input-wrap input::placeholder{color:var(--text-faint);}
.field input:not(.input-wrap input){
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-s);
  font-size:13.5px; color:var(--text); background:var(--bg);
}
.field input:not(.input-wrap input):focus{border-color:var(--signal); background:#fff;}

.toggle-pwd{
  position:absolute; right:10px; background:none; border:none; cursor:pointer;
  padding:4px; display:flex; align-items:center; color:var(--text-faint); border-radius:4px;
}
.toggle-pwd:hover{color:var(--text-dim);}

.error-message{
  background:var(--danger-bg); color:var(--danger); font-size:13px;
  padding:10px 12px; border-radius:var(--radius-s); display:none; align-items:center; gap:8px;
}
.error-message.show{display:flex;}

.alert{
  background:var(--danger-bg); color:var(--danger); font-size:13px;
  padding:10px 12px; border-radius:var(--radius-s); display:none;
}
.alert.show{display:block;}
.alert.alert-success{background:var(--success-bg); color:var(--success);}

.btn-primary{
  margin-top:8px; padding:12px; background:var(--ink); color:#fff; border:none;
  border-radius:var(--radius-s); font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background-color .15s ease;
}
.btn-primary:hover{background:var(--signal);}
.btn-primary:disabled{opacity:.6; cursor:not-allowed;}
.btn-primary.btn-inline{align-self:flex-start; padding:10px 20px;}

.step-section{display:none;}
.step-section.active{display:flex; flex-direction:column; gap:16px;}

.footer-text{text-align:center; margin-top:22px; font-size:13px; color:var(--text-dim);}
.footer-text a{color:var(--signal); font-weight:600; text-decoration:none;}
.footer-text a:hover{text-decoration:underline;}

.code-hint{font-size:12px; color:var(--text-faint); text-align:center; margin-top:4px;}

/* ---------- Dashboard shell ---------- */
body:not(.auth-body){
  height:100vh; overflow:hidden; display:flex;
}

.rail{
  width:238px; min-width:238px; height:100vh; background:var(--rail); color:#C6C8DA;
  display:flex; flex-direction:column; padding:22px 16px; border-right:1px solid var(--rail-line);
  transition:width .22s ease, min-width .22s ease, padding .22s ease;
}
.rail .brand{color:#fff; justify-content:flex-start; padding:0 8px 26px 8px; margin-bottom:0;}
.brand-mark{width:48px; height:48px; min-width:48px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.brand-name{transition:opacity .15s ease; height:48px;}

.nav-group{list-style:none; display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-s);
  color:#AEB1C7; font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; cursor:pointer;
}
.nav-item svg{min-width:19px;}
.nav-item:hover{background:#242739; color:#fff;}
.nav-item.active{background:var(--signal); color:#fff;}
.nav-item.active svg{stroke:#fff;}

.rail-divider{height:1px; background:var(--rail-line); margin:14px 4px;}
.rail-footer{display:flex; flex-direction:column; gap:2px;}
.logout{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-s);
  color:#E5848A; font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; cursor:pointer;
}
.logout:hover{background:#3A2530;}

.rail-collapse{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px;
  color:#8B8EA6; align-self:flex-end; margin-bottom:8px; cursor:pointer;
}
.rail-collapse:hover{background:#242739; color:#fff;}

.rail.collapsed{width:76px; min-width:76px; padding:22px 12px;}
.rail.collapsed .brand-name, .rail.collapsed .nav-item span, .rail.collapsed .logout span{display:none;}
.rail.collapsed .nav-item, .rail.collapsed .logout{justify-content:center;}
.rail.collapsed .brand{justify-content:center; padding:0 0 26px 0;}

.main{flex:1; display:flex; flex-direction:column; height:100vh; min-width:0;}

.topbar{
  display:flex; align-items:center; gap:18px; padding:16px 30px; background:var(--panel);
  border-bottom:1px solid var(--line); min-height:70px;
}
.hamburger{
  display:none; width:34px; height:34px; border-radius:8px; align-items:center; justify-content:center;
  color:var(--text-dim); cursor:pointer;
}
.hamburger:hover{background:var(--bg);}

.topbar-right{display:flex; align-items:center; gap:18px;}
.who{display:flex; align-items:center; gap:10px;}
.avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--amber),#F5C46B);
  display:flex; align-items:center; justify-content:center; color:#5A3E00; font-weight:700; font-size:13px;
}
.who-name{font-size:13.5px; font-weight:600; line-height:1.2;}
.who-role{font-size:12px; color:var(--text-dim);}

.view{flex:1; min-height:0; overflow-y:auto; padding:26px 30px 40px 30px;}
.view::-webkit-scrollbar{width:9px;}
.view::-webkit-scrollbar-thumb{background:#D5D7E2; border-radius:20px;}
.view::-webkit-scrollbar-track{background:transparent;}

.view-header{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.view-title{font-size:23px; font-weight:700; margin-bottom:4px;}
.view-sub{font-size:13.5px; color:var(--text-dim);}

.view-section{display:none;}
.view-section.active{display:block;}

.rail-scrim{display:none;}

/* ---------- Panels / tables / grid ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:20px 22px; box-shadow:var(--shadow-1);
}
.panel h3{font-size:15px; margin-bottom:14px;}

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

.data-table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;}
.data-table th, .data-table td{text-align:left; padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--line);}
.data-table th{color:var(--text-dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.data-table tr:last-child td{border-bottom:none;}
.table-empty{color:var(--text-dim); font-size:13.5px; padding:14px 4px;}

.simple-list{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13.5px;}

.code-badge{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--signal-dim); color:var(--signal); border-radius:var(--radius-s);
  padding:10px 14px; margin:12px 0; font-family:'Space Grotesk',monospace;
}
.code-badge .code-value{font-size:17px; font-weight:700; letter-spacing:.06em;}
.code-badge .code-countdown{font-size:12.5px; font-weight:600;}
.code-badge.expired{background:var(--danger-bg); color:var(--danger);}

.btn-regenerate{
  width:100%; padding:9px; border-radius:8px; font-size:13px; font-weight:600;
  background:var(--ink); color:#fff; cursor:pointer;
}
.btn-regenerate:hover{background:var(--signal);}
.btn-regenerate:disabled{opacity:.6; cursor:not-allowed;}

/* ---------- Settings ---------- */
.settings-grid{display:grid; grid-template-columns:220px 1fr; gap:26px; max-width:900px;}
.settings-nav{display:flex; flex-direction:column; gap:2px;}
.settings-nav button{
  text-align:left; padding:10px 13px; border-radius:8px; font-size:13.5px; font-weight:500;
  color:var(--text-dim); cursor:pointer;
}
.settings-nav button:hover{background:var(--bg);}
.settings-nav button.active{background:var(--signal-dim); color:var(--signal);}

.settings-subview{display:none;}
.settings-subview.active{display:block;}

.settings-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:26px; box-shadow:var(--shadow-1); max-width:640px;
}
.settings-panel h3{font-size:15px; margin-bottom:18px;}

/* ---------- Empty state (placeholder views) ---------- */
.empty{display:none; flex-direction:column; align-items:center; text-align:center; padding:60px 20px; color:var(--text-dim);}
.empty.show{display:flex;}
.empty svg{margin-bottom:14px; stroke:var(--text-faint);}
.empty strong{color:var(--text); font-size:15px; margin-bottom:5px;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .rail{position:fixed; z-index:40; left:-260px; top:0;}
  .rail.open{left:0; box-shadow:20px 0 40px rgba(0,0,0,.25);}
  .rail.collapsed{width:238px; min-width:238px; padding:22px 16px;}
  .rail.collapsed .brand-name, .rail.collapsed .nav-item span, .rail.collapsed .logout span{display:block;}
  .rail.collapsed .nav-item, .rail.collapsed .logout{justify-content:flex-start;}
  .rail.collapsed .brand{justify-content:flex-start; padding:0 8px 26px 8px;}
  .rail-collapse{display:none;}
  .hamburger{display:flex;}
  .rail-scrim{display:none; position:fixed; inset:0; background:rgba(15,16,26,.4); z-index:30;}
  .rail-scrim.show{display:block;}
}

@media (max-width:900px){
  .settings-grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .topbar{padding:14px 16px;}
  .view{padding:18px 16px 30px 16px;}
  .who-name, .who-role{display:none;}
  .grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}