/* ═══════════════════════════════════════════════════════════
   BT Ultimate 106 PABX – Component Database
   style.css  –  Shared stylesheet
   Aesthetic: industrial PCB / technical documentation
   Palette: deep navy, phosphor green, cream, amber accent
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --bg:           #0d1117;
    --surface:      #161b22;
    --surface2:     #1e2530;
    --border:       #2d3748;
    --border-hi:    #3a4a5c;
    --green:        #39d353;
    --green-dim:    #1a6b2a;
    --amber:        #f0a500;
    --amber-dim:    #7a5200;
    --red:          #e05252;
    --red-dim:      #6b1f1f;
    --blue:         #58a6ff;
    --text:         #c9d1d9;
    --text-dim:     #6e7681;
    --text-bright:  #f0f6fc;
    --mono:         'Share Tech Mono', monospace;
    --sans:         'Barlow', sans-serif;
    --radius:       4px;
    --shadow:       0 2px 12px rgba(0,0,0,.5);
}

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-weight: 400;
    min-height: 100vh;
    /* subtle PCB grid pattern */
    background-image:
        linear-gradient(rgba(57,211,83,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,211,83,.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

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

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
    background: var(--surface);
    border-bottom: 2px solid var(--green-dim);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,.6);
}

.site-header .logo {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--green);
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.site-header .logo span.badge {
    background: var(--green-dim);
    color: var(--green);
    font-size: .65rem;
    padding: .1rem .4rem;
    border-radius: var(--radius);
    border: 1px solid var(--green-dim);
}
.header-nav { display: flex; gap: .5rem; align-items: center; }

/* ── Wrapper ────────────────────────────────────────────────── */
.container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }

/* ── Page title ─────────────────────────────────────────────── */
.page-title {
    font-family: var(--mono);
    color: var(--green);
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
}
.page-title small {
    font-size: .7rem;
    color: var(--text-dim);
    font-family: var(--sans);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .04em;
    padding: .38rem .8rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn-primary   { background: var(--green-dim);  border-color: var(--green);     color: var(--green);      }
.btn-primary:hover { background: var(--green);  color: var(--bg); text-decoration: none; }
.btn-amber     { background: var(--amber-dim);  border-color: var(--amber);     color: var(--amber);      }
.btn-amber:hover { background: var(--amber);    color: var(--bg); text-decoration: none; }
.btn-danger    { background: var(--red-dim);    border-color: var(--red);       color: var(--red);        }
.btn-danger:hover { background: var(--red);     color: #fff; text-decoration: none; }
.btn-ghost     { background: transparent;        border-color: var(--border-hi); color: var(--text);       }
.btn-ghost:hover { border-color: var(--blue);   color: var(--blue); text-decoration: none; }
.btn-sm { padding: .2rem .55rem; font-size: .72rem; }

/* ── Flash messages ─────────────────────────────────────────── */
.flash {
    padding: .6rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-family: var(--mono);
    font-size: .82rem;
    border-left: 3px solid;
}
.flash-ok      { background: rgba(57,211,83,.1);  border-color: var(--green); color: var(--green); }
.flash-err     { background: rgba(224,82,82,.12); border-color: var(--red);   color: var(--red);   }
.flash-info    { background: rgba(88,166,255,.1); border-color: var(--blue);  color: var(--blue);  }

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}
.filter-bar label { font-size: .75rem; color: var(--text-dim); display: block; margin-bottom: .2rem; font-family: var(--mono); }
.filter-group { display: flex; flex-direction: column; }

/* ── Form controls ──────────────────────────────────────────── */
input[type=text], input[type=password], input[type=search],
select, textarea {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-bright);
    font-family: var(--mono);
    font-size: .82rem;
    padding: .4rem .65rem;
    transition: border-color .15s;
    outline: none;
}
input[type=text]:focus, input[type=password]:focus, input[type=search]:focus,
select:focus, textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(57,211,83,.15);
}
select { cursor: pointer; }
textarea { resize: vertical; }
input[type=file] {
    font-size: .8rem;
    color: var(--text-dim);
    font-family: var(--sans);
}

/* ── Component table ────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
table.comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.comp-table thead th {
    background: var(--surface2);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .55rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.comp-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.comp-table tbody tr:last-child { border-bottom: none; }
.comp-table tbody tr:hover { background: var(--surface2); }
.comp-table td {
    padding: .5rem .75rem;
    vertical-align: top;
    color: var(--text);
}
.comp-table td.ref {
    font-family: var(--mono);
    color: var(--amber);
    font-weight: 600;
    white-space: nowrap;
}
.comp-table td.type-cell {
    font-family: var(--mono);
    font-size: .78rem;
    white-space: nowrap;
}
.type-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 2px;
    font-size: .68rem;
    font-family: var(--mono);
    letter-spacing: .04em;
    border: 1px solid;
}
.t-Resistor      { background: rgba(240,165,0,.12); border-color: var(--amber-dim); color: var(--amber); }
.t-Capacitor     { background: rgba(88,166,255,.1);  border-color: #2a4a7a;          color: var(--blue);  }
.t-Diode         { background: rgba(224,82,82,.1);   border-color: var(--red-dim);    color: var(--red);   }
.t-IC            { background: rgba(57,211,83,.1);   border-color: var(--green-dim);  color: var(--green); }
.t-Transistor    { background: rgba(160,100,255,.1); border-color: #4a2080;           color: #c084fc;      }
.t-Zener\.Diode, .t-Zener-Diode { background: rgba(224,82,82,.08); border-color: var(--red-dim); color: #f87171; }
.t-other         { background: var(--surface2); border-color: var(--border); color: var(--text-dim); }

.comp-table td.actions { white-space: nowrap; }
.comp-table td.value-cell { font-family: var(--mono); }

/* ── Component detail / edit form ───────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}
.card h2 {
    font-family: var(--mono);
    font-size: .95rem;
    color: var(--green);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: .6rem;
    margin-bottom: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem 1.2rem;
}
.form-grid .full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: .25rem; }
.form-group label {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--text-dim);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.form-group .hint {
    font-size: .68rem;
    color: var(--text-dim);
    font-style: italic;
}
.form-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ── Login page ─────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.login-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 360px;
    box-shadow: var(--shadow);
}
.login-box .logo {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--green);
    letter-spacing: .06em;
    text-align: center;
    margin-bottom: 1.5rem;
}
.login-box .logo small {
    display: block;
    color: var(--text-dim);
    font-size: .7rem;
    margin-top: .25rem;
}

/* ── Public view tweaks ─────────────────────────────────────── */
.pub-header {
    background: var(--surface);
    border-bottom: 2px solid var(--amber-dim);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pub-header .logo { color: var(--amber); }
.readonly-badge {
    font-family: var(--mono);
    font-size: .65rem;
    background: var(--amber-dim);
    color: var(--amber);
    padding: .1rem .5rem;
    border-radius: var(--radius);
    border: 1px solid var(--amber-dim);
    letter-spacing: .06em;
}

/* ── Stats strip ────────────────────────────────────────────── */
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
}
.stat-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .35rem .75rem;
    font-family: var(--mono);
    font-size: .75rem;
}
.stat-chip span { color: var(--green); font-size: 1rem; font-weight: 700; margin-right: .3rem; }

/* ── Datasheet icon ─────────────────────────────────────────── */
.ds-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-family: var(--mono);
    color: var(--amber);
    border: 1px solid var(--amber-dim);
    padding: .1rem .4rem;
    border-radius: var(--radius);
}
.ds-link:hover { background: var(--amber-dim); text-decoration: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .site-header, .pub-header { flex-direction: column; align-items: flex-start; }
    .header-nav { flex-wrap: wrap; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ── Delete confirm modal ───────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 999;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
    background: var(--surface);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 0 30px rgba(224,82,82,.3);
}
.modal-box h3 { font-family: var(--mono); color: var(--red); margin-bottom: .75rem; }
.modal-box p  { font-size: .85rem; color: var(--text); margin-bottom: 1rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }