:root {
    --bg: #f4f8f7;
    --card: #ffffff;
    --ink: #17312b;
    --muted: #678079;
    --line: #d9e6e2;
    --emerald: #167d65;
    --emerald2: #0f5f4d;
    --soft: #e8f5f1;
    --danger: #b54747;
    --warn: #9a6a12;
    --shadow: 0 12px 35px rgba(25, 72, 61, .09);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100%;
    background: linear-gradient(180deg, #eff8f5, #f8fbfa);
    font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
}
a { color: inherit; }
code {
    background: #edf3f1;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: .92em;
}
.small { font-size: 12px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.topbar-inner {
    max-width: 1400px;
    margin: auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.brand {
    font-weight: 800;
    color: var(--emerald2);
    font-size: 18px;
}
.nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.nav a,
.btn {
    border: 0;
    border-radius: 11px;
    padding: 10px 14px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 700;
    background: var(--soft);
    color: var(--emerald2);
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--emerald); color: #fff; }
.btn.danger { background: #fdecec; color: var(--danger); }
.btn.secondary { background: #edf1f0; color: #445c56; }

.wrap { max-width: 1400px; margin: 22px auto; padding: 0 18px; }
.grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px;
}
.card h2,
.card h3 { margin: 0 0 14px; }
.muted { color: var(--muted); }
.heading-row { justify-content: space-between; align-items: flex-start; }

.scanbox {
    font-size: 24px;
    width: 100%;
    padding: 18px;
    border: 2px solid #b9d9d0;
    border-radius: 16px;
    outline: none;
}
.scanbox:focus {
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(22, 125, 101, .12);
}
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1; }
.compact-field { max-width: 150px; min-width: 110px; flex: 0 1 150px; }
.field label { font-size: 13px; font-weight: 700; color: #49635c; }
.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
}
.field textarea { min-height: 110px; }
.check-row { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.two-stats { grid-template-columns: repeat(2, 1fr); }
.stat { background: var(--soft); padding: 14px; border-radius: 14px; }
.stat b { font-size: 22px; display: block; }
.stat .stat-text,
.stat-text { font-size: 15px; line-height: 1.3; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; min-width: 650px; }
th,
td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
th { background: #f1f7f5; color: #47645c; }

.pill,
.status-chip {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.pill.active,
.status-chip.ok { background: #e5f5ed; color: #14704d; }
.pill.inactive { background: #fbeaea; color: #a23c3c; }
.status-chip.warn { background: #fff4d8; color: #895e0b; }

.notice {
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef8f5;
    border: 1px solid #cfe6df;
    margin: 10px 0;
}
.notice.error { background: #fff0f0; border-color: #f1cccc; color: #8a3030; }
.notice.warn { background: #fff8e6; border-color: #ead7a2; color: #7a5b12; }
.compact-notice { font-size: 13px; }

.label-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 330px;
    background: #eef4f2;
    border-radius: 15px;
    padding: 20px;
    overflow: auto;
}
.print-label {
    background: #fff;
    color: #000;
    border: 1px dashed #777;
    width: 50mm;
    height: 30mm;
    padding: 2mm;
    display: flex;
    gap: 2mm;
    align-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.print-label .qr {
    width: 25mm;
    height: 25mm;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.print-label .qr.placeholder {
    border: 1px dashed #aaa;
    color: #777;
    font-size: 12px;
}
.print-label .qr img,
.print-label .qr canvas { width: 100%; height: 100%; object-fit: contain; }
.print-label .info { font-size: 9pt; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; }
.print-label .title { font-weight: 800; font-size: 8pt; margin-bottom: 1mm; }

.readiness-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.readiness-item {
    border: 1px solid var(--line);
    background: #f8fbfa;
    border-radius: 14px;
    padding: 14px;
    min-height: 112px;
}
.readiness-item span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.readiness-item b { display: block; margin-top: 5px; font-size: 16px; overflow-wrap: anywhere; }
.readiness-item small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.35; }
.text-ok { color: #14704d; }
.text-warn { color: #93630d; }
.text-error { color: #a23c3c; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.tab-btn {
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-weight: 700;
}
.tab-btn.active { background: var(--emerald); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.login-shell { max-width: 430px; margin: 9vh auto; padding: 20px; }
.login-shell .card { padding: 28px; }
.footer { max-width: 1400px; margin: 30px auto; padding: 20px; color: var(--muted); text-align: center; }
.hidden { display: none !important; }
.qr-render-box { position: fixed; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; }
#printArea { display: none; }

@media (max-width: 1050px) {
    .readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .topbar-inner { align-items: flex-start; }
    .nav { width: 100%; margin-left: 0; }
    .scanbox { font-size: 20px; }
    .wrap { padding: 0 12px; }
    .card { padding: 14px; }
}

@media (max-width: 560px) {
    .readiness-grid { grid-template-columns: 1fr; }
    .label-preview { min-height: 250px; padding: 10px; justify-content: flex-start; }
    .print-label.preview-label { transform-origin: left center; }
    .btn { padding: 9px 11px; }
}

@media print {
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        background: #fff !important;
    }
    body > *:not(#printArea) { display: none !important; }
    #printArea {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        overflow: visible !important;
    }
    #printArea .print-copy {
        display: flex !important;
        box-sizing: border-box !important;
        border: 0 !important;
        margin: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        page-break-after: always !important;
        break-after: page !important;
        overflow: hidden !important;
    }
    #printArea .print-copy:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }
}

/* Emerald QR V2 enhancements */
.nav-active { background: var(--emerald) !important; color: #fff !important; }
.brand-mark { width: 46px; height: 46px; display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--emerald);color:#fff;font-size:22px;margin-bottom:14px; }
.speed-strip { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px; }
.speed-strip span { background:#f2f7f5;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:11px;color:var(--muted); }
.speed-strip b { color:var(--ink); }
.print-grid { grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); }
.action-row { align-items:flex-end; }

.admin-wrap { max-width: 1540px; }
.admin-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin-bottom:16px;border-radius:20px;background:linear-gradient(135deg,#0f5f4d,#167d65);color:#fff;box-shadow:var(--shadow); }
.admin-hero h1 { margin:5px 0 7px;font-size:30px; }
.admin-hero .muted { color:#d9f1ea;max-width:800px; }
.admin-hero .btn { background:#fff;color:var(--emerald2); }
.eyebrow { font-size:11px;letter-spacing:.18em;font-weight:900;opacity:.85; }
.admin-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-tabs { position:sticky;top:60px;z-index:15;background:rgba(244,248,247,.96);padding:10px 0;backdrop-filter:blur(8px); }
.admin-grid-2 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.form-grid { display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:12px 0 18px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(150px,1fr)); }
.toggle-grid { display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;margin:14px 0 20px; }
.toggle-card { display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#f8fbfa;cursor:pointer; }
.toggle-card input { margin-top:3px; }
.toggle-card span { display:flex;flex-direction:column;gap:3px; }
.toggle-card small { color:var(--muted);line-height:1.35; }
.section-title { margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald2); }
.designer-grid { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:18px; }
.designer-controls { min-width:0; }
.designer-preview-card { min-width:0; }
.sticky-preview { position:sticky;top:128px; }
.designer-preview-stage { min-height:360px;display:flex;align-items:center;justify-content:center;padding:18px;border-radius:16px;background:repeating-linear-gradient(45deg,#edf3f1,#edf3f1 10px,#f5f8f7 10px,#f5f8f7 20px);overflow:auto; }
.designer-actions,.profile-save-box { display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px; }
.profile-save-box { padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fbfa; }
.profile-save-box .field { min-width:240px; }
.profile-list { display:flex;flex-direction:column;gap:10px; }
.profile-card { display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff; }
.profile-card div:first-child { display:flex;flex-direction:column;gap:3px; }
.profile-card small { color:var(--muted); }
.sub-card { border:1px solid var(--line);border-radius:15px;background:#f8fbfa;padding:14px; }
.inline-profile-form { min-width:280px;flex-wrap:nowrap; }
.inline-profile-form select { min-width:150px;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff; }
.compact-table { min-width:0; }
.compact-list { margin:8px 0 0;padding-left:18px; }
.mini-kv { display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line); }
.mini-kv span { color:var(--muted); }

/* Label engine needs styles that can also be overridden inline by the designer. */
.print-label { box-sizing:border-box; }
.print-label .info { flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;overflow-wrap:anywhere; }
.print-label .info > div { white-space:normal;overflow:hidden;text-overflow:clip; }
.print-label .emp-id-line { font-weight:700; }
.print-label.layout-qr-top .qr { align-self:center; }

@media (max-width: 1150px) {
    .designer-grid,.admin-grid-2 { grid-template-columns:1fr; }
    .sticky-preview { position:static; }
    .toggle-grid { grid-template-columns:repeat(2,minmax(220px,1fr)); }
    .form-grid,.form-grid.three { grid-template-columns:repeat(2,minmax(160px,1fr)); }
    .print-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
    .admin-hero { align-items:flex-start;flex-direction:column; }
    .admin-hero h1 { font-size:24px; }
    .admin-stats { grid-template-columns:repeat(2,1fr); }
    .toggle-grid,.form-grid,.form-grid.three { grid-template-columns:1fr; }
    .designer-preview-stage { justify-content:flex-start;min-height:260px; }
    .profile-card { align-items:flex-start;flex-direction:column; }
    .inline-profile-form { min-width:220px;flex-wrap:wrap; }
}