/* ════════════════════════════════════════════════════════════════════════
   YaCoder v2 — TMIYC-style premium theme
   Single source of truth for ALL TMA: worker, admin, mailer, sms, dialer
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/static/fonts/spectral-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/static/fonts/spectral-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* base palette */
  --bg:      #0a0a0a;
  --bg2:     #111111;
  --bg3:     #161616;
  --bg4:     #1c1c1c;
  --fg:      #e8e6e1;
  --fg2:     #aaa6a0;
  --fg3:     #6a665e;
  --accent:  #a08858;
  --accent2: #2a2218;
  --accent3: rgba(160,136,88,.15);
  --border:  #1f1c18;
  --border2: #2b2722;
  --card:    #111111;
  --danger:  #c66464;
  --success: #6e9c66;
  --warn:    #c89e5a;

  /* corners — square */
  --r:   0px;
  --r2:  0px;
  --r-pill: 0px;

  /* layout */
  --nav-h:  60px;
  --head-h: 56px;
  --shadow: none;

  /* fonts */
  --ff-sans:   'Inter', -apple-system, system-ui, sans-serif;
  --ff-serif:  'Spectral', Georgia, 'Times New Roman', serif;
  --ff-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; overflow-x: hidden; overscroll-behavior: none;
  background: var(--bg); color: var(--fg);
  font-family: var(--ff-sans);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a    { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); }

/* — typography — */
h1, h2, h3, h4, .tmiyc-h, .tmiyc-title {
  font-family: var(--ff-serif);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
}
h1, .tmiyc-title { font-size: 26px; line-height: 1.15; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.tmiyc-mono, .tmiyc-num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.tmiyc-num { text-align: right; }
.tmiyc-label { color: var(--fg3); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }

/* — cards — */
.card, .tmiyc-card, [class*="card"] {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 0;
  padding: 18px 18px;
  box-shadow: none;
}

/* — buttons — */
button, .btn, .tmiyc-btn, [class*="btn"], input[type="submit"] {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border2);
  border-radius: 0;
  padding: 11px 18px;
  cursor: pointer;
  transition: all .12s ease;
  outline: none;
}
button:hover, .btn:hover, .tmiyc-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent3);
}
button.primary, .btn.primary, .tmiyc-btn.primary {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}
button.primary:hover, .btn.primary:hover {
  background: transparent;
  color: var(--accent);
}
button:disabled { opacity: .35; cursor: not-allowed; }
button.danger, .btn.danger { border-color: var(--danger); color: var(--danger); }
button.danger:hover { background: var(--danger); color: #0a0a0a; }
button.ghost { border-color: transparent; }
button.ghost:hover { border-color: var(--border2); background: transparent; color: var(--fg); }

/* — inputs — */
input, select, textarea {
  font-family: var(--ff-sans);
  font-size: 13px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border2);
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color .12s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--fg3); }

/* — tables — */
table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
th {
  text-align: left; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; font-size: 10px;
  color: var(--fg3);
  padding: 12px 10px;
  border-bottom: 1px solid var(--border2);
}
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
tr:hover td { background: var(--bg3); }
td.num, th.num { font-family: var(--ff-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* — badges — */
.badge, [class*="badge"], .pill, [class*="pill"] {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  border: 1px solid var(--border2);
  border-radius: 0;
  background: transparent; color: var(--fg2);
  white-space: nowrap;
  gap: 6px;
}
.badge.online, .badge.success, .badge.live, .badge.active { border-color: var(--success); color: var(--success); }
.badge.offline, .badge.danger, .badge.error  { border-color: var(--danger);  color: var(--danger); }
.badge.warn,  .badge.pending  { border-color: var(--warn);  color: var(--warn); }
.badge.online::before, .badge.live::before, .badge.active::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px var(--success);
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* — header — */
#header, .tmiyc-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border2);
  padding: 12px 18px;
  min-height: var(--head-h);
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 50;
}
#header .logo, .tmiyc-logo {
  font-family: var(--ff-serif);
  font-size: 17px; font-weight: 600;
  color: var(--fg); text-transform: none; letter-spacing: 0;
}
#header .logo span, .tmiyc-logo span { color: var(--accent); }

/* — bottom nav (worker TMA) — */
#nav, .tmiyc-nav {
  background: var(--bg);
  border-top: 1px solid var(--border2);
  height: var(--nav-h);
  display: flex; justify-content: space-around; align-items: center;
}
#nav button, .tmiyc-nav button {
  flex: 1; height: 100%;
  background: transparent; border: 0; border-radius: 0;
  color: var(--fg3);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  padding: 0;
}
#nav button.active, .tmiyc-nav button.active {
  color: var(--accent);
  border-top: 1px solid var(--accent); margin-top: -1px;
  background: transparent;
}
#nav button:hover { color: var(--fg); background: transparent; }

/* — tabs — */
.tabs, .tmiyc-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border2);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tmiyc-tabs button {
  background: transparent; border: 0; border-radius: 0;
  padding: 14px 18px;
  color: var(--fg3);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--fg); background: transparent; border-color: transparent; }
.tabs button.active, .tmiyc-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* — stats / metric blocks — */
.metric, .tmiyc-metric {
  border: 1px solid var(--border2);
  padding: 16px 18px;
  background: var(--bg2);
}
.metric .label, .tmiyc-metric .label,
.metric > div:first-child, .tmiyc-metric > div:first-child {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--fg3); font-weight: 500; margin-bottom: 8px;
}
.metric .value, .tmiyc-metric .value,
.metric > div:nth-child(2) { font-family: var(--ff-mono); font-size: 22px; color: var(--fg); }

/* — selects (override default) — */
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%),
                    linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* — scrollbar — */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* — toast / modal overrides — */
.modal, [class*="modal"] {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 0;
}
.toast, [class*="toast"] {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 0;
  color: var(--fg);
}

/* — utility — */
.row { display: flex; gap: 14px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.spacer { flex: 1; }
.muted { color: var(--fg3); }
.serif { font-family: var(--ff-serif); }
.mono  { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

/* — spinner — */
.spinner, [class*="spinner"], [class*="loading"] {
  width: 32px; height: 32px;
  border: 1px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* — small screens — */
@media (max-width: 480px) {
  h1, .tmiyc-title { font-size: 22px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  button, .btn { padding: 10px 14px; font-size: 11px; }
  #header, .tmiyc-header { padding: 10px 14px; }
}