/* ============================================================ Order Manager — temă „Terracotta Soft" Redesign PUR VIZUAL (fără câmpuri / funcționalități noi). Estetică: soft, aerisită, accent terracotta cald, carduri rotunjite, neutrale calde, iconițe în pastile, whitespace. Totul condus de tokens — zero valori hardcodate în componente. ============================================================ */ :root{ /* ── Accent: terracotta cald ─────────────────────────────── */ --primary:#C65D3B; --primary-light:#D97757; --primary-hover:#A84A2E; --primary-subtle:#F5E6E0; --primary-rgb:198,93,59; /* alias retro-compat (cod existent folosește --accent*) */ --accent:var(--primary); --accent-700:var(--primary-hover); --accent-50:var(--primary-subtle); --accent-rgb:var(--primary-rgb); /* ── Neutrale calde (light mode — dominant în referință) ─── */ --bg:#F2F1EF; --surface:#FFFFFF; --surface-2:#FAF9F7; --line:#E8E6E3; --ink:#1A1A1A; --ink-2:#3A3633; --muted:#8A8580; --faint:#B8B4AF; /* element high-contrast (logo, butoane „dark", inele) */ --contrast:#1A1A1A; --on-contrast:#FFFFFF; /* ── Sidebar (deschis / crem) ────────────────────────────── */ --sidebar:#FAF9F7; --sidebar-ink:#8A8580; --sidebar-strong:#1A1A1A; /* ── Status (semantic, virat cald) ───────────────────────── */ --st-pending:#D9A441; --st-pending-bg:#FBF1DC; --st-pending-ink:#8A6314; --st-processing:#5B8DB8; --st-processing-bg:#E7EFF6; --st-processing-ink:#3C6A93; --st-shipped:#9B7EBD; --st-shipped-bg:#EFE9F5; --st-shipped-ink:#6E5191; --st-delivered:#6BA368; --st-delivered-bg:#E8F0E7; --st-delivered-ink:#437049; --st-cancelled:#C65D3B; --st-cancelled-bg:#F5E6E0; --st-cancelled-ink:#A84A2E; --st-neutral:#8A8580; --st-neutral-bg:#EFEDEA; --st-neutral-ink:#6B675F; /* ── Radius (mare = definitoriu) ─────────────────────────── */ --radius:24px; --radius-md:18px; --radius-sm:12px; --radius-pill:999px; /* ── Umbre: foarte subtile, difuze, calde ────────────────── */ --shadow-sm:0 1px 2px rgba(60,32,24,.04), 0 1px 3px rgba(60,32,24,.05); --shadow:0 8px 24px rgba(60,32,24,.06), 0 2px 8px rgba(60,32,24,.04); --shadow-lg:0 24px 50px rgba(60,32,24,.10); /* ── Tipografie ──────────────────────────────────────────── */ --font-sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-num:ui-monospace,'SF Mono','JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace; /* ── Spațiere (scară 4px) ────────────────────────────────── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; /* ── Bootstrap: semantic → cald + radius global ──────────── */ --bs-primary-rgb:198,93,59; --bs-danger:#C8463A; --bs-danger-rgb:200,70,58; --bs-warning:#D9A441; --bs-warning-rgb:217,164,65; --bs-success:#6BA368; --bs-success-rgb:107,163,104; --bs-info:#5B8DB8; --bs-info-rgb:91,141,184; --bs-border-radius:.75rem; --bs-border-radius-sm:.5rem; --bs-border-radius-lg:1rem; --bs-border-radius-xl:1.25rem; --bs-body-color:#1A1A1A; --bs-body-bg:#F2F1EF; } /* ── Dark mode (warm darks) — DORMANT ────────────────────────── Tokens pregătite, derivate coerent din brief (nu negru-rece). NU sunt activate (aplicația nu are toggle de temă — nu adăugăm funcționalitate nouă). Se activează prin doar dacă/ când se adaugă explicit un comutator. */ [data-theme="dark"]{ --bg:#1C1A18; --surface:#262321; --surface-2:#2E2A27; --line:#3A3633; --ink:#F5F3F0; --ink-2:#D8D3CD; --muted:#A8A29E; --faint:#78716C; --primary-subtle:#3A2018; --sidebar:#211E1C; --sidebar-ink:#A8A29E; --sidebar-strong:#F5F3F0; --contrast:#F5F3F0; --on-contrast:#1A1A1A; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 50px rgba(0,0,0,.5); --bs-body-color:#F5F3F0; --bs-body-bg:#1C1A18; } /* Dark — ajustări de componente (elemente cu tentă fixă în light) */ [data-theme="dark"] tr.row-overdue td{ background:#3A211B; } [data-theme="dark"] tr.row-today td{ background:#33291680; } [data-theme="dark"] .table-hover tbody tr:hover{ background:rgba(var(--primary-rgb),.12); } [data-theme="dark"] .app-sidebar a.side-link.active{ background:rgba(var(--primary-rgb),.20); color:var(--primary-light); } [data-theme="dark"] .app-sidebar a.side-link.active i{ color:var(--primary-light); } [data-theme="dark"] .badge.text-bg-light{ background:var(--surface-2)!important; color:var(--muted)!important; } [data-theme="dark"] .input-group-text{ background:var(--surface-2); color:var(--muted); } /* Hook pt. comutatorul de temă (stilul vine din .side-link / .btn-light) */ .theme-toggle{ cursor:pointer; } /* ── Bază ──────────────────────────────────────────────────── */ *{ -webkit-font-smoothing:antialiased; } body{ min-height:100vh; color:var(--ink); background: radial-gradient(1100px 620px at 100% -8%, rgba(var(--primary-rgb),.05), transparent 60%), var(--bg); background-attachment:fixed; font-family:var(--font-sans); font-variant-numeric:tabular-nums; letter-spacing:-.011em; } h1,h2,h3,h4,h5,h6,.fw-bold{ letter-spacing:-.028em; color:var(--ink); } .fw-bold,.fw-semibold{ letter-spacing:-.02em; } a{ color:var(--primary); text-decoration-thickness:1.5px; text-underline-offset:2px; } a:hover{ color:var(--primary-hover); } .text-muted{ color:var(--muted)!important; } code,.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; } code{ color:var(--primary); background:transparent; font-weight:600; font-size:.9em; } hr{ border-color:var(--line); opacity:1; } /* Accent peste Bootstrap */ .text-primary{ color:var(--primary)!important; } .bg-primary{ background-color:var(--primary)!important; } .border-primary{ border-color:var(--primary)!important; } .vr{ background-color:var(--line); opacity:1; } /* ── Butoane ───────────────────────────────────────────────── */ .btn{ font-weight:600; border-radius:var(--radius-pill); padding:.5rem 1.1rem; transition:transform .06s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .btn:active{ transform:translateY(1px); } .btn-sm{ padding:.34rem .8rem; } .btn-lg{ padding:.7rem 1.5rem; } /* Primary = terracotta, pill */ .btn-primary{ --bs-btn-bg:var(--primary); --bs-btn-border-color:transparent; --bs-btn-color:#fff; --bs-btn-hover-bg:var(--primary-hover); --bs-btn-hover-border-color:transparent; --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--primary-hover); --bs-btn-active-border-color:transparent; --bs-btn-disabled-bg:var(--primary); --bs-btn-disabled-border-color:transparent; box-shadow:0 1px 2px rgba(60,32,24,.10), 0 8px 18px rgba(var(--primary-rgb),.26); } .btn-primary:hover{ box-shadow:0 2px 4px rgba(60,32,24,.12), 0 12px 24px rgba(var(--primary-rgb),.32); } /* Dark = negru profund (contrast punctual, ex. „Receive") */ .btn-dark{ --bs-btn-bg:var(--contrast); --bs-btn-border-color:transparent; --bs-btn-color:var(--on-contrast); --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:transparent; --bs-btn-hover-color:#fff; --bs-btn-active-bg:#000; box-shadow:0 1px 2px rgba(0,0,0,.14), 0 8px 18px rgba(0,0,0,.14); } /* Ghost / light = surface + border subtil (ex. „Send") */ .btn-light{ --bs-btn-bg:var(--surface); --bs-btn-border-color:var(--line); --bs-btn-color:var(--ink); --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-border-color:var(--line); --bs-btn-hover-color:var(--ink); --bs-btn-active-bg:var(--surface-2); box-shadow:var(--shadow-sm); } .btn-outline-primary{ --bs-btn-color:var(--primary); --bs-btn-border-color:rgba(var(--primary-rgb),.35); --bs-btn-hover-bg:var(--primary); --bs-btn-hover-border-color:var(--primary); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--primary-hover); --bs-btn-active-border-color:var(--primary-hover); } .btn-outline-secondary{ --bs-btn-color:var(--ink-2); --bs-btn-border-color:var(--line); --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-border-color:var(--faint); --bs-btn-hover-color:var(--ink); --bs-btn-active-bg:var(--surface-2); } .btn-action{ padding:.34rem .58rem; font-size:.82rem; border-radius:var(--radius-sm); } /* ── Formulare ─────────────────────────────────────────────── */ .form-control,.form-select{ border-color:var(--line); border-radius:var(--radius-sm); color:var(--ink); background-color:var(--surface); } .form-control::placeholder{ color:var(--faint); } .form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 .22rem rgba(var(--primary-rgb),.16); } .form-control-color{ border-radius:var(--radius-sm); } .input-group-text{ background:var(--surface-2); border-color:var(--line); color:var(--muted); } .page-item.active .page-link{ background-color:var(--primary); border-color:var(--primary); } .page-link{ color:var(--primary); border-radius:var(--radius-sm); } /* ── Layout cu meniu pe stânga (deschis / crem) ────────────── */ .app-layout{ display:flex; align-items:stretch; min-height:100vh; } .app-main{ order:2; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .app-sidebar{ order:1; flex:0 0 256px; width:256px; background:var(--sidebar); color:var(--sidebar-ink); position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; padding:.6rem .7rem; border-right:1px solid var(--line); } .app-sidebar .brand{ display:flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:700; font-size:1.16rem; padding:1.05rem .7rem 1.25rem; letter-spacing:-.035em; } .app-sidebar .brand i{ color:var(--on-contrast); font-size:1.05rem; background:var(--contrast); width:2.1rem; height:2.1rem; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.16); } .app-sidebar .side-head{ padding:1rem .9rem .4rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.11em; color:var(--faint); font-weight:700; } .app-sidebar a.side-link{ display:flex; align-items:center; gap:.75rem; padding:.6rem .85rem; margin:.12rem 0; color:var(--sidebar-ink); text-decoration:none; font-size:.92rem; font-weight:500; border-radius:var(--radius-sm); transition:background .16s, color .16s; position:relative; } .app-sidebar a.side-link i{ font-size:1.1rem; width:1.3rem; text-align:center; color:var(--faint); transition:color .16s; } .app-sidebar a.side-link:hover{ background:var(--surface-2); color:var(--ink); } .app-sidebar a.side-link:hover i{ color:var(--ink-2); } .app-sidebar a.side-link.active{ background:var(--primary-subtle); color:var(--primary-hover); font-weight:600; } .app-sidebar a.side-link.active::before{ content:""; position:absolute; left:-.7rem; top:.45rem; bottom:.45rem; width:3px; border-radius:0 3px 3px 0; background:var(--primary); } .app-sidebar a.side-link.active i{ color:var(--primary); } .app-sidebar .side-foot{ margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; } .app-sidebar .side-foot .text-secondary{ color:var(--muted)!important; } .app-sidebar .side-link .badge{ font-size:.66rem; padding:.24em .52em; } .app-topbar{ display:none; } .sidebar-backdrop{ display:none; } @media (max-width:991px){ .app-sidebar{ position:fixed; left:0; right:auto; top:0; transform:translateX(-100%); transition:transform .24s ease; z-index:1050; box-shadow:12px 0 50px rgba(60,32,24,.18); } body.sidebar-open .app-sidebar{ transform:translateX(0); } .app-topbar{ display:flex; align-items:center; justify-content:space-between; background:var(--surface); color:var(--ink); padding:.65rem 1rem; position:sticky; top:0; z-index:1040; border-bottom:1px solid var(--line); } .app-topbar .btn-outline-light{ color:var(--ink); border-color:var(--line); } body.sidebar-open .sidebar-backdrop{ display:block; position:fixed; inset:0; background:rgba(26,26,26,.4); z-index:1045; } } /* ── Hero (greeting dashboard) — surface aerisit ───────────── */ .app-hero{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem 2rem; } .app-hero h4{ font-size:1.7rem; font-weight:700; } /* ── Carduri ───────────────────────────────────────────────── */ .card{ border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:var(--radius); background:var(--surface); transition:box-shadow .2s ease, transform .2s ease; } .card-header{ background:transparent; border-bottom:1px solid var(--line); font-weight:600; color:var(--ink); padding:1.1rem 1.5rem; font-size:1.02rem; } .card-body{ padding:1.5rem; } .card-footer{ background:transparent; border-top:1px solid var(--line); padding:1.1rem 1.5rem; } .breadcrumb a{ text-decoration:none; } .breadcrumb-item.active{ color:var(--muted); } /* Stat cards */ .stat-card{ transition:transform .18s ease, box-shadow .18s ease; } .stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } .stat-card .fs-2{ letter-spacing:-.04em; font-variant-numeric:tabular-nums; } /* Iconițe în pastile (cerc cu fundal subtil) */ .stat-icon{ width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; border-radius:var(--radius-pill); flex-shrink:0; background:color-mix(in srgb, currentColor 13%, transparent); } /* ── Tabele (soft, aerisit) ────────────────────────────────── */ .table{ --bs-table-bg:transparent; margin-bottom:0; color:var(--ink); } .table th{ font-size:.71rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:.85rem 1rem; border-bottom:1px solid var(--line); } .table td{ vertical-align:middle; padding:.9rem 1rem; border-bottom:1px solid var(--line); color:var(--ink-2); } .table thead.table-light th{ background:var(--surface-2); } .table-hover tbody tr{ transition:background .12s; } .table-hover tbody tr:hover{ background:rgba(var(--primary-rgb),.04); } .table> :not(caption)>*>*{ background-color:transparent; } /* Badges — pastile */ .badge{ font-size:.73rem; padding:.4em .75em; font-weight:600; border-radius:var(--radius-pill); letter-spacing:.005em; } .badge.text-bg-light{ background:var(--surface-2)!important; color:var(--muted)!important; } /* ── Status pills editabile (inline) — soft, warm ──────────── */ .status-sel{ border:1px solid transparent; font-weight:600; border-radius:var(--radius-pill); font-size:.74rem; padding:.32rem 1.65rem .32rem .75rem; cursor:pointer; width:auto; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A8580' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right .55rem center; background-size:10px; } .status-sel.s-noua{ background-color:var(--st-pending-bg); color:var(--st-pending-ink); } .status-sel.s-procesare{ background-color:var(--st-processing-bg); color:var(--st-processing-ink); } .status-sel.s-facut{ background-color:var(--st-shipped-bg); color:var(--st-shipped-ink); } .status-sel.s-livrata{ background-color:var(--st-delivered-bg); color:var(--st-delivered-ink); } .status-sel option{ color:var(--ink); background:var(--surface); } .status-sel.flash-ok{ box-shadow:0 0 0 .2rem rgba(107,163,104,.5); } /* Chip-uri etichete (tag picker) */ .tag-chip{ cursor:pointer; border:1.5px solid var(--c,#8A8580); color:var(--c,#8A8580); border-radius:var(--radius-pill); padding:.2rem .75rem; font-size:.78rem; font-weight:600; user-select:none; transition:background .12s,color .12s; } .tag-chip:hover{ filter:brightness(.96); } .tag-chip:has(input:checked){ background:var(--c,#8A8580); color:#fff; } .order-summary{ position:sticky; top:1rem; } /* Grid de produse din formular (add/edit): layout fix neschimbat */ #items-table{ table-layout:fixed; } #items-table input,#items-table textarea,#items-table select{ font-size:.9rem; } #items-table th,#items-table td{ padding-left:.5rem; padding-right:.5rem; } #items-table .item-currency{ padding-right:1.35rem; background-position:right .4rem center; background-size:12px; } #items-table .remove-row{ cursor:pointer; } /* Tabel produse în vizualizarea comenzii: coloane echilibrate (neschimbat) */ .order-items{ table-layout:fixed; } .order-items thead th{ letter-spacing:.03em; white-space:nowrap; } .order-items thead th:nth-child(1){ width:30%; white-space:normal; } .order-items thead th:nth-child(2){ width:12%; } .order-items thead th:nth-child(3){ width:13%; } .order-items thead th:nth-child(4){ width:13%; } .order-items thead th:nth-child(5){ width:16%; } .order-items thead th:nth-child(6){ width:16%; } .order-items thead th:nth-child(2),.order-items tbody td:nth-child(2), .order-items thead th:nth-child(4),.order-items tbody td:nth-child(4){ text-align:center; } /* Upload zone */ .upload-zone{ border:2px dashed var(--line); border-radius:var(--radius-md); padding:1.9rem; text-align:center; color:var(--muted); cursor:pointer; transition:border-color .2s, background .2s, color .2s; } .upload-zone:hover{ border-color:var(--primary); background:var(--primary-subtle); color:var(--primary-hover); } /* Alerte, rânduri evidențiate, footer */ .alert{ border:1px solid transparent; border-radius:var(--radius-md); } tr.row-overdue td{ background:#FBEDE9; } tr.row-today td{ background:#FBF3DF; } footer{ color:var(--muted); background:var(--surface-2)!important; border-color:var(--line)!important; } /* Dropdown / modale — surface cald, radius */ .dropdown-menu{ border-color:var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow); background:var(--surface); } .dropdown-item:hover,.dropdown-item:focus{ background:var(--surface-2); color:var(--ink); } .modal-content{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); background:var(--surface); } .modal-header,.modal-footer{ border-color:var(--line); } @media (max-width:768px){ .container-fluid{ padding:1.1rem; } .table-responsive{ font-size:.85rem; } .card-body{ padding:1.2rem; } .app-hero{ padding:1.3rem 1.4rem; } }