/* ============================================================
   TrendWriter Dashboard — Components CSS
   مكوّنات UI مشتركة: buttons, badges, cards, tables, forms
   ============================================================ */

/* ── Status Bar ───────────────────────────────────────────────── */
.status-bar {
  display: none; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 10px 14px; border-radius: 9px; font-size: 13px;
}
.status-bar.show { display: flex; }
.status-bar.ok   { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #6ee7b7; }
.status-bar.info { background: rgba(99,102,241,.08);  border: 1px solid rgba(99,102,241,.25);  color: #a5b4fc; }
.status-bar.warn { background: rgba(245,158,11,.08);  border: 1px solid rgba(245,158,11,.25);  color: #fcd34d; }
.status-bar.err  { background: rgba(239,68,68,.08);   border: 1px solid rgba(239,68,68,.25);   color: #fca5a5; }

/* ── Cards ────────────────────────────────────────────────────── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border2); }
.card-head h3 { color: var(--tx2); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.card-head .count { color: var(--tx3); font-size: 12px; background: rgba(255,255,255,.04); padding: 2px 8px; border-radius: 999px; }
.card-head .tools { display: flex; gap: 8px; }

.form-card { background: #0a1120; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 24px; }
.form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.form-head h3 { color: var(--tx1); font-size: 15px; font-weight: 600; }
p.form-desc { color: var(--tx3); font-size: 12.5px; margin: 0 0 18px; line-height: 1.5; }

/* ── Metrics Grid ─────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.metric {
  background: linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.5));
  border: 1px solid var(--border); padding: 16px 18px; border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
}
.metric::after { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,#10b981,transparent); opacity:.6; }
.metric.purple::after { background:linear-gradient(180deg,#818cf8,transparent); }
.metric.amber::after  { background:linear-gradient(180deg,#fbbf24,transparent); }
.metric.rose::after   { background:linear-gradient(180deg,#fb7185,transparent); }
.metric.blue::after   { background:linear-gradient(180deg,#60a5fa,transparent); }
.metric .m-label { color: var(--tx3); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.metric .m-value { color: var(--tx1); font-size: 26px; font-weight: 700; font-family: 'Inter',sans-serif; letter-spacing: -.02em; }
.metric .m-sub   { font-size: 11.5px; color: #34d399; display: flex; align-items: center; gap: 4px; font-weight: 600; }
.metric .m-sub.down { color: #f87171; }

/* ── Table ────────────────────────────────────────────────────── */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  background: #1e293b; color: #94a3b8; text-transform: uppercase;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  padding: 11px 18px; text-align: right;
  border-bottom: 1px solid var(--border2);
}
table.data tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border2); color: #cbd5e1; vertical-align: middle; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
table.data tbody tr:hover { background: rgba(16,185,129,.04); }
table.data tbody tr:last-child td { border-bottom: 0; }
td.empty { text-align: center; color: var(--tx3); padding: 28px !important; font-style: italic; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-family: 'Inter',sans-serif;
}
.badge::before { content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.badge.green  { color:#34d399; background:rgba(16,185,129,.12);  } .badge.green::before  { background:#10b981; box-shadow:0 0 6px #10b981; }
.badge.amber  { color:#fbbf24; background:rgba(251,191,36,.1);  } .badge.amber::before  { background:#f59e0b; }
.badge.red    { color:#f87171; background:rgba(239,68,68,.1);   } .badge.red::before    { background:#ef4444; }
.badge.slate  { color:#94a3b8; background:rgba(148,163,184,.1); } .badge.slate::before  { background:#64748b; }
.badge.blue   { color:#93c5fd; background:rgba(59,130,246,.1);  } .badge.blue::before   { background:#3b82f6; }
.badge.purple { color:#c4b5fd; background:rgba(139,92,246,.1);  } .badge.purple::before { background:#8b5cf6; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: all .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: #10b981; color: #04130c; box-shadow: 0 0 0 1px rgba(16,185,129,.4), 0 4px 14px rgba(16,185,129,.18); }
.btn.primary:hover:not(:disabled) { background: #34d399; }
.btn.ghost  { background: transparent; color: #94a3b8; border-color: rgba(255,255,255,.08); }
.btn.ghost:hover:not(:disabled)  { background: rgba(255,255,255,.04); color: var(--tx1); }
.btn.danger { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.25); }
.btn.danger:hover:not(:disabled) { background: rgba(239,68,68,.18); }

.btn-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: transparent; border: 1px solid rgba(148,163,184,.2);
  color: #94a3b8; font: inherit; font-size: 11.5px; font-weight: 500;
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
.btn-sm:hover { background: rgba(255,255,255,.04); color: var(--tx1); }
.btn-sm.green  { color: #34d399; border-color: rgba(16,185,129,.3); }
.btn-sm.green:hover  { background: rgba(16,185,129,.1); }
.btn-sm.red    { color: #f87171; border-color: rgba(239,68,68,.25); }
.btn-sm.red:hover    { background: rgba(239,68,68,.1); }
.btn-sm.amber  { color: #fbbf24; border-color: rgba(245,158,11,.25); }
.btn-sm.amber:hover  { background: rgba(245,158,11,.1); }

.icon-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.6); border: 1px solid var(--border); border-radius: 8px;
  color: #94a3b8; cursor: pointer; transition: all .15s; font-size: 16px;
}
.icon-btn:hover { background: rgba(255,255,255,.04); color: var(--tx1); }

/* ── Form Elements ────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #cbd5e1; font-size: 12.5px; font-weight: 500; }
.field label .req { color: #f87171; }
.field .hint { color: var(--tx3); font-size: 11px; margin-top: 2px; }
.input, .select, .textarea {
  width: 100%; background: #050b18; border: 1px solid rgba(255,255,255,.08);
  color: var(--tx2); padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 13px;
  outline: 0; transition: border-color .15s, box-shadow .15s; text-align: right;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(16,185,129,.5); box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.input::placeholder, .textarea::placeholder { color: #475569; }
.input.mono { font-family: var(--font-mono); letter-spacing: .02em; text-align: left; direction: ltr; }
.textarea { min-height: 84px; resize: vertical; direction: ltr; text-align: left; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394a3b8' d='M0 0l5 6 5-6z'/></svg>"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 32px; }
.form-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border2); }
.form-foot .spacer { flex: 1; }
.form-foot .help-text { font-size: 11.5px; color: var(--tx3); }

/* ── Mono/Code ────────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); font-size: 12px; color: #94a3b8; background: rgba(255,255,255,.03); padding: 3px 8px; border-radius: 5px; letter-spacing: .02em; }
.sep { font-size: 11px; color: #334155; text-align: center; margin: 20px 0 16px; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.sep::before, .sep::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.06); }