/*! Task’in — © 2026 Fandry Ekwalla. Tous droits réservés. Copie, modification et diffusion interdites sans autorisation écrite (voir LICENSE). */
/* Task’in — finition production : simple, lisible et rapide */
:root {
  --ui-navy: #153a5f;
  --ui-navy-deep: #0f2b49;
  --ui-blue-soft: #edf4fb;
  --ui-mint: var(--ocean); /* ancien vert menthe remplacé par le bleu Task'in */
  --ui-mint-soft: var(--ocean-dim);
  --ui-shadow-sm: 0 4px 16px rgba(21, 58, 95, .06);
  --ui-shadow-md: 0 12px 30px rgba(21, 58, 95, .10);
  --ui-ease: cubic-bezier(.23, 1, .32, 1);
}

/* Base de lecture : contraste stable, transitions courtes, pas d’animation permanente. */
body { text-rendering: optimizeLegibility; }
button, input, select, textarea, a { transition: color .16s var(--ui-ease), background-color .16s var(--ui-ease), border-color .16s var(--ui-ease), box-shadow .16s var(--ui-ease), transform .16s var(--ui-ease), opacity .16s var(--ui-ease); }
button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active { transform: scale(.98); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--ocean) 25%, transparent); outline-offset: 2px; }

/* Portail de connexion : plus simple et plus calme au premier contact. */
.portal-login-card { box-shadow: var(--ui-shadow-md); }
.portal-login-card .login-btn, .login-btn { box-shadow: 0 7px 16px rgba(21, 58, 95, .16); }
.portal-login-card .login-btn:hover, .login-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Application connectée : barre plus légère et zones mieux regroupées. */
body.ops-dashboard .topbar {
  height: 62px;
  padding-inline: clamp(16px, 3vw, 34px);
  background: color-mix(in srgb, var(--surface) 96%, var(--ocean-dim));
  box-shadow: 0 1px 0 var(--border), 0 5px 20px rgba(21, 58, 95, .04);
}
body.ops-dashboard .topbar-logo { color: var(--ocean-ink); font-size: 19px; }
body.ops-dashboard .topbar-title { letter-spacing: .08em; }
body.ops-dashboard .topbar-right { gap: 8px; }
body.ops-dashboard .user-pill { padding: 6px 10px; box-shadow: var(--ui-shadow-sm); }
body.ops-dashboard .btn-ghost { padding: 8px 12px; }

body.ops-dashboard .ops-page-heading {
  margin-top: 30px;
  margin-bottom: 4px;
  padding-inline: 4px;
}
body.ops-dashboard .ops-page-heading h1 { font-family: var(--font); font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.7px; font-weight: 700; }
body.ops-dashboard .ops-eyebrow { color: var(--ui-mint); letter-spacing: .13em; }
body.ops-dashboard .ops-page-heading p { max-width: 650px; line-height: 1.55; }
body.ops-dashboard .ops-context-chip { border-radius: 999px; padding: 8px 12px; box-shadow: var(--ui-shadow-sm); }

body.ops-dashboard .timer-banner {
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: var(--ui-shadow-md);
  border-color: color-mix(in srgb, var(--border) 80%, var(--ocean));
}
body.ops-dashboard .timer-banner.active { border-color: color-mix(in srgb, var(--clay) 75%, var(--border)); box-shadow: 0 12px 28px rgba(201, 96, 79, .10); }
body.ops-dashboard .timer-clock { font-size: 31px; }
body.ops-dashboard .timer-btn { box-shadow: 0 7px 16px rgba(21, 58, 95, .18); }
body.ops-dashboard .timer-btn:hover { transform: translateY(-2px) scale(1.04); }

body.ops-dashboard .quickstart { margin-top: 16px; gap: 7px; }
body.ops-dashboard .qs-btn { border-radius: 999px; padding: 8px 12px; background: var(--surface); box-shadow: var(--ui-shadow-sm); }
body.ops-dashboard .qs-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(21, 58, 95, .10); }

body.ops-dashboard .stat-card,
body.ops-dashboard .admin-card,
body.ops-dashboard .channel-card,
body.ops-dashboard .sv-card,
body.ops-dashboard .mosaic-card,
body.ops-dashboard .lb-table,
body.ops-dashboard .entries-table,
body.ops-dashboard .entries-table-wrap {
  border-radius: 14px;
  box-shadow: var(--ui-shadow-sm);
}
body.ops-dashboard .stat-card { padding: 17px 18px; }
body.ops-dashboard .stat-card::after { height: 3px; background: linear-gradient(90deg, var(--ui-mint), color-mix(in srgb, var(--ui-mint) 0%, transparent)); }
body.ops-dashboard .stat-card:hover, body.ops-dashboard .admin-card:hover, body.ops-dashboard .mosaic-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-md); }
body.ops-dashboard .stat-label { letter-spacing: .08em; }
body.ops-dashboard .stat-value { font-size: 28px; }

body.ops-dashboard .tabs {
  gap: 5px;
  padding-top: 26px;
  border-bottom-color: var(--border2);
  overflow-x: auto;
  scrollbar-width: none;
}
body.ops-dashboard .tabs::-webkit-scrollbar { display: none; }
body.ops-dashboard .tab { white-space: nowrap; border-radius: 9px 9px 0 0; padding: 10px 14px; }
body.ops-dashboard .tab:hover { color: var(--ocean-ink); background: var(--ocean-dim); }
body.ops-dashboard .tab.active { box-shadow: 0 -2px 0 var(--ocean) inset; }
body.ops-dashboard .content { padding-top: 24px; }

body.ops-dashboard .toolbar,
body.ops-dashboard .date-filter-bar,
body.ops-dashboard .chart-toolbar {
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: var(--ui-shadow-sm);
}
body.ops-dashboard .filter-select,
body.ops-dashboard .search-input,
body.ops-dashboard .date-input,
body.ops-dashboard .form-input,
body.ops-dashboard .form-select { border-radius: 10px; min-height: 36px; }
body.ops-dashboard .search-input { min-width: 220px; }

body.ops-dashboard .entries-table,
body.ops-dashboard .entries-table-wrap,
body.ops-dashboard .lb-table { overflow: auto; }
body.ops-dashboard .entries-table th,
body.ops-dashboard .entries-table-wrap thead th,
body.ops-dashboard .lb-table th { padding-block: 12px; position: sticky; top: 0; z-index: 2; }
body.ops-dashboard .entries-table td,
body.ops-dashboard .entries-table-wrap td,
body.ops-dashboard .lb-table td { padding-block: 13px; }
body.ops-dashboard .entries-table tr:hover td,
body.ops-dashboard .entries-table-wrap tr:hover td,
body.ops-dashboard .lb-table tr:hover td { background: color-mix(in srgb, var(--ocean-dim) 55%, var(--surface)); }

body.ops-dashboard .modal-overlay { background: rgba(15, 43, 73, .48); backdrop-filter: blur(3px); }
body.ops-dashboard .modal { box-shadow: 0 24px 70px rgba(15, 43, 73, .22); }
body.ops-dashboard .modal-header { padding-block: 18px 15px; }
body.ops-dashboard .modal-footer { background: var(--surface2); }

body.ops-dashboard .live-header-panel { border-radius: 14px; box-shadow: var(--ui-shadow-md); padding: 18px; }
body.ops-dashboard .live-agent-card { border-radius: 10px; }
body.ops-dashboard .role-banner { border-radius: 14px; box-shadow: var(--ui-shadow-sm); }
body.ops-dashboard .team-accordion { border-radius: 14px; box-shadow: var(--ui-shadow-sm); }

@media (max-width: 760px) {
  body.ops-dashboard .topbar { height: auto; min-height: 62px; flex-wrap: wrap; padding-block: 10px; }
  body.ops-dashboard .topbar-right { width: 100%; margin-left: 0; overflow-x: auto; padding-top: 2px; }
  body.ops-dashboard .ops-page-heading { align-items: flex-start; flex-direction: column; margin-top: 20px; }
  body.ops-dashboard .ops-context-chip { align-self: flex-start; }
  body.ops-dashboard .timer-banner { margin-inline: 14px; padding: 15px; flex-wrap: wrap; gap: 12px; }
  body.ops-dashboard .timer-clock { min-width: 118px; font-size: 25px; }
  body.ops-dashboard .timer-info { min-width: calc(100% - 145px); }
  body.ops-dashboard .quickstart, body.ops-dashboard .stats-grid, body.ops-dashboard .agent-history-bar { margin-inline: 14px; }
  body.ops-dashboard .content { padding-inline: 14px; }
  body.ops-dashboard .search-input { min-width: 0; width: 100%; }
}

@media (min-width: 1400px) {
  body.ops-dashboard .content, body.ops-dashboard .ops-page-heading { max-width: 1500px; }
}

/* Portail d’entrée pleine largeur : pas de carte flottante au milieu de l’écran. */
#login-screen.portal-screen {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: #0f1928;
}
.portal-frame,
.portal-frame.split-active {
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.portal-frame.split-active {
  --login-width: 34%;
}
.portal-frame.split-active .portal-login-panel {
  flex-basis: 34%;
  min-width: 340px;
}
.portal-frame.split-active .portal-slider { left: 34%; }
.portal-frame.split-active .portal-presentation-inner {
  padding: clamp(30px, 4vw, 58px) clamp(34px, 5.5vw, 88px);
}
.portal-frame.split-active .portal-hero {
  margin-top: clamp(46px, 8vh, 92px);
}
.portal-frame.split-active .portal-dashboard {
  min-height: 300px;
}
.portal-travel-loop { opacity: .42; }

@media (max-width: 860px) {
  .portal-frame.split-active .portal-login-panel { min-width: 300px; }
}
@media (max-width: 630px) {
  .portal-frame.split-active { min-height: 100vh; }
  .portal-frame.split-active .portal-login-panel { min-width: 0; }
  .portal-frame.split-active .portal-presentation-inner { padding: 38px 20px 24px; }
}

/* Défilement production : fluide sans intercepter la molette. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  scrollbar-gutter: stable;
}
body { overscroll-behavior-x: none; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--border2) 75%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--border2) 75%, transparent); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ocean); background-clip: padding-box; }

.entries-table-wrap,
.modal-body,
.time-col,
.tabs,
.topbar-right {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.entries-table-wrap { scroll-behavior: smooth; }
.modal-body { scroll-padding-block: 16px; }

/* Téléchargement de l’extension Chrome */
.extension-download-topbar,.portal-download-btn { white-space: nowrap; text-decoration: none; }
.extension-download-topbar { box-shadow: 0 5px 14px rgba(14,39,70,.18); }
.portal-download-btn { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid #2B4C7E; border-radius: 7px; background: #2B4C7E; color: #fff; font: 600 10px var(--font); }
.portal-download-btn:hover { background: #1E3760; transform: translateY(-1px); }
@media (max-width: 760px) { .extension-download-topbar { display: none; } .portal-download-btn { padding: 6px 8px; font-size: 9px; } }

/* Réduit le coût de peinture pendant le défilement de la présentation intégrée. */
.portal-live-site iframe { contain: strict; }

/* Migration accounts admin */
.migration-accounts-card{overflow:hidden}
.migration-accounts-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border,#E2E8F0);background:var(--surface2,#F7F9FC)}
.migration-accounts-auth,.migration-accounts-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.migration-accounts-auth .form-input{min-width:180px}
.migration-checkbox{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2,#6B7C93)}
.migration-accounts-status{padding:12px 18px;font-size:12px;color:var(--text2,#6B7C93)}
.migration-accounts-status.success{color:var(--green,#2F8F67);background:var(--green-dim,#E8F5EE)}
.migration-accounts-status.error{color:var(--red,#C94F4F);background:var(--red-dim,#FBEAEA)}
.migration-accounts-list{display:flex;flex-direction:column}
.migration-account-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) 110px 150px 180px;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--border,#EEF2F6);font-size:12px}
.migration-account-row:first-child{border-top:0}
.migration-account-name{font-weight:650;color:var(--text,#233044)}
.migration-account-meta{color:var(--text2,#6B7C93);word-break:break-word}
.migration-account-warning{color:#9A6A10;font-size:11px}
.migration-account-actions{display:flex;justify-content:flex-end;gap:6px}
.migration-account-actions .btn{font-size:11px;padding:6px 9px}
.migration-empty{padding:18px;color:var(--text2,#6B7C93);font-size:12px}
@media(max-width:900px){.migration-account-row{grid-template-columns:1fr 1fr}.migration-account-actions{justify-content:flex-start}.migration-accounts-auth{width:100%}.migration-accounts-auth .form-input{flex:1;min-width:140px}}
@media(max-width:560px){.migration-account-row{grid-template-columns:1fr}.migration-accounts-toolbar{align-items:stretch}.migration-accounts-auth,.migration-accounts-actions{width:100%}.migration-accounts-auth .form-input,.migration-accounts-auth .btn{width:100%}}