@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.suppliers-page {
    --ink: #203438;
    --muted: #667b80;
    --soft: #f3f6f7;
    --line: #dce5e7;
    --green: #087f80;
    --green-dark: #066768;
    --green-soft: #e4f4f1;
    --danger: #d12930;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}
.suppliers-page p, .suppliers-page h1, .suppliers-page h2 { margin: 0; }
.suppliers-page .sidebar { width: 248px; padding: 24px; gap: 24px; overflow-y: auto; }
.suppliers-page .brand { padding: 0; color: var(--green); font-size: 19px; font-weight: 700; letter-spacing: normal; }
.supplier-organization, .supplier-user { color: var(--muted); font-size: 13px; line-height: 1.6; }
.supplier-organization p + p { margin-top: 21px; }
.suppliers-page .nav { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.suppliers-page .nav-item { min-height: 44px; margin: 0; padding: 12px; border-radius: 8px; font-weight: 400; color: var(--ink); line-height: 1.4; }
.suppliers-page .nav-item.active { color: var(--green); font-weight: 600; }
.supplier-logout { align-self: flex-start; height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--green); font-size: 14px; font-weight: 600; }
.supplier-main { display: flex; flex-direction: column; gap: 20px; margin-left: 248px; padding: 32px; }
.supplier-breadcrumbs { color: var(--muted); font-size: 13px; line-height: 20px; }
.supplier-back { color: var(--green); font-weight: 600; line-height: 21px; text-decoration: none; }
.supplier-title h1 { font-size: 28px; line-height: 42px; font-weight: 700; }
.supplier-title p { margin-top: 4px; color: var(--muted); line-height: 21px; }
#supplier-list, #supplier-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.supplier-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.organization-card h2 { font-size: 18px; font-weight: 600; line-height: 27px; }
.organization-card p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 20px; }
.supplier-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.supplier-section-heading h2 { font-size: 20px; font-weight: 600; line-height: 30px; }
.supplier-warning, .supplier-legend { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 20px; }
.supplier-warning { color: var(--danger); }
.supplier-legend { gap: 10px; color: var(--muted); }
.suppliers-page img { flex: 0 0 auto; }
.supplier-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.supplier-table-heading, .supplier-row { display: grid; grid-template-columns: minmax(180px, 32%) 1fr 40px; gap: 20px; align-items: center; }
.supplier-table-heading { padding: 16px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 18px; }
.supplier-row { padding: 20px; background: var(--surface); color: var(--ink); text-decoration: none; }
.supplier-row + .supplier-row { border-top: 1px solid var(--line); }
a.supplier-row:hover { background: #f9fcfb; }
.supplier-name { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 600; line-height: 24px; }
.supplier-row-state strong { color: var(--green); font-size: 14px; font-weight: 600; line-height: 21px; }
.supplier-row-state strong.supplier-warning { color: var(--danger); }
.supplier-row-state small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 20px; }
.supplier-arrow { color: var(--green); font-size: 20px; line-height: 30px; }
.supplier-info { padding: 16px; border-radius: 8px; background: var(--green-soft); line-height: 21px; }
.supplier-info strong { color: var(--green); font-weight: 600; }
.supplier-info p { margin-top: 4px; }
.detail-heading { min-height: 40px; padding-right: 106px; }
.supplier-badge { display: inline-flex; padding: 6px; gap: 6px; align-items: center; border-radius: 20px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.supplier-badge.incomplete { background: var(--soft); color: var(--danger); }
#supplier-fields { padding: 0; margin: 0; border: 0; min-width: 0; }
#supplier-points { display: flex; flex-direction: column; gap: 12px; }
.supplier-point { display: flex; flex-direction: column; gap: 14px; }
.supplier-point-heading { display: flex; align-items: center; gap: 16px; padding-right: 106px; }
.supplier-point-heading h2 { flex: 1; font-size: 16px; font-weight: 600; line-height: 24px; }
.supplier-inputs { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.supplier-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.supplier-inputs input { width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 400; }
.supplier-inputs input::placeholder { color: var(--muted); }
.suppliers-page :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.supplier-hint, .supplier-actions > span { color: var(--muted); font-size: 13px; line-height: 20px; }
.supplier-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.suppliers-page .primary-button, .suppliers-page .secondary-button { display: inline-flex; height: 44px; padding: 0 16px; justify-content: center; align-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: none; text-decoration: none; }
.suppliers-page .primary-button { min-width: 198px; border-color: transparent; background: var(--green); color: white; }
.suppliers-page .secondary-button { color: var(--green); }
.suppliers-page .primary-button:hover { background: var(--green-dark); }
.suppliers-page button:disabled { opacity: .6; cursor: wait; }
.suppliers-page .field-error { color: var(--danger); line-height: 21px; }
#supplier-message { color: var(--muted); line-height: 21px; }
.suppliers-page .menu-button { display: none; align-self: flex-start; margin: 0; width: auto; }
@media (max-width: 1100px) {
    .supplier-inputs { grid-template-columns: minmax(180px, 28%) 1fr; }
    .detail-heading, .supplier-point-heading { padding-right: 0; }
}
@media (max-width: 920px) {
    .supplier-main { margin-left: 0; padding: 24px; }
    .suppliers-page .menu-button { display: inline-flex; }
}
@media (max-width: 600px) {
    .supplier-main { padding: 20px 16px; }
    .supplier-title h1 { font-size: 26px; }
    .supplier-table-heading { display: none; }
    .supplier-row { grid-template-columns: 1fr 24px; gap: 12px; }
    .supplier-row-state { grid-row: 2; }
    .supplier-arrow { grid-column: 2; grid-row: 1 / 3; }
    .supplier-section-heading { align-items: flex-start; flex-wrap: wrap; }
    .supplier-point-heading { align-items: flex-start; flex-wrap: wrap; }
    .supplier-point-heading h2 { flex-basis: 100%; }
    .supplier-inputs { grid-template-columns: 1fr; gap: 14px; }
    .supplier-legend { align-items: baseline; }
    .supplier-actions > span { flex-basis: 100%; }
}