:root {
    --bg: #f5f6f8;
    --card: #ffffff;
    --ink: #1f2733;
    --muted: #6b7688;
    --accent: #0b6bcb;
    --border: #e2e6ec;
    --key: #0a7d3c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* Top bar ---------------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0 1.2rem;
    height: 52px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topbar nav a { color: var(--accent); text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }
.topbar .user { color: var(--muted); }
.topbar .logout { color: var(--muted); }

.container { max-width: 1100px; margin: 1.4rem auto; padding: 0 1.2rem; }
.footer { text-align: center; color: var(--muted); padding: 1.5rem; font-size: .85rem; }

/* Search + result count -------------------------------------------------- */
.searchbar { display: flex; gap: .5rem; margin-bottom: .6rem; }
.searchbar input[type=search] {
    flex: 1;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
}
.searchbar button, .import-form button, .login-card button {
    padding: .55rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: .95rem;
}
.searchbar .clear { align-self: center; color: var(--muted); text-decoration: none; }

/* Reserve fixed height so results appearing never shift the table down. */
.resultbar { height: 1.4rem; color: var(--muted); font-size: .9rem; margin-bottom: .5rem; }

/* Table ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
table.keys { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.keys th, table.keys td {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.keys thead th { background: #fafbfc; font-weight: 600; position: sticky; top: 0; }
table.keys thead a { color: var(--ink); text-decoration: none; display: block; }
table.keys thead a:hover { color: var(--accent); }
table.keys tbody tr:hover { background: #f7fafd; }
table.keys td.key { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--key); }
table.keys td.source, table.keys .col-source { color: var(--muted); font-size: .85rem; }
.col-product { width: 31%; }
.col-key { width: 24%; }
.col-type { width: 13%; }
.col-source { width: 11%; }
.col-used { width: 8%; }
.col-actions { width: 13%; }
td.empty { text-align: center; color: var(--muted); padding: 2rem; }

/* Duplicate-keys view: separate each group of identical key values. */
table.keys tbody tr.group-start td { border-top: 2px solid #c9d4e0; }

/* Filter toggle button in the search bar. */
.filter-toggle {
    align-self: center;
    padding: .5rem .8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.filter-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* "Used" column + checkbox (centered, no reflow on toggle). */
table.keys th.col-used a, table.keys th.col-actions, table.keys td.used, table.keys td.actions { text-align: center; }
.used-toggle { width: 16px; height: 16px; cursor: pointer; margin: 0; vertical-align: middle; }
/* A used key is dimmed and struck through — color/opacity only, no size change. */
table.keys tbody tr.is-used td:not(.used):not(.actions) { color: var(--muted); text-decoration: line-through; }
table.keys tbody tr.is-used td.key { color: var(--muted); }

/* Row action buttons (pencil / trash / save / cancel). */
td.actions .icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 5px;
    color: var(--muted);
    border-radius: 4px;
}
td.actions .icon:hover { background: #eef2f7; color: var(--ink); }
td.actions .btn-save   { color: var(--key); }
td.actions .btn-delete:hover, td.actions .btn-cancel:hover { color: #b02a2a; }
/* Brief green confirmation after a successful copy. */
td.actions .btn-copy.copied { color: var(--key); }

/* Inline edit inputs: fill the cell, keep the column width unchanged. */
.edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: .2rem .35rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    font: inherit;
}
table.keys tr.editing td { white-space: normal; overflow: visible; }
table.keys tr.busy { opacity: .5; pointer-events: none; }

/* Pager ------------------------------------------------------------------ */
.pager { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 1rem 0; }
.pager a { color: var(--accent); text-decoration: none; }
.pager .disabled { color: #b8c0cc; }
.pager .pageinfo { color: var(--muted); }

/* Login ------------------------------------------------------------------ */
.login-card {
    max-width: 340px;
    margin: 3rem auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.8rem;
}
.login-card h1 { margin: 0 0 1rem; font-size: 1.3rem; }
.login-card label { display: block; margin-bottom: .8rem; font-size: .9rem; color: var(--muted); }
.login-card input {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
}
.login-card button { width: 100%; margin-top: .5rem; }
.alert { background: #fdecec; color: #b02a2a; padding: .6rem .8rem; border-radius: 6px; font-size: .9rem; }

/* Import ----------------------------------------------------------------- */
.import-form { display: flex; gap: .6rem; align-items: center; margin: 1rem 0 1.4rem; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: .9rem; }
.import-results .ok { color: var(--key); }
.import-results .err { color: #b02a2a; }