/* Urla paneller ORTAK bilesen stilleri (URLA-719): kart, KPI, tablo, rozet, dugme, form, uyari.
   Yalniz token kullanir (urla-tokens.css); panel-ozel duzen (sidebar, .main) panelde kalir. */

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    margin: 0;
}

/* ── Cards ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}

.kpi-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; }
.kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 12px; }

/* ── Table ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
    padding: 10px 16px; text-align: left;
    border-bottom: 1px solid var(--border);
}
.data-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--lime-op05); }

/* ── Badges ── */
.badge-ok  { background: rgba(161,255,0,.12); color: var(--success-text); border: 1px solid rgba(161,255,0,.25); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge-warn{ background: rgba(255,180,0,.12); color: var(--warn-text); border: 1px solid rgba(255,180,0,.25); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge-err { background: rgba(255,16,44,.12);  color: var(--danger-text); border: 1px solid rgba(255,16,44,.25); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge-muted { background: rgba(166,178,186,.10); color: var(--muted); border: 1px solid rgba(166,178,186,.2); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }

/* ── Buttons ── */
.btn-primary-custom {
    background: var(--primary); color: #000; border: none;
    border-radius: 10px; font-weight: 700; padding: 10px 22px; font-size: 14px;
    cursor: pointer; transition: opacity .15s;
}
.btn-primary-custom:hover { opacity: .88; }

.btn-ghost {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 10px; font-weight: 600; padding: 8px 16px; font-size: 13px;
    cursor: pointer; transition: all .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-text); }

/* ── Gate result box ── */
.gate-result {
    border-radius: 14px;
    padding: 24px;
    margin-top: 20px;
}
.gate-allowed { background: rgba(161,255,0,.06); border: 1px solid rgba(161,255,0,.3); }
.gate-flagged { background: rgba(255,180,0,.06); border: 1px solid rgba(255,180,0,.3); }
.gate-denied  { background: rgba(255,16,44,.06);  border: 1px solid rgba(255,16,44,.3); }

/* ── Form controls ── */
.form-control-dark {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 10px 14px; font-size: 14px; width: 100%;
    font-family: var(--font-sans);
}
.form-control-dark:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--lime-op10); }
.form-control-dark::placeholder { color: var(--muted); }

/* ── Alert ── */
.alert-banner {
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
}
.alert-success { background: rgba(161,255,0,.08); border: 1px solid rgba(161,255,0,.3); color: var(--success-text); }
.alert-danger  { background: rgba(255,16,44,.08);  border: 1px solid rgba(255,16,44,.3);  color: var(--danger-rose-text); }