/* custom.css — Modern iGaming affiliate back-office skin.
   Brand COLOURS come exclusively from CSS vars injected by inc/theme.php.
   No brand colour is hard-coded here. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --ink: #1f2330;
    --ink-soft: #5b6072;
    --line: #e7e8ee;
    --card-bg: #ffffff;
    --page-bg: #f3f4f8;
}

body {
    background: var(--page-bg);
    color: var(--ink);
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-weight: 700; color: var(--ink); }
.container > h3 { margin: 18px 0 16px; font-size: 22px; }

/* --- Header (dark, subtle gradient) --- */
.ya-header {
    background: linear-gradient(135deg, var(--color-header), #2b2b33);
    color: #fff;
    padding: 16px 0;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.ya-header .brand-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.ya-header .brand-logo { height: 40px; margin-right: 12px; vertical-align: middle; }
.ya-header .brand-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    vertical-align: middle;
}
.ya-header .session-info {
    text-align: right;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    padding-top: 8px;
}
.ya-header .session-info a { color: #fff; }

/* --- Nav (brand gradient) --- */
.ya-nav {
    background: linear-gradient(to bottom, var(--color-menu), var(--color-menu-2));
    border: 0;
    border-radius: 0;
    margin-bottom: 22px;
    min-height: 46px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.ya-nav .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    padding-top: 13px;
    padding-bottom: 13px;
}
.ya-nav .navbar-nav > li > a:hover,
.ya-nav .navbar-nav > li > a:focus,
.ya-nav .navbar-nav > li.active > a {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}
.ya-nav .navbar-brand { color: #fff; font-weight: 700; }
.ya-nav .navbar-toggle .icon-bar { background: #fff; }

/* --- Cards / panels --- */
.panel {
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 23, 40, 0.05);
    background: var(--card-bg);
}
.panel-heading { font-weight: 600; border-radius: 10px 10px 0 0 !important; }
.panel-default > .panel-heading { background: #fafbfd; color: var(--ink); border-color: var(--line); }
.panel-brand > .panel-heading {
    background: var(--color-menu);
    color: #fff;
    border-color: var(--color-menu);
}
.well { background: #fafbfd; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }

/* --- Buttons / accents --- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-brand {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.btn-brand:hover, .btn-brand:focus, .btn-brand:active { filter: brightness(0.92); color: #fff; }
.btn-lg { border-radius: 10px; }
a { color: var(--color-accent); }
a:hover { filter: brightness(0.9); }

/* --- Tables (readable: clear head, zebra rows) --- */
.table { background: var(--card-bg); }
.table > thead > tr > th {
    background: #f1f2f7;
    color: var(--ink);
    border-bottom: 2px solid var(--line);
    font-weight: 600;
    white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }
.table > tbody > tr:hover { background: #f4f0f8; }
.table .total-row td { font-weight: 700; background: #f0e9f5; border-top: 2px solid var(--line); }
.table-bordered { border-radius: 8px; overflow: hidden; }

/* --- KPI / dashboard cards --- */
.kpi h3 { font-size: 28px; margin: 4px 0; }
.kpi small { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.panel-brand .panel-body h3 { color: var(--color-accent); }

/* --- Forms / validation --- */
.form-control { border-radius: 8px; border-color: var(--line); box-shadow: none; }
.form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(142, 36, 170, 0.12); }
.has-error .form-control { border-color: #d9534f; background: #fdf3f3; }
.has-error label, .field-error { color: #d9534f; }
.field-error { font-size: 12px; margin-top: 4px; }

.stars { color: var(--color-accent); letter-spacing: 1px; }
.code-box {
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    background: #20232b;
    color: #f1f1f1;
    padding: 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-all;
}
/* When .code-box is a <textarea> (copyable tracking code) */
textarea.code-box {
    display: block;
    width: 100%;
    border: 0;
    resize: vertical;
    line-height: 1.5;
}
.code-copy { margin-bottom: 14px; }
.code-copy-btn { margin-top: 8px; }
.code-copy-btn.copied { background: #5cb85c !important; border-color: #4cae4c !important; color: #fff !important; }

/* --- Login / register --- */
.login-wrap { max-width: 400px; margin: 64px auto; }
.login-wrap .panel { box-shadow: 0 10px 30px rgba(20, 23, 40, 0.1); }

.muted { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

.public-footer { margin: 48px 0; color: var(--ink-soft); font-size: 13px; }

/* --- Testimonials (public) --- */
.testimonial-card { text-align: center; height: 100%; }
.testimonial-card .t-logo { max-height: 70px; max-width: 160px; margin: 10px auto; display: block; }
.testimonial-card blockquote { border: 0; font-size: 14px; padding: 0 10px; }

@media (max-width: 767px) {
    .ya-header .session-info { text-align: left; padding-top: 10px; }
    .table { font-size: 12px; }
}