@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root { --ink:#152b35; --muted:#71818a; --line:#e5ecee; --navy:#0c536e; --navy-dark:#07394e; --green:#0d9c73; --gold:#f5b844; --pale:#f5f8f7; --white:#fff; --danger:#d35454; }
* { box-sizing:border-box; } body { margin:0; background:var(--pale); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; line-height:1.45; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.login-screen { min-height:100vh; width:100%; display:grid; place-items:center; padding:1.5rem; background:linear-gradient(130deg,rgba(6,54,73,.9),rgba(9,101,100,.65)), url("assets/hero.png") center/cover; }
.login-screen.authenticated { display:block; min-height:auto; padding:0; background:var(--pale); }
.login-screen.authenticated .login-card { display:none; }
.login-card { width:min(100%,450px); padding:2.8rem; border-radius:24px; color:#f8fcfb; background:rgba(5,32,42,.82); border:1px solid rgba(255,255,255,.18); box-shadow:0 28px 70px rgba(0,0,0,.26); backdrop-filter:blur(12px); }.login-mark,.brand-mark { display:grid; place-items:center; width:48px;height:48px;border-radius:14px;background:var(--gold);color:#12333f;font-family:Manrope,sans-serif;font-weight:800; }.login-card h1 { margin:.25rem 0 .5rem;font:800 1.85rem Manrope,sans-serif; }.login-copy,.login-help { color:rgba(255,255,255,.73); }.login-help { margin:1.6rem 0 0;font-size:.81rem; }
.stack-form { display:grid; gap:1rem; margin-top:1.7rem; }.stack-form label,.form-grid>label { display:grid; gap:.42rem; font-weight:600; font-size:.86rem; }.stack-form input { border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.08); color:white; }.stack-form input::placeholder { color:rgba(255,255,255,.45); }
input,textarea,select { width:100%; border:1px solid #d9e3e5; border-radius:9px; padding:.72rem .8rem; color:var(--ink); background:#fff; outline:none; } input:focus,textarea:focus,select:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(12,83,110,.13); } textarea { resize:vertical; }.form-message { min-height:1.1rem; margin:0; color:#c94040; font-size:.84rem; }.button { display:inline-flex; gap:.55rem; align-items:center; justify-content:center; border:0; border-radius:9px; padding:.78rem 1.05rem; font-weight:700; transition:.18s ease; }.button:hover { transform:translateY(-1px); }.button-primary { color:#fff; background:var(--navy); box-shadow:0 8px 17px rgba(12,83,110,.18); }.button-gold { color:#1e3235; background:var(--gold); }.button-quiet { color:var(--navy); background:#ecf3f3; }.eyebrow { margin:0 0 .35rem; text-transform:uppercase; letter-spacing:.11em; font-size:.69rem; font-weight:800; color:var(--navy); }.eyebrow.light { color:#ffd989; } .checkbox-field { display:flex!important;align-items:center;gap:.55rem;padding:.7rem .85rem;border:1px solid #d9e3e5;border-radius:9px;background:#f8fbfb;font-weight:700!important; } .checkbox-field input { width:auto;margin:0; } .promotion-price-field[hidden] { display:none!important; }
.admin-shell { min-height:100vh; width:100%; display:grid; grid-template-columns:250px minmax(0,1fr); }.sidebar { min-height:100vh; display:flex; flex-direction:column; padding:1.55rem 1.1rem; color:#d5e4e7; background:linear-gradient(165deg,#073c52,#0a2734); position:sticky;top:0;height:100vh; }.brand { display:flex;gap:.7rem;align-items:center;color:white;text-decoration:none;margin:0 .4rem 2.5rem; }.brand-mark { width:39px;height:39px;border-radius:11px;font-size:.8rem; }.brand strong { display:block;font:800 1.05rem Manrope,sans-serif; line-height:1; }.brand small { font-size:.71rem;color:#a6c7ce; }.sidebar-label { margin:0 .65rem .5rem;text-transform:uppercase;font-size:.68rem;letter-spacing:.12em;color:#7dabb5;font-weight:700; }.admin-nav { display:grid;gap:.25rem; }.nav-item { display:flex;align-items:center;gap:.8rem;width:100%;border:0;border-radius:9px;padding:.78rem .7rem;color:#c9dce0;background:transparent;text-align:left;font-weight:600; }.nav-item span { width:1.1rem;text-align:center;color:#91c5d0; }.nav-item:hover,.nav-item.active { color:#fff;background:rgba(255,255,255,.11); }.nav-item.active span { color:var(--gold); }.nav-item b { margin-left:auto;min-width:1.3rem;padding:.1rem .35rem;border-radius:10px;text-align:center;font-size:.68rem;background:rgba(255,255,255,.15); }.sidebar-bottom { display:grid;gap:.25rem;margin-top:auto;padding:.8rem .35rem 0;border-top:1px solid rgba(255,255,255,.12); }.sidebar-bottom a,.sign-out { padding:.55rem .25rem;color:#b8d2d7;background:transparent;border:0;text-align:left;font-size:.8rem;text-decoration:none; }.sign-out { color:#ffcece; }
.main-content { width:min(100%,1440px);padding:2rem clamp(1.2rem,3.3vw,3.6rem) 3rem;margin:auto; }.topbar,.view-heading,.card-heading,.modal-heading,.modal-actions { display:flex;align-items:center;justify-content:space-between;gap:1rem; }.topbar { margin-bottom:1.7rem; }.topbar h1,.view-heading h2 { margin:0;font:800 clamp(1.5rem,2vw,2rem) Manrope,sans-serif;letter-spacing:-.04em; }.topbar-actions { display:flex;gap:.9rem;align-items:center; }.live-pill { display:flex;align-items:center;gap:.42rem;padding:.37rem .62rem;border-radius:99px;background:#e8f8f0;color:#277958;font-size:.73rem;font-weight:700; }.live-pill i { width:.42rem;height:.42rem;border-radius:50%;background:#28ad72; }.profile { width:37px;height:37px;border:0;border-radius:50%;color:#fff;background:var(--navy);font-weight:800; }.view-panel { display:none; }.view-panel.active-view { display:block; }.dashboard-intro { display:flex;align-items:center;justify-content:space-between;gap:2rem;overflow:hidden;padding:2.3rem 2.5rem;border-radius:16px;color:white;background:linear-gradient(115deg,#075872,#0b7e75);position:relative; }.dashboard-intro::after { content:"";position:absolute;right:-70px;top:-140px;width:340px;height:340px;border-radius:50%;border:55px solid rgba(255,255,255,.07); }.dashboard-intro>* { position:relative;z-index:1; }.dashboard-intro h2 { margin:.1rem 0 .55rem;font:800 clamp(1.65rem,3vw,2.5rem)/1.13 Manrope,sans-serif;letter-spacing:-.05em; }.dashboard-intro p:not(.eyebrow) { max-width:600px;margin:0;color:#d7edf0; }.metric-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.2rem 0; }.metric-card,.content-card,.table-card,.service-card,.request-card { background:white;border:1px solid var(--line);border-radius:13px;box-shadow:0 7px 21px rgba(15,58,63,.04); }.metric-card { display:flex;gap:.8rem;padding:1.15rem;align-items:center; }.metric-icon { display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:11px;font-weight:bold; }.metric-icon.blue { background:#e5f1f5;color:#147794; }.metric-icon.green { background:#e5f6ed;color:#129062; }.metric-icon.amber { background:#fff4dd;color:#ce8c15; }.metric-icon.red { background:#ffeaea;color:#ce5656; }.metric-card p,.metric-card small { margin:0;color:var(--muted);font-size:.74rem; }.metric-card strong { display:block;font:800 1.48rem Manrope,sans-serif;line-height:1.2; }.overview-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.2rem; }.content-card { padding:1.25rem; }.card-heading h2 { margin:0;font:800 1.08rem Manrope,sans-serif; }.card-heading p { margin:.15rem 0 0;color:var(--muted);font-size:.79rem; }.text-button { border:0;background:transparent;color:var(--navy);font-weight:700;font-size:.77rem; }.attention-item,.quote-item { display:flex;align-items:center;gap:.65rem;padding:.9rem 0;border-bottom:1px solid var(--line); }.attention-item:last-child,.quote-item:last-child { border:0; }.product-thumb { width:38px;height:38px;object-fit:cover;border-radius:8px;background:#eaf1f0; }.product-placeholder { display:grid;place-items:center;width:38px;height:38px;border-radius:8px;color:#4b7776;background:#e6f1ef;font-size:.84rem;font-weight:800; }.attention-copy,.quote-copy { min-width:0;flex:1; }.attention-copy strong,.quote-copy strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.83rem; }.attention-copy span,.quote-copy span { display:block;color:var(--muted);font-size:.73rem; }.mini-status,.status-badge { display:inline-flex;padding:.18rem .48rem;border-radius:99px;font-size:.67rem;font-weight:800;white-space:nowrap; }.status-in-stock { color:#19734f;background:#e6f7ef; }.status-low-stock { color:#a96805;background:#fff2d8; }.status-out-of-stock { color:#bd4545;background:#ffe7e7; }.status-new { color:#287099;background:#e4f1fa; }.status-contacted { color:#806016;background:#fff0bd; }.status-quoted { color:#5f4d9b;background:#eee8ff; }.status-closed { color:#587070;background:#e7eeee; }
.view-heading { align-items:flex-end;margin-bottom:1.25rem; }.view-heading h2 { font-size:1.7rem; }.view-heading p:not(.eyebrow) { margin:.35rem 0 0;color:var(--muted);font-size:.9rem; }.toolbar { display:flex;gap:.7rem;margin-bottom:1rem; }.search-box { display:flex;align-items:center;gap:.45rem;flex:1;max-width:490px;padding:0 .75rem;border:1px solid #d9e3e5;border-radius:9px;background:white;color:#668087; }.search-box input { border:0;padding:.72rem 0;box-shadow:none!important; }.toolbar select { width:auto;min-width:165px; }.table-card { overflow:hidden; }.table-wrap { overflow-x:auto; } table { width:100%;border-collapse:collapse;min-width:720px; } th { padding:.82rem 1rem;text-align:left;background:#f7faf9;color:#698086;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem; } td { padding:.85rem 1rem;border-top:1px solid var(--line);font-size:.82rem;vertical-align:middle; }.table-product { display:flex;align-items:center;gap:.65rem;min-width:170px; }.table-product strong { display:block; }.table-product span,.spec-cell { display:block;color:var(--muted);font-size:.73rem;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .price-note { color:var(--navy);font-size:.71rem!important;font-weight:700; }.row-menu { display:flex;gap:.35rem;justify-content:flex-end; }.small-button { border:1px solid #dbe6e7;border-radius:7px;padding:.35rem .48rem;background:white;color:var(--navy);font-weight:700;font-size:.7rem; }.small-button.delete { color:#bc4b4b; }.empty-state { margin:0;padding:2.8rem 1rem;text-align:center;color:var(--muted); }.card-empty { background:white;border:1px solid var(--line);border-radius:13px; }.services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }.service-card { padding:1.35rem;position:relative; }.service-icon { display:grid;place-items:center;width:41px;height:41px;margin-bottom:.9rem;border-radius:11px;color:var(--navy);background:#e6f2f4;font-size:1.1rem; }.service-card h3 { margin:0;font:800 1.05rem Manrope,sans-serif; }.service-card p { margin:.45rem 0 1rem;color:var(--muted);font-size:.84rem; }.service-actions { display:flex;gap:.4rem; }.requests-list { display:grid;gap:.8rem; }.request-card { padding:1.15rem 1.25rem; }.request-header { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }.request-header h3 { margin:0;font:800 1rem Manrope,sans-serif; }.request-header p,.request-meta { margin:.2rem 0 0;color:var(--muted);font-size:.78rem; }.request-message { margin:.8rem 0;color:#496068;font-size:.87rem; }.request-footer { display:flex;align-items:center;justify-content:space-between;gap:1rem; }.request-contact { color:var(--navy);font-size:.79rem;font-weight:700; }.request-footer select { width:auto;padding:.4rem .6rem;font-size:.75rem; }
.modal { width:min(720px,calc(100% - 2rem));border:0;padding:0;border-radius:15px;box-shadow:0 25px 70px rgba(0,0,0,.3); }.modal::backdrop { background:rgba(2,30,38,.55);backdrop-filter:blur(3px); }.modal-card { padding:1.5rem; }.modal-heading { margin-bottom:1.3rem; }.modal-heading h2 { margin:0;font:800 1.35rem Manrope,sans-serif; }.icon-button { display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:#eef3f3;color:var(--ink);font-size:1.35rem; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }.full-width { grid-column:1/-1; }.icon-select { display:flex!important;grid-template-columns:75px 1fr;align-items:center;gap:.5rem!important;font-size:.74rem!important;color:var(--muted);font-weight:500!important; }.icon-select input { text-align:center; }.modal-actions { justify-content:flex-end;margin-top:1.1rem; }
@media (max-width:900px) { .admin-shell { grid-template-columns:1fr; }.sidebar { position:static;height:auto;min-height:0;padding:1rem; }.brand { margin:0 0 1rem; }.sidebar-label,.sidebar-bottom { display:none; }.admin-nav { display:flex;overflow-x:auto; }.nav-item { width:auto;white-space:nowrap; }.main-content { padding:1.35rem 1rem 2rem; }.metric-grid { grid-template-columns:repeat(2,1fr); }.overview-grid,.services-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .login-card { padding:2rem 1.3rem; }.topbar,.view-heading,.dashboard-intro { align-items:flex-start;flex-direction:column; }.topbar-actions { width:100%;justify-content:space-between; }.dashboard-intro { padding:1.75rem; }.metric-grid { grid-template-columns:1fr 1fr;gap:.65rem; }.metric-card { padding:.85rem; }.metric-icon { display:none; }.toolbar { flex-direction:column; }.toolbar select { width:100%; }.form-grid { grid-template-columns:1fr; }.full-width { grid-column:auto; }.request-footer { align-items:flex-start;flex-direction:column; }.modal-card { padding:1.15rem; } }
.status-approved { color:#19734f;background:#e6f7ef; }
.status-rejected { color:#bd4545;background:#ffe7e7; }
.status-seen { color:#806016;background:#fff0bd; }
.status-replied { color:#5f4d9b;background:#eee8ff; }
.status-archived { color:#587070;background:#e7eeee; }

@media (max-width:760px) {
  .main-content { padding:1.1rem .9rem 1.5rem; }
  .topbar-actions { flex-wrap:wrap; }
  .live-pill { width:100%; justify-content:center; }
  .dashboard-intro { padding:1.65rem; border-radius:14px; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
  .toolbar { flex-direction:column; }
  .search-box, .toolbar select { max-width:none; width:100%; }
  .table-card { overflow:visible; }
  .table-wrap { overflow:visible; }
  table { display:block; width:100%; min-width:0; }
  thead { display:none; }
  tbody { display:grid; gap:.75rem; }
  tr {
    display:grid;
    gap:.65rem;
    padding:1rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 21px rgba(15,58,63,.05);
  }
  td {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    padding:0;
    border:0;
    text-align:right;
  }
  td::before {
    content:attr(data-label);
    flex:0 0 6.2rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size:.65rem;
    font-weight:800;
    text-align:left;
  }
  td[data-label="Product"] {
    display:block;
    text-align:left;
  }
  td[data-label="Product"]::before { display:block; margin-bottom:.45rem; }
  td[data-label="Product"] .table-product { min-width:0; }
  td[data-label="Actions"] .row-menu { justify-content:flex-start; }
  .row-menu { flex-wrap:wrap; }
  .request-card { padding:1rem 1.05rem; }
  .request-footer { align-items:flex-start; flex-direction:column; }
  .request-footer select { width:100%; }
}

@media (max-width:560px) {
  .login-card { padding:2rem 1.25rem; }
  .topbar, .view-heading, .dashboard-intro { align-items:flex-start; flex-direction:column; gap:.85rem; }
  .dashboard-intro .button { width:100%; }
  .metric-grid { grid-template-columns:1fr; }
  .metric-card { padding:.9rem; }
  .metric-icon { display:none; }
  .service-actions { flex-direction:column; }
  .service-actions .small-button { width:100%; }
  .form-grid { grid-template-columns:1fr; gap:.85rem; }
  .full-width { grid-column:auto; }
  .modal { width:calc(100% - 1rem); }
  .modal-card { padding:1rem; }
}