/* =====================================================================
   Findever - caly wyglad aplikacji.
   Motyw ciemny i jasny sterowane atrybutem data-theme na <html>.
   ===================================================================== */

:root {
    --bg:        #0e0e14;
    --bg-soft:   #14141d;
    --surface:   #16161f;
    --surface-2: #1c1c27;
    --line:      #26262f;
    --line-soft: #1f1f29;
    --ink:       #e8e8f0;
    --ink-soft:  #9a9aa8;
    --ink-dim:   #6b6b7a;
    --accent:    #7c6cff;
    --accent-ink:#ffffff;
    --ok:        #3fbf7f;
    --warn:      #e0a341;
    --danger:    #ef5f78;
    --info:      #4f9ef7;
    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.32);
    --sidebar:   248px;
}

[data-theme="light"] {
    --bg:        #f7f7fb;
    --bg-soft:   #ffffff;
    --surface:   #ffffff;
    --surface-2: #f2f2f7;
    --line:      #e4e4ec;
    --line-soft: #eeeef4;
    --ink:       #16161e;
    --ink-soft:  #5f5f70;
    --ink-dim:   #8a8a9a;
    --accent:    #5b46f0;
    --accent-ink:#ffffff;
    --ok:        #17925b;
    --warn:      #a86a10;
    --danger:    #cf2f4b;
    --info:      #1f6fd0;
    --shadow:    0 1px 2px rgba(16,16,30,.05), 0 12px 30px rgba(16,16,30,.07);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Uklad ------------------------------------------------------------ */

.layout { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.sidebar {
    background: var(--bg-soft);
    border-right: 1px solid var(--line);
    padding: 18px 12px;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px 18px; font-weight: 650; letter-spacing: -.02em; font-size: 17px;
}
.brand svg { width: 22px; height: 22px; color: var(--accent); }

.nav-group { margin-top: 14px; }
.nav-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-dim); padding: 0 10px 6px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--ink-soft); cursor: pointer; font-size: 14px;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--accent); color: var(--accent-ink); }
.nav-item svg { width: 17px; height: 17px; flex: none; }
.nav-badge {
    margin-left: auto; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
}

.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 26px; border-bottom: 1px solid var(--line);
    background: var(--bg-soft); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; margin: 0; letter-spacing: -.02em; }
.topbar .spacer { margin-left: auto; }

.content { padding: 24px 26px 60px; max-width: 1180px; width: 100%; }

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60;
        transform: translateX(-100%); transition: transform .18s ease;
    }
    .sidebar.open { transform: none; }
    .content { padding: 18px 16px 60px; }
    .topbar { padding: 12px 16px; }
}

.burger { display: none; }
@media (max-width: 900px) { .burger { display: inline-flex; } }

/* --- Typografia i naglowki stron -------------------------------------- */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.page-head h2 { margin: 0 0 2px; font-size: 21px; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* --- Karty ------------------------------------------------------------ */

.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-pad { padding: 18px 20px; }
.card-head {
    padding: 14px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 620; }
.card-head .spacer { margin-left: auto; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* --- Kafelki liczbowe -------------------------------------------------- */

.stat { padding: 16px 18px; }
.stat .k { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 6px; }
.stat .v { font-size: 27px; font-weight: 650; letter-spacing: -.02em; }
.stat .h { color: var(--ink-dim); font-size: 12px; margin-top: 4px; }
.stat.accent .v { color: var(--accent); }
.stat.ok .v { color: var(--ok); }
.stat.warn .v { color: var(--warn); }
.stat.danger .v { color: var(--danger); }

/* --- Przyciski --------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 550; cursor: pointer;
    white-space: nowrap;
}
.btn:hover { border-color: var(--ink-dim); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: none; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { color: var(--danger); border-color: transparent; background: none; }
.btn-danger:hover { background: rgba(239,95,120,.12); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { padding: 6px; border-radius: 8px; }

/* --- Formularze -------------------------------------------------------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field .hint { color: var(--ink-dim); font-size: 12px; margin-top: 4px; }
.field .err { color: var(--danger); font-size: 12px; margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], select, textarea {
    width: 100%; padding: 9px 11px;
    background: var(--bg); color: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font: inherit;
}
textarea { resize: vertical; min-height: 84px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--danger); }

.form-grid { display: grid; gap: 0 16px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }

/* --- Tabela ------------------------------------------------------------ */

.toolbar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; flex-wrap: wrap; }
.toolbar .search { flex: 1 1 220px; min-width: 180px; }
.toolbar .spacer { margin-left: auto; }
.toolbar select { width: auto; min-width: 130px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 16px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: middle; }
th {
    color: var(--ink-soft); font-weight: 600; font-size: 12.5px;
    white-space: nowrap; user-select: none; border-top: 0;
}
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--ink); }
th .arrow { opacity: .5; font-size: 10px; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }

.pager {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px;
}
.pager .spacer { margin-left: auto; }

/* --- Etykiety ---------------------------------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 560; white-space: nowrap;
    background: var(--surface-2); color: var(--ink-soft);
}
.badge.ok     { background: rgba(63,191,127,.16);  color: var(--ok); }
.badge.warn   { background: rgba(224,163,65,.16);  color: var(--warn); }
.badge.danger { background: rgba(239,95,120,.16);  color: var(--danger); }
.badge.info   { background: rgba(79,158,247,.16);  color: var(--info); }
.badge.accent { background: rgba(124,108,255,.18); color: var(--accent); }

.chip {
    display: inline-block; margin: 3px 4px 0 0; padding: 2px 9px;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink-soft); font-size: 12.5px;
}

/* --- Wyszukiwanie: ekran glowny --------------------------------------- */

.finder { max-width: 720px; margin: 0 auto; padding: 8vh 0 40px; }
.finder h2 { font-size: clamp(26px, 5vw, 38px); letter-spacing: -.035em; margin: 0 0 6px; }
.finder .sub { color: var(--ink-soft); margin: 0 0 26px; }

.composer textarea {
    padding: 15px 16px; font-size: 16px; min-height: 92px;
    background: var(--surface); box-shadow: var(--shadow); border-radius: var(--radius);
}
.composer .actions { display: flex; gap: 9px; margin-top: 11px; }
.composer .btn-primary { flex: 1; justify-content: center; padding: 11px; }

.examples { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 7px; }
.examples li {
    color: var(--ink-soft); font-size: 13.5px; cursor: pointer;
    padding: 8px 13px; border: 1px dashed var(--line); border-radius: 10px;
}
.examples li:hover { color: var(--ink); border-style: solid; }

/* Interpretacja AI - pokazujemy tylko to, co uzytkownik moze chciec poprawic. */
.reading { padding: 15px 18px; margin-bottom: 16px; }
.reading .engine { float: right; color: var(--ink-dim); font-size: 11.5px; }

/* --- Dopasowania ------------------------------------------------------- */

.match {
    display: grid; grid-template-columns: 58px 1fr auto; gap: 0 14px;
    align-items: start; padding: 15px 18px;
    border-top: 1px solid var(--line-soft); cursor: pointer;
}
.match:first-child { border-top: 0; }
.match:hover { background: var(--surface-2); }
.match .score { font-size: 19px; font-weight: 660; color: var(--ok); letter-spacing: -.02em; }
.match .score small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-dim); }
.match .body p { margin: 0; }
.match .why { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.match .meta { color: var(--ink-dim); font-size: 12.5px; white-space: nowrap; }

/* Rozbicie punktow - bez tego "dlaczego 73%?" jest pytaniem bez odpowiedzi. */
.breakdown { display: flex; gap: 3px; margin-top: 8px; }
.breakdown span { height: 4px; border-radius: 2px; background: var(--accent); opacity: .85; }
.breakdown span.dim { background: var(--line); }

/* --- Rozmowy ----------------------------------------------------------- */

.chat { display: grid; grid-template-columns: 280px 1fr; min-height: 60vh; }
@media (max-width: 820px) { .chat { grid-template-columns: 1fr; } }

.chat-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 70vh; }
.chat-item { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.chat-item:hover, .chat-item.active { background: var(--surface-2); }
.chat-item .t { font-size: 13.5px; }
.chat-item .p { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-body { display: flex; flex-direction: column; }
.chat-msgs { flex: 1; overflow-y: auto; max-height: 60vh; padding: 16px; display: flex;
             flex-direction: column; gap: 8px; }
.msg { max-width: 74%; padding: 8px 13px; border-radius: 14px; font-size: 14px; }
.msg.them { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me    { background: var(--accent); color: var(--accent-ink); align-self: flex-end;
             border-bottom-right-radius: 4px; }
.msg .time { display: block; font-size: 10.5px; opacity: .65; margin-top: 3px; }
.chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-form textarea { min-height: 42px; max-height: 120px; }

/* --- Stany ------------------------------------------------------------- */

.empty { text-align: center; padding: 46px 20px; color: var(--ink-soft); }
.empty svg { width: 34px; height: 34px; opacity: .35; margin-bottom: 10px; }
.empty .hint { font-size: 13px; color: var(--ink-dim); margin-top: 6px; }

.skeleton {
    height: 13px; border-radius: 6px; margin: 12px 16px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

/* --- Okna modalne ------------------------------------------------------ */

.modal-back {
    position: fixed; inset: 0; z-index: 90; padding: 20px;
    background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
    animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0 } }
.modal {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); width: 100%; max-width: 520px;
    max-height: 88vh; display: flex; flex-direction: column;
    animation: rise .16s ease;
}
@keyframes rise { from { transform: translateY(10px); opacity: 0 } }
.modal.lg { max-width: 780px; }
.modal-head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head button { margin-left: auto; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* --- Powiadomienia ----------------------------------------------------- */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: grid; gap: 8px; }
.toast {
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    padding: 11px 15px; max-width: 340px; font-size: 14px;
    animation: rise .16s ease;
}
.toast.ok    { border-left-color: var(--ok); }
.toast.error { border-left-color: var(--danger); }
.toast .t { font-weight: 600; margin-bottom: 2px; }

/* --- Logowanie --------------------------------------------------------- */

.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth .card { width: 100%; max-width: 380px; padding: 26px; }
.auth h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.02em; }
.auth .sub { color: var(--ink-soft); margin: 0 0 20px; font-size: 14px; }
.auth .switch { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }

/* --- Drobiazgi --------------------------------------------------------- */

.muted { color: var(--ink-soft); }
.dim   { color: var(--ink-dim); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-16 { margin-top: 16px; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }