/* TYPO */
h1{ font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2{ font-size: clamp(1.05rem, 2vw, 1.35rem); }
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }

/* CARD */
.card{
  background: var(--surface);
  padding:20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.card:hover{
  transform: translateY(-5px);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

/* BUTTONS */
.btn{
  padding:13px 20px;
  border:0;
  border-radius: var(--radius);
  text-decoration:none;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  transition: transform .2s, background-color .2s, box-shadow .2s, border-color .2s, color .2s;
}

.btn.primary{
  background: var(--accent);
  color:#fff;
  cursor:pointer;
}
.btn.primary:hover{
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.btn.ghost{
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
}
.btn.ghost:hover{
  background: var(--surface-3);
  transform: translateY(-2px);
  cursor:pointer;
}

.btn.danger{
  background: color-mix(in srgb, var(--danger) 92%, transparent);
  color:#fff;
  border: 2px solid color-mix(in srgb, var(--danger) 55%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--danger) 18%, transparent);
}
.btn.danger:hover{
  background: var(--danger);
  transform: translateY(-2px);
  cursor:pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--danger) 28%, transparent);
}
.btn.danger:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--danger) 20%, transparent);
}
.btn.danger:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent),
    0 10px 22px color-mix(in srgb, var(--danger) 25%, transparent);
}

/* FORM */
input, textarea, select{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  outline: none;
  background: var(--surface);
  color: var(--text);
}

textarea {
	resize: none;
}

input::placeholder, textarea::placeholder{
  font-style: italic;
  opacity: .6;
}

/* required invalid */
input:required:invalid,
textarea:required:invalid,
select:required:invalid{
  border-right: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

/* =========================
   SWITCH
========================= */
.switch{
  position:relative;
  display:inline-block;
  width:50px;
  height:26px;
}
.switch input{ display:none; }

.slider{
  position:absolute;
  inset:0;
  background: color-mix(in srgb, var(--danger) 65%, var(--surface));
  border-radius:26px;
  transition:.4s;
  cursor:pointer;
  border: 1px solid var(--border);
}
.slider:before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  left:3px;
  bottom:3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:50%;
  transition:.4s;
}

input:checked + .slider{
  background: color-mix(in srgb, var(--success) 65%, var(--surface));
}
input:checked + .slider:before{ transform: translateX(24px); }

/* ALERT */
.alert-success,
.alert-error{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: bold;
  z-index: 9999;
  animation: fadeSequence 10s forwards;
  box-shadow: var(--shadow);
  color: #0b1220;
}

.alert-success{ background: var(--success); }
.alert-error{ background: var(--warning); }

@keyframes fadeSequence{
  0%{opacity:0;}
  10%,75%{opacity:1;}
  100%{opacity:0;}
}

/* ===== Home dashboard upgrades ===== */

.dashboard-home{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* welcome */
.welcome{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.welcome h1{
  margin:0;
  line-height:1.05;
  letter-spacing:-0.02em;
}

.welcome p{
  margin:0;
  font-size:1rem;
  color: var(--muted);
  opacity:.92;
}

/* generic section */
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.section-head h2{
  margin:0;
  font-size:1.05rem;
  line-height:1.15;
}

.section-head-sub{
  font-size:.92rem;
  color: var(--muted);
}

/* stats */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  width:100%;
}

@media (max-width:1200px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .stats-grid{ grid-template-columns: 1fr; }
}

.stat-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  min-height:132px;
  padding:18px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 88%, var(--accent) 12%) 0%,
      var(--surface) 100%);
  border:1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.stat-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 45%);
  box-shadow: 0 14px 30px color-mix(in srgb, #000 18%, transparent);
}

.stat-label{
  font-size:.86rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--muted);
  opacity:.95;
}

.stat-value{
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight:800;
  line-height:1;
  color: var(--text);
}

.stat-meta{
  font-size:.92rem;
  color: var(--muted);
  opacity:.9;
  line-height:1.35;
}

/* 2-column blocks admin */
.dashboard-split{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap:14px;
  align-items:start;
}

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

.split-card{
  height:100%;
  border-radius: var(--radius-lg);
}

/* support notification */
.support-notif{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius: var(--radius-lg);
  padding:18px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 18%, var(--surface)) 0%,
      var(--surface) 100%);
  border:1px solid color-mix(in srgb, var(--border) 68%, var(--accent) 32%);
}

.sn-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.sn-ico{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  flex:0 0 auto;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

.sn-txt{
  min-width:0;
}

.sn-title{
  font-size:1rem;
  font-weight:800;
  line-height:1.1;
  margin-bottom:4px;
}

.sn-sub{
  font-size:.95rem;
  line-height:1.45;
}

.sn-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width:900px){
  .support-notif{
    flex-direction:column;
    align-items:flex-start;
  }
  .sn-actions{
    width:100%;
  }
}

/* todo */
.todo-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.todo-item{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--surface-2);
}

.todo-ico{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  background: var(--surface-3);
  color: var(--text);
}

.todo-body{
  min-width:0;
}

.todo-title{
  font-weight:800;
  line-height:1.15;
  margin-bottom:4px;
}

.todo-text{
  font-size:.93rem;
  line-height:1.4;
}

.todo-item.is-danger{
  border-color: color-mix(in srgb, var(--danger) 26%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-2));
}
.todo-item.is-danger .todo-ico{
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-3));
}

.todo-item.is-warning{
  border-color: color-mix(in srgb, var(--warning) 26%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-2));
}
.todo-item.is-warning .todo-ico{
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-3));
}

.todo-item.is-info{
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.todo-item.is-info .todo-ico{
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-3));
}

.todo-item.is-muted .todo-ico{
  background: color-mix(in srgb, #94a3b8 16%, var(--surface-3));
}

@media (max-width:760px){
  .todo-item{
    grid-template-columns: 44px 1fr;
  }
  .todo-action{
    grid-column: 1 / -1;
  }
}

/* empty state */
.empty-state{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 2px 4px;
  color: var(--muted);
}

.empty-state i{
  color: var(--success);
}

/* quick links */
.quick-links{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  width:100%;
}

@media (max-width:980px){
  .quick-links{ grid-template-columns: 1fr; }
}

.ql-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:88px;
  padding:16px;
  border-radius: var(--radius-lg);
  text-decoration:none;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%) 0%,
      var(--surface-2) 100%);
  color: var(--text);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ql-card:hover{
  transform: translateY(-2px);
  background: var(--surface-3);
  border-color: color-mix(in srgb, var(--border) 56%, var(--accent) 44%);
  box-shadow: 0 12px 24px color-mix(in srgb, #000 14%, transparent);
}

.ql-ico{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  font-size:1.05rem;
}

.ql-txt{
  flex:1;
  min-width:0;
}

.ql-title{
  font-weight:800;
  line-height:1.12;
}

.ql-sub{
  opacity:.82;
  font-size:.92rem;
  margin-top:4px;
  line-height:1.35;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}

.ql-go{
  opacity:.55;
  transition: transform .14s ease, opacity .14s ease;
}

.ql-card:hover .ql-go{
  opacity:.9;
  transform: translateX(2px);
}

/* activities list */
.act-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.act-card{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 96%, white 4%) 0%,
      var(--surface-2) 100%);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.act-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--border) 58%, var(--accent) 42%);
  box-shadow: 0 12px 24px color-mix(in srgb, #000 12%, transparent);
}

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

.act-top{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.act-title{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.act-title strong{
  font-size:1rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.muted{
  opacity:.78;
  font-size:.875rem;
  color: var(--muted);
}

.act-badges{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.act-subline{
  margin-top:10px;
  line-height:1.4;
}

.act-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:260px;
  flex-wrap:wrap;
}

@media (max-width:980px){
  .act-card{
    flex-direction:column;
  }

  .act-top{
    flex-wrap:wrap;
  }

  .act-badges{
    margin-left:0;
    width:100%;
  }

  .act-actions{
    min-width:0;
    justify-content:flex-start;
  }
}

/* badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  line-height:1;
  border:1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
}

.badge i{
  font-size:.65rem;
  opacity:.9;
}

.badge-soft{
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.badge-ok{
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.badge-warn{
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

.badge-off{
  background: color-mix(in srgb, #94a3b8 14%, var(--surface));
  border-color: color-mix(in srgb, #94a3b8 22%, transparent);
}

/* local alert card inside page */
.alert{
  border-radius: var(--radius-lg);
  font-weight:700;
}

.alert-success{
  background: color-mix(in srgb, var(--success) 18%, var(--surface));
  color: var(--text);
  border:1px solid color-mix(in srgb, var(--success) 28%, transparent);
  position:static;
  left:auto;
  bottom:auto;
  transform:none;
  animation:none;
  box-shadow: var(--shadow);
  animation: fadeSequence 10s forwards;
}

.alert-error{
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--text);
  border:1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  position:static;
  left:auto;
  bottom:auto;
  transform:none;
  animation:none;
  box-shadow: var(--shadow);
}