:root {
  --bg: #f6f7f9;
  --text: #18202a;
  --muted: #667085;
  --line: #d8dee8;
  --accent: #1677ff;
  --accent-dark: #0f5ed7;
  --heart: #e11d48;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hidden { display: none !important; }
.login-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-box, .panel, .metric, .order-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.login-box { width: min(380px, 100%); padding: 24px; box-shadow: 0 12px 40px rgba(16, 24, 40, 0.08); }
h1, h2, p { margin: 0; }
h1 { font-size: 24px; }
h2 { margin-bottom: 14px; font-size: 18px; }
p, .muted { color: var(--muted); }
form, label { display: grid; gap: 8px; }
form { gap: 14px; }
label { color: var(--muted); font-size: 13px; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; color: var(--text); background: #fff; font: inherit; }
button, .primary-action { border: 0; border-radius: 8px; padding: 10px 12px; background: var(--accent); color: white; cursor: pointer; font: inherit; }
button:hover, .primary-action:hover { background: var(--accent-dark); }
button:disabled { opacity: .55; cursor: not-allowed; }
.message { min-height: 20px; color: #07835d; font-size: 13px; }
.is-uploading { opacity: .8; }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 999px; vertical-align: -2px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.supplier-picker { position: relative; }
.supplier-results { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; right: 0; display: grid; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(16,24,40,.14); }
.supplier-results button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; background: transparent; color: var(--text); text-align: left; }
.supplier-results button:hover { background: #eef6ff; }
.supplier-results span, .supplier-results p { color: var(--muted); font-size: 12px; }
.supplier-results p { padding: 10px; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.topbar p { margin-top: 4px; font-size: 14px; }
.top-actions { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.ghost-button { border: 1px solid var(--line); background: #fff; color: var(--text); }
.cutoff-banner { padding: 10px 24px; background: #fff7ed; color: #c2410c; border-bottom: 1px solid #fed7aa; font-weight: 700; }
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 20px 24px 36px; }
body[data-role="operator"] .layout, body[data-role="admin"] .layout, body[data-role="buyer"] .layout { grid-template-columns: minmax(0, 1fr); }
#sidePanel { display: grid; align-self: start; gap: 16px; }
.panel { padding: 18px; }
.admin-console { display: grid; gap: 12px; }
.eyebrow { color: #2563eb; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.admin-nav { display: flex; gap: 8px; padding: 4px; background: #eef1f6; border-radius: 8px; }
.admin-nav button { background: transparent; color: var(--muted); }
.admin-nav button.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(16,24,40,.12); font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric { display: grid; gap: 8px; padding: 14px; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { font-size: 26px; line-height: 1; }
.section-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.compact-head { align-items: center; margin-bottom: 0; }
.compact-head h2 { margin-bottom: 4px; }
.order-admin-card { padding: 14px 18px; }
.section-search { margin-top: 14px; }
.inline-form { display: grid; grid-template-columns: minmax(180px, 1fr) 110px auto; align-items: end; gap: 10px; }
.supplier-form { grid-template-columns: minmax(180px, 1fr) auto; }
.admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-form button { grid-column: 1 / -1; }
.data-list, .user-table { display: grid; gap: 8px; margin-top: 14px; }
.data-row, .table-row, .table-head { display: grid; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.data-row { grid-template-columns: minmax(0, 1fr) auto; }
.supplier-row { grid-template-columns: minmax(0, 1fr) auto; }
.data-row div { display: grid; gap: 3px; }
.data-row span, .table-head { color: var(--muted); font-size: 12px; }
.data-row b { color: #0756a5; font-size: 13px; }
.table-head, .table-row { grid-template-columns: 1fr 1fr 100px 120px; }
.table-head { background: #eef1f6; font-weight: 700; }
.user-table .table-head, .user-table .table-row { grid-template-columns: 1fr 1fr 100px 120px 90px; }
.small-danger { width: fit-content; padding: 7px 10px; border: 1px solid #fecaca; background: #fff1f2; color: #b91c1c; font-size: 12px; }
.small-danger:hover { background: #ffe4e6; }
.small-link { display: inline-grid; place-items: center; width: fit-content; min-height: 32px; padding: 7px 10px; border: 1px solid #b9cdf4; border-radius: 8px; background: #eef6ff; color: #0756a5; font-size: 12px; text-decoration: none; }
.small-link:hover { background: #dbeafe; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.content { min-width: 0; }
.filters { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 150px 140px auto; gap: 12px; margin-bottom: 14px; }
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bulk-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; }
.bulk-check input, .select-card input { width: auto; }
.view-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.view-tabs button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: #fff; color: var(--muted); }
.view-tabs button.active { border-color: #b9cdf4; background: #eef6ff; color: #0756a5; font-weight: 700; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.card { position: relative; overflow: hidden; background: #e9edf3; border-radius: 8px; aspect-ratio: 1 / 1.22; }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; background: #edf1f5; cursor: zoom-in; }
.select-card { position: absolute; z-index: 2; top: 10px; left: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(16,24,40,.16); }
.select-card input { margin: 0; accent-color: var(--accent); }
.card-overlay { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 54px 12px 12px; background: linear-gradient(to top, rgba(12,18,28,.76), rgba(12,18,28,0)); opacity: 0; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.card:hover .card-overlay, .card:focus-within .card-overlay, .card.is-selected .card-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
.supplier { color: #fff; font-weight: 700; }
.date, .submission { color: rgba(255,255,255,.88); font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.card-actions { display: grid; gap: 8px; justify-items: center; align-self: flex-end; }
.heart, .line-status, .submit-procurement, .cancel-procurement, .delete-item { display: grid; place-items: center; height: 42px; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.heart { width: 42px; min-width: 42px; padding: 0; font-size: 26px; line-height: 1; }
.heart.active { border-color: #fff; background: rgba(255,255,255,.94); color: var(--heart); }
.line-status, .submit-procurement, .cancel-procurement, .delete-item { min-width: 84px; padding: 0 12px; font-size: 13px; }
.cancel-procurement { border-color: rgba(254,202,202,.92); background: rgba(185,28,28,.74); }
.line-status.danger, .delete-item { background: rgba(185,28,28,.74); }
.line-status.table-action { min-width: auto; height: 38px; padding: 0 15px; border: 1px solid #9bc2ff; background: #fff; color: #0756a5; backdrop-filter: none; font-weight: 700; box-shadow: none; }
.line-status.table-action:hover { background: #dbeafe; }
.line-status.table-action.danger { border-color: #fecaca; background: #fff1f2; color: #b91c1c; }
.line-status.table-action.danger:hover { background: #ffe4e6; }
.line-status.table-action.cancel { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
.line-status.table-action.cancel:hover { background: #ffedd5; }
.submit-procurement.active, .submit-procurement:disabled { border-color: #bbf7d0; background: rgba(240,253,244,.96); color: #047857; cursor: default; }
.order-panel { display: grid; gap: 14px; }
.order-panel .order-filter { margin-top: -4px; }
.order-filter { display: grid; grid-template-columns: minmax(160px, 1fr) 140px 140px 140px 140px auto; gap: 10px; align-items: center; padding: 12px; }
.order-card { padding: 22px 24px 26px; box-shadow: 0 8px 24px rgba(16,24,40,.06); overflow: visible; }
.order-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; }
.order-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: #eef6ff; color: #1677ff; font-size: 15px; font-weight: 800; }
.order-head h2 { margin: 0 0 4px; font-size: 20px; }
.order-head span { color: var(--muted); font-size: 13px; }
.order-head strong { padding: 8px 14px; border-radius: 12px; background: #eef6ff; color: #0756a5; font-size: 14px; }
.order-table { position: relative; display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: visible; background: #fff; }
.order-table-head, .order-table-row { display: grid; grid-template-columns: 110px minmax(120px, 1fr) 120px minmax(240px, 1.35fr) minmax(230px, auto); align-items: center; gap: 16px; padding: 14px 16px; }
.order-table-head { background: #f3f6fa; color: var(--muted); font-size: 13px; font-weight: 800; }
.order-table-row { position: relative; z-index: 1; min-height: 96px; background: #fff; border-top: 1px solid var(--line); }
.order-table-row:hover { z-index: 8; }
.order-image-cell { position: relative; display: block; width: 74px; height: 74px; }
.order-image-cell > img { width: 74px; height: 74px; object-fit: cover; border-radius: 6px; background: #edf1f5; cursor: zoom-in; }
.order-image-pop { position: absolute; z-index: 80; top: 50%; left: 84px; display: none; width: min(400px, calc(100vw - 140px)); max-height: 506px; padding: 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(16,24,40,.26); transform: translateY(-50%); }
.order-image-pop img { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: 6px; background: #edf1f5; }
.order-image-cell:hover .order-image-pop { display: block; }
.order-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.line-status.table-action.cancel { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
.line-status.table-action.cancel:hover { background: #ffedd5; }
.line-note { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--text); font: inherit; font-size: 13px; }
.line-note:focus { outline: 2px solid rgba(22,119,255,.18); border-color: #9bc2ff; }
.status-pill { width: fit-content; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status-pill.status-purchased { background: #ecfdf3; color: #047857; }
.status-pill.status-out { background: #fff1f2; color: #dc2626; }
.status-pill.status-pending { background: #f6f7f9; color: var(--muted); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 13px; }
.preview-open { overflow: hidden; }
.image-preview { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(12,18,28,.82); backdrop-filter: blur(4px); }
.preview-close { position: fixed; top: 18px; right: 18px; z-index: 51; width: 42px; height: 42px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--text); font-size: 28px; line-height: 1; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.preview-close:hover { background: #fff; }
.preview-nav { position: fixed; top: 50%; z-index: 51; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: 46px; line-height: 1; transform: translateY(-50%); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.preview-nav:hover { background: rgba(255,255,255,.34); }
.preview-nav:disabled { display: none; }
.preview-prev { left: 24px; }
.preview-next { right: 24px; }
.preview-figure { display: grid; gap: 8px; max-width: min(1100px, 96vw); max-height: 92vh; margin: 0; }
.preview-figure img { max-width: 100%; max-height: calc(92vh - 88px); object-fit: contain; border-radius: 8px; background: #edf1f5; box-shadow: 0 18px 60px rgba(0,0,0,.36); }
.preview-figure figcaption { color: rgba(255,255,255,.9); text-align: center; font-size: 14px; }
.preview-actions { display: flex; justify-content: center; align-items: center; gap: 12px; }
.preview-heart, .preview-submit, .preview-cancel { display: grid; place-items: center; min-height: 44px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.preview-heart { width: 44px; padding: 0; color: #fff; font-size: 28px; line-height: 1; }
.preview-heart.active { border-color: #fff; background: rgba(255,255,255,.96); color: var(--heart); }
.preview-submit, .preview-cancel { min-width: 116px; padding: 0 18px; font-size: 14px; font-weight: 700; }
.preview-submit.active, .preview-submit:disabled { border-color: #bbf7d0; background: rgba(240,253,244,.96); color: #047857; }
.preview-cancel { border-color: #fecaca; background: #fff1f2; color: #b91c1c; }
.empty { margin-top: 40px; padding: 32px; text-align: center; color: var(--muted); }
.empty.compact { margin-top: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.public-upload-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--bg); }
.public-upload-box { width: min(460px, 100%); padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 18px 60px rgba(16,24,40,.10); }
.public-upload-box h1 { margin: 6px 0 8px; font-size: 24px; }
.public-upload-box p { margin-bottom: 18px; }
.public-upload-box form { margin-top: 22px; }
.public-upload-box button { min-height: 44px; }
@media (max-width: 1100px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .topbar, .layout { padding-left: 14px; padding-right: 14px; } .topbar { align-items: stretch; flex-direction: column; } .layout, .filters, .inline-form, .admin-form, .metric-grid, .table-head, .table-row, .order-filter, .order-table-head, .order-table-row { grid-template-columns: 1fr; } .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) { .card-overlay { opacity: 1; transform: none; pointer-events: auto; } }
@media (max-width: 460px) { .gallery { grid-template-columns: 1fr; } }