:root{
  --bg: #0b0f14;
  --panel: #111827;
  --panel2:#0f172a;
  --text: #e5e7eb;
  --muted:#9ca3af;
  --border:#1f2937;

  /* Branding: adjust to match equipelefrancois.ca */
  --brand:#d11a2a;     /* primary accent (red) */
  --brand2:#ffffff;    /* secondary */
  --danger:#ef4444;
  --success:#22c55e;

  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(209,26,42,.15), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,.06), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Clickable link that fills an entire table cell (ex: adresse -> ouvrir dossier) */
.cell-link{
  display:block;
  width:100%;
  height:100%;
  cursor:pointer;
}
.cell-link:hover{ text-decoration:underline; }
.cell-link:focus{ outline: 2px solid rgba(0,0,0,0.25); outline-offset: 2px; border-radius: 8px; }
.theme-dark .cell-link:focus{ outline-color: rgba(255,255,255,0.25); }

.auth-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
  padding:32px 16px;
  gap:16px;
}

.app-shell{
  max-width:1100px;
  margin:0 auto;
  padding:22px 16px 40px;
}

.topbar{
  position:sticky; top:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  background: rgba(17,24,39,.8);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(12px);
  z-index:50;
}
.logo{
  font-weight:700;
  letter-spacing:.2px;
}
.topbar nav a{
  margin-left:14px;
  color:var(--muted);
}
.topbar nav a:hover{ color:var(--text); text-decoration:none; }

.brand{
  display:flex; align-items:center; gap:12px;
}
.brand-mark{
  width:44px; height:44px;
  border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(209,26,42,.95), rgba(209,26,42,.35));
  border:1px solid rgba(209,26,42,.45);
  font-weight:800;
}
.brand-title{ font-weight:800; }
.brand-sub{ color:var(--muted); font-size:14px; margin-top:2px; }

.card{
  width: min(980px, 100%);
  background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.85));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}


  .card{ width: min(1200px, 100%); }
}

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.h2{ margin:0 0 10px; font-size:22px; }
.h3{ margin:0 0 10px; font-size:18px; }

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

.sep{ border:none; border-top:1px solid var(--border); margin:16px 0; }

.form{
  display:flex; flex-direction:column; gap:12px;
}
label{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:14px; }
input, select{
  background: rgba(11,15,20,.6);
  color:var(--text);
  border:1px solid var(--border);
  border-radius: 12px;
  padding:10px 12px;
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(209,26,42,.55);
  box-shadow: 0 0 0 4px rgba(209,26,42,.15);
}

.row{ display:flex; gap:12px; align-items:flex-end; }
.grow{ flex:1; }
.toggle{ flex-direction:row; gap:10px; align-items:center; color:var(--muted); }
.toggle input{ width:18px; height:18px; padding:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.07); text-decoration:none; }
.btn-primary{
  background: rgba(209,26,42,.9);
  border-color: rgba(209,26,42,.9);
}
.btn-primary:hover{ background: rgba(209,26,42,1); }
.btn-sm{ padding:7px 10px; border-radius:10px; font-size:12px; }

.alert{
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.alert-danger{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }
.alert-success{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.08); }

.table-wrap{ overflow:auto; border-radius:12px; border:1px solid var(--border); }
.table{
  width:100%;
  border-collapse:collapse;
  min-width: 820px;
}
.table th, .table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:13px;
}
.table th{ color:var(--muted); font-weight:600; background: rgba(255,255,255,.03); }
.table tr:hover td{ background: rgba(255,255,255,.03); }

.pill{
  display:inline-flex;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}

.kv{ margin-top:14px; }
.kv-row{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed rgba(31,41,55,.7); }
.kv-k{ color:var(--muted); }
.kv-v{ color:var(--text); }

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.footer{
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px 34px;
}

.impersonation-banner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding:10px 12px;
  background: rgba(209,26,42,.15);
  border-bottom:1px solid rgba(209,26,42,.35);
  color: var(--text);
}
.code{
  padding:12px;
  background: rgba(0,0,0,.35);
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:auto;
}



/* Transaction row indicators (tables don't reliably support outline on <tr>) */
/* Status pills */

.pill-bad{
  border-color: rgba(239,68,68,.55);
  color: rgba(239,68,68,.95);
  background: rgba(239,68,68,.08);
  font-weight: 800;
}
.pill-neutral{
  border-color: rgba(156,163,175,.35);
  color: rgba(229,231,235,.9);
  background: rgba(255,255,255,.03);
  font-weight: 700;
}

/* Status pills */
.pill-ok{
  border-color: rgba(34,197,94,.55);
  color: rgba(34,197,94,.95);
  background: rgba(34,197,94,.08);
  font-weight: 800;
}
.pill-bad{
  border-color: rgba(239,68,68,.55);
  color: rgba(239,68,68,.95);
  background: rgba(239,68,68,.08);
  font-weight: 800;
}
.pill-neutral{
  border-color: rgba(156,163,175,.35);
  color: rgba(229,231,235,.9);
  background: rgba(255,255,255,.03);
  font-weight: 700;
}
.pill-icon{
  display:inline-block;
  width: 1.1em;
  text-align:center;
  margin-right: 6px;
  font-weight: 900;
}

/* Transaction row outline v6 (single outline around the row) */
.tx-green td, .tx-red td, .tx-none td{
  position: relative;
}

.tx-green td{
  box-shadow: inset 0 2px 0 rgba(34,197,94,.45), inset 0 -2px 0 rgba(34,197,94,.45);
}
.tx-red td{
  box-shadow: inset 0 2px 0 rgba(239,68,68,.45), inset 0 -2px 0 rgba(239,68,68,.45);
}
.tx-none td{
  box-shadow: none;
}

.tx-green td:first-child{
  box-shadow:
    inset 6px 0 0 rgba(34,197,94,.75),
    inset 0 2px 0 rgba(34,197,94,.45),
    inset 0 -2px 0 rgba(34,197,94,.45);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.tx-red td:first-child{
  box-shadow:
    inset 6px 0 0 rgba(239,68,68,.75),
    inset 0 2px 0 rgba(239,68,68,.45),
    inset 0 -2px 0 rgba(239,68,68,.45);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.tx-green td:last-child{
  box-shadow:
    inset -2px 0 0 rgba(34,197,94,.45),
    inset 0 2px 0 rgba(34,197,94,.45),
    inset 0 -2px 0 rgba(34,197,94,.45);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.tx-red td:last-child{
  box-shadow:
    inset -2px 0 0 rgba(239,68,68,.45),
    inset 0 2px 0 rgba(239,68,68,.45),
    inset 0 -2px 0 rgba(239,68,68,.45);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.tx-none td:first-child{ border-left: 6px solid transparent; }

/* Status pills (icons provided by HTML .pill-icon) */
.pill-ok{
  border-color: rgba(34,197,94,.55);
  color: rgba(34,197,94,.95);
  background: rgba(34,197,94,.08);
  font-weight: 800;
}
.pill-bad{
  border-color: rgba(239,68,68,.55);
  color: rgba(239,68,68,.95);
  background: rgba(239,68,68,.08);
  font-weight: 800;
}
.pill-neutral{
  border-color: rgba(156,163,175,.35);
  color: rgba(229,231,235,.9);
  background: rgba(255,255,255,.03);
  font-weight: 700;
}
.pill-icon{
  display:inline-block;
  width: 1.1em;
  text-align:center;
  margin-right: 6px;
  font-weight: 900;
}

/* Danger button */
.btn-danger{
  border: 1px solid rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
  color: rgba(239,68,68,.95);
}
.btn-danger:hover{
  background: rgba(239,68,68,.18);
}

details summary{
  list-style: none;
}
details summary::-webkit-details-marker{
  display:none;
}


/* Wide cards for admin data tables */
.card-wide{
  width: 100%;
  max-width: none;
}

/* Table: use full available width; only scroll horizontally if content exceeds */
.table-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-scroll .table{
  width: 100%;
  min-width: 1100px; /* avoids ultra-narrow columns / vertical text */
  table-layout: auto;
}
/* Default: keep non-transaction tables compact in horizontal scroll containers */
.table-scroll .table:not(.tx-table) th,
.table-scroll .table:not(.tx-table) td{
  white-space: nowrap;
  vertical-align: middle;
}

/* Transactions tables: allow wrapping so content never overlaps adjacent columns */
.table-scroll .table.tx-table th,
.table-scroll .table.tx-table td{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: middle;
}
/* Allow wrapping only for designated cells */
.table-scroll .wrap{
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
/* Ensure wrapping for specific columns even inside table-scroll */
.table-scroll td.col-client{
  white-space: normal;
}
.table-scroll td.col-client .client-wrap{
  white-space: normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Use fixed layout for tx-table to prevent long text from stretching columns */
.table-scroll .table.tx-table{
  /* ensure comfortable column widths; horizontal scroll appears only when needed */
  min-width: 1280px;
  /* IMPORTANT: fixed layout is required so column widths/max-width behave predictably */
  table-layout: fixed;
}

/* Column sizing for transaction list tables (Admin & User) */
.tx-table .col-status{ width: 130px; }
.tx-table .col-agent{ width: 200px; }
.tx-table .col-address{ width: 260px; }
.tx-table .col-rep{ width: 120px; }
/* Client column: cap width and wrap long names instead of expanding the column */
.tx-table .col-client{
  width: 30ch;
  max-width: 30ch;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tx-table .col-siege{ width: 160px; }
.tx-table .col-notaire{ width: 130px; }
.tx-table .col-open{ width: 100px; text-align: center; }
.tx-table .col-last{ width: 190px; }


/* Theme toggle */
.topbar nav a.theme-toggle,
.topbar nav button.theme-toggle{
  margin-left:14px;
  color: var(--muted);
  border:1px solid transparent;
  padding:7px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.04);
}
.topbar nav a.theme-toggle:hover,
.topbar nav button.theme-toggle:hover{
  color: var(--text);
  background: rgba(255,255,255,.07);
  text-decoration:none;
}

/* Light theme */
html[data-theme="light"]{
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel2:#f8fafc;
  --text: #0f172a;
  --muted:#475569;
  --border:#d1d5db;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
}

html[data-theme="light"] body{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(209,26,42,.10), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(0,0,0,.03), transparent 55%),
              var(--bg);
  color: var(--text);
}

html[data-theme="light"] .topbar{
  background: rgba(255,255,255,.78);
  border-bottom:1px solid var(--border);
}
html[data-theme="light"] .topbar nav a{
  color: var(--muted);
}
html[data-theme="light"] .topbar nav a:hover{
  color: var(--text);
}

html[data-theme="light"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.96));
  box-shadow: var(--shadow);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background: rgba(255,255,255,.90);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .btn{
  background: rgba(0,0,0,.04);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .btn:hover{
  background: rgba(0,0,0,.06);
  text-decoration:none;
}

html[data-theme="light"] .table th{
  background: rgba(0,0,0,.03);
  color: var(--muted);
}
html[data-theme="light"] .table tr:hover td{
  background: rgba(0,0,0,.02);
}

html[data-theme="light"] .alert{
  background: rgba(0,0,0,.03);
}


/* High-contrast dark theme (inspired by Ecobee-style tiles) */
html[data-theme="dark"]{
  --bg: #05070a;
  --panel: #0b0f14;
  --panel2:#121822;
  --text: #e8eef7;
  --muted:#a7b2c6;
  --border:#253041;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(1100px 600px at 12% 8%, rgba(209,26,42,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 22%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, #05070a, #070b10 40%, #05070a);
  color: var(--text);
}

/* Top bar: sharper separation */
html[data-theme="dark"] .topbar{
  background: rgba(8,10,14,.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* Cards: less translucent, more tile-like */
html[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(11,15,20,.98), rgba(9,12,17,.96));
  border: 1px solid rgba(37,48,65,.85);
  box-shadow: var(--shadow);
}

/* Sub-panels / sections inside cards */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .soft{
  background: rgba(24,32,45,.55);
  border: 1px solid rgba(37,48,65,.55);
}

/* Inputs: more contrast */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: rgba(6,8,12,.92);
  border: 1px solid rgba(37,48,65,.95);
  color: var(--text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: rgba(167,178,198,.75);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  outline: none;
  border-color: rgba(209,26,42,.85);
  box-shadow: 0 0 0 3px rgba(209,26,42,.20);
}

/* Buttons: clearer hierarchy */
html[data-theme="dark"] .btn{
  border: 1px solid rgba(37,48,65,.95);
  background: rgba(18,24,34,.70);
  color: var(--text);
}
html[data-theme="dark"] .btn:hover{
  background: rgba(18,24,34,.88);
  border-color: rgba(58,74,98,.95);
  text-decoration: none;
}
html[data-theme="dark"] .btn-primary{
  border-color: rgba(209,26,42,.90);
  box-shadow: 0 10px 24px rgba(209,26,42,.20);
}
html[data-theme="dark"] .btn-ghost{
  background: rgba(255,255,255,.04);
}

/* Tables: increase contrast between header/rows */
html[data-theme="dark"] .table th{
  background: rgba(18,24,34,.92);
  color: rgba(232,238,247,.92);
  border-bottom: 1px solid rgba(37,48,65,.95);
}
html[data-theme="dark"] .table td{
  border-bottom: 1px solid rgba(37,48,65,.45);
}
html[data-theme="dark"] .table tr:hover td{
  background: rgba(18,24,34,.55);
}

/* Pills / status */
html[data-theme="dark"] .pill{
  border-color: rgba(58,74,98,.85);
  background: rgba(18,24,34,.65);
}
html[data-theme="dark"] .pill.ok{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
}
html[data-theme="dark"] .pill.bad{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
}

/* Modals / toast / alerts */
html[data-theme="dark"] .modal{
  background: rgba(11,15,20,.98);
  border: 1px solid rgba(37,48,65,.85);
}
html[data-theme="dark"] .toast,
html[data-theme="dark"] .alert{
  background: rgba(18,24,34,.70);
  border: 1px solid rgba(37,48,65,.65);
}


/* Transaction page: stronger contrast between outer container and inner sections */
html[data-theme="dark"] .tx-card{
  background: linear-gradient(180deg, rgba(7,9,12,.99), rgba(5,7,10,.98));
  border: 1px solid rgba(37,48,65,.95);
}
html[data-theme="dark"] .card-sub{
  /* +éclairé: meilleure lisibilité */
  background: linear-gradient(180deg, rgba(24,32,45,.94), rgba(18,24,34,.92));
  border: 1px solid rgba(74,94,125,.72);
  box-shadow:
    0 10px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .card-sub .h3,
html[data-theme="dark"] .card-sub h2,
html[data-theme="dark"] .card-sub h3{
  color: rgba(232,238,247,.96);
}
html[data-theme="dark"] .card-sub label{
  color: rgba(232,238,247,.88);
}

/* Light theme: keep subtle separation */
html[data-theme="light"] .tx-card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}
html[data-theme="light"] .card-sub{
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.98));
  border: 1px solid rgba(203,213,225,.85);
}


.btn-disabled{opacity:.5; pointer-events:none;}


.notice{padding:10px 12px;border-radius:12px;border:1px solid var(--border);margin:10px 0;background:var(--surface-2);} .notice.success{border-color:rgba(46,204,113,.45);} .notice.error{border-color:rgba(231,76,60,.55);} 

/* Sortable table headers */
.sortlink{color:inherit;text-decoration:none;white-space:nowrap;}
.sortlink:hover{text-decoration:underline;}
.sort-indicator{font-size:.85em;opacity:.7;margin-left:6px;}


/* Limit Client column width and wrap long names */
.col-client{max-width:30ch; width:30ch; white-space:normal;}
.client-wrap{display:block; max-width:30ch; white-space:normal; overflow-wrap:anywhere; word-break:break-word;}
@media (max-width: 900px){.col-client{max-width:22ch; width:auto;} .client-wrap{max-width:22ch;}}


/* Transaction tables: fixed layout for predictable column widths */
.tx-table{table-layout:fixed;width:100%;}
.tx-table .col-client{max-width:30ch;width:30ch;white-space:normal;}
.tx-table .client-wrap{display:block;max-width:30ch;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
@media (max-width: 900px){.tx-table .col-client{max-width:22ch;width:auto;} .tx-table .client-wrap{max-width:22ch;}}