:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(2,6,23,.12);
  --topbar-grad-start:rgba(31,111,235,.12);
  --topbar-grad-end:rgba(0,194,168,.08);
  --surface-soft:rgba(15,23,42,.05);
  --surface-soft-alt:rgba(15,23,42,.03);
  --surface-elevated:rgba(15,23,42,.06);
  --overlay-backdrop:rgba(2,6,23,.38);
  --sla-ok-text:#1d4ed8;
  --sla-expired-text:#be123c;
  --label-blue-text:#1e3a8a;
  --label-green-text:#14532d;
  --label-yellow-text:#854d0e;
  --label-red-text:#991b1b;
  --label-purple-text:#581c87;
  --label-pink-text:#9d174d;
  --label-orange-text:#9a3412;
  --label-gray-text:#334155;
}



*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky; top:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:linear-gradient(90deg, var(--topbar-grad-start), var(--topbar-grad-end));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
  z-index:50;
}
.brand{font-weight:800; letter-spacing:.5px}
.brand span{color:var(--accent)}

/* ===== CONTAINER / GRID ===== */
.container{max-width:1200px; margin:18px auto; padding:0 16px}

.grid{display:grid; gap:12px}
.grid-3{grid-template-columns: repeat(3,minmax(0,1fr))}
@media (max-width: 980px){ .grid-3{grid-template-columns:1fr} }

/* ===== CARD ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}

/* ===== BUTTONS / BADGES ===== */
.btn{
  border:0;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  background:var(--primary);
  color:white;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn.secondary{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn.accent{background:var(--accent); color:#06221d}
.btn.danger{background:var(--danger)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
  line-height:1;
}

/* Cores dos status */
.badge-in_progress{
  background:#e8f1ff;
  color:#1d4ed8;
  border-color:#cfe0ff;
}
.badge-waiting_customer{
  background:#fff2e1;
  color:#c2410c;
  border-color:#ffd7a8;
}
.badge-closed{
  background:#eaf7ee;
  color:#15803d;
  border-color:#bfe8ca;
}
.badge-resolved{
  background:#e9f7f1;
  color:#0f766e;
  border-color:#99f6e4;
}
.badge-triaged{
  background:#fff7d6;
  color:#a16207;
  border-color:#ffe38a;
}


/* ===== TABLE ===== */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid var(--border); text-align:left}
.small{font-size:.85rem; color:var(--muted)}
.link{color:var(--accent); text-decoration:none}
.link:hover{text-decoration:underline}
.form-grid{display:grid; gap:10px; margin-top:14px}
.field{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  width:100%;
}

.switch-field{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:var(--text);
  font-weight:700;
}
.switch-field input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch-slider{
  width:46px;
  height:26px;
  border-radius:999px;
  background:rgba(148,163,184,.35);
  border:1px solid var(--border);
  position:relative;
  transition:background .18s ease, border-color .18s ease;
}
.switch-slider::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.25);
  transition:transform .18s ease;
}
.switch-field input:checked + .switch-slider{
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border-color:transparent;
}
.switch-field input:checked + .switch-slider::after{
  transform:translateX(20px);
}

.survey-banner{
  margin-bottom:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(31,111,235,.22);
  background:linear-gradient(135deg, rgba(31,111,235,.18), rgba(0,194,168,.10));
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.rating-pill{
  position:relative;
  display:inline-flex;
  cursor:pointer;
}
.rating-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.rating-pill span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-weight:800;
}
.rating-pill input:checked + span{
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border-color:transparent;
  color:#fff;
}

/* ===== TOAST ===== */
.toast-wrap{position:fixed; right:16px; top:16px; display:flex; flex-direction:column; gap:10px; z-index:9999}
.toast{
  min-width:260px; max-width:380px;
  background:var(--card);
  border:1px solid var(--border);
  border-left:6px solid var(--primary);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.14);
}
.toast.success{border-left-color:var(--accent)}
.toast.warn{border-left-color:var(--warn)}
.toast.error{border-left-color:var(--danger)}
.toast .t{font-weight:800}
.toast .m{color:var(--muted); margin-top:4px; font-size:.92rem}

/* ===== APP SHELL ===== */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* ===== SIDEBAR ===== */
.sidebar{
  width:260px;
  padding:14px;
  background:linear-gradient(180deg, rgba(31,111,235,.14), rgba(0,194,168,.06));
  border-right:1px solid var(--border);

  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;

  display:flex;
  flex-direction:column;
}

.app-main{
  flex:1;
  min-width:0;
}

/* dá um respiro legal ao lado do menu */
.app-main .container{
  margin:18px 0;
  padding:0 18px;
  max-width:none;
}

/* ===== SIDEBAR HEADER ===== */
.sb-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-elevated);
}

.sb-mark{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  border-radius:14px;
}
.sb-name{ font-weight:900; letter-spacing:.4px }
.sb-sub{ margin-top:2px }

/* ===== SIDEBAR NAV ===== */
.sb-nav{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }

.sb-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  user-select:none;
  white-space:nowrap;
}
.sb-item:hover{
  background:var(--surface-soft);
  border-color:var(--border);
}
.sb-item.active{
  background:rgba(31,111,235,.18);
  border-color:rgba(31,111,235,.35);
}

.sb-tree > summary{
  list-style:none;
  cursor:pointer;
}
.sb-tree > summary::-webkit-details-marker{ display:none; }
.sb-caret{
  margin-left:auto;
  font-size:12px;
  opacity:.8;
  transition:transform .18s ease;
}
.sb-tree[open] .sb-caret{ transform:rotate(180deg); }

.sb-subnav{
  margin-top:4px;
  margin-left:18px;
  padding-left:10px;
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sb-subitem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
  border:1px solid transparent;
  font-size:14px;
}
.sb-subitem:hover{
  color:var(--text);
  background:var(--surface-soft);
  border-color:var(--border);
}
.sb-subitem.active{
  color:var(--text);
  background:rgba(31,111,235,.16);
  border-color:rgba(31,111,235,.32);
}

.sb-group{
  margin-top:8px;
  padding:6px 10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}

/* footer sem absolute (não quebra) */
.sb-footer{
  margin-top:auto;
  padding:10px;
  border-top:1px solid var(--border);
  color:var(--muted);
}

/* ===== SIDEBAR COMPACT (toggle via body.sidebar-compact) ===== */
body.sidebar-compact .sidebar{
  width:240px;
  padding:12px;
}
body.sidebar-compact .sb-logo{
  padding:8px;
  border-radius:14px;
  gap:8px;
}
body.sidebar-compact .sb-mark{
  width:38px; height:38px;
  border-radius:12px;
  font-size:14px;
}
body.sidebar-compact .sb-nav{
  margin-top:10px;
  gap:6px;
}
body.sidebar-compact .sb-item{
  padding:8px 10px;
  border-radius:12px;
  font-size:14px;
  line-height:1.1;
}
body.sidebar-compact .sb-group{
  margin-top:6px;
  padding:4px 8px;
  font-size:10px;
}
body.sidebar-compact .sb-footer{
  padding:8px;
  font-size:12px;
}

/* ===== SCROLLBAR ESTILOSA ===== */
.sidebar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-track{
  background: rgba(15,23,42,.05);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(31,111,235,.55), rgba(116,125,250,.45));
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.72);
}
.sidebar::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(31,111,235,.75), rgba(116,125,250,.65));
}
.sidebar{ scrollbar-width: thin; scrollbar-color: rgba(31,111,235,.65) rgba(15,23,42,.08); }

/* ===== RESPONSIVO ===== */

/* mostra só no mobile */
.mobile-only{ display:none !important; }
@media (max-width: 980px){
  .mobile-only{ display:inline-flex !important; }
}

/* ===== MOBILE SIDEBAR (abre/fecha) ===== */
/* ===== MOBILE SIDEBAR (abre/fecha) ===== */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:var(--overlay-backdrop);
  z-index:60;
}

@media (max-width: 980px){
  .sidebar{
    position:fixed;
    left:-290px;
    top:0;
    width:260px;
    height:100vh;
    z-index:70;
    transition:left .22s ease;

    /* garante que o conteúdo do menu aparece */
    background: var(--bg);
  }

  body.sidebar-open .sidebar{ left:0; }
  body.sidebar-open .sidebar-overlay{ display:block; }

  /* garante que o conteúdo não fica "espremido" */
  .app-main{ width:100%; }
}

/* ===========================
   LOGIN PAGE
=========================== */

.login-page{
  display:flex;
  min-height:100vh;
  background:var(--bg);
}

/* ===== FORM ===== */
.login-form{
  width:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.login-box{
  width:100%;
  max-width:360px;
}

.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

.login-fields{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.login-fields input{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-size:15px;
}

.login-fields input::placeholder{
  color:var(--muted);
}

.login-fields input:focus{
  outline:none;
  border-color:var(--primary);
}

.login-footer{
  margin-top:22px;
  text-align:center;
  opacity:.6;
}

/* ===== IMAGEM ===== */
.login-image{
  flex:1;
  background-image: url("../../image/servicehub_bg.png");
  background-size: cover;
  background-position: center;
  position:relative;
}

/* ===== MOBILE ===== */
@media (max-width: 900px){
  .login-image{ display:none; }
  .login-form{ width:100%; }
}

.login-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    var(--bg) 0%,
    var(--image-overlay-mid) 30%,
    var(--image-overlay-end) 100%
  );
}

/* ===== Tip box ===== */
.tipbox{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e7edf7;
  background:#f8fbff;
  border-radius:12px;
}

.tip-alert{
  color:#0f172a;
  text-decoration:none;
  font-size:14px;
}
.tip-alert:hover{ text-decoration:underline; }

.tip-ok{
  color:#475569;
  font-size:14px;
}

.tip-tech{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
}

.user-menu{ position:relative; }
.user-menu summary{ list-style:none; cursor:pointer; }
.user-menu summary::-webkit-details-marker{ display:none; }

.user-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-soft);
  color:var(--text);
  font-weight:800;
}

.user-dropdown{
  position:absolute;
  right:0;
  margin-top:10px;
  min-width:180px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(15,23,42,.14);
  padding:8px;
  z-index:9999;
}

.user-dd-item{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
}
.user-dd-item:hover{ background:var(--surface-soft); }

.badge-sla-ok{
  background:rgba(31,111,235,.12);
  border-color:rgba(31,111,235,.25);
  color:var(--sla-ok-text);
}
.badge-sla-expired{
  background:rgba(255,0,90,.10);
  border-color:rgba(255,0,90,.25);
  color:var(--sla-expired-text);
}

/* ===========================
   CRM (Kanban)
=========================== */
.kanban{
  display:grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap:12px;
  align-items:start;
}
@media (max-width: 1200px){
  .kanban{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 760px){
  .kanban{ grid-template-columns: 1fr; }
}
.kan-col{
  background:var(--surface-soft-alt);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  min-height:220px;
}
.kan-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.kan-title{font-weight:800}
.kan-count{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
}
.kan-list{display:flex; flex-direction:column; gap:10px; min-height:140px}
.kan-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  cursor:grab;
  position:relative;
}
.kan-card.dragging{opacity:.6; cursor:grabbing}
.kan-card.selected{
  border-color:rgba(31,111,235,.6);
  box-shadow:0 10px 26px rgba(31,111,235,.25);
}
.kan-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.kan-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.kan-empty{
  padding:10px;
  border:1px dashed var(--border);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
}
.kan-check{
  display:flex;
  align-items:center;
  gap:6px;
}
.kan-check input{
  transform:scale(1.1);
}

/* ===== CRM MODAL ===== */
.crm-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.crm-modal.open{ display:flex; }
.crm-modal .modal-backdrop{
  position:absolute;
  inset:0;
  background:var(--overlay-backdrop);
}
.crm-modal .modal-card{
  position:relative;
  width:min(760px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 18px 50px rgba(15,23,42,.18);
}
.crm-modal .modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.crm-modal .modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 760px){
  .crm-modal .modal-grid{ grid-template-columns:1fr; }
}
.crm-modal .modal-field label{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.crm-modal .modal-value{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  min-height:40px;
  background:var(--surface-soft-alt);
}
.crm-modal .modal-notes{
  grid-column:1 / -1;
}
.crm-modal .modal-notes .modal-value{
  min-height:120px;
  white-space:pre-wrap;
}

/* ===========================
   Projects (Gantt)
=========================== */
.progress{
  height:10px;
  background:var(--surface-soft);
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--border);
}
.progress > span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.project-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:14px;
}
@media (max-width: 980px){
  .project-grid{ grid-template-columns: 1fr; }
}
.gantt{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:var(--surface-soft-alt);
}
.gantt-axis{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}
.gantt-track{
  position:relative;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-elevated);
  overflow:hidden;
}
.gantt-bar{
  position:absolute;
  height:22px;
  border-radius:8px;
  padding:0 8px;
  display:flex;
  align-items:center;
  font-size:12px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid rgba(255,255,255,.2);
}

/* ===========================
   Planner
=========================== */
.planner-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.planner-filter-form{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.planner-select{ min-width:190px; }

.planner-layout-grid{
  grid-template-columns:1.15fr 1fr;
  gap:12px;
}
@media (max-width: 1080px){
  .planner-layout-grid{ grid-template-columns:1fr; }
}

.planner-inline-two{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:10px;
}
.planner-inline-three{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 760px){
  .planner-inline-two,
  .planner-inline-three{
    grid-template-columns:1fr;
  }
}

.planner-actions-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.planner-divider{
  height:1px;
  margin:12px 0;
  background:var(--border);
}

.planner-color-field{
  padding:0;
  min-height:44px;
}

.planner-stats-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.planner-stat{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:var(--surface-soft-alt);
}
.planner-stat-label{
  font-size:12px;
  color:var(--muted);
}
.planner-stat-value{
  font-size:24px;
  font-weight:800;
  margin-top:2px;
}

.planner-priority-row{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.planner-due-list{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.planner-due-item{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
}

.planner-overdue{
  color:#ef4444;
  font-weight:700;
  font-size:12px;
}

.planner-plan-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-left:6px;
}

.planner-add-bucket-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.planner-label-help{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.planner-board{
  margin-top:14px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3, minmax(260px, 1fr));
  align-items:start;
}
@media (max-width: 1200px){
  .planner-board{ grid-template-columns:repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 760px){
  .planner-board{ grid-template-columns:1fr; }
}

.planner-column{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:var(--surface-soft-alt);
}

.planner-column-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.planner-column-title{
  font-size:14px;
  font-weight:800;
}
.planner-column-count{
  font-size:12px;
  color:var(--muted);
}
.planner-column-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

.planner-mini-btn{
  padding:7px 9px;
  border-radius:10px;
  font-size:12px;
}

.planner-task-list{
  min-height:120px;
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.planner-task-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:var(--card);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  cursor:grab;
}
.planner-task-card.dragging{
  opacity:.65;
  cursor:grabbing;
}

.planner-task-title{
  font-weight:800;
  margin-bottom:6px;
}

.planner-task-labels{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.planner-label{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid transparent;
}
.planner-label-blue{ background:rgba(59,130,246,.18); color:var(--label-blue-text); border-color:rgba(59,130,246,.35); }
.planner-label-green{ background:rgba(34,197,94,.18); color:var(--label-green-text); border-color:rgba(34,197,94,.35); }
.planner-label-yellow{ background:rgba(234,179,8,.18); color:var(--label-yellow-text); border-color:rgba(234,179,8,.35); }
.planner-label-red{ background:rgba(239,68,68,.18); color:var(--label-red-text); border-color:rgba(239,68,68,.35); }
.planner-label-purple{ background:rgba(168,85,247,.18); color:var(--label-purple-text); border-color:rgba(168,85,247,.35); }
.planner-label-pink{ background:rgba(236,72,153,.18); color:var(--label-pink-text); border-color:rgba(236,72,153,.35); }

.planner-task-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.planner-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid transparent;
}

.planner-pill-priority-urgent{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.35); color:var(--label-red-text); }
.planner-pill-priority-high{ background:rgba(249,115,22,.18); border-color:rgba(249,115,22,.35); color:var(--label-orange-text); }
.planner-pill-priority-medium{ background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.35); color:var(--label-blue-text); }
.planner-pill-priority-low{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35); color:var(--label-green-text); }

.planner-pill-progress-not_started{ background:rgba(148,163,184,.18); border-color:rgba(148,163,184,.35); color:var(--label-gray-text); }
.planner-pill-progress-in_progress{ background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.35); color:var(--label-blue-text); }
.planner-pill-progress-completed{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35); color:var(--label-green-text); }

.planner-task-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.planner-task-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.planner-empty{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:10px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

.planner-quick-add{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
}

@media (max-width: 760px){
  .planner-quick-add{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ===========================
   PREMIUM OVERRIDES
=========================== */
:root{
  color-scheme:light;
  --bg:#eef4ff;
  --bg-alt:#f8fbff;
  --card:#ffffff;
  --card-strong:#f6faff;
  --text:#0f172a;
  --muted:#526079;
  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.18);

  --primary:#4f8cff;
  --accent:#37c8a7;
  --accent-strong:#5f6fe8;
  --danger:#e54855;
  --warn:#d89214;
  --success:#159966;

  --topbar-grad-start:rgba(79,140,255,.12);
  --topbar-grad-end:rgba(55,200,167,.08);
  --surface-soft:rgba(15,23,42,.06);
  --surface-soft-alt:rgba(15,23,42,.03);
  --surface-elevated:rgba(255,255,255,.78);
  --surface-glass:rgba(248,251,255,.84);
  --overlay-backdrop:rgba(15,23,42,.32);
  --shadow-soft:0 18px 42px rgba(15,23,42,.08);
  --shadow-card:0 24px 60px rgba(15,23,42,.12);
  --ring:0 0 0 3px rgba(79,140,255,.12);
  --sla-ok-text:#1d4ed8;
  --sla-expired-text:#be123c;
  --label-blue-text:#1e3a8a;
  --label-green-text:#14532d;
  --label-yellow-text:#854d0e;
  --label-red-text:#991b1b;
  --label-purple-text:#581c87;
  --label-pink-text:#9d174d;
  --label-orange-text:#9a3412;
  --label-gray-text:#334155;
  --grid-line:rgba(15,23,42,.04);
  --card-gloss:rgba(255,255,255,.72);
  --topbar-surface-end:rgba(255,255,255,.92);
  --topbar-divider:rgba(15,23,42,.12);
  --sidebar-bg-start:rgba(255,255,255,.98);
  --sidebar-bg-end:rgba(238,244,255,.98);
  --sidebar-shadow-edge:rgba(15,23,42,.06);
  --sidebar-shadow-color:rgba(15,23,42,.12);
  --sidebar-scroll-track:rgba(15,23,42,.08);
  --image-overlay-mid:rgba(238,244,255,.58);
  --image-overlay-end:rgba(238,244,255,.82);
  --soft-hover:rgba(15,23,42,.08);
  --ticket-fade:rgba(15,23,42,0);
}



html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at top left, rgba(79,140,255,.18), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(55,200,167,.10), transparent 20%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.35), transparent 72%);
  opacity:.22;
}

button, input, select, textarea{font:inherit}
canvas{display:block}
::selection{background:rgba(79,140,255,.35); color:#fff}

.topbar{
  gap:14px;
  padding:16px 24px;
  background:linear-gradient(135deg, var(--surface-glass), var(--topbar-surface-end));
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px);
}

.topbar::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--topbar-divider), transparent);
  pointer-events:none;
}

.topbar > div{min-width:0}
.container{max-width:1400px; margin:24px auto; padding:0 20px}
.grid{gap:14px}

.card{
  background:linear-gradient(180deg, var(--card-gloss), transparent 28%), var(--card);
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow-card);
}

.btn{
  min-height:44px;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--primary), #76a6ff);
  box-shadow:0 12px 24px rgba(79,140,255,.24);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(79,140,255,.30);
}

.btn.secondary{
  background:var(--surface-soft-alt);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:none;
}

.btn.secondary:hover{
  background:var(--surface-soft);
  box-shadow:var(--shadow-soft);
}

.btn.accent{
  background:linear-gradient(135deg, var(--accent), #69e0c6);
  color:#052019;
  box-shadow:0 12px 24px rgba(55,200,167,.22);
}

.btn.accent:hover{box-shadow:0 16px 30px rgba(55,200,167,.28)}
.btn.danger{background:linear-gradient(135deg, var(--danger), #ff9a72); box-shadow:0 12px 24px rgba(255,107,120,.22)}
.btn.danger:hover{box-shadow:0 16px 30px rgba(255,107,120,.28)}
.btn:focus-visible,
.sb-item:focus-visible,
.sb-subitem:focus-visible,
.link:focus-visible,
.user-dd-item:focus-visible{outline:none; box-shadow:var(--ring)}

.badge{
  padding:7px 12px;
  border:1px solid var(--border);
  background:var(--surface-soft-alt);
  color:var(--text);
}

.badge-new{background:rgba(79,140,255,.14); color:var(--label-blue-text); border-color:rgba(79,140,255,.24)}
.badge-in_progress{background:rgba(79,140,255,.16); color:var(--label-blue-text); border-color:rgba(79,140,255,.28)}
.badge-waiting_customer{background:rgba(247,184,75,.14); color:var(--label-yellow-text); border-color:rgba(247,184,75,.26)}
.badge-closed,
.badge-resolved{background:rgba(55,212,168,.14); color:var(--label-green-text); border-color:rgba(55,212,168,.26)}
.badge-triaged{background:rgba(125,140,255,.16); color:var(--label-purple-text); border-color:rgba(125,140,255,.28)}

.table th,
.table td{padding:12px 10px}
.table th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.small{font-size:.86rem}
.link{color:var(--accent-strong)}
.field{
  padding:12px 14px;
  border-radius:14px;
  background:var(--surface-soft-alt);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field:focus{
  outline:none;
  border-color:rgba(79,140,255,.40);
  box-shadow:var(--ring);
  background:var(--card);
}

.survey-banner{
  border-radius:20px;
  border:1px solid rgba(79,140,255,.22);
  background:linear-gradient(135deg, rgba(79,140,255,.18), rgba(55,200,167,.10));
}

.rating-pill input:checked + span{background:linear-gradient(135deg, var(--primary), var(--accent-strong))}
.toast{border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-card)}

.sb-mark{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
  padding:4px;
}

.sb-logo-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  border-radius: 10px;
}

.logo-light{
  display:block;
}

.sidebar{
  width:280px;
  padding:18px 16px;
  background:linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
  box-shadow:inset -1px 0 0 var(--sidebar-shadow-edge), 24px 0 50px var(--sidebar-shadow-color);
}

.app-main .container{
  margin:24px 0 32px;
  padding:0 24px;
}

.sb-logo{
  gap:12px;
  padding:14px;
  border-radius:20px;
}

.sb-mark{
  width:46px;
  height:46px;
  border-radius:16px;
}

.sb-nav{margin-top:18px}

.sb-item{
  gap:12px;
  padding:11px 13px;
  border-radius:16px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.sb-item i:first-child{
  width:18px;
  text-align:center;
  color:var(--muted);
  transition:color .18s ease;
}

.sb-item:hover{
  transform:translateX(2px);
}

.sb-item:hover i:first-child,
.sb-item.active i:first-child{
  color:var(--text);
}

.sb-item.active{
  background:linear-gradient(135deg, rgba(79,140,255,.18), rgba(125,140,255,.12));
  border-color:rgba(79,140,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.sb-subnav{
  margin-top:6px;
  padding-left:12px;
}

.sb-subitem{
  padding:9px 11px;
  border-radius:14px;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.sb-subitem:hover{
  transform:translateX(2px);
}

.sb-subitem.active{
  background:rgba(79,140,255,.14);
  border-color:rgba(79,140,255,.28);
}

.sb-group{
  margin-top:10px;
  padding:8px 10px 4px;
  letter-spacing:.14em;
}

.sb-footer{
  padding:14px 10px 6px;
}

body.sidebar-compact .sidebar{
  width:248px;
  padding:14px 12px;
}

body.sidebar-compact .sb-logo{
  padding:10px;
  border-radius:18px;
  gap:10px;
}

body.sidebar-compact .sb-mark{
  width:40px;
  height:40px;
  border-radius:14px;
}

body.sidebar-compact .sb-nav{
  margin-top:12px;
  gap:6px;
}

body.sidebar-compact .sb-item{
  padding:9px 11px;
  border-radius:14px;
}

body.sidebar-compact .sb-group{
  margin-top:8px;
  padding:4px 8px;
}

body.sidebar-compact .sb-footer{
  padding:10px 8px 4px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(79,140,255,.55), rgba(125,140,255,.45));
}

.sidebar::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(79,140,255,.75), rgba(125,140,255,.65));
}

.sidebar::-webkit-scrollbar-track{
  background:var(--sidebar-scroll-track);
}

.sidebar{scrollbar-color:rgba(79,140,255,.65) var(--sidebar-scroll-track)}

@media (max-width:980px){
  .topbar{
    padding:14px 16px;
  }

  .topbar::after{
    left:16px;
    right:16px;
  }

  .sidebar{
    left:-304px;
    width:280px;
    background:linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
  }

  .app-main .container{
    padding:0 14px;
    margin:18px 0 24px;
  }
}

.login-fields input{
  border-radius:16px;
  background:var(--surface-soft-alt);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-fields input:focus{
  border-color:rgba(79,140,255,.40);
  box-shadow:var(--ring);
  background:var(--card);
}

.login-image::after{
  background:linear-gradient(90deg, var(--bg) 0%, var(--image-overlay-mid) 30%, var(--image-overlay-end) 100%);
}

.tipbox{
  padding:12px 14px;
  border:1px solid var(--border);
  background:var(--surface-soft-alt);
  border-radius:16px;
}

.tip-alert{
  color:var(--text);
}

.tip-ok,
.tip-tech{
  color:var(--muted);
}

.user-chip{
  padding:8px 12px;
  background:var(--surface-soft);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.user-chip:hover{
  background:var(--soft-hover);
  border-color:var(--border-strong);
}

.user-dropdown{
  margin-top:12px;
  min-width:190px;
  border-radius:16px;
  box-shadow:var(--shadow-card);
}

.user-dd-item{
  padding:10px 12px;
}

.badge-sla-ok{
  background:rgba(79,140,255,.12);
  border-color:rgba(79,140,255,.24);
}

.badge-sla-expired{
  background:rgba(255,107,120,.12);
  border-color:rgba(255,107,120,.24);
}

.page-dashboard .container{
  padding-bottom:28px;
}

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

.dashboard-section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.dashboard-section-label::before{
  content:"";
  width:18px;
  height:1px;
  background:linear-gradient(90deg, var(--primary), transparent);
}

.dashboard-dot{
  width:5px;
  height:5px;
  border-radius:999px;
  background:var(--muted);
  opacity:.7;
}

.dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(320px, .95fr);
  gap:18px;
  padding:28px;
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(79,140,255,.14), transparent 34%),
    linear-gradient(135deg, var(--card-gloss), transparent),
    var(--card);
}

.dashboard-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-hero__title{
  margin:14px 0 10px;
  font-size:clamp(2rem, 4vw, 3.15rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.dashboard-hero__subtitle{
  margin:0;
  max-width:62ch;
  color:var(--muted);
  font-size:1rem;
}

.dashboard-hero__meta{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.dashboard-meta-card{
  padding:15px 16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--surface-soft-alt);
}

.dashboard-meta-card strong{
  display:block;
  margin-top:6px;
  font-size:1rem;
}

.dashboard-hero__aside{
  display:grid;
  gap:12px;
  align-content:start;
}

.dashboard-hero-highlight{
  padding:18px 18px 16px;
  border-radius:22px;
  border:1px solid var(--border);
  background:var(--surface-soft-alt);
}

.dashboard-hero-highlight--danger{
  background:linear-gradient(180deg, rgba(255,107,120,.14), rgba(255,107,120,.04));
}

.dashboard-hero-highlight--danger strong{
  color:var(--danger);
}

.dashboard-hero-highlight--success{
  background:linear-gradient(180deg, rgba(55,200,167,.16), rgba(55,200,167,.04));
}

.dashboard-hero-highlight--success strong{
  color:var(--success);
}

.dashboard-hero-highlight__label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}

.dashboard-hero-highlight strong{
  display:block;
  margin-top:10px;
  font-size:2.5rem;
  line-height:1;
}

.dashboard-hero-highlight .small{
  display:block;
  margin-top:8px;
}

.dashboard-hero__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.dashboard-kpi{
  min-height:188px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.dashboard-kpi__top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.dashboard-kpi__label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.dashboard-kpi__value{
  margin-top:14px;
  font-size:clamp(2rem, 3vw, 3rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}

.dashboard-kpi__icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border:1px solid transparent;
}

.dashboard-kpi__footer{
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
}

.dashboard-kpi--primary .dashboard-kpi__icon,
.dashboard-kpi--info .dashboard-kpi__icon{
  background:rgba(79,140,255,.14);
  border-color:rgba(79,140,255,.20);
  color:var(--label-blue-text);
}

.dashboard-kpi--danger .dashboard-kpi__icon{
  background:rgba(255,107,120,.14);
  border-color:rgba(255,107,120,.20);
  color:var(--label-red-text);
}

.dashboard-kpi--danger .dashboard-kpi__value{
  color:var(--danger);
}

.dashboard-kpi--success .dashboard-kpi__icon{
  background:rgba(55,212,168,.14);
  border-color:rgba(55,212,168,.20);
  color:var(--label-green-text);
}

.dashboard-kpi--success .dashboard-kpi__value{
  color:var(--success);
}

.dashboard-kpi--subtle{
  min-height:170px;
}

.dashboard-kpi--subtle .dashboard-kpi__value{
  font-size:clamp(1.7rem, 2.6vw, 2.4rem);
}

.dashboard-kpi--subtle .dashboard-kpi__icon{
  width:46px;
  height:46px;
  border-radius:16px;
  background:var(--surface-soft);
  border-color:var(--border);
  color:var(--muted);
}

.dashboard-main-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) minmax(320px, 1fr);
  gap:16px;
}

.dashboard-chart-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.dashboard-activity-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.dashboard-panel{
  padding:0;
}

.dashboard-panel__head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
  padding:22px 22px 0;
}

.dashboard-panel__title{
  margin:8px 0 0;
  font-size:1.3rem;
  line-height:1.2;
}

.dashboard-panel__copy{
  margin:10px 0 0;
  max-width:64ch;
  color:var(--muted);
}

.dashboard-panel__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-panel__body{
  padding:18px 22px 22px;
}

.dashboard-list{
  display:grid;
  gap:12px;
}

.dashboard-list--compact{
  gap:10px;
}

.dashboard-empty{
  padding:18px;
  border-radius:18px;
  border:1px dashed var(--border);
  background:var(--surface-soft-alt);
  color:var(--muted);
  text-align:center;
}

.dashboard-ticket-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.dashboard-ticket-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface-soft-alt), var(--ticket-fade));
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dashboard-ticket-link:hover .dashboard-ticket-item{
  transform:translateY(-2px);
  border-color:rgba(79,140,255,.28);
  box-shadow:var(--shadow-soft);
  background:linear-gradient(180deg, rgba(79,140,255,.08), rgba(255,255,255,0));
}

.dashboard-ticket-item--soft{
  background:linear-gradient(180deg, rgba(55,212,168,.06), var(--ticket-fade));
}

.dashboard-ticket-item__main{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.dashboard-ticket-item__title{
  font-size:1rem;
  font-weight:800;
  line-height:1.4;
  word-break:break-word;
}

.dashboard-ticket-item__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}

.dashboard-ticket-item__aside{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  justify-content:space-between;
  text-align:right;
}

.dashboard-ticket-item__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent-strong);
  font-size:12px;
  font-weight:700;
}

.dashboard-ticket-item__timestamp{
  font-size:12px;
  color:var(--muted);
}

.dashboard-chart-wrap{
  position:relative;
  height:320px;
}

.dashboard-chart-wrap canvas{
  width:100% !important;
  height:100% !important;
}

@media (max-width:1240px){
  .dashboard-kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:1180px){
  .dashboard-hero{
    grid-template-columns:1fr;
  }

  .dashboard-main-grid,
  .dashboard-chart-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .card{
    border-radius:20px;
    padding:18px;
  }

  .dashboard-hero{
    padding:22px;
  }

  .dashboard-hero__meta{
    grid-template-columns:1fr;
  }

  .dashboard-kpi-grid{
    grid-template-columns:1fr;
  }

  .dashboard-panel__head,
  .dashboard-panel__body{
    padding-left:18px;
    padding-right:18px;
  }

  .dashboard-ticket-item{
    grid-template-columns:1fr;
  }

  .dashboard-ticket-item__aside{
    align-items:flex-start;
    text-align:left;
  }

  .dashboard-hero__actions .btn,
  .dashboard-panel__actions .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ===========================
   CHAT ICON HEADER
=========================== */

.chat-icon-wrapper{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  text-decoration:none;
  background:var(--surface-soft);
  border:1px solid var(--border);
  transition:all .18s ease;
}

.chat-icon-wrapper:hover{
  background:var(--surface-soft-alt);
  border-color:var(--border-strong);
  transform:translateY(-1px);
}

.chat-icon{
  font-size:18px;
  color:var(--text);
  transition:all .18s ease;
}

.chat-icon-wrapper:hover .chat-icon{
  color:var(--primary);
}

.chat-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px var(--card);
}

.chat-icon.animate{
  animation:chatPulse 1.2s infinite;
}

@keyframes chatPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.18); color:#2563eb; }
  100%{ transform:scale(1); }
}

/* Estado base */
.clock-toggle{
  position: relative;
  transition: .2s ease;
}

/* RODANDO (verde) */
.clock-toggle.running{
  background: rgba(34,197,94,.18);
  box-shadow: 0 0 0 1px rgba(34,197,94,.35) inset;
}

/* PAUSADO (amarelo) */
.clock-toggle.paused{
  background: rgba(234,179,8,.18);
  box-shadow: 0 0 0 1px rgba(234,179,8,.35) inset;
}

/* PARADO (vermelho leve) */
.clock-toggle.stopped{
  background: rgba(239,68,68,.18);
  box-shadow: 0 0 0 1px rgba(239,68,68,.35) inset;
}

/* BOLINHA DE STATUS (tipo WhatsApp) */
.clock-toggle::after{
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: .2s ease;
}

/* CORES DA BOLINHA */
.clock-toggle.running::after{
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.clock-toggle.paused::after{
  background: #eab308;
}

.clock-toggle.stopped::after{
  background: #ef4444;
}

/* PISCAR quando estiver rodando */
@keyframes pulseClock {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}

.clock-toggle.running::after{
  animation: pulseClock 1.2s infinite;
}/* ===========================
   PERFIL PREMIUM
=========================== */
.profile-page{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.profile-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  overflow:hidden;
  position:relative;
  padding:26px 28px;
  background:
    radial-gradient(circle at 8% 0, rgba(79,140,255,.22), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(55,200,167,.14), transparent 30%),
    linear-gradient(135deg, var(--card-gloss), transparent),
    var(--card);
}

.profile-hero::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  bottom:-120px;
  border-radius:999px;
  background:rgba(125,140,255,.16);
  filter:blur(3px);
  pointer-events:none;
}

.profile-title{
  margin:10px 0 8px;
  font-size:clamp(2rem, 3.5vw, 3rem);
  line-height:1;
  letter-spacing:-.04em;
}

.profile-subtitle{
  margin:0;
  color:var(--muted);
  max-width:68ch;
}

.profile-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  position:relative;
  z-index:1;
}

.profile-alert{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-radius:18px;
  border:1px solid var(--border);
  font-weight:800;
}

.profile-alert-success{
  background:rgba(55,200,167,.12);
  border-color:rgba(55,200,167,.28);
  color:var(--label-green-text);
}

.profile-alert-error{
  background:rgba(255,107,120,.12);
  border-color:rgba(255,107,120,.28);
  color:var(--label-red-text);
}

.profile-layout{
  display:grid;
  grid-template-columns:330px minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.profile-photo-card{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.profile-avatar-picker{
  width:178px;
  height:178px;
  border-radius:34px;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(135deg, rgba(79,140,255,.32), rgba(55,200,167,.20));
  box-shadow:0 22px 44px rgba(2,6,23,.26);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.profile-avatar-picker img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profile-avatar-fallback{
  font-size:4.2rem;
  line-height:1;
  font-weight:900;
  color:#fff;
  text-shadow:0 8px 22px rgba(0,0,0,.26);
}

.profile-avatar-overlay{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:9px 10px;
  border-radius:16px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(10px);
}

.profile-file-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.profile-photo-card h2{
  margin:4px 0 0;
  font-size:1.45rem;
  line-height:1.15;
}

.profile-photo-card p{
  margin:0;
  word-break:break-word;
}

.profile-mini-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:4px;
}

.profile-mini-card{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface-soft-alt);
  text-align:left;
}

.profile-mini-card span{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.profile-mini-card strong{
  display:block;
  margin-top:6px;
  font-size:.95rem;
}

.profile-help-box{
  width:100%;
  display:flex;
  gap:10px;
  align-items:flex-start;
  text-align:left;
  margin-top:4px;
  padding:13px;
  border-radius:18px;
  border:1px solid rgba(79,140,255,.24);
  background:rgba(79,140,255,.10);
}

.profile-help-box i{
  color:var(--primary);
  margin-top:2px;
}

.profile-help-box strong,
.profile-help-box span{
  display:block;
}

.profile-help-box span{
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
}

.profile-form-card{
  min-width:0;
}

.profile-address-card{
  grid-column:2;
}

.profile-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.profile-card-head h2{
  margin:8px 0 0;
  font-size:1.35rem;
}

.profile-form-grid{
  display:grid;
  gap:12px;
}

.profile-form-grid.two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.profile-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

.profile-field span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--muted);
  font-weight:800;
}

.profile-field.full{
  grid-column:1 / -1;
}

.profile-form-grid.address{
  grid-template-columns:140px minmax(220px, 1fr) 120px;
  grid-template-areas:
    "cep street number"
    "complement complement neighborhood"
    "city city state";
}

.cep-field{grid-area:cep}
.street-field{grid-area:street}
.number-field{grid-area:number}
.complement-field{grid-area:complement}
.neighborhood-field{grid-area:neighborhood}
.city-field{grid-area:city}
.state-field{grid-area:state}

.profile-cep-status{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-soft-alt);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.profile-cep-status.loading{
  color:var(--label-blue-text);
  border-color:rgba(79,140,255,.28);
  background:rgba(79,140,255,.12);
}

.profile-cep-status.success{
  color:var(--label-green-text);
  border-color:rgba(55,200,167,.28);
  background:rgba(55,200,167,.12);
}

.profile-cep-status.error{
  color:var(--label-red-text);
  border-color:rgba(255,107,120,.28);
  background:rgba(255,107,120,.12);
}

.profile-actions-bottom{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

@media (max-width:1100px){
  .profile-layout{
    grid-template-columns:1fr;
  }

  .profile-photo-card{
    position:relative;
    top:auto;
  }

  .profile-address-card{
    grid-column:auto;
  }
}

@media (max-width:760px){
  .profile-hero{
    flex-direction:column;
    padding:22px;
  }

  .profile-hero-actions,
  .profile-hero-actions .btn,
  .profile-actions-bottom .btn{
    width:100%;
  }

  .profile-form-grid.two,
  .profile-form-grid.address{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }

  .cep-field,
  .street-field,
  .number-field,
  .complement-field,
  .neighborhood-field,
  .city-field,
  .state-field{
    grid-area:auto;
  }
}

/* ==========================================================
   TEMA ÚNICO CLARO — DEFINITIVO
========================================================== */

:root,
html,
body,
html[data-theme],
body[data-theme],
html[data-theme="light"],
body[data-theme="light"],
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: light !important;

  --bg: #eef4ff !important;
  --bg-alt: #f8fbff !important;
  --card: #ffffff !important;
  --card-strong: #f6faff !important;
  --text: #0f172a !important;
  --muted: #526079 !important;

  --border: rgba(15,23,42,.10) !important;
  --border-strong: rgba(15,23,42,.18) !important;

  --primary: #4f8cff !important;
  --accent: #37c8a7 !important;
  --accent-strong: #5f6fe8 !important;
  --danger: #e54855 !important;
  --warn: #d89214 !important;
  --success: #159966 !important;

  --surface-soft: rgba(15,23,42,.06) !important;
  --surface-soft-alt: rgba(15,23,42,.03) !important;
  --surface-elevated: rgba(255,255,255,.78) !important;
  --surface-glass: rgba(248,251,255,.94) !important;

  --topbar-grad-start: rgba(79,140,255,.12) !important;
  --topbar-grad-end: rgba(55,200,167,.08) !important;
  --topbar-surface-end: rgba(255,255,255,.96) !important;
  --topbar-divider: rgba(15,23,42,.12) !important;

  --sidebar-bg-start: rgba(255,255,255,.99) !important;
  --sidebar-bg-end: rgba(238,244,255,.99) !important;
  --sidebar-shadow-edge: rgba(15,23,42,.06) !important;
  --sidebar-shadow-color: rgba(15,23,42,.12) !important;
  --sidebar-scroll-track: rgba(15,23,42,.08) !important;

  --shadow-soft: 0 18px 42px rgba(15,23,42,.08) !important;
  --shadow-card: 0 24px 60px rgba(15,23,42,.12) !important;
}

html,
body {
  background-color: #eef4ff !important;
  color: #0f172a !important;
}

.app-shell,
.app-main {
  background-color: transparent !important;
  color: #0f172a !important;
}

.sidebar {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.99),
    rgba(238,244,255,.99)
  ) !important;
  color: #0f172a !important;
}

.topbar {
  background: linear-gradient(
    135deg,
    rgba(248,251,255,.96),
    rgba(255,255,255,.98)
  ) !important;
  color: #0f172a !important;
}

.card,
.user-dropdown,
.toast,
.kan-card,
.planner-task-card,
.crm-modal .modal-card {
  background-color: #ffffff !important;
  color: #0f172a !important;
}