/* ──────────────────────────────────────────────────────────── NNTN Theme C — Minimal Light (Shadcn/ui-inspired) Applied: 2026-04-09 | Add as LAST stylesheet in ──────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap'); /* ─── Variable overrides ─── */ :root { --green-dark: #18181b; --green: #16a34a; --yellow: #ca8a04; --orange-dark: #c2410c; --orange: #ea580c; --red-dark: #dc2626; --red: #ef4444; --red-light: #ef4444; --bg: #fafafa; --bg-loss: #fff7ed; --card: #ffffff; --border: #e5e7eb; --muted: #6b7280; --blue: #3b82f6; --blue-light: #eff6ff; --header-bg: #18181b; --text: #111827; --accent: #18181b; } /* ─── Base ─── */ body { font-family: 'Inter', 'Sarabun', sans-serif !important; background: #fafafa !important; color: #111827 !important; } /* ─── Header (dark top bar) ─── */ header { background: #18181b !important; border-bottom: 1px solid #27272a !important; box-shadow: 0 1px 0 #27272a !important; color: #fafafa !important; } header h1, header .brand h1 { color: #fafafa !important; } header p, header small, header .sub { color: #a1a1aa !important; opacity: 1 !important; } header .logo { color: #71717a !important; letter-spacing: 0.12em !important; } header .back-arrow { color: #a1a1aa !important; } header .back-arrow:hover { color: #fafafa !important; } header .back-btn { color: #a1a1aa !important; border-color: rgba(255,255,255,0.15) !important; background: transparent !important; } header .back-btn:hover { color: #fafafa !important; } /* ─── Navigation ─── */ nav { background: #ffffff !important; border-color: #e5e7eb !important; } nav a { color: #6b7280 !important; border-color: #e5e7eb !important; background: transparent !important; } nav a.active { background: #18181b !important; color: #ffffff !important; border-color: #18181b !important; } nav a:hover { color: #111827 !important; } /* ─── Surface bars ─── */ .name-section, .toolbar, .filter-bar, .top-section, .field-section, .filter-tabs, .tabs { background: #ffffff !important; border-color: #e5e7eb !important; color: #111827 !important; } .toolbar span { color: #6b7280 !important; } /* ─── Cards ─── */ .card { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; color: #111827 !important; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; } .card.active:hover { border-color: #18181b !important; } /* KPI summary cards */ .card-num { color: #111827 !important; } .card-label { color: #9ca3af !important; } .card.out { border-top-color: #ef4444 !important; } .card.order-now { border-top-color: #ea580c !important; } .card.low { border-top-color: #ca8a04 !important; } .card.ok { border-top-color: #16a34a !important; } .card.out .card-num { color: #dc2626 !important; } .card.order-now .card-num { color: #c2410c !important; } .card.low .card-num { color: #a16207 !important; } .card.ok .card-num { color: #15803d !important; } /* Hub module cards */ .card .label { color: #111827 !important; } .card .desc { color: #6b7280 !important; } /* Hub per-module accent borders */ .card-nonmeat { --accent: #16a34a; border-color: #bbf7d0 !important; } .card-meat { --accent: #18181b; border-color: #d1d5db !important; } .card-cb { --accent: #18181b; border-color: #d1d5db !important; } .card-hr { --accent: #3b82f6; border-color: #bfdbfe !important; } .badge-live { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; } .badge-soon { background: #f9fafb !important; color: #9ca3af !important; border: 1px solid #e5e7eb !important; } /* card-title, tags */ .card-title { color: #111827 !important; } .tag { background: #f3f4f6 !important; color: #374151 !important; border: none !important; } /* ─── Filter tabs ─── */ .tab { background: transparent !important; color: #6b7280 !important; border-color: transparent !important; } .tab.active { color: #111827 !important; border-bottom-color: #18181b !important; font-weight: 600 !important; background: transparent !important; } .tab:hover { color: #111827 !important; } /* Filter pills */ .filter-pill { background: #ffffff !important; color: #6b7280 !important; border-color: #e5e7eb !important; } .filter-pill.active { background: #18181b !important; color: #ffffff !important; border-color: #18181b !important; font-weight: 600 !important; } .filter-pill:hover { color: #111827 !important; border-color: #9ca3af !important; } /* ─── Group / section headers ─── */ .group-header { background: #f9fafb !important; color: #9ca3af !important; border-color: #e5e7eb !important; font-size: 0.67rem !important; font-weight: 600 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; } /* ─── Item rows ─── */ .item-row { background: #ffffff !important; border-color: #f3f4f6 !important; color: #111827 !important; } .item-row:hover { background: #f9fafb !important; } .item-name { color: #111827 !important; } .item-meta, .item-meta-2 { color: #6b7280 !important; } /* ─── Buttons ─── */ .add-btn, .save-all-btn, .save-btn, .submit-btn { background: #18181b !important; color: #ffffff !important; border-color: transparent !important; } .add-btn:hover, .save-all-btn:hover, .save-btn:hover, .submit-btn:hover { background: #27272a !important; } /* btn-primary used in hub-delivery.html */ .btn.btn-primary { background: #18181b !important; color: #ffffff !important; } .btn-edit { background: #f3f4f6 !important; color: #374151 !important; border: 1px solid #e5e7eb !important; } .btn-del { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; } .btn-ghost, .cancel-btn { background: transparent !important; color: #6b7280 !important; border-color: #e5e7eb !important; } .btn-ghost:hover { color: #111827 !important; border-color: #9ca3af !important; } .btn-outline-green { color: #16a34a !important; border-color: #bbf7d0 !important; background: #f0fdf4 !important; } .btn-outline-blue { color: #3b82f6 !important; border-color: #bfdbfe !important; background: #eff6ff !important; } .btn-danger { color: #dc2626 !important; } /* ─── Forms ─── */ input[type="text"], input[type="number"], input[type="date"], input[type="search"], select, textarea { background: #ffffff !important; border-color: #d1d5db !important; color: #111827 !important; } input::placeholder, textarea::placeholder { color: #9ca3af !important; } label { color: #374151 !important; } input:focus, select:focus, textarea:focus { border-color: #18181b !important; outline: none !important; box-shadow: 0 0 0 2px rgba(24,24,27,0.1) !important; } select option { background: #ffffff; color: #111827; } /* ─── Modals ─── */ .overlay { background: rgba(0,0,0,0.4) !important; } .modal { background: #ffffff !important; border-color: #e5e7eb !important; color: #111827 !important; } .modal h2, .modal h3, .modal h4 { color: #111827 !important; } .modal hr { border-color: #f3f4f6 !important; } /* ─── Tables ─── */ th { color: #9ca3af !important; background: #f9fafb !important; border-color: #e5e7eb !important; font-size: 0.64rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } td { color: #6b7280 !important; border-color: #f3f4f6 !important; } td.name, td:first-child { color: #111827 !important; } table { border-color: #e5e7eb !important; } /* ─── Tags / chips ─── */ .supplier-tag { background: #f0fdf4 !important; color: #15803d !important; } .cost-tag { background: #fff7ed !important; color: #c2410c !important; } /* ─── Lot chips (hub-delivery) ─── */ .lot-chip { background: #ffffff !important; border-color: #e5e7eb !important; color: #111827 !important; } .lot-chip.selected { background: #f0fdf4 !important; border-color: #16a34a !important; color: #15803d !important; } /* ─── Status chips ─── */ .chip-ok { background: #f0fdf4 !important; color: #16a34a !important; border: 1px solid #bbf7d0 !important; } .chip-warn { background: #fefce8 !important; color: #ca8a04 !important; border: 1px solid #fde68a !important; } .chip-out { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; } /* ─── Typography ─── */ h2, h3, h4 { color: #111827 !important; } .section-title, .section-label { color: #9ca3af !important; } .muted, .text-muted { color: #6b7280 !important; } hr { border-color: #f3f4f6 !important; } footer { color: #9ca3af !important; } /* ─── Scrollbar ─── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f9fafb; } ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #d1d5db; } /* ─── Focus ring ─── */ :focus-visible { outline: 2px solid rgba(24,24,27,0.4) !important; outline-offset: 2px !important; }