/* =========================================================
   WorkMeet — Bento UI
   Les couleurs proviennent des variables du thème utilisateur
   (injectées dans :root par layouts/app.blade.php).
   ========================================================= */
:root {
    --bg:#f4f6fb; --surface:#fff; --surface-alt:#eef1fb; --text:#161a2b; --muted:#6b7190;
    --primary:#4f46e5; --accent:#06b6d4; --border:#e3e7f3;
    --radius:22px; --radius-sm:14px; --gap:16px;
    --shadow:0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .12);
    --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --danger:#e11d48; --success:#16a34a; --warning:#d97706;
}
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; }
body {
    font-family:var(--font); background:var(--bg); color:var(--text);
    font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
    transition:background .3s, color .3s;
}
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0 0 .4em; line-height:1.2; letter-spacing:-.02em; }
h1 { font-size:1.75rem; } h2 { font-size:1.2rem; } h3 { font-size:1rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .mono { font-family:ui-monospace, Consolas, monospace; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-2{margin-bottom:16px}

/* ---------- Shell ---------- */
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; transition:grid-template-columns .25s ease; }
.sidebar {
    overflow:hidden auto; position:sticky; top:0; height:100vh; padding:22px 16px; display:flex; flex-direction:column; gap:6px;
    background:var(--surface); border-right:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; padding:4px 10px 18px; color:var(--text); }
.brand-logo {
    width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg, var(--primary), var(--accent)); font-size:18px;
}
.nav-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:14px 12px 4px; }
.nav-link {
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
    color:var(--text); font-weight:500; transition:background .15s;
}
.nav-link:hover { background:var(--surface-alt); text-decoration:none; }
.nav-link.active { background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary); }
.nav-link { position:relative; white-space:nowrap; }
.nav-link .icon { flex:none; }
.nav-link .badge { margin-left:auto; }
.sidebar-footer { margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.main { padding:28px clamp(16px, 3vw, 40px) 60px; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }

/* ---------- Bento grid ---------- */
.bento { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); grid-auto-flow:dense; }
.tile {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden; min-width:0;
    transition:transform .2s ease, box-shadow .2s ease;
}
.tile:hover { transform:translateY(-2px); box-shadow:0 2px 4px rgb(0 0 0 / .05), 0 18px 40px -18px rgb(0 0 0 / .25); }
.tile.flat:hover { transform:none; }
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}.row-2{grid-row:span 2}
.tile-hero {
    color:#fff; border:none;
    background:
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 55%),
        linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000));
}
.tile-hero .muted { color:rgb(255 255 255 / .75); }
.tile-hero a.btn { background:#fff; color:var(--primary); }
.tile-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.tile-title h2,.tile-title h3 { margin:0; }
.stat { font-size:2.3rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat-label { color:var(--muted); font-size:.85rem; margin-top:6px; }
.glow { position:absolute; width:180px; height:180px; border-radius:50%; filter:blur(50px); opacity:.25; right:-40px; bottom:-60px; background:var(--accent); pointer-events:none; }
.countdown { font-size:2.6rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }

/* ---------- Components ---------- */
.btn {
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:12px;
    font-weight:600; font-size:.92rem; border:1px solid transparent; cursor:pointer;
    background:var(--primary); color:#fff; transition:filter .15s, transform .1s; font-family:inherit;
}
.btn:hover { filter:brightness(1.08); text-decoration:none; }
.btn:active { transform:scale(.98); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-alt); }
.btn-danger { background:var(--danger); }
.btn-sm { padding:6px 12px; font-size:.82rem; border-radius:10px; }
.btn-block { width:100%; justify-content:center; }
.badge {
    display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:600;
    background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary);
}
.badge-accent { background:color-mix(in srgb, var(--accent) 18%, transparent); color:color-mix(in srgb, var(--accent) 80%, var(--text)); }
.badge-danger { background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }
.badge-success { background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); }
.badge-muted { background:var(--surface-alt); color:var(--muted); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.avatar {
    width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:.85rem; flex:none;
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, #fff), var(--accent)); color:#fff;
}
.stack { display:flex; flex-direction:column; gap:10px; }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }
.wrap { flex-wrap:wrap; }
.list-item {
    display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius-sm);
    background:var(--surface-alt); color:var(--text);
}
a.list-item:hover { text-decoration:none; filter:brightness(.98); }
.empty { text-align:center; padding:30px 10px; color:var(--muted); }

/* ---------- Forms ---------- */
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 20px; }
.form-grid .full { grid-column:1 / -1; }
label { display:block; font-weight:600; font-size:.86rem; margin-bottom:6px; }
:where(input:not([type=checkbox],[type=radio],[type=hidden],[type=submit],[type=button],[type=reset],[type=file],[type=range],[type=image])),select,textarea {
    width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--border);
    background:var(--surface-alt); color:var(--text); font:inherit; transition:border-color .15s, box-shadow .15s;
}
input[type=color] { padding:4px; height:44px; }
select[multiple] { min-height:170px; }
textarea { min-height:160px; resize:vertical; }
:where(input):focus,select:focus,textarea:focus {
    outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.check { display:flex; align-items:center; gap:8px; font-weight:500; }
.check input { width:18px; height:18px; accent-color:var(--primary); }
.error { color:var(--danger); font-size:.82rem; margin-top:4px; }
.hint { color:var(--muted); font-size:.8rem; margin-top:4px; }
.segmented { display:flex; gap:10px; }
.segmented label {
    flex:1; border:1px solid var(--border); border-radius:14px; padding:14px; cursor:pointer; background:var(--surface-alt);
    display:flex; gap:10px; align-items:center; font-weight:600; margin:0;
}
.segmented input { accent-color:var(--primary); }
.segmented label:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.chips { display:flex; flex-wrap:wrap; gap:8px; max-height:220px; overflow:auto; padding:4px; }
.chip { margin:0; font-weight:500; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface-alt); cursor:pointer; font-size:.85rem; }
.chip input { accent-color:var(--primary); }
.chip:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, var(--surface)); color:var(--primary); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); }
td { padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
.actions { display:flex; gap:6px; justify-content:flex-end; }
.inline { display:inline; }

/* ---------- Flash ---------- */
.flash { padding:12px 16px; border-radius:14px; margin-bottom:18px; font-weight:500;
    background:color-mix(in srgb, var(--success) 14%, var(--surface)); color:var(--success); border:1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.flash.error-flash { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); }

/* ---------- Mailbox ---------- */
.mail-layout { display:grid; grid-template-columns:230px 1fr; gap:var(--gap); align-items:start; }
.mail-folders .nav-link { padding:9px 12px; }
.mail-row {
    position:relative; display:grid; grid-template-columns:38px 170px minmax(0,1fr) auto auto; gap:14px; align-items:center;
    padding:10px 14px; border-radius:14px; color:var(--text); border:1px solid transparent;
}
.mail-row:hover { background:var(--surface-alt); }
.mail-row a.stretched { color:inherit; }
.mail-row a.stretched:hover { text-decoration:none; }
.mail-row a.stretched::after { content:""; position:absolute; inset:0; border-radius:14px; }
.mail-actions { position:relative; z-index:1; display:flex; gap:4px; opacity:.55; transition:opacity .15s; }
.mail-row:hover .mail-actions, .mail-actions:focus-within { opacity:1; }
.mail-actions form { display:contents; }
.mail-date { white-space:nowrap; }
.mail-row.unread { font-weight:700; }
.mail-row.unread .mail-from::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary); margin-right:8px; vertical-align:middle; }
.mail-from,.mail-subject { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-subject .muted { font-weight:400; }
.mail-body { white-space:normal; line-height:1.7; word-wrap:break-word; }
.star { background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--muted); padding:0; }
.star.on { color:#f5b301; }
.meeting-card { border:1px dashed var(--primary); border-radius:16px; padding:16px; background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }

/* ---------- Themes ---------- */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--gap); }
.theme-card { border-radius:20px; overflow:hidden; border:2px solid var(--border); cursor:pointer; background:var(--surface); transition:transform .15s; padding:0; text-align:left; font:inherit; color:inherit; width:100%; }
.theme-card:hover { transform:translateY(-3px); }
.theme-card.selected { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.theme-preview { height:110px; display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:6px; padding:10px; }
.theme-preview span { border-radius:10px; }
.theme-preview span:first-child { grid-row:span 2; }
.theme-meta { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; }
.swatches { display:flex; gap:4px; }
.swatches i { width:14px; height:14px; border-radius:50%; border:1px solid rgb(0 0 0 / .1); }

/* ---------- Meeting room ---------- */
.room { display:grid; grid-template-columns:1fr 300px; gap:var(--gap); height:calc(100vh - 150px); min-height:520px; }
#jitsi { border-radius:var(--radius); overflow:hidden; background:#000; min-height:420px; }
.audio-stage { display:grid; place-items:center; text-align:center; background:linear-gradient(160deg, var(--primary), color-mix(in srgb, var(--accent) 60%, #000)); color:#fff; }
.pulse { width:120px; height:120px; border-radius:50%; background:rgb(255 255 255 / .15); display:grid; place-items:center; font-size:48px; margin:0 auto 18px; animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgb(255 255 255 / .4)} 70%{box-shadow:0 0 0 30px rgb(255 255 255 / 0)} 100%{box-shadow:0 0 0 0 rgb(255 255 255 / 0)} }

/* ---------- Auth ---------- */
.auth { min-height:100vh; display:grid; place-items:center; padding:20px;
    background:radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 40%),
               radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 40%), var(--bg); }
.auth-card { width:100%; max-width:420px; }

/* ---------- Pagination ---------- */
.pagination { display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.pagination a,.pagination span { padding:6px 12px; border-radius:10px; border:1px solid var(--border); color:var(--text); font-size:.85rem; }
.pagination .current { background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination .disabled { opacity:.4; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
    .span-3{grid-column:span 6}.span-4{grid-column:span 6}.span-5,.span-7,.span-8{grid-column:span 12}
    .room { grid-template-columns:1fr; height:auto; }
    #jitsi { height:70vh; }
}
@media (max-width:820px) {
    .shell { grid-template-columns:1fr; }
    .sidebar { position:fixed; inset:0 auto 0 0; width:260px; z-index:50; transform:translateX(-100%); transition:transform .25s; }
    body.nav-open .sidebar { transform:none; box-shadow:0 0 0 100vmax rgb(0 0 0 / .4); }
    .bento > * { grid-column:span 12 !important; }
    .form-grid { grid-template-columns:1fr; }
    .mail-layout { grid-template-columns:1fr; }
    .mail-row { grid-template-columns:38px minmax(0,1fr) auto; }
    .mail-row .mail-from, .mail-row .mail-date { display:none; }
    .mail-actions { opacity:1; }
    .segmented { flex-direction:column; }
}

/* ---------- Boutons icônes ---------- */
.icon { display:block; flex:none; }
.btn-icon {
    display:inline-grid; place-items:center; width:38px; height:38px; padding:0; flex:none;
    border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text);
    cursor:pointer; font:inherit; transition:background .15s, color .15s, border-color .15s, transform .1s, filter .15s;
}
.btn-icon:hover { background:var(--surface-alt); color:var(--primary); text-decoration:none; }
.btn-icon:active { transform:scale(.94); }
.btn-icon:focus-visible { outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); }
.btn-icon.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-icon.primary:hover { filter:brightness(1.1); color:#fff; }
.btn-icon.danger:hover { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--border)); background:color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.btn-icon.sm { width:32px; height:32px; border-radius:10px; }
.btn-icon.sm .icon { width:16px; height:16px; }
.btn-icon.lg { width:48px; height:48px; border-radius:14px; }
.btn-icon.lg .icon { width:22px; height:22px; }
.btn-icon.block { width:100%; }
.btn-icon.ghost { border-color:transparent; background:transparent; }
.btn-icon.starred { color:#f5b301; }
.btn-icon.starred .icon { fill:currentColor; }
.tile-hero .btn-icon { background:rgb(255 255 255 / .18); border-color:rgb(255 255 255 / .25); color:#fff; }
.tile-hero .btn-icon:hover { background:#fff; color:var(--primary); }
.icon-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.icon-row form { display:contents; }
.actions form { display:contents; }

/* ---------- Menu latéral réduit (bureau) ---------- */
@media (min-width:821px) {
    html.sb-collapsed .shell { grid-template-columns:78px 1fr; }
    html.sb-collapsed .sidebar { padding:22px 12px; }
    html.sb-collapsed .sidebar .label,
    html.sb-collapsed .nav-label,
    html.sb-collapsed .user-meta { display:none; }
    html.sb-collapsed .brand { justify-content:center; padding:4px 0 18px; }
    html.sb-collapsed .sidebar .nav-link { justify-content:center; padding:11px 0; }
    html.sb-collapsed .sidebar .nav-link .badge { position:absolute; top:2px; right:2px; padding:0 6px; font-size:.65rem; }
    html.sb-collapsed .sidebar-footer .row { flex-direction:column; }
    html.sb-collapsed .nav-sep { display:block; height:1px; background:var(--border); margin:10px 6px; }
}
.nav-sep { display:none; }

/* ---------- Salle de réunion en modale ---------- */
.room-launch { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.room-launch .btn-icon.xl { width:72px; height:72px; border-radius:22px; }
.room-launch .btn-icon.xl .icon { width:32px; height:32px; }
.modal {
    position:fixed; inset:0; z-index:100; display:none; padding:16px;
    background:rgb(5 8 20 / .78); backdrop-filter:blur(8px);
}
.modal.open { display:flex; animation:modal-in .2s ease; }
@keyframes modal-in { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
body.modal-open { overflow:hidden; }
.modal-panel {
    flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;
    background:var(--surface); border:1px solid var(--border); border-radius:22px;
    box-shadow:0 30px 80px -20px rgb(0 0 0 / .6);
}
.modal-head { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); }
.modal-title { flex:1; min-width:0; }
.modal-title strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modal-body { flex:1; min-height:0; position:relative; background:#000; }
.modal-body iframe { position:absolute; inset:0; width:100% !important; height:100% !important; border:0; display:block; }
.modal-msg { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:24px; }
.modal-panel:fullscreen { border-radius:0; border:none; }
@media (max-width:820px) {
    .modal { padding:0; }
    .modal-panel { border-radius:0; border:none; }
}

/* ---------- Écran de fin de réunion ---------- */
.room-thanks {
    position:absolute; inset:0; z-index:5; display:none; overflow:hidden;
    color:#fff; text-align:center;
    background:
        radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 50%),
        radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 55%),
        linear-gradient(160deg, #0b1020, color-mix(in srgb, var(--primary) 35%, #05070f));
}
.room-thanks.show { display:grid; place-items:center; animation:modal-in .35s ease; }
.room-thanks-brand {
    position:absolute; top:22px; right:26px; display:flex; align-items:center; gap:10px;
    font-weight:800; font-size:1.25rem; letter-spacing:-.02em;
}
.room-thanks-brand .brand-logo { width:44px; height:44px; font-size:22px; border-radius:14px; }
.room-thanks-center { display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px; }
.room-thanks-slogan {
    font-family:"Great Vibes", "Segoe Script", cursive; font-weight:400;
    font-size:clamp(3.2rem, 9vw, 7.5rem); line-height:1.1; padding:0 .15em; word-spacing:.18em;
    background:linear-gradient(90deg, #fff, color-mix(in srgb, var(--accent) 70%, #fff), #fff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 10px 40px rgb(0 0 0 / .25);
}
.room-thanks-sub { color:rgb(255 255 255 / .7); font-size:1rem; }
.room-thanks .btn-icon { background:rgb(255 255 255 / .12); border-color:rgb(255 255 255 / .25); color:#fff; }
.room-thanks .btn-icon:hover { background:#fff; color:var(--primary); }

/* ---------- Logo (image) ---------- */
img.brand-logo { display:block; flex:none; width:38px; height:38px; background:none; border-radius:50%; object-fit:contain; filter:drop-shadow(0 4px 10px rgb(0 0 0 / .18)); }
.room-thanks-brand img.brand-logo { width:48px; height:48px; }

/* ---------- Page de connexion (écran partagé) ---------- */
.login-split { display:grid; grid-template-columns:minmax(380px, 1fr) 1.15fr; min-height:100vh; background:var(--surface); }
.login-pane { position:relative; display:flex; flex-direction:column; padding:32px clamp(24px, 4vw, 48px); background:var(--surface); color:var(--text); }
.login-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; color:var(--text); letter-spacing:-.02em; }
.login-brand:hover { text-decoration:none; }
.login-box { width:100%; max-width:380px; margin:auto; padding:40px 0; }
.login-eyebrow { color:var(--muted); font-size:.92rem; margin-bottom:6px; }
.login-title { font-size:1.65rem; font-weight:800; margin:0 0 28px; }
.login-foot { padding-top:12px; }

.float-field { position:relative; }
.float-field input {
    width:100%; height:54px; padding:16px 48px 6px 16px; border-radius:12px;
    border:1.5px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.95rem;
}
.float-field input::placeholder { color:transparent; }
.float-field input:focus { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); }
.float-field input:focus::placeholder { color:var(--muted); }
.float-field label {
    position:absolute; left:12px; top:50%; transform:translateY(-50%); margin:0; padding:0 5px;
    font-size:.92rem; font-weight:500; color:var(--muted); background:var(--surface); pointer-events:none;
    transition:top .15s, font-size .15s, color .15s;
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label { top:0; font-size:.75rem; color:var(--primary); }
.float-field input:not(:focus):not(:placeholder-shown) + label { color:var(--muted); }
.float-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); display:grid; place-items:center; }
.float-toggle { background:none; border:none; padding:4px; cursor:pointer; border-radius:8px; }
.float-toggle:hover { color:var(--primary); }
.float-toggle .when-shown { display:none; }
.float-toggle.shown .when-shown { display:block; }
.float-toggle.shown .when-hidden { display:none; }
/* Autocomplétion du navigateur : garder les couleurs du thème */
.float-field input:-webkit-autofill { -webkit-text-fill-color:var(--text); box-shadow:0 0 0 40px var(--surface) inset; }

.login-divider { display:flex; align-items:center; gap:12px; margin:30px 0 16px; color:var(--muted); font-size:.78rem; }
.login-divider::before, .login-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.login-features { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.login-features span {
    height:46px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border);
    color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.login-visual { position:relative; background-size:cover; background-position:center; min-height:100vh; }
.login-visual::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--primary) 55%, #000 45%) 100%);
    opacity:.85;
}
.login-visual-caption { position:absolute; left:clamp(24px, 4vw, 48px); right:clamp(24px, 4vw, 48px); bottom:40px; z-index:1; color:#fff; }
.login-visual-title { font-size:clamp(1.4rem, 2.4vw, 2rem); font-weight:800; letter-spacing:-.02em; }
.login-visual-sub { opacity:.85; margin-top:6px; }

@media (max-width:900px) {
    .login-split { grid-template-columns:1fr; }
    .login-visual { display:none; }
}

/* ---------- Activer / désactiver ---------- */
.btn-icon.toggle-on { color:var(--success); border-color:color-mix(in srgb, var(--success) 40%, var(--border)); }
.btn-icon.toggle-off { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--border)); background:color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.btn-icon.toggle-on:hover { color:var(--danger); }
.btn-icon.toggle-off:hover { color:var(--success); }
.flash.warning-flash { background:color-mix(in srgb, var(--warning) 14%, var(--surface)); color:var(--warning); border-color:color-mix(in srgb, var(--warning) 35%, transparent); }
.tile .float-field label { background:var(--surface); }

/* ---------- Menu « ⋮ » des messages ---------- */
details.menu { position:relative; display:inline-block; }
details.menu > summary { list-style:none; }
details.menu > summary::-webkit-details-marker { display:none; }
details.menu[open] > summary { background:var(--surface-alt); color:var(--primary); }
.menu-pop {
    position:fixed; z-index:200; min-width:260px; padding:6px 0;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 18px 48px -12px rgb(0 0 0 / .45);
}
.menu-pop form { display:block; }
.menu-item {
    display:flex; align-items:center; gap:14px; width:100%; padding:10px 18px;
    background:none; border:none; color:var(--text); font:inherit; font-size:.92rem; font-weight:500; text-align:left; cursor:pointer;
}
.menu-item:hover { background:var(--surface-alt); text-decoration:none; }
.menu-item .icon { width:18px; height:18px; color:var(--muted); }
.menu-item.danger, .menu-item.danger .icon { color:var(--danger); }
.menu-sep { height:1px; background:var(--border); margin:6px 0; }
.toolbar-sep { width:1px; align-self:stretch; background:var(--border); margin:4px 2px; }
.mail-actions:has(details[open]) { opacity:1; z-index:50; }

/* ---------- Barres de défilement aux couleurs du thème ---------- */
/* Chrome, Edge, Opera, Safari */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
    background:color-mix(in srgb, var(--primary) 35%, var(--surface-alt));
    border:3px solid transparent; border-radius:999px; background-clip:padding-box;
    min-height:40px;
}
::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb, var(--primary) 70%, var(--surface-alt)); background-clip:padding-box; }
::-webkit-scrollbar-thumb:active { background:var(--primary); background-clip:padding-box; }
::-webkit-scrollbar-button { display:none; width:0; height:0; }
::-webkit-scrollbar-corner { background:transparent; }
/* Firefox */
@supports (-moz-appearance:none) {
    * { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--primary) 45%, var(--surface-alt)) transparent; }
}
html { background:var(--bg); }

/* =================== Chat instantané =================== */
.presence-dot {
    display:inline-block; width:10px; height:10px; border-radius:50%; flex:none;
    background:#9ca3af; box-shadow:0 0 0 2px var(--surface); vertical-align:middle;
}
.presence-dot[data-presence="available"] { background:#22c55e; }
.presence-dot[data-presence="busy"] { background:#f59e0b; }
.presence-dot[data-presence="offline"] { background:#ef4444; }
.presence-dot[data-presence="unavailable"] { background:#9ca3af; }
.avatar { position:relative; }
.avatar > .presence-dot { position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; }
.avatar.sm { width:30px; height:30px; border-radius:10px; font-size:.72rem; }
.avatar.lg { width:56px; height:56px; border-radius:18px; margin:0 auto 10px; }
.avatar.group { background:linear-gradient(135deg, var(--accent), var(--primary)); }

.chat { display:grid; grid-template-columns:330px minmax(0,1fr); gap:var(--gap); height:calc(100vh - 150px); min-height:520px; }
.chat-side { display:flex; flex-direction:column; gap:12px; min-height:0; padding:18px; }
.chat-me { display:flex; flex-direction:column; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.chat-me-id { display:flex; gap:12px; align-items:center; }
.status-picker { display:flex; gap:6px; }
.status-chip {
    flex:1; justify-content:center; white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px; cursor:pointer;
    border:1px solid var(--border); background:var(--surface-alt); color:var(--text); font:inherit; font-size:.78rem;
}
.status-chip.on { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, var(--surface)); color:var(--primary); font-weight:600; }
.chat-tabs { display:flex; gap:6px; background:var(--surface-alt); padding:4px; border-radius:12px; }
.chat-tab { flex:1; border:none; background:none; color:var(--muted); font:inherit; font-weight:600; font-size:.88rem; padding:8px; border-radius:9px; cursor:pointer; display:flex; gap:6px; justify-content:center; align-items:center; }
.chat-tab.on { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.chat-list { display:flex; flex-direction:column; gap:4px; overflow-y:auto; flex:1; min-height:0; }
.chat-item {
    display:flex; align-items:center; gap:12px; width:100%; padding:10px; border-radius:14px; text-align:left;
    background:none; border:1px solid transparent; color:var(--text); font:inherit; cursor:pointer;
}
.chat-item:hover { background:var(--surface-alt); }
.chat-item.on { background:color-mix(in srgb, var(--primary) 12%, var(--surface)); border-color:color-mix(in srgb, var(--primary) 30%, transparent); }
.chat-item.unread strong { font-weight:800; }
.chat-item-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-item-text > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.presence-legend { display:flex; flex-wrap:wrap; gap:6px 12px; padding-top:10px; border-top:1px solid var(--border); }
.presence-legend span { display:inline-flex; align-items:center; gap:5px; }

.chat-main { display:flex; flex-direction:column; min-height:0; padding:0; }
.chat-empty { margin:auto; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px; }
.chat-empty .icon { color:var(--primary); }
.chat-panel { display:flex; flex-direction:column; flex:1; min-height:0; }
.chat-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.chat-head form { display:contents; }
.chat-members { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:2px; }
.chat-member { display:inline-flex; align-items:center; gap:4px; }
.chat-member.pending { font-style:italic; }
.chat-messages { flex:1; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px; }
.chat-day { align-self:center; font-size:.75rem; color:var(--muted); background:var(--surface-alt); padding:3px 12px; border-radius:999px; margin:8px 0; text-transform:capitalize; }
.chat-system { align-self:center; font-size:.8rem; color:var(--muted); font-style:italic; text-align:center; max-width:80%; }
.chat-msg { display:flex; gap:8px; align-items:flex-end; max-width:78%; }
.chat-msg.mine { align-self:flex-end; flex-direction:row-reverse; }
.chat-bubble { background:var(--surface-alt); border:1px solid var(--border); padding:8px 12px; border-radius:16px 16px 16px 4px; min-width:60px; }
.chat-msg.mine .chat-bubble { background:var(--primary); border-color:var(--primary); color:#fff; border-radius:16px 16px 4px 16px; }
.chat-author { font-size:.75rem; font-weight:700; color:var(--primary); margin-bottom:2px; }
.chat-text { white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.chat-time { font-size:.68rem; opacity:.65; text-align:right; margin-top:2px; }
.chat-compose { display:flex; gap:10px; align-items:center; padding:14px 18px; border-top:1px solid var(--border); }
.chat-compose textarea { flex:1; resize:none; overflow-y:hidden; box-sizing:border-box; line-height:1.5; padding:12px 16px; border-radius:14px; min-height:0; height:calc(3em + 26px); }

.modal-mini { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px; background:rgb(5 8 20 / .6); backdrop-filter:blur(6px); }
.modal-mini[hidden] { display:none; }
.modal-mini-card {
    width:100%; max-width:380px; background:var(--surface); color:var(--text); border:1px solid var(--border);
    border-radius:22px; padding:24px; text-align:center; box-shadow:0 30px 80px -20px rgb(0 0 0 / .6); animation:modal-in .2s ease;
}
.modal-mini-card h3 { margin:4px 0 8px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:400; background:var(--text); color:var(--bg); padding:10px 18px; border-radius:12px; font-weight:500; box-shadow:var(--shadow); }
.toast[hidden] { display:none; }

@media (max-width:1100px) { .chat { grid-template-columns:280px minmax(0,1fr); } }
@media (max-width:820px) {
    .chat { grid-template-columns:1fr; height:auto; }
    .chat-side { max-height:none; }
    .chat-main { min-height:70vh; }
    .chat-msg { max-width:92%; }
}

/* L'attribut hidden doit toujours masquer, même sur les éléments en flex/grid */
[hidden] { display:none !important; }

/* Bandeau d'état au-dessus de la saisie du chat */
.chat-notice { margin:0 18px; padding:8px 12px; border-radius:10px; font-size:.82rem; border:1px solid var(--border); background:var(--surface-alt); color:var(--muted); }
.chat-notice[data-tone="warn"] { border-color:#f59e0b55; background:#f59e0b14; color:#d97706; }
.chat-notice[data-tone="danger"] { border-color:#ef444455; background:#ef444414; color:#dc2626; }
.chat-compose textarea:disabled { opacity:.55; cursor:not-allowed; }

/* Photo de profil */
.avatar.has-img { background:var(--surface-alt); padding:0; }
.avatar > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.avatar.xl { width:64px; height:64px; border-radius:18px; font-size:1.25rem; }

/* Chat : pièces jointes */
.chat-file-chip { display:flex; align-items:center; gap:8px; margin:8px 18px 0; padding:6px 6px 6px 12px; border-radius:12px; border:1px dashed var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); color:var(--text); font-size:.85rem; }
.chat-file-chip-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.chat-img { display:block; margin:2px 0 4px; }
.chat-img img { display:block; width:260px; max-width:58vw; height:auto; max-height:280px; border-radius:12px; object-fit:cover; background:var(--surface-alt); }
.chat-bubble.only-img { padding:4px; }
.chat-bubble.only-img .chat-time { padding:0 6px 2px; }
.chat-file { display:flex; align-items:center; gap:10px; min-width:220px; max-width:320px; margin:2px 0 4px; padding:8px 10px; border-radius:12px; text-decoration:none; color:inherit; background:color-mix(in srgb, currentColor 8%, transparent); border:1px solid color-mix(in srgb, currentColor 18%, transparent); }
.chat-file:hover { background:color-mix(in srgb, currentColor 14%, transparent); }
.chat-file-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; flex:none; background:color-mix(in srgb, currentColor 14%, transparent); }
.chat-file-text { display:flex; flex-direction:column; min-width:0; flex:1; }
.chat-file-text strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.chat-file-text .small { opacity:.75; }
.chat-file-dl { opacity:.7; flex:none; }
.chat-panel.dropping { outline:2px dashed var(--primary); outline-offset:-8px; }

/* Chat : recherche rapide d'un collègue */
.chat-tabs-row { display:flex; gap:8px; align-items:center; }
.chat-tabs-row .chat-tabs { flex:1; }
.ps-results { display:flex; flex-direction:column; gap:2px; max-height:340px; overflow-y:auto; margin-top:10px; }
.ps-results mark { background:color-mix(in srgb, var(--primary) 25%, transparent); color:inherit; border-radius:3px; padding:0 1px; }

/* =========================================================
   i18n — Language switcher + right-to-left (Arabic) support
   Everything below is additive: it only adds rules for
   .locale-switcher and overrides physical left/right
   properties when <html dir="rtl"> is set.
   ========================================================= */

/* ---------- Language switcher (EN / FR / ع) ---------- */
.locale-switcher {
    display:inline-flex; align-items:center; gap:2px; margin:0; padding:3px;
    border-radius:999px; border:1px solid var(--border); background:var(--surface-alt);
}
.locale-switcher button {
    flex:1; min-width:30px; height:26px; padding:0 9px; margin:0;
    display:inline-grid; place-items:center; border:none; border-radius:999px;
    background:transparent; color:var(--muted); cursor:pointer;
    font:inherit; font-size:.72rem; font-weight:700; letter-spacing:.04em; line-height:1;
    transition:background .15s, color .15s;
}
.locale-switcher button:hover { color:var(--text); background:color-mix(in srgb, var(--primary) 10%, transparent); }
.locale-switcher button:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.locale-switcher button.on,
.locale-switcher button[aria-current="true"] { background:var(--primary); color:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .18); }
/* In the sidebar it spans the full width */
.sidebar .locale-switcher { display:flex; width:100%; margin-bottom:10px; }
/* Collapsed sidebar (78px): stack the three buttons vertically */
@media (min-width:821px) {
    html.sb-collapsed .sidebar .locale-switcher { flex-direction:column; width:auto; margin:0 auto 10px; border-radius:14px; gap:2px; }
    html.sb-collapsed .sidebar .locale-switcher button { width:34px; min-width:0; padding:0; flex:none; }
}

/* ---------- RTL: typography ---------- */
[dir="rtl"] { --font:"IBM Plex Sans Arabic", Inter, system-ui, sans-serif; }
[dir="rtl"] body { font-family:'IBM Plex Sans Arabic', Inter, system-ui, sans-serif; }
/* Letter-spacing breaks Arabic letter joining */
[dir="rtl"] :is(h1, h2, h3, h4, .brand, .nav-label, .stat, .countdown, th, .room-thanks-brand,
    .login-brand, .login-visual-title) { letter-spacing:0; }
[dir="rtl"] .nav-label { text-transform:none; font-size:.75rem; }
[dir="rtl"] th { text-transform:none; font-size:.8rem; }
[dir="rtl"] .room-thanks-slogan { font-family:"IBM Plex Sans Arabic", var(--font); font-weight:700; word-spacing:normal; font-size:clamp(2.4rem, 7vw, 5.5rem); }

/* Content that must stay left-to-right (numbers, emails, code, URLs) */
[dir="rtl"] .mono,
[dir="rtl"] .ltr,
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] pre { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"] { direction:ltr; text-align:right; }
[dir="rtl"] input[type="email"]::placeholder,
[dir="rtl"] input[type="password"]::placeholder { direction:rtl; }
[dir="rtl"] .countdown,
[dir="rtl"] .mail-date,
[dir="rtl"] .chat-time { unicode-bidi:plaintext; }
/* Free text typed by users (any language) picks its own direction */
[dir="rtl"] .chat-text,
[dir="rtl"] .mail-body,
[dir="rtl"] .mail-subject,
[dir="rtl"] .chat-file-chip-name,
[dir="rtl"] .chat-file-text strong { unicode-bidi:plaintext; }

/* ---------- RTL: shell & sidebar ---------- */
/* .shell is a CSS grid: the sidebar column automatically moves to the right */
[dir="rtl"] .sidebar { border-right:none; border-left:1px solid var(--border); }
[dir="rtl"] .nav-link .badge { margin-left:0; margin-right:auto; }
@media (min-width:821px) {
    [dir="rtl"].sb-collapsed .sidebar .nav-link .badge { right:auto; left:2px; }
}
@media (max-width:820px) {
    [dir="rtl"] .sidebar { inset:0 0 0 auto; transform:translateX(100%); }
    [dir="rtl"] body.nav-open .sidebar { transform:none; }
}

/* ---------- RTL: tiles & decoration ---------- */
[dir="rtl"] .glow { right:auto; left:-40px; }
[dir="rtl"] .tile-hero {
    background:
        radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 55%),
        linear-gradient(225deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000));
}

/* ---------- RTL: tables, lists, menus ---------- */
[dir="rtl"] th { text-align:right; }
[dir="rtl"] .theme-card,
[dir="rtl"] .menu-item,
[dir="rtl"] .chat-item { text-align:right; }
[dir="rtl"] .mail-row.unread .mail-from::before { margin-right:0; margin-left:8px; }
/* Inline style="text-align:left" in some views (e.g. chat modals) */
[dir="rtl"] [style*="text-align:left"] { text-align:right !important; }

/* ---------- RTL: floating-label inputs & password eye toggle ---------- */
[dir="rtl"] .float-field input { padding:16px 16px 6px 48px; }
[dir="rtl"] .float-field label { left:auto; right:12px; }
[dir="rtl"] .float-icon { right:auto; left:14px; }

/* ---------- RTL: avatars, presence, chat ---------- */
[dir="rtl"] .avatar > .presence-dot { right:auto; left:-2px; }
/* .chat-msg.mine uses align-self:flex-end + row-reverse, which are logical
   and already mirror: own messages sit on the left in RTL. Mirror the bubble tails. */
[dir="rtl"] .chat-bubble { border-radius:16px 16px 4px 16px; }
[dir="rtl"] .chat-msg.mine .chat-bubble { border-radius:16px 16px 16px 4px; }
[dir="rtl"] .chat-time { text-align:left; }
[dir="rtl"] .chat-file-chip { padding:6px 12px 6px 6px; }

/* ---------- RTL: meeting end screen ---------- */
[dir="rtl"] .room-thanks-brand { right:auto; left:26px; }
[dir="rtl"] .room-thanks {
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 50%),
        radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 55%),
        linear-gradient(200deg, #0b1020, color-mix(in srgb, var(--primary) 35%, #05070f));
}

/* ---------- RTL: directional icons ----------
   Needs the icon name on the <svg> (data-icon="{{ $name }}" in components/icon.blade.php);
   .flip-rtl can also be added manually to any icon. */
[dir="rtl"] .icon:is([data-icon="arrow-left"], [data-icon="arrow-right"], [data-icon="send"],
    [data-icon="reply"], [data-icon="forward"], [data-icon="log-in"], [data-icon="log-out"],
    [data-icon="external-link"], [data-icon="chevron-left"], [data-icon="chevron-right"],
    [data-icon="chevrons-left"], [data-icon="chevrons-right"]),
[dir="rtl"] .icon.flip-rtl { transform:scaleX(-1); }

/* Toasts (centered with left:50% + translateX(-50%)), modals, pagination, scrollbars
   and flex/grid layouts are symmetric or logical and need no RTL override. */

/* Language switcher on the sign-in page (top corner of the form side) */
.login-locale { position:absolute; top:18px; inset-inline-end:18px; z-index:2; }

/* Language switcher at the top-right of every page */
.topbar-locale { margin-inline-start:6px; }
.topbar-locale button { flex:none; min-width:38px; height:30px; padding:0 11px; font-size:.74rem; }
.icon-row form.locale-switcher { display:inline-flex; }