/* TOP1 UI Kit (theme-level, UI-only)
   Reusable components for future screens (staff/client portals) without any business logic. */

.top1-panel{
  padding:18px;
}

.top1-panel__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.top1-panel__title{
  margin:0;
  font-size:18px;
  line-height:1.2;
}
.top1-panel__subtitle{
  margin:6px 0 0;
  color:var(--top1-muted);
  font-size:14px;
  line-height:1.35;
}

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

/* Grid utilities */
.top1-grid{
  display:grid;
  gap:14px;
}
.top1-grid--2{grid-template-columns:repeat(2, minmax(0,1fr));}
.top1-grid--3{grid-template-columns:repeat(3, minmax(0,1fr));}
.top1-grid--4{grid-template-columns:repeat(4, minmax(0,1fr));}
.top1-grid--cards{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width: 980px){
  .top1-grid--cards{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px){
  .top1-grid--cards{grid-template-columns:1fr;}
}
@media (max-width: 980px){
  .top1-grid--2,.top1-grid--3,.top1-grid--4{grid-template-columns:1fr;}
}

/* KPI cards */
.top1-kpi{
  padding:16px;
}
.top1-kpi__label{
  font-size:13px;
  color:var(--top1-muted);
  margin:0 0 6px;
}
.top1-kpi__value{
  font-size:28px;
  line-height:1.1;
  margin:0;
  letter-spacing:-.02em;
}
.top1-kpi__hint{
  font-size:13px;
  color:var(--top1-muted);
  margin:8px 0 0;
}

/* Badges / status pills */
.top1-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--top1-border);
  background:rgba(255,255,255,.55);
  color:var(--top1-text);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.top1-badge::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--top1-muted);
  opacity:.85;
}
.top1-badge--ok::before{background:#16a34a;}
.top1-badge--warn::before{background:#f59e0b;}
.top1-badge--bad::before{background:#dc2626;}
.top1-badge--info::before{background:#2563eb;}
@media (prefers-color-scheme: dark){
  .top1-badge{background:rgba(15,19,27,.55);}
}

/* Tables */
.top1-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:var(--top1-radius);
  border:1px solid var(--top1-border);
  background:var(--top1-surface);
}
.top1-table th,
.top1-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--top1-border);
  text-align:left;
  vertical-align:top;
  font-size:14px;
}
.top1-table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg, rgba(246,247,249,.92), rgba(255,255,255,.92));
  z-index:1;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--top1-muted);
}
.top1-table tbody tr:hover td{
  background:rgba(214,26,26,.04);
}
.top1-table tbody tr:last-child td{border-bottom:none;}
@media (prefers-color-scheme: dark){
  .top1-table{background:var(--top1-surface);}
  .top1-table thead th{
    background:linear-gradient(180deg, rgba(15,19,27,.92), rgba(11,13,18,.92));
  }
  .top1-table tbody tr:hover td{
    background:rgba(255,77,77,.06);
  }
}

/* Form fields */
.top1-field{margin:0 0 12px;}
.top1-field label{
  display:block;
  font-size:13px;
  color:var(--top1-muted);
  margin:0 0 6px;
}
.top1-input,
.top1-select,
.top1-textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--top1-border);
  background:rgba(255,255,255,.70);
  color:var(--top1-text);
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.top1-textarea{min-height:110px; resize:vertical;}
.top1-input:focus,
.top1-select:focus,
.top1-textarea:focus{
  border-color:rgba(37,99,235,.60);
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
  background:rgba(255,255,255,.92);
}
@media (prefers-color-scheme: dark){
  .top1-input,.top1-select,.top1-textarea{
    background:rgba(15,19,27,.70);
  }
  .top1-input:focus,.top1-select:focus,.top1-textarea:focus{
    background:rgba(15,19,27,.92);
  }
}

/* Utility */
.top1-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}


/* Tabs (UI-only) */
.top1-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.top1-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--top1-border);
  background:rgba(255,255,255,.60);
  color:var(--top1-text);
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.top1-tab:hover{
  transform:translateY(-1px);
  box-shadow:var(--top1-shadow-xs);
  background:rgba(255,255,255,.85);
}
.top1-tab.is-active{
  background:linear-gradient(180deg, var(--top1-accent-2), var(--top1-accent));
  border-color:rgba(214,26,26,.55);
  color:#fff;
}
@media (prefers-color-scheme: dark){
  .top1-tab{background:rgba(15,19,27,.60);}
  .top1-tab:hover{background:rgba(15,19,27,.85);}
}

/* Empty state */
.top1-empty{
  padding:18px;
  border-radius:var(--top1-radius);
  border:1px dashed var(--top1-border);
  background:rgba(255,255,255,.55);
  color:var(--top1-muted);
  text-align:center;
}
@media (prefers-color-scheme: dark){
  .top1-empty{background:rgba(15,19,27,.55);}
}

/* Hint callouts */
.top1-hint{
  padding:14px 16px;
  border-radius:var(--top1-radius);
  border:1px solid var(--top1-border);
  background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,.55));
}
@media (prefers-color-scheme: dark){
  .top1-hint{
    background:linear-gradient(180deg, rgba(37,99,235,.12), rgba(15,19,27,.55));
  }
}

/* ============================================================
   TOP1 Diamond Cut Patch — UI Kit (contract-safe)
   ============================================================ */

/* Inputs: disabled + keyboard-first focus ring */
.top1-input:disabled,
.top1-select:disabled,
.top1-textarea:disabled{
  background:var(--top1-surface-2);
  color:var(--top1-muted);
  opacity:.85;
  cursor:not-allowed;
}

@supports selector(:focus-visible){
  .top1-input:focus,
  .top1-select:focus,
  .top1-textarea:focus{
    box-shadow:none;
  }
  .top1-input:focus-visible,
  .top1-select:focus-visible,
  .top1-textarea:focus-visible{
    box-shadow:0 0 0 4px rgba(37,99,235,.14);
  }
}

/* Tabs: visible focus for keyboard navigation */
.top1-tab:focus{
  outline:2px solid var(--top1-focus);
  outline-offset:2px;
}
@supports selector(:focus-visible){
  .top1-tab:focus{outline:none;}
  .top1-tab:focus-visible{
    outline:2px solid var(--top1-focus);
    outline-offset:2px;
  }
}

/* Respect reduced motion for interactive components */
@media (prefers-reduced-motion: reduce){
  .top1-tab,
  .top1-btn{
    transition:none !important;
    transform:none !important;
  }
}