/* kris-theme.css - Design system compartilhado das páginas da plataforma
   Kris Sistemas (landing, cadastro, admin). Não é usado pelas páginas
   operacionais de cada tenant (essas mantêm o visual próprio existente). */

:root {
    --k-brand: #cc0000;
    --k-brand-dark: #a30000;
    --k-brand-light: #ff5b5b;
    --k-brand-50: #fef2f2;
    --k-bg: #f6f7fb;
    --k-bg-alt: #ffffff;
    --k-text: #0f172a;
    --k-muted: #64748b;
    --k-line: #e5e7eb;
    --k-card: #ffffff;
    --k-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --k-shadow-md: 0 12px 32px rgba(15, 23, 42, .10);
    --k-shadow-lg: 0 24px 64px rgba(15, 23, 42, .16);
    --k-radius-sm: 10px;
    --k-radius-md: 16px;
    --k-radius-lg: 24px;
    --k-dark1: #0b0f19;
    --k-dark2: #131a2b;
    --k-success: #16a34a;
    --k-warning: #d97706;
    --k-danger: #dc2626;
    --k-ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --k-bg: #0b0f19;
        --k-bg-alt: #111827;
        --k-text: #e5e7eb;
        --k-muted: #94a3b8;
        --k-line: #22293b;
        --k-card: #131a2b;
        --k-shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
        --k-shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
        --k-shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --k-bg: #0b0f19;
    --k-bg-alt: #111827;
    --k-text: #e5e7eb;
    --k-muted: #94a3b8;
    --k-line: #22293b;
    --k-card: #131a2b;
}
:root[data-theme="light"] {
    --k-bg: #f6f7fb;
    --k-bg-alt: #ffffff;
    --k-text: #0f172a;
    --k-muted: #64748b;
    --k-line: #e5e7eb;
    --k-card: #ffffff;
}

* { box-sizing: border-box; }

body.k-body {
    background: var(--k-bg);
    color: var(--k-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s var(--k-ease), color .25s var(--k-ease);
}

/* ---------- Utility layout ---------- */
.k-container { width: min(100% - 32px, 1180px); margin-inline: auto; }
.k-container-narrow { width: min(100% - 32px, 880px); margin-inline: auto; }
.k-fade-up { opacity: 0; transform: translateY(18px); animation: kFadeUp .7s var(--k-ease) forwards; }
.k-fade-up.k-delay-1 { animation-delay: .08s; }
.k-fade-up.k-delay-2 { animation-delay: .16s; }
.k-fade-up.k-delay-3 { animation-delay: .24s; }
@keyframes kFadeUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .k-fade-up { animation: none; opacity: 1; transform: none; }
}

/* ---------- Navbar ---------- */
.k-navbar {
    background: linear-gradient(145deg, var(--k-dark1), var(--k-dark2));
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.k-navbar .k-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.k-wordmark { font-weight: 900; font-size: 1.4rem; color: #fff; letter-spacing: .3px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.k-wordmark span { color: var(--k-brand-light); }
.k-wordmark img.k-logo-mark {
    width: 34px; height: 34px; border-radius: 10px;
    box-shadow: 0 4px 12px rgba(204,0,0,.5);
    display: inline-block;
}
.k-nav-actions { display: flex; gap: 10px; align-items: center; }
.k-nav-toggle { display: none; }

@media (max-width: 640px) {
    .k-nav-actions { display: none; gap: 8px; width: 100%; flex-direction: column; margin-top: 14px; }
    .k-nav-actions.k-open { display: flex; }
    .k-navbar .k-container { flex-wrap: wrap; }
    .k-nav-toggle { display: inline-flex; }
    .k-nav-actions .btn { width: 100%; text-align: center; }
}

/* ---------- Buttons ---------- */
.k-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--k-radius-sm); font-weight: 800; letter-spacing: .2px;
    padding: 13px 24px; cursor: pointer; text-decoration: none; transition: transform .18s var(--k-ease), box-shadow .18s var(--k-ease), filter .18s var(--k-ease), background-color .18s var(--k-ease);
    font-size: .95rem;
}
.k-btn:active { transform: translateY(1px); }
.k-btn-brand { background: linear-gradient(180deg, var(--k-brand), var(--k-brand-dark)); color: #fff; box-shadow: 0 10px 24px rgba(204,0,0,.35); }
.k-btn-brand:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(204,0,0,.42); color: #fff; }
.k-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.k-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateY(-2px); }
.k-btn-outline { background: transparent; color: var(--k-brand); border: 2px solid var(--k-brand); }
.k-btn-outline:hover { background: var(--k-brand-50); transform: translateY(-2px); color: var(--k-brand-dark); }
.k-btn-block { width: 100%; }
.k-btn-sm { padding: 9px 16px; font-size: .82rem; border-radius: 9px; }

/* ---------- Cards ---------- */
.k-card {
    background: var(--k-card);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-md);
    border: 1px solid var(--k-line);
    transition: box-shadow .25s var(--k-ease), transform .25s var(--k-ease), border-color .25s var(--k-ease);
}
.k-card-hover:hover { transform: translateY(-6px); box-shadow: var(--k-shadow-lg); border-color: transparent; }
.k-card-pad { padding: 28px; }

/* ---------- Forms ---------- */
.k-form-label { font-weight: 700; font-size: .82rem; letter-spacing: .2px; color: var(--k-text); margin-bottom: 6px; display: block; }
.k-input, .k-select, .form-control, .form-select {
    background: var(--k-bg-alt);
    border: 1.5px solid var(--k-line);
    color: var(--k-text);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .18s var(--k-ease), box-shadow .18s var(--k-ease), background-color .18s var(--k-ease);
}
.form-control:focus, .form-select:focus, .k-input:focus {
    border-color: var(--k-brand);
    box-shadow: 0 0 0 .22rem rgba(204,0,0,.18);
    background: var(--k-bg-alt);
    color: var(--k-text);
}
.form-control::placeholder { color: var(--k-muted); opacity: .8; }

/* ---------- Badges ---------- */
.k-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.k-badge-success { background: rgba(22,163,74,.12); color: var(--k-success); }
.k-badge-warning { background: rgba(217,119,6,.14); color: var(--k-warning); }
.k-badge-danger { background: rgba(220,38,38,.12); color: var(--k-danger); }
.k-badge-info { background: rgba(59,130,246,.12); color: #3b82f6; }
.k-badge-muted { background: rgba(100,116,139,.14); color: var(--k-muted); }

/* ---------- KPI tiles ---------- */
.k-kpi { border-radius: var(--k-radius-md); padding: 22px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--k-shadow-md); }
.k-kpi::after { content:""; position:absolute; inset:0; background: radial-gradient(120px 80px at 90% 0%, rgba(255,255,255,.25), transparent 70%); }
.k-kpi .k-kpi-label { font-size: .8rem; opacity: .9; font-weight: 600; }
.k-kpi .k-kpi-value { font-size: 1.7rem; font-weight: 900; margin-top: 4px; }
.k-kpi-pendente { background: linear-gradient(135deg, #f59e0b, #d97706); }
.k-kpi-atrasado { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.k-kpi-recebido { background: linear-gradient(135deg, #22c55e, #15803d); }

/* ---------- Responsive table -> cards ---------- */
.k-table-wrap { overflow-x: auto; }
.k-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.k-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--k-muted); padding: 10px 14px; border-bottom: 1px solid var(--k-line); }
.k-table td { padding: 14px; border-bottom: 1px solid var(--k-line); vertical-align: middle; }
.k-table tr:last-child td { border-bottom: none; }
.k-table tbody tr { transition: background-color .15s var(--k-ease); }
.k-table tbody tr:hover { background: rgba(204,0,0,.035); }

@media (max-width: 860px) {
    .k-table thead { display: none; }
    .k-table, .k-table tbody, .k-table tr, .k-table td { display: block; width: 100%; }
    .k-table tr { margin-bottom: 14px; border: 1px solid var(--k-line); border-radius: var(--k-radius-md); overflow: hidden; box-shadow: var(--k-shadow-sm); }
    .k-table td { border-bottom: 1px solid var(--k-line); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; text-align: right; }
    .k-table td:last-child { border-bottom: none; }
    .k-table td::before { content: attr(data-label); font-weight: 800; font-size: .72rem; text-transform: uppercase; color: var(--k-muted); text-align: left; }
}

/* ---------- Misc ---------- */
.k-eyebrow { font-weight: 800; font-size: .74rem; letter-spacing: .8px; text-transform: uppercase; color: var(--k-brand); }
.k-hairline { height: 1px; background: var(--k-line); border: 0; margin: 22px 0; }
.k-scale-in { animation: kScaleIn .35s var(--k-ease); }
@keyframes kScaleIn { from { opacity:0; transform: scale(.97); } to { opacity:1; transform: scale(1); } }
