/* ===================================================================== SupplyCloud — vintage-hifi tema (Fase 3) Bootstrap 5.3 + CSS-variabler. Lys/mørk styres af data-bs-theme på . ===================================================================== */ :root{ --sc-bg:#f2ece1; --sc-surface:#fffdf9; --sc-surface-2:#ece3d5; --sc-text:#241f1a; --sc-muted:#7a6f61; --sc-border:#e0d5c3; --sc-accent:#c1762f; /* rav / dial-glow */ --sc-accent-rgb:193,118,47; --sc-accent-hover:#a9631f; --sc-teal:#1f6f78; /* VU-meter teal */ --sc-teal-rgb:31,111,120; --sc-navbar:#211c17; --sc-navbar-2:#2c251d; --sc-shadow:0 2px 4px rgba(60,45,30,.06),0 8px 24px rgba(60,45,30,.08); } [data-bs-theme="dark"]{ --sc-bg:#15120e; --sc-surface:#211b15; --sc-surface-2:#2b241b; --sc-text:#ece3d5; --sc-muted:#a89b88; --sc-border:#352c22; --sc-accent:#e0954a; --sc-accent-rgb:224,149,74; --sc-accent-hover:#eaa460; --sc-teal:#43a4ad; --sc-teal-rgb:67,164,173; --sc-navbar:#0f0d0a; --sc-navbar-2:#1a1611; --sc-shadow:0 2px 4px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.45); } /* Bind Bootstrap-farver til temaet, så eksisterende .btn-primary m.fl. følger med */ :root, [data-bs-theme]{ --bs-primary:var(--sc-accent); --bs-primary-rgb:var(--sc-accent-rgb); --bs-link-color:var(--sc-accent); --bs-link-hover-color:var(--sc-accent-hover); --bs-body-bg:var(--sc-bg); --bs-body-color:var(--sc-text); --bs-border-color:var(--sc-border); } body{ background:var(--sc-bg); color:var(--sc-text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; transition:background .3s ease,color .3s ease; } .mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;} .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;color:var(--sc-muted);} a{color:var(--sc-accent);} a:hover{color:var(--sc-accent-hover);} /* ===== Navbar ===== */ .sc-navbar{ background:linear-gradient(180deg,var(--sc-navbar-2),var(--sc-navbar)); border-bottom:2px solid rgba(var(--sc-accent-rgb),.55); box-shadow:0 2px 14px rgba(0,0,0,.35); } .sc-navbar .navbar-brand{color:#f4ede0;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem;} .sc-navbar .brand-badge{ width:34px;height:34px;border-radius:8px; background:radial-gradient(circle at 30% 30%,var(--sc-accent),#7a3f14); display:grid;place-items:center;color:#fff;box-shadow:0 0 12px rgba(var(--sc-accent-rgb),.6); font-size:1rem; } .sc-navbar .nav-link{color:#c8bfb0 !important;font-weight:500;padding:.5rem .9rem;border-radius:7px;} .sc-navbar .nav-link:hover,.sc-navbar .nav-link.active{color:#fff !important;background:rgba(var(--sc-accent-rgb),.16);} .sc-navbar .dropdown-menu{background:var(--sc-surface);border:1px solid var(--sc-border);box-shadow:var(--sc-shadow);} .sc-navbar .dropdown-item{color:var(--sc-text);} .sc-navbar .dropdown-item:hover{background:var(--sc-surface-2);color:var(--sc-accent);} .theme-toggle{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); color:#f0e7d8;width:40px;height:40px;border-radius:9px;display:grid;place-items:center;cursor:pointer; } .theme-toggle:hover{background:rgba(var(--sc-accent-rgb),.25);} .cart-count{background:var(--sc-accent) !important;} /* ===== Kort ===== */ .sc-card{ background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:14px; box-shadow:var(--sc-shadow); } .sc-card .card-head{padding:1rem 1.25rem;border-bottom:1px solid var(--sc-border);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;} .sc-card .card-head h5{margin:0;font-weight:700;font-size:1.05rem;} /* Stat-fliser */ .stat{display:flex;gap:1rem;align-items:center;padding:1.15rem 1.25rem;} .stat .ico{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;flex:none;} .stat .ico.amber{background:rgba(var(--sc-accent-rgb),.14);color:var(--sc-accent);} .stat .ico.teal{background:rgba(var(--sc-teal-rgb),.14);color:var(--sc-teal);} .stat .ico.slate{background:rgba(120,110,95,.15);color:var(--sc-muted);} .stat .num{font-size:1.9rem;font-weight:700;line-height:1;} .stat .lbl{color:var(--sc-muted);font-size:.85rem;} /* ===== Knapper ===== */ .btn-amber,.btn-primary{background:var(--sc-accent);border:none;color:#fff;font-weight:600;} .btn-amber:hover,.btn-primary:hover{background:var(--sc-accent-hover);color:#fff;} .btn-info{background:var(--sc-teal);border:none;color:#fff;font-weight:600;} .btn-info:hover{background:var(--sc-teal);filter:brightness(1.08);color:#fff;} .btn-ghost,.btn-secondary{border:1px solid var(--sc-border);color:var(--sc-text);background:transparent;font-weight:500;} .btn-ghost:hover,.btn-secondary:hover{background:var(--sc-surface-2);color:var(--sc-text);border-color:var(--sc-border);} .btn-success{background:var(--sc-teal);border:none;} .btn-success:hover{background:var(--sc-teal);filter:brightness(1.08);} /* ===== Pills/badges ===== */ .pill{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.74rem;font-weight:600;} .pill-teal{background:rgba(var(--sc-teal-rgb),.15);color:var(--sc-teal);} .pill-amber{background:rgba(var(--sc-accent-rgb),.16);color:var(--sc-accent);} .pill-muted{background:var(--sc-surface-2);color:var(--sc-muted);} /* ===== Tabeller (custom + DataTables) ===== */ .sc-table{width:100%;border-collapse:separate;border-spacing:0;} .sc-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sc-muted);padding:.6rem 1rem;border-bottom:1px solid var(--sc-border);} .sc-table td{padding:.75rem 1rem;border-bottom:1px solid var(--sc-border);vertical-align:middle;} .sc-table tr:last-child td{border-bottom:none;} .sc-table tbody tr:hover{background:var(--sc-surface-2);} .iconbtn{color:var(--sc-muted);margin:0 .3rem;text-decoration:none;} .iconbtn:hover{color:var(--sc-accent);} /* Bootstrap-tabeller + DataTables i tema */ .table{--bs-table-bg:transparent;--bs-table-color:var(--sc-text);color:var(--sc-text);border-color:var(--sc-border);} .table > :not(caption) > * > *{border-bottom-color:var(--sc-border);} .table-striped > tbody > tr:nth-of-type(odd) > *{--bs-table-accent-bg:rgba(var(--sc-accent-rgb),.04);color:var(--sc-text);} table.dataTable thead th{color:var(--sc-muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;border-bottom:1px solid var(--sc-border);} .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ background:var(--sc-surface);border:1px solid var(--sc-border);color:var(--sc-text);border-radius:8px;padding:.25rem .5rem; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{color:var(--sc-muted);} .page-link{color:var(--sc-accent);background:var(--sc-surface);border-color:var(--sc-border);} .page-item.active .page-link{background:var(--sc-accent);border-color:var(--sc-accent);color:#fff;} /* ===== Forms ===== */ .form-control,.form-select{ background:var(--sc-surface);border:1px solid var(--sc-border);color:var(--sc-text); } .form-control:focus,.form-select:focus{ background:var(--sc-surface);border-color:var(--sc-accent);color:var(--sc-text); box-shadow:0 0 0 .2rem rgba(var(--sc-accent-rgb),.2); } .form-control::placeholder{color:var(--sc-muted);} .input-group-text{background:var(--sc-surface-2);border:1px solid var(--sc-border);color:var(--sc-muted);} .form-check-input:checked{background-color:var(--sc-accent);border-color:var(--sc-accent);} label{color:var(--sc-text);} /* ===== Modaler ===== */ .modal-content{background:var(--sc-surface);border:1px solid var(--sc-border);border-radius:14px;color:var(--sc-text);} .modal-header{border-bottom:1px solid var(--sc-border);} .modal-footer{border-top:1px solid var(--sc-border);} /* ===== Alerts (behold BS-semantik, men blødere) ===== */ .alert{border-radius:12px;border:1px solid var(--sc-border);} .alert-success{background:rgba(var(--sc-teal-rgb),.12);color:var(--sc-teal);border-color:rgba(var(--sc-teal-rgb),.25);} .alert-danger{background:rgba(198,60,40,.12);color:#c33a28;border-color:rgba(198,60,40,.25);} .alert-info{background:rgba(var(--sc-accent-rgb),.12);color:var(--sc-accent);border-color:rgba(var(--sc-accent-rgb),.25);} [data-bs-theme="dark"] .alert-danger{color:#f08a76;} /* ===== Login ===== */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;} .login-card{max-width:410px;width:100%;} .code-input{letter-spacing:.7rem;font-size:1.7rem;text-align:center;} /* ===== Diverse ===== */ .section-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--sc-muted);margin:2.4rem 0 .8rem;} .main-section{margin-top:24px;} .noprint .btn{box-shadow:none;} h1,h2,h3,h4,h5{color:var(--sc-text);} .text-muted,.lbl{color:var(--sc-muted) !important;}