/* ========================================================= Jewel Luxury UI — Production-ready Base (Light + Dark) Typography: Poppins File: /public/assets/css/ui.css ========================================================= */ /* Fonts (prefer importing in , but safe fallback) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root{ --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Brand (luxury gold) */ --gold: #C9A24D; --gold-2: #E7D08A; --gold-3: #8E6B22; /* Soft tokens (used in modules) */ --goldSoft: #F3E2B8; --champagne: #FAF6EE; --shadow-soft: 0 10px 18px rgba(0,0,0,.06); --shadow-3: 0 22px 70px rgba(0,0,0,.18); --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 100%); /* Light theme */ --bg: #FCFBF8; --surface: #FFFFFF; --surface-2: #FAF6EE; --text: #141414; --muted: #666666; --border: rgba(20,20,20,.10); --shadow: 0 16px 40px rgba(10,10,10,.10); --shadow-2: 0 10px 24px rgba(10,10,10,.08); --radius: 16px; --radius-sm: 12px; --container: 1200px; /* Smooth */ --ease: cubic-bezier(.2,.8,.2,1); /* Gradients */ --grad-hero: radial-gradient(900px 500px at 20% 10%, rgba(201,162,77,.20), transparent 60%), radial-gradient(800px 420px at 80% 20%, rgba(231,208,138,.18), transparent 55%), linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 100%); --grad-gold: linear-gradient(90deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-3) 100%); } /* Dark theme tokens */ :root[data-theme="dark"]{ --bg: #0B0B0D; --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.09); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.62); --border: rgba(255,255,255,.14); --shadow: 0 18px 55px rgba(0,0,0,.55); --shadow-2: 0 12px 30px rgba(0,0,0,.45); --grad-hero: radial-gradient(900px 500px at 20% 10%, rgba(201,162,77,.18), transparent 60%), radial-gradient(800px 420px at 80% 20%, rgba(231,208,138,.10), transparent 55%), linear-gradient(180deg, #0F0F12 0%, #0B0B0D 100%); } /* Prefer system theme if user hasn't chosen */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --bg: #0B0B0D; --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.09); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.62); --border: rgba(255,255,255,.14); --shadow: 0 18px 55px rgba(0,0,0,.55); --shadow-2: 0 12px 30px rgba(0,0,0,.45); --grad-hero: radial-gradient(900px 500px at 20% 10%, rgba(201,162,77,.18), transparent 60%), radial-gradient(800px 420px at 80% 20%, rgba(231,208,138,.10), transparent 55%), linear-gradient(180deg, #0F0F12 0%, #0B0B0D 100%); } } /* Reset */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } button,input,select,textarea{ font: inherit; } :focus-visible{ outline: 3px solid rgba(201,162,77,.45); outline-offset: 2px; } /* Layout */ .container{ width: min(100% - 32px, var(--container)); margin-inline: auto; } .page{ min-height: 100vh; background: var(--grad-hero); } .section{ padding: 22px 0; } @media (min-width: 900px){ .section{ padding: 28px 0; } } /* Topbar */ .topbar{ position: sticky; top:0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in oklab, var(--surface), transparent 35%); border-bottom: 1px solid var(--border); } .topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 12px; } .brand{ display:flex; align-items:center; gap: 10px; min-width: 180px; } .brand__mark{ width: 34px; height: 34px; border-radius: 10px; background: var(--grad-gold); box-shadow: 0 10px 22px rgba(201,162,77,.28); } .brand__text{ display:flex; flex-direction:column; line-height:1.1; } .brand__title{ font-weight: 600; letter-spacing: .2px; } .brand__sub{ font-size: 12px; color: var(--muted); } /* Controls */ .row{ display:flex; align-items:center; gap: 10px; } .icon-btn{ width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 10%); box-shadow: var(--shadow-2); display:grid; place-items:center; cursor:pointer; transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .icon-btn:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--gold), var(--border) 70%); } .icon{ width: 18px; height: 18px; opacity:.9; } /* Cards */ .card{ border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklab, var(--surface), transparent 0%); box-shadow: var(--shadow); } .card--soft{ background: color-mix(in oklab, var(--surface-2), transparent 0%); } /* Headings */ .h1{ font-size: clamp(22px, 2.2vw, 30px); font-weight: 650; letter-spacing: .2px; margin: 0; } .h2{ font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; margin: 0; } .meta{ margin-top: 6px; font-size: 13px; color: var(--muted); } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); cursor:pointer; transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); user-select:none; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0px); } .btn-primary{ border-color: color-mix(in oklab, var(--gold), var(--border) 55%); background: var(--grad-gold); color: #1a1206; font-weight: 600; box-shadow: 0 18px 40px rgba(201,162,77,.22); } :root[data-theme="dark"] .btn-primary{ color:#0B0B0D; } .btn-ghost{ background: color-mix(in oklab, var(--surface), transparent 12%); } .btn-danger{ background: rgba(255,70,70,.10); border-color: rgba(255,70,70,.25); } /* Forms */ .field{ display:flex; flex-direction:column; gap:6px; } .label{ font-size: 13px; color: var(--muted); } .input, .select, .textarea{ border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); color: var(--text); border-radius: 12px; padding: 11px 12px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .input:focus, .select:focus, .textarea:focus{ outline: none; border-color: color-mix(in oklab, var(--gold), var(--border) 55%); box-shadow: 0 0 0 4px rgba(201,162,77,.18); } .helper{ font-size: 12px; color: var(--muted); } /* Grid helpers */ .grid{ display:grid; gap: 14px; } .grid-2{ grid-template-columns: 1fr; } .grid-3{ grid-template-columns: 1fr; } @media (min-width: 900px){ .grid-2{ grid-template-columns: 1.2fr .8fr; } .grid-3{ grid-template-columns: repeat(3, 1fr); } } /* Toast */ .toast-wrap{ position: fixed; right: 16px; bottom: 16px; z-index: 100; display:flex; flex-direction:column; gap: 10px; } .toast{ width: min(360px, calc(100vw - 32px)); border-radius: 14px; padding: 12px 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); box-shadow: var(--shadow); display:flex; gap: 10px; } .toast__dot{ width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--gold); } .toast__title{ font-weight: 600; font-size: 14px; margin:0; } .toast__text{ font-size: 13px; color: var(--muted); margin:2px 0 0; } .toast__x{ margin-left:auto; background: transparent; border:0; cursor:pointer; opacity:.75; } .toast__x:hover{ opacity:1; } /* Nice table base (we’ll refine per page) */ .table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius: 14px; border:1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); } .table th, .table td{ padding: 12px 12px; border-bottom: 1px solid var(--border); text-align:left; font-size: 14px; } .table th{ font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .10em; } .table tr:last-child td{ border-bottom:0; } /* Utility */ .hide-mobile{ display:none; } @media (min-width: 900px){ .hide-mobile{ display:block; } } /* ========================================================= APP SHELL + SIDEBAR + TOPBAR (append to ui.css) ========================================================= */ .app-shell{ display:grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .app-main{ min-width: 0; } .page-wrap{ padding: 18px 0 30px; } .topbar-app{ position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in oklab, var(--surface), transparent 35%); border-bottom: 1px solid var(--border); } .topbar-app__inner{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 0; } .topbar-left, .topbar-right{ display:flex; align-items:center; gap: 12px; } .user-pill{ display:flex; align-items:center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 8%); box-shadow: var(--shadow-2); } .user-pill__dot{ width: 10px; height: 10px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,77,.18); } .user-pill__name{ font-size: 13px; font-weight: 600; line-height: 1.1; } .user-pill__role{ font-size: 12px; color: var(--muted); line-height: 1.1; margin-top: 2px; } /* Sidebar */ .sidebar{ position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); display:flex; flex-direction:column; z-index: 70; } .sidebar__head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 14px; border-bottom: 1px solid var(--border); } .brand-mini{ display:flex; align-items:center; gap: 10px; } .brand-mini__mark{ width: 34px; height: 34px; border-radius: 12px; background: var(--grad-gold); box-shadow: 0 12px 26px rgba(201,162,77,.22); } .brand-mini__title{ font-weight: 650; letter-spacing: .2px; } .brand-mini__sub{ font-size: 12px; color: var(--muted); margin-top: 2px; } .sidebar-close{ display:none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 10%); cursor:pointer; } .nav{ padding: 10px; display:flex; flex-direction:column; gap: 6px; overflow:auto; } .nav__link{ display:flex; align-items:center; gap: 10px; padding: 10px 10px; border-radius: 14px; border: 1px solid transparent; color: var(--text); transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); } .nav__link:hover{ background: color-mix(in oklab, var(--surface-2), transparent 0%); border-color: var(--border); transform: translateY(-1px); } .nav__link.is-active{ background: color-mix(in oklab, var(--gold), transparent 90%); border-color: color-mix(in oklab, var(--gold), var(--border) 70%); } .nav__icon{ width: 26px; height: 26px; border-radius: 12px; display:grid; place-items:center; background: color-mix(in oklab, var(--surface-2), transparent 0%); border: 1px solid var(--border); font-size: 13px; } .nav__sep{ margin: 8px 4px; height: 1px; background: var(--border); } .nav-logout__btn{ width:100%; justify-content:center; } /* Mobile drawer */ .mobile-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); z-index: 65; } @media (max-width: 980px){ .app-shell{ grid-template-columns: 1fr; } .sidebar{ position: fixed; left: 0; top: 0; width: 300px; max-width: calc(100vw - 40px); transform: translateX(-110%); transition: transform .2s var(--ease); box-shadow: var(--shadow); } .sidebar-close{ display:inline-grid; place-items:center; } body.sidebar-open .sidebar{ transform: translateX(0); } body.sidebar-open .mobile-overlay{ opacity: 1; pointer-events: auto; } .page-wrap{ padding-top: 16px; } } /* ========================================================= FOOTER (append to ui.css) ========================================================= */ /* ========================================= FOOTER — Desktop + Mobile ========================================= */ .footer{ border-top: 1px solid var(--border); background: #fff; } .footer__inner{ padding: 14px 0; } .footer__center{ display:flex; justify-content:center; align-items:center; text-align:center; } .footer__credit{ font-size: 12px; color: var(--muted); letter-spacing: .2px; line-height: 1.4; } .footer__credit strong{ color: var(--text); font-weight: 700; } /* ---------- Mobile refinement ---------- */ /* ========================================================= DASHBOARD (append to ui.css) ========================================================= */ .sp-14{ height: 14px; } .block{ } .block__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; margin-bottom: 10px; } .block__head--split{ align-items:center; } .block__actions{ display:flex; gap: 10px; } .dash-head{ overflow:hidden; position:relative; } .dash-head::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(600px 240px at 20% 20%, rgba(201,162,77,.20), transparent 55%), radial-gradient(560px 240px at 80% 30%, rgba(231,208,138,.14), transparent 55%); pointer-events:none; } .dash-head__inner{ position:relative; padding: 16px; display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; } .dash-kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .dash-title{ margin: 6px 0 0; font-size: clamp(20px, 2.3vw, 30px); font-weight: 650; } .dash-meta{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 8px; } .dash-head__right{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; } /* Chips / Pills */ .chip{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 10%); font-size: 12px; color: var(--text); } .chip-gold{ border-color: color-mix(in oklab, var(--gold), var(--border) 65%); background: color-mix(in oklab, var(--gold), transparent 90%); } /* Quick actions */ .quick-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 900px){ .quick-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .quick-card{ position:relative; padding: 14px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); box-shadow: var(--shadow-2); transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); overflow:hidden; } .quick-card::after{ content:""; position:absolute; inset:-2px; background: radial-gradient(420px 160px at 20% 20%, rgba(201,162,77,.16), transparent 55%); opacity:.9; pointer-events:none; } .quick-card:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--gold), var(--border) 70%); } .quick-card__label{ position:relative; font-weight: 600; } .quick-card__hint{ position:relative; margin-top: 8px; font-size: 12px; color: var(--muted); } /* KPIs */ .kpi-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 900px){ .kpi-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px){ .kpi-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); } } .kpi-card{ border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklab, var(--surface), transparent 0%); box-shadow: var(--shadow-2); padding: 14px; position:relative; overflow:hidden; } .kpi-card::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(520px 220px at 20% 20%, rgba(201,162,77,.14), transparent 55%); opacity:.75; pointer-events:none; } .kpi-card__top{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .kpi-card__label{ font-size: 12px; color: var(--muted); letter-spacing: .02em; } .kpi-card__value{ position:relative; margin-top: 10px; font-size: 26px; font-weight: 700; } .kpi-card__hint{ position:relative; margin-top: 4px; font-size: 12px; color: var(--muted); } /* Orders */ .orders-cards{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 900px){ .orders-cards{ display:none; } } .table-card{ display:none; } @media (min-width: 900px){ .table-card{ display:block; } } .order-item{ padding: 14px; } .order-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .order-item__code{ font-weight: 650; letter-spacing: .2px; } .order-item__date{ margin-top: 3px; font-size: 12px; color: var(--muted); } .order-item__mid{ margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; } .order-item__row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .order-item__key{ font-size: 12px; color: var(--muted); } .order-item__val{ font-size: 13px; font-weight: 600; } .order-item__actions{ margin-top: 12px; display:flex; justify-content:flex-end; } .table-scroll{ overflow:auto; border-radius: var(--radius); } .mono{ font-variant-numeric: tabular-nums; } /* Empty state */ .empty{ padding: 18px; } .empty__title{ font-weight: 650; font-size: 16px; } .empty__text{ margin-top: 6px; font-size: 13px; color: var(--muted); } .empty__actions{ margin-top: 12px; } @media (max-width: 900px){ .dash-head__inner{ flex-direction:column; } .dash-head__right{ width:100%; } .dash-head__right .btn{ flex:1; } } /* ========================================================= PAGE HEAD + FORM SHELL (append to ui.css) ========================================================= */ .page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; margin-bottom: 12px; } .page-head__right{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; } .page-kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } /* Alerts (if you don't already have them) */ .alert{ border-radius: var(--radius); border: 1px solid var(--border); padding: 12px 14px; margin: 12px 0; background: color-mix(in oklab, var(--surface-2), transparent 0%); box-shadow: var(--shadow-2); } .alert-danger{ border-color: rgba(255,70,70,.28); background: rgba(255,70,70,.08); } .alert__title{ font-weight: 650; margin-bottom: 4px; } .alert__text{ color: var(--muted); font-size: 13px; } /* Form shell */ .form-shell{ padding: 16px; } .form-shell__top{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .form{ display:flex; flex-direction:column; gap: 12px; } /* Responsive 2-col grid that collapses on mobile */ .form-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 900px){ .form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Required star */ .req{ color: color-mix(in oklab, var(--gold), #ff3b3b 30%); font-weight: 700; } /* Action row */ .form-actions{ display:flex; gap: 10px; justify-content:flex-end; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--border); } @media (max-width: 720px){ .page-head{ align-items:flex-start; flex-direction:column; } .page-head__right{ width:100%; } .page-head__right .btn{ flex:1; } .form-actions{ justify-content:stretch; } .form-actions .btn{ flex:1; } } /* ========================================================= BRANCHES LIST (append to ui.css) ========================================================= */ /* Toolbar */ .tool{ padding: 12px; display:flex; align-items:center; justify-content:space-between; gap: 12px; } .tool__left{ display:flex; flex-direction:column; gap: 8px; min-width: 0; } .tool__search{ display:flex; align-items:center; gap: 10px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-2); min-width: 0; } .tool__icon{ opacity: .75; } .tool__input{ width: 100%; border: 0; outline: none; background: transparent; color: var(--text); min-width: 0; } .tool__hint{ font-size: 12px; color: var(--muted); } .tool__right{ display:flex; gap: 10px; } /* Cards vs table visibility */ .branch-cards{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 900px){ .branch-cards{ display:none; } } .branches-table{ display:none; } @media (min-width: 900px){ .branches-table{ display:block; } } /* Branch card */ .branch-card{ padding: 14px; } .branch-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; } .branch-card__name{ font-weight: 650; letter-spacing: .2px; } .branch-card__sub{ margin-top: 4px; font-size: 12px; color: var(--muted); } .branch-card__meta{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .mini__k{ font-size: 12px; color: var(--muted); } .mini__v{ margin-top: 3px; font-weight: 600; } .branch-card__actions{ margin-top: 12px; display:flex; gap: 10px; justify-content:flex-end; flex-wrap:wrap; } .branch-card__actions .btn{ padding: 10px 12px; } .branch-card__actions .btn-primary, .branch-card__actions .btn-danger{ font-weight: 650; } /* Table header block */ .table-card__head{ padding: 14px 14px 10px; border-bottom: 1px solid var(--border); } /* Row actions */ .row-actions{ display:flex; align-items:center; gap: 10px; justify-content:flex-end; flex-wrap:wrap; } .inline-form{ display:inline; } /* Table name/sub */ .t-name{ font-weight: 650; } .t-sub{ margin-top: 3px; font-size: 12px; color: var(--muted); } @media (max-width: 720px){ .tool{ flex-direction:column; align-items:stretch; } .tool__right{ justify-content:flex-end; } } /* ========================================================= CART (append to ui.css) ========================================================= */ /* Success notice */ .notice{ padding: 14px; margin: 12px 0; } .notice-success{ border: 1px solid rgba(22,163,74,.22); background: rgba(22,163,74,.07); } .notice__title{ font-weight: 750; font-size: 16px; } .notice__text{ margin-top: 6px; color: var(--muted); font-size: 13px; } /* Cart table */ .cart-table__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; } .cart-actions{ display:flex; gap: 10px; justify-content:flex-end; } .cart-qty{ width: 110px; padding: 9px 10px; border-radius: 12px; } .cart-footer{ padding: 12px 14px 14px; border-top: 1px solid var(--border); display:flex; justify-content:flex-end; } /* Mobile cards */ .cart-cards{ display:block; } @media (min-width: 900px){ .cart-cards{ display:none; } .cart-table{ display:block; } } .cart-table{ display:none; } @media (min-width: 900px){ .cart-table{ display:block; } } .cart-card{ padding: 14px; margin-bottom: 12px; } .cart-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .cart-card__name{ font-weight: 650; letter-spacing: .2px; } .cart-card__sub{ margin-top: 4px; font-size: 12px; color: var(--muted); } .cart-card__chips{ margin-top: 12px; display:flex; flex-wrap:wrap; gap: 8px; } .cart-card__actions{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; } .cart-inline{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; } .cart-inline .btn{ padding: 10px 12px; } .cart-mobile-footer{ padding: 14px; display:flex; flex-direction:column; gap: 10px; } /* ========================================================= CATALOG (append to ui.css) ========================================================= */ .filters{ padding: 14px; } .filters__grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 900px){ .filters__grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr auto; align-items:end; } } .filters__field{ min-width: 0; } .filters__searchbox{ display:flex; align-items:center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: color-mix(in oklab, var(--surface), transparent 0%); box-shadow: var(--shadow-2); } .filters__icon{ opacity:.7; } .filters__input{ width: 100%; border: 0; outline: none; background: transparent; color: var(--text); min-width:0; } .filters__actions{ display:flex; gap: 10px; justify-content:flex-end; flex-wrap:wrap; } @media (max-width: 900px){ .filters__actions .btn{ flex:1; } } /* Product grid */ /* ========================================================= CATALOG GRID — Responsive Product Columns Mobile: 2 | Tablet: 3 | Desktop: 4 ========================================================= */ .catalog-grid{ display: grid; gap: 12px; /* Mobile default */ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tablet (≥ 720px) */ @media (min-width: 720px){ .catalog-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Laptop & Desktop (≥ 1100px) */ @media (min-width: 1100px){ .catalog-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Extra small phones: 320px – 359px */ @media (max-width: 359px){ .catalog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .prod__body{ padding: 10px; } .prod__title{ font-size: 13px; } .prod__sub{ font-size: 11px; } .wval{ font-size: 13px; } } /* Product card */ .prod{ overflow:hidden; transition: transform .18s var(--ease), border-color .18s var(--ease); } .prod:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--gold), var(--border) 70%); } .prod__media{ display:block; aspect-ratio: 4 / 3; overflow:hidden; background: color-mix(in oklab, var(--surface-2), transparent 0%); } .prod__media img{ width:100%; height:100%; object-fit: cover; transform: scale(1.01); transition: transform .25s var(--ease); } .prod:hover .prod__media img{ transform: scale(1.06); } .prod__body{ padding: 14px; } .prod__title{ font-weight: 650; letter-spacing: .2px; } .prod__sub{ margin-top: 4px; font-size: 12px; color: var(--muted); } .prod__weights{ margin-top: 12px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wbox{ border: 1px solid var(--border); border-radius: 14px; background: color-mix(in oklab, var(--surface-2), transparent 0%); padding: 10px 10px; } .wlabel{ font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .wval{ margin-top: 6px; font-weight: 700; font-size: 14px; } .prod__actions{ margin-top: 12px; display:flex; align-items:center; justify-content:space-between; gap: 10px; } .prod__add{ display:flex; align-items:center; gap: 8px; } .qty{ width: 70px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); color: var(--text); } /* Loading state (optional) */ .is-loading{ opacity: .85; } /* ========================================================= PRODUCT VIEW (append to ui.css) ========================================================= */ .pv-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 980px){ .pv-grid{ grid-template-columns: 1.05fr .95fr; align-items:start; } } /* Gallery */ .pv-gallery{ padding: 12px; } .pv-main-img{ position:relative; border-radius: 16px; overflow:hidden; background: color-mix(in oklab, var(--surface-2), transparent 0%); } .pv-img{ width:100%; height:auto; display:block; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in; } .pv-arrow{ position:absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 12%); box-shadow: var(--shadow-2); backdrop-filter: blur(8px); } .pv-prev{ left: 10px; } .pv-next{ right: 10px; } .zoom-icon{ position:absolute; right: 10px; bottom: 10px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 12%); box-shadow: var(--shadow-2); backdrop-filter: blur(8px); } .pv-thumbs{ margin-top: 10px; display:flex; gap: 10px; overflow:auto; padding-bottom: 4px; } .pv-thumb{ border: 1px solid var(--border); border-radius: 14px; overflow:hidden; width: 74px; height: 74px; flex: 0 0 auto; background: color-mix(in oklab, var(--surface-2), transparent 0%); opacity: .85; } .pv-thumb.is-active{ border-color: color-mix(in oklab, var(--gold), var(--border) 65%); opacity: 1; } .pv-thumb img{ width:100%; height:100%; object-fit: cover; display:block; } .pv-hint{ margin-top: 10px; font-size: 12px; color: var(--muted); } /* Details */ .pv-details{ padding: 14px; } .pv-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .pv-kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .pv-info{ display:flex; flex-direction:column; gap: 10px; } .pv-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .pv-row span{ color: var(--muted); font-size: 13px; } .pv-row b{ font-weight: 650; text-align:right; } .pv-weights{ margin-top: 12px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pv-weight{ border: 1px solid var(--border); border-radius: 16px; background: color-mix(in oklab, var(--surface-2), transparent 0%); padding: 12px; } .pv-weight span{ display:block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pv-weight b{ display:block; margin-top: 8px; font-weight: 750; font-size: 15px; } .pv-subcard{ margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in oklab, var(--surface-2), transparent 0%); padding: 12px; } .pv-subcard__title{ font-weight: 650; margin-bottom: 8px; } .pv-details-box{ color: var(--text); line-height: 1.6; font-size: 13px; } .pv-branch{ margin-top: 10px; } /* CTA */ .pv-cta{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); } .pv-add{ width: 100%; padding: 12px 14px; border-radius: 14px; font-weight: 750; } .pv-cta__hint{ margin-top: 8px; font-size: 12px; color: var(--muted); } /* Single Add to Cart – responsive */ .pv-cta{ margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); } .pv-add{ width: 100%; padding: 14px; border-radius: 16px; font-weight: 750; } .zoom-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 2000; } .zoom-modal{ position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.98); width: min(92vw, 860px); max-height: 86vh; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-3); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2001; overflow: hidden; } .zoom-overlay.is-open{ opacity: 1; pointer-events: auto; } .zoom-modal.is-open{ opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); } .zoom-close{ position:absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); } .zoom-title{ padding: 14px 54px 10px 14px; font-weight: 650; border-bottom: 1px solid var(--border); } .zoom-img{ width: 100%; height: 72vh; object-fit: contain; background: color-mix(in oklab, var(--surface-2), transparent 0%); } /* ========================================================= CHECKOUT (append to ui.css) ========================================================= */ .co-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 320px){ .co-grid{ grid-template-columns: 1.15fr .85fr; align-items:start; } } .co-card{ padding: 14px; } .co-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .co-kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .co-pill{ display:flex; align-items:center; gap: 8px; } /* Items (mobile cards) */ .co-cards{ display:flex; flex-direction:column; gap: 10px; } .co-item{ padding: 12px; } .co-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .co-item__name{ font-weight: 750; letter-spacing: .2px; } .co-item__meta{ margin-top: 6px; color: var(--muted); font-size: 13px; } .co-item__chips{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 8px; } /* Marketing panel */ .co-panel{ border: 1px solid var(--border); border-radius: 16px; background: color-mix(in oklab, var(--surface-2), transparent 0%); padding: 12px; margin-bottom: 12px; } .co-panel__title{ font-weight: 800; margin-bottom: 10px; } .help{ display:block; margin-top: 6px; color: var(--muted); font-size: 12px; } .co-savedaddr{ margin-top: 8px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); color: var(--text); font-size: 13px; line-height: 1.55; } /* Address radios */ .co-radio{ display:flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in oklab, var(--surface-2), transparent 0%); margin-top: 10px; cursor: pointer; } .co-radio input{ margin-top: 4px; } .co-radio__box{ width: 18px; height: 18px; border-radius: 999px; border: 2px solid color-mix(in oklab, var(--gold), var(--border) 70%); margin-top: 4px; flex: 0 0 auto; } .co-radio__body b{ display:block; } .co-radio__body small{ display:block; margin-top: 4px; color: var(--muted); line-height: 1.45; } .co-textarea{ margin-top: 10px; } /* Submit */ .co-submit{ width: 100%; padding: 14px 14px; border-radius: 16px; font-weight: 850; } .co-legal{ margin-top: 10px; text-align:center; color: var(--muted); font-size: 12px; line-height: 1.5; } /* Success notice (reuse if not added earlier) */ /* ========================================================= MASTER FORMS (Add/Edit pages) ========================================================= */ .mf-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 980px){ .mf-grid{ grid-template-columns: 1.05fr .95fr; align-items:start; } } .mf-card{ padding: 14px; } .mf-card--soft{ background: color-mix(in oklab, var(--surface-2), transparent 0%); } .mf-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .mf-kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .mf-form .help{ display:block; margin-top: 6px; color: var(--muted); font-size: 12px; } .mf-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; } @media (max-width: 520px){ .mf-actions .btn{ width: 100%; } } .mf-list{ margin: 0; padding-left: 18px; line-height: 1.7; color: var(--text); } .mf-list li{ margin: 8px 0; } .mf-note{ margin-top: 14px; border: 1px dashed var(--border); border-radius: 16px; padding: 12px; display:flex; gap: 10px; align-items:flex-start; background: color-mix(in oklab, var(--surface), transparent 0%); } .mf-note__icon{ width: 36px; height: 36px; border-radius: 12px; display:grid; place-items:center; background: color-mix(in oklab, var(--goldSoft), transparent 10%); border: 1px solid color-mix(in oklab, var(--gold), var(--border) 75%); } .mf-note__title{ font-weight: 800; } .mf-note__text{ color: var(--muted); font-size: 13px; margin-top: 2px; } /* ========================================================= MASTER DATA LIST (Categories/Purities/etc) ========================================================= */ .md-card{ padding: 14px; } .md-toolbar{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; } .md-search{ display:flex; align-items:center; gap: 10px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface-2), transparent 0%); border-radius: 16px; padding: 10px 12px; min-width: min(520px, 100%); } .md-search__icon{ opacity: .7; font-size: 14px; } .md-search__input{ border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; width: 100%; } /* Cards on mobile */ .md-cards{ display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; } @media (min-width: 860px){ .md-cards{ display:none; } } .md-item{ padding: 12px; } .md-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .md-item__title{ font-weight: 850; letter-spacing: .2px; } .md-item__sub{ margin-top: 6px; color: var(--muted); font-size: 12px; } .md-item__actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; } .md-item__actions .btn{ flex: 1 1 auto; } /* Table on desktop */ .md-table{ margin-top: 12px; } @media (max-width: 859px){ .md-table{ display:none; } } .md-footnote{ margin-top: 10px; color: var(--muted); font-size: 12px; } /* Master form examples (used in Purity pages) */ .mf-examples{ display:flex; flex-direction:column; gap: 10px; } .mf-ex-row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); } .mf-ex-row span{ color: var(--muted); font-size: 13px; } .mf-ex-row b{ font-weight: 850; } /* ========================================================= Purity metal pills (Gold/Silver/Diamond) ========================================================= */ .pill{ display:inline-flex; align-items:center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 800; letter-spacing: .02em; background: color-mix(in oklab, var(--surface), transparent 0%); color: var(--text); } .pill-gold{ border-color: color-mix(in oklab, var(--gold), var(--border) 55%); background: color-mix(in oklab, var(--goldSoft), transparent 20%); } .pill-silver{ border-color: color-mix(in oklab, #bfc7d2, var(--border) 55%); background: color-mix(in oklab, #eef1f6, transparent 0%); } .pill-diamond{ border-color: color-mix(in oklab, #c7b5ff, var(--border) 55%); background: color-mix(in oklab, #f4f0ff, transparent 0%); } /* ========================================================= MY ORDERS (client/marketing) ========================================================= */ .myorders-cards{ display: grid; grid-template-columns: 1fr; gap: 10px; } .myorders-item{ border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-soft); } .myorders-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; } .myorders-item__id{ font-weight: 900; letter-spacing: .2px; } .myorders-item__date{ margin-top: 6px; color: var(--muted); font-size: 12px; } .myorders-item__status{ white-space: nowrap; } .myorders-item__btn{ width: 100%; margin-top: 12px; } /* ensure status pills look premium everywhere */ .status-pill{ display:inline-flex; align-items:center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface-2), transparent 0%); } .status-pill--approved{ border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); } .status-pill--rejected{ border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.10); } .status-pill--pending{ border-color: color-mix(in oklab, var(--gold), var(--border) 65%); background: color-mix(in oklab, var(--goldSoft), transparent 22%); } /* ========================================================= ORDER VIEW (My Orders -> View) ========================================================= */ .order-hero{ border: 1px solid var(--border); border-radius: 18px; padding: 14px; background: var(--grad-soft); } .order-hero__kicker{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .order-hero__title{ margin-top: 6px; font-size: 18px; font-weight: 900; letter-spacing: .2px; } .order-hero__pills{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; } .order-hero__right{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top: 10px; } @media (min-width: 900px){ .order-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; } .order-hero__right{ margin-top: 0; } } .ov-card{ padding: 14px; border-radius: 18px; } .ov-card--soft{ background: color-mix(in oklab, var(--champagne), transparent 25%); } .ov-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 12px; } .note-box{ border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: color-mix(in oklab, var(--surface), transparent 0%); } .note-box__title{ font-weight: 900; } .note-box__text{ margin-top: 8px; color: var(--muted); line-height: 1.6; } .ov-items-cards{ display:grid; grid-template-columns: 1fr; gap: 10px; } .ov-item-card{ border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: color-mix(in oklab, var(--surface), transparent 0%); box-shadow: var(--shadow-soft); } .ov-item-title{ font-weight: 900; margin-bottom: 10px; } .ov-item-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ov-item-grid span{ display:block; color: var(--muted); font-size: 12px; } .ov-item-grid b{ display:block; margin-top: 4px; font-weight: 900; } /* Mobile timeline */ .ov-timeline{ position: relative; padding-left: 10px; display:flex; flex-direction:column; gap: 12px; } .ov-tl-item{ display:grid; grid-template-columns: 14px 1fr; gap: 10px; align-items:flex-start; } .ov-tl-dot{ width: 10px; height: 10px; margin-top: 10px; border-radius: 999px; background: color-mix(in oklab, var(--gold), #ffffff 25%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--goldSoft), transparent 40%); } .ov-tl-body{ border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: color-mix(in oklab, var(--surface), transparent 0%); } .ov-tl-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; } .ov-tl-time{ color: var(--muted); font-size: 12px; white-space: nowrap; } .ov-tl-meta{ margin-top: 10px; display:grid; gap: 6px; color: var(--muted); } .ov-tl-meta span{ color: var(--muted); } .ov-tl-meta b{ color: var(--text); font-weight: 900; } .ov-tl-note{ margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; color: var(--text); opacity: .9; } /* ========================================================= ORDERS (Admin/Staff list) ========================================================= */ .ord-chips{ display:flex; flex-wrap:wrap; gap: 8px; margin-left: 10px; } .chip{ appearance:none; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); color: var(--text); padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .chip:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); } .chip.is-active{ border-color: color-mix(in oklab, var(--gold), var(--border) 55%); background: color-mix(in oklab, var(--goldSoft), transparent 18%); } .orders-cards{ display:grid; grid-template-columns: 1fr; gap: 10px; } /* Mobile card design */ .ord-card{ border: 1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-soft); } .ord-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; } .ord-card__id{ font-weight: 900; letter-spacing: .2px; } .ord-card__date{ margin-top: 6px; color: var(--muted); font-size: 12px; } .ord-card__rows{ margin-top: 10px; display:grid; gap: 8px; } .ord-kv{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--border); } .ord-kv:first-child{ border-top: 0; padding-top: 0; } .ord-kv span{ color: var(--muted); font-size: 12px; white-space: nowrap; } .ord-kv b{ font-weight: 900; text-align:right; } .ord-card__btn{ width: 100%; margin-top: 12px; } .ov-actions{ display:grid; gap:14px; } .btn-lg{ padding:14px 18px; font-size:15px; font-weight:900; } .ov-rows{ display:grid; grid-template-columns: 1fr; gap:10px; } .ov-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); } .ov-row:last-child{ border-bottom:none; } .ov-row span{ color:var(--muted); font-size:13px; } .ov-row b{ font-weight:700; text-align:right; } .ov-address{ background:var(--champagne); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.6; } .divider{ height:1px; background:var(--border); margin:18px 0; } .subtle{ color:var(--muted); font-size:13px; } .sp-24{ height:24px; } /* Locked state (Approval Actions) */ .lock-card{ display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--border); border-radius:14px; background: linear-gradient(180deg, rgba(250,246,238,.65), rgba(255,255,255,.55)); } .lock-ico{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background: rgba(201,162,77,.14); border:1px solid rgba(201,162,77,.25); font-size:18px; flex:0 0 auto; } .lock-title{ font-weight:900; line-height:1.2; } .lock-meta{ color:var(--muted); margin-top:4px; line-height:1.4; font-size:13px; } /* Order Summary spacing fix */ .order-summary-card{ padding:20px 22px; /* left-right breathing space */ } @media (max-width: 768px){ .order-summary-card{ padding:16px 16px; /* tighter but still comfortable on mobile */ } } .order-summary-card .ov-rows{ padding-left:2px; padding-right:2px; } /* Approval Actions spacing fix */ .approval-actions-card{ padding:20px 22px; } @media (max-width: 768px){ .approval-actions-card{ padding:16px 16px; } } .approval-actions-card .lock-card{ margin-top:8px; } /* ========================= CREATE PRODUCT – Premium polish (page-scoped) ========================= */ .product-create .divider{ height: 1px; background: rgba(15,23,42,.10); margin: 14px 0; } /* Images box */ .product-create .img-box{ display:flex; gap:12px; align-items:center; padding: 14px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); box-shadow: 0 10px 18px rgba(2,6,23,.06); } .product-create .img-box__icon{ width:44px;height:44px; border-radius: 16px; display:flex;align-items:center;justify-content:center; border: 1px solid rgba(201,162,77,.30); background: rgba(243,226,184,.35); } .product-create .img-box__title{ font-weight: 900; letter-spacing:.2px; } .product-create .img-box__meta{ margin-top:3px; font-size:12.5px; color: rgba(15,23,42,.60); } .product-create .img-box__actions{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; } .product-create .file-native{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .product-create .file-count{ font-size:12px; color: rgba(15,23,42,.58); } /* Toggles */ .product-create .toggles{ display:flex; flex-direction:column; gap:10px; } .product-create .toggle{ display:flex; gap:12px; align-items:center; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); } .product-create .toggle input{ position:absolute; opacity:0; pointer-events:none; } .product-create .toggle__ui{ width:46px;height:28px; border-radius: 999px; border: 1px solid rgba(15,23,42,.14); background: rgba(15,23,42,.10); position: relative; flex: 0 0 auto; transition: background .15s ease, border-color .15s ease; } .product-create .toggle__ui::after{ content:""; position:absolute; top:50%; left:3px; width:22px; height:22px; transform: translateY(-50%); border-radius: 999px; background:#fff; box-shadow: 0 10px 18px rgba(2,6,23,.12); transition: left .15s ease; } .product-create .toggle__txt{ display:flex; flex-direction:column; gap:2px; } .product-create .toggle__t{ font-weight: 900; color: rgba(15,23,42,.88); } .product-create .toggle__s{ font-size: 12.5px; color: rgba(15,23,42,.60); } /* checked */ .product-create .toggle input:checked + .toggle__ui{ background: rgba(201,162,77,.35); border-color: rgba(201,162,77,.45); } .product-create .toggle input:checked + .toggle__ui::after{ left: 21px; } /* Stock list */ .product-create .stock-list{ display:flex; flex-direction:column; gap:10px; } .product-create .stock-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); } .product-create .stock-row__name{ font-weight: 900; letter-spacing:.2px; color: rgba(15,23,42,.88); } .product-create .stock-row__code{ margin-top:3px; font-size:12px; color: rgba(15,23,42,.55); } .product-create .stock-row__right{ min-width: 150px; text-align:right; } .product-create .stock-row__label{ font-size:12px; color: rgba(15,23,42,.55); margin-bottom:6px; font-weight: 800; } .product-create .stock-row__input{ height:42px; text-align:center; border-radius: 14px; } /* Mobile tune */ @media (max-width: 720px){ .product-create .img-box{ align-items:flex-start; } .product-create .img-box__actions{ align-items:flex-start; text-align:left; margin-left:0; width:100%; } .product-create .stock-row{ flex-direction:column; align-items:stretch; } .product-create .stock-row__right{ text-align:left; min-width: 0; } .product-create .stock-row__input{ width:100%; } } /* ========================================== ADD PRODUCT PAGE — Fix layout like premium ========================================== */ /* 1) Page title row: title + action button on same line */ .page-title.page-title-static{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .page-title.page-title-static .title-row{ display:flex; align-items:center; gap:10px; } .page-title.page-title-static h1{ margin:0; line-height:1.1; letter-spacing:-.3px; } .page-title.page-title-static .meta{ margin-top:8px; color: rgba(15,23,42,.62); font-size: 13.5px; } .page-title.page-title-static .section-actions{ display:flex; align-items:center; gap:10px; margin-top:6px; } /* On mobile: stack title + action cleanly */ @media (max-width: 720px){ .page-title.page-title-static{ flex-direction:column; align-items:stretch; } .page-title.page-title-static .section-actions{ margin-top:10px; justify-content:flex-start; } } /* 2) Add Product: force clean 2-column grid on desktop */ .product-create{ max-width: 1200px; margin: 0 auto; } .product-create .grid-2{ display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items:start; } @media (max-width: 980px){ .product-create .grid-2{ grid-template-columns: 1fr; } } /* 3) Cards: premium card surface */ .product-create .card{ border-radius: 18px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(2,6,23,.07); overflow:hidden; } .product-create .card.card-soft{ background: linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(250,246,238,.72) 100%); } .product-create .card-body{ padding: 18px; } /* 4) Card head: title/subtitle left + pill right */ .product-create .card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 12px; } .product-create .card-title{ font-weight: 900; font-size: 15px; letter-spacing: .2px; color: rgba(15,23,42,.92); } .product-create .card-subtitle{ margin-top:4px; font-size: 12.5px; color: rgba(15,23,42,.60); } /* 5) Pills: make them look premium */ .product-create .pill{ display:inline-flex; align-items:center; height: 26px; padding: 0 10px; border-radius: 999px; font-weight: 800; font-size: 12px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.72); } .product-create .pill.pill-blue{ border-color: rgba(201,162,77,.35); background: rgba(243,226,184,.45); } .product-create .pill.pill-muted{ border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); color: rgba(15,23,42,.75); } /* 6) Forms: consistent spacing + input height */ .product-create .form{ display:flex; flex-direction:column; gap: 12px; } .product-create .field .label{ display:block; margin-bottom: 6px; font-weight: 800; font-size: 13px; color: rgba(15,23,42,.86); } .product-create .field .help{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.58); } .product-create .input, .product-create .select{ width:100%; height: 44px; border-radius: 14px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.92); padding: 10px 12px; outline: none; } .product-create textarea.input{ height:auto; min-height: 120px; padding: 12px; } /* Better focus (premium) */ .product-create .input:focus, .product-create .select:focus{ border-color: rgba(201,162,77,.55); box-shadow: 0 0 0 4px rgba(201,162,77,.18); } /* 7) Select wrap: remove weird narrow select issue */ .product-create .select-wrap{ width:100%; } /* 8) Divider: smoother */ .product-create .divider{ height: 1px; background: rgba(15,23,42,.10); margin: 16px 0; } /* ========================================================= MENU BUTTON: show only on mobile (global) ========================================================= */ .title-menu-btn{ display:none; } @media (max-width: 720px){ .title-menu-btn{ display:inline-flex; } } /* ========================================================= EDIT PRODUCT — premium page styling (page-scoped) ========================================================= */ .product-edit{ max-width: 1200px; margin: 0 auto; } .product-edit .grid-2{ display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items:start; } @media (max-width: 980px){ .product-edit .grid-2{ grid-template-columns: 1fr; } } /* Make inner grids clean too */ .product-edit .grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px){ .product-edit .grid-3{ grid-template-columns: 1fr; } } .product-edit .grid-2 .grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px){ .product-edit .grid-2 .grid-2{ grid-template-columns: 1fr; } } /* Divider */ .product-edit .divider{ height:1px; background: rgba(15,23,42,.10); margin: 16px 0; } /* File picker (same as Add Product) */ .product-edit .img-box{ display:flex; gap:12px; align-items:center; padding: 14px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); box-shadow: 0 10px 18px rgba(2,6,23,.06); } .product-edit .img-box__icon{ width:44px;height:44px; border-radius: 16px; display:flex;align-items:center;justify-content:center; border: 1px solid rgba(201,162,77,.30); background: rgba(243,226,184,.35); } .product-edit .img-box__title{ font-weight: 900; letter-spacing:.2px; } .product-edit .img-box__meta{ margin-top:3px; font-size:12.5px; color: rgba(15,23,42,.60); } .product-edit .img-box__actions{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; } .product-edit .file-native{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .product-edit .file-count{ font-size:12px; color: rgba(15,23,42,.58); } /* Toggles (same as Add Product) */ .product-edit .toggles{ display:flex; flex-direction:column; gap:10px; } .product-edit .toggle{ display:flex; gap:12px; align-items:center; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); } .product-edit .toggle input{ position:absolute; opacity:0; pointer-events:none; } .product-edit .toggle__ui{ width:46px;height:28px; border-radius: 999px; border: 1px solid rgba(15,23,42,.14); background: rgba(15,23,42,.10); position: relative; flex: 0 0 auto; transition: background .15s ease, border-color .15s ease; } .product-edit .toggle__ui::after{ content:""; position:absolute; top:50%; left:3px; width:22px; height:22px; transform: translateY(-50%); border-radius: 999px; background:#fff; box-shadow: 0 10px 18px rgba(2,6,23,.12); transition: left .15s ease; } .product-edit .toggle__txt{ display:flex; flex-direction:column; gap:2px; } .product-edit .toggle__t{ font-weight: 900; color: rgba(15,23,42,.88); } .product-edit .toggle__s{ font-size: 12.5px; color: rgba(15,23,42,.60); } .product-edit .toggle input:checked + .toggle__ui{ background: rgba(201,162,77,.35); border-color: rgba(201,162,77,.45); } .product-edit .toggle input:checked + .toggle__ui::after{ left: 21px; } /* Right image manager grid */ .product-edit .img-grid{ display:flex; flex-direction:column; gap: 10px; } .product-edit .img-item{ display:grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items:center; padding: 10px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); } .product-edit .img-thumb{ width:84px; height:68px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(15,23,42,.10); background: rgba(15,23,42,.04); } .product-edit .img-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .product-edit .img-path{ font-weight: 800; font-size: 12.5px; color: rgba(15,23,42,.85); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .product-edit .img-sub{ margin-top:4px; font-size: 12px; color: rgba(15,23,42,.60); } .product-edit .btn-danger-soft{ border-color: rgba(185,28,28,.18); background: rgba(185,28,28,.06); color: rgba(185,28,28,.92); } .product-edit .btn-danger-soft:hover{ background: rgba(185,28,28,.10); } /* Mobile */ @media (max-width: 720px){ .product-edit .img-box{ align-items:flex-start; } .product-edit .img-box__actions{ align-items:flex-start; text-align:left; margin-left:0; width:100%; } .product-edit .img-item{ grid-template-columns: 84px minmax(0, 1fr); } .product-edit .img-actions{ grid-column: 1 / -1; } } /* ================================================= EDIT PRODUCT – extra spacing (final tuning) ================================================= */ /* Space between main sections */ .product-edit .card-head{ margin-bottom: 16px; } .product-edit .divider{ margin: 28px 0; } /* Space between form blocks */ .product-edit .form > .grid-2, .product-edit .form > .grid-3{ margin-bottom: 22px; } .product-edit .form > .field{ margin-bottom: 20px; } /* Upload section breathing room */ .product-edit .img-box{ margin-top: 18px; margin-bottom: 30px; } /* Visibility & Ordering section */ .product-edit .toggles{ margin-top: 18px; margin-bottom: 32px; } /* Bottom action area */ .product-edit .form-actions{ margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(15,23,42,.10); } /* Right column spacing */ .product-edit .img-grid{ margin-top: 18px; } .product-edit .img-item{ margin-bottom: 14px; } /* Desktop luxury padding */ @media (min-width: 1200px){ .product-edit .card-body{ padding: 26px; } } /* Mobile comfort */ @media (max-width: 720px){ .product-edit .card-body{ padding: 18px; } } /* Ensure delete buttons are clickable on desktop */ .product-edit .img-actions, .product-edit .img-actions *{ pointer-events: auto !important; z-index: 5; } /* ========================================================= PRODUCTS INDEX — Premium list/table + mobile cards ========================================================= */ .products-toolbar{ margin-bottom: 14px; } .products-toolbar .input-wrap{ position: relative; max-width: 520px; width: 100%; } .products-toolbar .input-icon{ position:absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .7; } .products-toolbar .input{ padding-left: 36px; } /* table container card */ .products-table .card-body{ padding: 14px; } /* table */ .table-wrap{ overflow:auto; } .table{ width:100%; border-collapse: separate; border-spacing: 0 10px; /* row gaps */ } .table thead th{ text-align:left; font-size: 12px; letter-spacing: .3px; color: rgba(15,23,42,.62); padding: 10px 10px; white-space: nowrap; } .table tbody td{ background: rgba(255,255,255,.72); border-top: 1px solid rgba(15,23,42,.08); border-bottom: 1px solid rgba(15,23,42,.08); padding: 12px 10px; vertical-align: middle; } .table tbody tr td:first-child{ border-left: 1px solid rgba(15,23,42,.08); border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .table tbody tr td:last-child{ border-right: 1px solid rgba(15,23,42,.08); border-top-right-radius: 16px; border-bottom-right-radius: 16px; } .p-row{ transition: transform .12s ease, box-shadow .12s ease; } .p-row:hover td{ box-shadow: 0 14px 30px rgba(2,6,23,.08); } .p-row:hover{ transform: translateY(-1px); } /* name cell */ .p-name{ font-weight: 900; letter-spacing: .2px; color: rgba(15,23,42,.90); } .p-sub{ margin-top: 4px; font-size: 12.5px; color: rgba(15,23,42,.60); } .p-thumb{ height: 46px; width: 46px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(15,23,42,.10); background: #fff; } /* actions */ .inline-form{ display:inline; } /* pills */ .pill-blue{ border-color: rgba(201,162,77,.35); background: rgba(243,226,184,.45); } .pill-muted{ border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); color: rgba(15,23,42,.75); } /* MOBILE: hide table, show cards */ .products-cards{ display:none; } @media (max-width: 860px){ .products-table{ display:none; } .products-cards{ display:flex; flex-direction:column; gap: 12px; } .p-card{ display:block; text-decoration:none; color: inherit; border-radius: 18px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(2,6,23,.07); overflow:hidden; } .p-card__top{ display:flex; gap: 12px; padding: 14px; align-items:center; } .p-card__img{ width: 64px; height: 64px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(15,23,42,.10); background: #fff; flex: 0 0 auto; } .p-card__img--empty{ display:flex; align-items:center; justify-content:center; font-size: 22px; background: rgba(15,23,42,.04); } .p-card__name{ font-weight: 900; letter-spacing: .2px; color: rgba(15,23,42,.92); } .p-card__sub{ margin-top: 4px; font-size: 12.5px; color: rgba(15,23,42,.60); } .p-card__id{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.55); } .p-card__stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 0 14px 14px; } .p-stat{ border-radius: 14px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); padding: 10px; } .p-stat span{ display:block; font-size: 12px; color: rgba(15,23,42,.60); font-weight: 800; } .p-stat b{ display:block; margin-top: 4px; font-weight: 900; color: rgba(15,23,42,.88); } .p-card__badges{ display:flex; gap: 8px; flex-wrap:wrap; padding: 0 14px 14px; } } /* ========================================================= ADVANCED REPORTS — Premium redesign (works with your existing HTML/classes) ========================================================= */ /* Filter card */ .filter-card{ margin-bottom: 16px; } .filter-card .section-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 12px; } .filter-card form{ margin-top: 10px; } /* Filter grid */ .filter-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .filter-field{ display:flex; flex-direction:column; gap: 6px; } .filter-field label{ font-size: 12px; font-weight: 900; letter-spacing: .25px; color: rgba(15,23,42,.70); } .filter-field small{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.55); } /* Actions row inside grid */ .filter-actions{ grid-column: 1 / -1; display:flex; gap: 10px; align-items:center; justify-content:flex-end; padding-top: 6px; } @media (max-width: 980px){ .filter-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px){ .filter-grid{ grid-template-columns: 1fr; } .filter-actions{ justify-content:stretch; } .filter-actions .btn{ width:100%; } } /* KPI cards */ .kpi{ border-radius: 18px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(2,6,23,.06); padding: 14px 14px; } .kpi .label{ font-size: 12px; font-weight: 900; color: rgba(15,23,42,.60); letter-spacing: .2px; } .kpi .value{ margin-top: 8px; font-size: 26px; font-weight: 1000; letter-spacing: .3px; color: rgba(15,23,42,.92); } .kpi .hint{ margin-top: 6px; font-size: 12.5px; color: rgba(15,23,42,.55); } /* Tables – premium spacing + hover */ .table-wrap{ overflow:auto; } .table-wrap table{ width:100%; border-collapse: separate; border-spacing: 0 10px; } .table-wrap thead th{ text-align:left; padding: 10px 10px; font-size: 12px; font-weight: 900; letter-spacing: .25px; color: rgba(15,23,42,.62); white-space: nowrap; } .table-wrap tbody td{ background: rgba(255,255,255,.78); border-top: 1px solid rgba(15,23,42,.08); border-bottom: 1px solid rgba(15,23,42,.08); padding: 12px 10px; vertical-align: middle; } .table-wrap tbody tr td:first-child{ border-left: 1px solid rgba(15,23,42,.08); border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .table-wrap tbody tr td:last-child{ border-right: 1px solid rgba(15,23,42,.08); border-top-right-radius: 16px; border-bottom-right-radius: 16px; } .table-wrap tbody tr{ transition: transform .12s ease; } .table-wrap tbody tr:hover{ transform: translateY(-1px); } .table-wrap tbody tr:hover td{ box-shadow: 0 14px 30px rgba(2,6,23,.07); } /* Strong cells + alignment helpers */ .cell-strong{ font-weight: 950; letter-spacing: .2px; color: rgba(15,23,42,.92); } .text-right{ text-align:right; } /* Status pills */ .status-pill{ display:inline-flex; align-items:center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 950; border: 1px solid rgba(15,23,42,.12); background: rgba(15,23,42,.04); white-space: nowrap; } .status-pill--approved{ border-color: rgba(201,162,77,.45); background: rgba(243,226,184,.50); } .status-pill--pending{ border-color: rgba(15,23,42,.14); background: rgba(15,23,42,.04); } .status-pill--rejected{ border-color: rgba(185,28,28,.28); background: rgba(185,28,28,.08); } /* Remove ugly inline margins (your HTML has a few) */ .grid.grid-3{ margin-bottom: 14px; } .card .hint{ font-size: 12.5px; color: rgba(15,23,42,.58); } /* Advanced Reports boxed spacing */ .reports-summary{ margin: 18px 0 22px; } .reports-table{ margin: 0 0 22px; } .reports-summary .grid{ gap: 16px; } .filter-card{ margin-bottom: 22px; } .filter-card .filter-grid{ gap: 16px; row-gap: 18px; } .filter-card .filter-actions{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(15,23,42,.12); } /* ===== Advanced Reports spacing (guaranteed selectors) ===== */ /* Space after Filters card */ .filter-card{ margin-bottom: 28px !important; } /* Filter grid breathing room */ .filter-card .filter-grid{ gap: 16px !important; row-gap: 18px !important; } /* Buttons row separation */ .filter-card .filter-actions{ margin-top: 10px !important; padding-top: 10px !important; border-top: 1px dashed rgba(15,23,42,.12) !important; } /* Orders card spacing */ .card.reports-table{ /* works even if it stays a .card */ margin-top: 0 !important; padding: 0 !important; /* card-body will handle padding */ } /* Inside Orders card */ .card.reports-table .card-body{ padding: 18px !important; } /* Space between header and table */ .card.reports-table .section-head{ margin-bottom: 12px !important; } /* Table spacing */ .card.reports-table .table-wrap{ margin-top: 14px !important; } /* Row gap + cell padding (your table uses border spacing style) */ .card.reports-table table{ border-collapse: separate !important; border-spacing: 0 12px !important; } .card.reports-table tbody td{ padding: 14px 12px !important; } /* Tip text spacing */ .card.reports-table .hint{ margin-top: 14px !important; padding-top: 10px !important; border-top: 1px dashed rgba(15,23,42,.12) !important; } /* ========================================= STOCK PAGE — Jewel Mart B2B (Premium) Paste into ui.css ========================================= */ .stock-layout{ display:grid; grid-template-columns: 1fr; gap: 14px; align-items:start; } @media (min-width: 980px){ .stock-layout{ grid-template-columns: 1fr 1fr; gap: 16px; } } .stock-card{ border-radius: 18px; overflow: hidden; } /* small required star */ .req{ color: #b31d1d; font-weight: 800; margin-left: 4px; } /* locked branch field */ .stock-locked{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: rgba(250,246,238,.85); border-color: rgba(201,162,77,.22); } .stock-locked__name{ font-weight: 800; color: var(--text); } .stock-locked__tag{ font-size: 12px; font-weight: 800; color: rgba(30,30,30,.7); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(201,162,77,.25); background: rgba(255,255,255,.85); } /* form layout */ .stock-form-grid{ grid-template-columns: 1fr; gap: 12px; } @media (min-width: 980px){ .stock-form-grid{ grid-template-columns: 1fr 1fr; } } .stock-actions .btn{ width:100%; } /* ----------------------------------------- SearchPick (searchable select) ------------------------------------------ */ .searchpick{ position: relative; } .sp-searchrow{ position: relative; } .sp-ico{ position:absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .75; } .searchpick__search{ padding-left: 36px !important; padding-right: 46px !important; } .sp-clear{ position:absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.92); cursor:pointer; } .sp-clear:hover{ box-shadow: var(--shadow-soft); background: rgba(250,246,238,.95); } .searchpick__menu{ position:absolute; left:0; right:0; top: calc(100% + 8px); background:#fff; border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft); overflow:auto; max-height: 280px; display:none; z-index: 60; } .searchpick.is-open .searchpick__menu{ display:block; } .searchpick__item{ width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; cursor:pointer; } .searchpick__item:hover{ background: rgba(250,246,238,.92); } .sp-title{ font-weight:800; font-size:14px; letter-spacing:.2px; } .sp-sub{ font-size:12px; color: var(--muted); margin-top:2px; } .searchpick__hint{ margin-top:6px; font-size:12px; color: var(--muted); } .searchpick__selected{ color: var(--text); font-weight: 800; } /* ----------------------------------------- Stock View (Mobile cards vs Desktop table) ------------------------------------------ */ .stock-mob{ display:none; } .stock-desktop{ display:block; } @media (max-width: 980px){ .stock-mob{ display:grid; gap: 12px; } .stock-desktop{ display:none; } .stock-rowcard{ border: 1px solid var(--border); border-radius: 18px; background:#fff; box-shadow: var(--shadow-soft); padding: 12px; } .sr-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; } .sr-title{ font-weight: 900; letter-spacing:.2px; } .sr-sub{ font-size:12px; color: var(--muted); margin-top:2px; } .sr-grid{ margin-top: 10px; display:grid; grid-template-columns: 1fr; gap: 8px; } .sr-cell{ border: 1px solid rgba(201,162,77,.18); background: rgba(250,246,238,.65); border-radius: 14px; padding: 10px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .sr-branch{ font-size: 13px; color: rgba(30,30,30,.85); } .sr-qty{ font-weight: 900; min-width: 44px; text-align:right; } /* page title actions: tidy on mobile */ .page-title .section-actions{ display:grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width:100%; } .page-title .section-actions .btn{ width:100%; justify-content:center; } } /* optional soft badge */ .badge-soft{ background: rgba(250,246,238,.9); border: 1px solid rgba(201,162,77,.25); color: rgba(30,30,30,.78); } /* ========================================= STOCK PAGE — SPACING FIXES (Top padding, right padding, button top gap) ========================================= */ /* 1) More top + right padding inside both cards */ .stock-card .card-body{ padding: 18px 20px 18px 20px !important; /* top right bottom left */ } /* On smaller screens keep it comfortable */ @media (max-width: 980px){ .stock-card .card-body{ padding: 16px 16px 16px 16px !important; } } /* 2) Reduce too-tight header spacing (top area inside card) */ .stock-card .section-head{ margin-top: 0 !important; margin-bottom: 14px !important; /* gives breathing room before fields/table */ padding-bottom: 10px !important; border-bottom: 1px solid var(--border); } /* 3) Button needs more gap from inputs (top spacing) */ .stock-actions{ margin-top: 14px !important; } /* Optional: make fields not too cramped */ .stock-form .field{ margin-bottom: 12px; } .stock-form-grid{ gap: 12px !important; } /* Optional: little more space between the two big cards (left/right) */ .stock-layout{ gap: 16px !important; } /* ========================================= STOCK LOGS — SPACING & BREATHING FIX ========================================= */ /* 1) Page title → first card spacing */ .page-title{ margin-bottom: 14px !important; } /* 2) All cards: consistent inner padding */ .card > .card-body{ padding: 18px 20px !important; /* top/bottom | left/right */ } /* Mobile comfort */ @media (max-width: 900px){ .card > .card-body{ padding: 16px !important; } } /* 3) Reduce crowding in "Viewing as" banner */ .viewing-as{ gap: 14px !important; } .viewing-as__left{ gap: 6px !important; } /* 4) Toolbar spacing (search + buttons) */ .toolbar{ gap: 12px !important; } .toolbar__right{ gap: 8px !important; } /* 5) Table wrapper – add right + bottom air */ .table-wrap{ margin-top: 10px !important; padding-bottom: 6px !important; } /* 6) Table footer spacing */ .table-footer{ margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--border); } /* 7) Prevent table touching right edge on scroll */ .table-wrap::-webkit-scrollbar{ height: 10px; } .table-wrap::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; } /* 8) Mobile: stack toolbar nicely */ @media (max-width: 900px){ .toolbar{ flex-direction: column; align-items: stretch; } .toolbar__right{ justify-content: space-between; } } /* ========================================= TRANSFER STOCK — Premium Layout & Spacing Paste at bottom of ui.css ========================================= */ .transfer-layout{ display:grid; grid-template-columns: 1fr; gap: 16px; align-items:start; } /* desktop 2-column */ @media (min-width: 980px){ .transfer-layout{ grid-template-columns: 1.05fr .95fr; gap: 16px; } } /* make both cards consistent with stock pages */ .transfer-layout .card{ border-radius: 18px; overflow: hidden; } /* consistent inner padding (top/right fix) */ .transfer-layout .card > .card-body{ padding: 18px 20px !important; } @media (max-width: 900px){ .transfer-layout .card > .card-body{ padding: 16px !important; } } /* Header inside cards */ .card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .card-title{ font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .2px; font-size: 18px; color: var(--text); } .card-subtitle{ margin-top: 4px; font-size: 12px; color: var(--muted); } /* requirements */ .req{ color:#b31d1d; font-weight: 800; margin-left: 4px; } /* form spacing */ .form .field{ margin-bottom: 12px; } .help{ margin-top: 6px; font-size: 12px; color: var(--muted); } .muted{ color: var(--muted); } /* buttons spacing like premium pages */ .form-actions{ display:flex; gap: 10px; margin-top: 14px; } @media (max-width: 520px){ .form-actions{ flex-direction: column; } .form-actions .btn{ width:100%; justify-content:center; } } /* footer hint under form */ .form-foot{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } /* ----------------------------------------- Product Search (Luxury dropdown) ------------------------------------------ */ .product-search{ position:relative; } .product-search__list{ position:absolute; left:0; right:0; top: calc(100% + 8px); display:none; background:#fff; border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft); overflow:auto; max-height: 280px; z-index: 50; } .product-search.is-open .product-search__list{ display:block; } .product-search__item{ padding: 10px 12px; cursor:pointer; font-weight: 700; font-size: 13px; } .product-search__item:hover{ background: rgba(250,246,238,.92); } /* ----------------------------------------- Preview Card ------------------------------------------ */ .preview{ display:grid; gap: 10px; } .preview-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(201,162,77,.18); background: rgba(250,246,238,.65); border-radius: 14px; } .preview-key{ font-size: 12px; color: rgba(30,30,30,.7); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; } .preview-val{ font-size: 13px; font-weight: 800; color: var(--text); text-align:right; max-width: 65%; word-wrap: break-word; } .divider{ height: 1px; background: var(--border); margin: 4px 0 2px; } /* notice + warning blocks */ .notice, .warn{ display:flex; gap: 10px; align-items:flex-start; padding: 12px; border-radius: 14px; margin-top: 8px; } .notice{ border: 1px solid rgba(60,160,90,.25); background: rgba(240,255,245,.9); } .notice__icon{ margin-top:1px; } .notice__text{ color: #1f6b3c; font-weight: 700; } .warn{ border: 1px solid rgba(185,35,35,.25); background: rgba(255,242,242,.9); } .warn__text{ color: #8d1c1c; font-weight: 700; } /* Transfer guard invalid state */ .is-invalid{ border-color: rgba(185,35,35,.45) !important; box-shadow: 0 0 0 4px rgba(185,35,35,.10) !important; } /* Create User — invalid state */ /* Optional: loading look on submit button */ .btn.is-loading{ opacity: .85; pointer-events: none; } /* ui.css — invalid state + loading */ /* Users table: actions alignment */ .inline-form{ display:inline-flex; gap:8px; align-items:center; } .reset-inline .input{ width: 160px; } /* Smaller input (for reset password) */ .input-sm{ padding: 9px 10px !important; font-size: 13px !important; border-radius: 12px !important; } /* ========================================= AUTH (LOGIN) — Jewel Mart Luxury Theme ========================================= */ .auth-wrap{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 28px 14px; background: radial-gradient(1200px 800px at 20% 10%, rgba(201,162,77,.18), transparent 55%), radial-gradient(900px 700px at 90% 20%, rgba(243,226,184,.22), transparent 55%), radial-gradient(1000px 700px at 50% 100%, rgba(201,162,77,.12), transparent 60%), linear-gradient(180deg, #FFFDF8 0%, #FAF6EE 100%); } .auth-card{ width: min(980px, 100%); position: relative; } .auth-shell{ display:grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; } /* Desktop: split layout */ @media (min-width: 980px){ .auth-shell{ grid-template-columns: 1.05fr .95fr; gap: 16px; } } /* Brand panel */ .auth-brand{ border-radius: 20px; border: 1px solid rgba(201,162,77,.18); background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(250,246,238,.92) 45%, rgba(243,226,184,.35) 100%); box-shadow: 0 18px 60px rgba(0,0,0,.10); padding: 18px; overflow:hidden; position: relative; } .auth-brand:before{ content:""; position:absolute; inset:-80px -120px auto auto; width: 260px; height: 260px; background: radial-gradient(circle at 30% 30%, rgba(201,162,77,.35), transparent 60%); transform: rotate(12deg); } .auth-mark{ display:flex; align-items:center; gap: 12px; position: relative; z-index: 2; } .auth-logo{ width: 46px; height: 46px; border-radius: 16px; display:flex; align-items:center; justify-content:center; font-weight: 900; letter-spacing:.6px; color: #1e1e1e; background: linear-gradient(90deg, rgba(243,226,184,.95) 0%, rgba(201,162,77,.95) 100%); border: 1px solid rgba(201,162,77,.28); box-shadow: 0 10px 30px rgba(0,0,0,.10); } .auth-name{ font-family: "Playfair Display", serif; font-weight: 700; font-size: 18px; color: var(--text); letter-spacing:.2px; } .auth-tag{ margin-top: 2px; font-size: 12px; color: var(--muted); } .auth-quote{ margin-top: 14px; display:flex; gap: 10px; align-items:flex-start; padding: 12px; border-radius: 16px; border: 1px solid rgba(201,162,77,.18); background: rgba(255,255,255,.72); position: relative; z-index: 2; } .q-icon{ font-weight:900; opacity:.75; } .q-text{ font-weight: 800; color: rgba(30,30,30,.88); line-height: 1.25; } .q-text small{ display:block; margin-top: 6px; font-weight: 600; color: var(--muted); } .auth-badges{ margin-top: 14px; display:flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; } /* Main login card */ .auth-main{ border-radius: 20px; box-shadow: 0 18px 60px rgba(0,0,0,.12); border: 1px solid rgba(201,162,77,.16); overflow:hidden; } .auth-main .auth-header{ padding: 18px 18px 10px; } .auth-header .title{ font-family: "Playfair Display", serif; font-weight: 700; font-size: 22px; letter-spacing:.2px; color: var(--text); } .auth-header .sub{ margin-top: 6px; color: var(--muted); font-size: 13px; } /* body padding for form */ .auth-main form{ padding: 0 18px 18px; } .auth-note{ display:block; margin-top: 8px; color: var(--muted); font-size: 12px; } /* input row with icon */ .input-row{ position: relative; display:flex; align-items:center; gap: 10px; } .input-row--icon .input{ padding-left: 40px !important; } .in-ico{ position:absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .75; } /* password eye button */ .eye-btn{ position:absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 36px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.92); cursor:pointer; } .eye-btn:hover{ box-shadow: var(--shadow-soft); background: rgba(250,246,238,.95); } .has-eye{ padding-right: 48px !important; } /* login button */ .auth-btn{ width: 100%; margin-top: 10px; border-radius: 14px; } /* footer */ .auth-foot{ padding: 0 18px 18px; } .auth-foot__line{ height: 1px; background: rgba(201,162,77,.18); margin: 10px 0 10px; } .auth-foot__text{ font-size: 12px; color: var(--muted); } /* Mobile tightening */ @media (max-width: 520px){ .auth-brand{ padding: 16px; } .auth-main .auth-header{ padding: 16px 16px 10px; } .auth-main form{ padding: 0 16px 16px; } .auth-foot{ padding: 0 16px 16px; } } /* Responsive visibility helpers */ .only-mobile{ display:none !important; } .only-desktop{ display:block !important; } @media (max-width: 900px){ .only-mobile{ display:block !important; } .only-desktop{ display:none !important; } } .mg-pager{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .mg-pager__btn, .mg-pager__num{ height:34px; min-width:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border:1px solid rgba(0,0,0,.10); border-radius:10px; font-weight:700; font-size:13px; text-decoration:none; background:#fff; color:#111; } .mg-pager__btn:hover, .mg-pager__num:hover{ border-color:rgba(0,0,0,.18); } .mg-pager__num.is-active{ background:#111; color:#fff; border-color:#111; } .mg-pager__btn.is-disabled{ opacity:.45; pointer-events:none; } .mg-pager__dots{ padding:0 6px; opacity:.6; font-weight:700; } /* ========================================================= RESPONSIVE LAYOUT PATCH (safe overrides) Put this at END of theme.css/ui.css ========================================================= */ /* Global safety */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; width: 100%; max-width: 100%; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; height: auto; } /* Shell must NOT overflow on mobile */ .app-shell { width: 100%; max-width: 100%; overflow-x: clip; /* prevents sideways spill */ } /* Flex layout: sidebar + main */ .app-shell { display: flex; min-height: 100vh; } /* Sidebar default width (desktop) */ .sidebar { flex: 0 0 280px; width: 280px; max-width: 280px; } /* Main must be allowed to shrink (important) */ .app-main, .main, .content, .page { flex: 1 1 auto; min-width: 0; /* 🔥 fixes grid/cards overflow */ width: 100%; max-width: 100%; } /* If your main currently has margin-left/padding-left for sidebar, neutralize on small screens */ @media (max-width: 768px) { .app-main, .main, .content, .page { margin-left: 0 !important; } } /* ---------- Mobile sidebar overlay behavior ---------- */ /* You already have: .mobile-overlay (seen in your blade) */ .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 80; } /* Mobile: sidebar becomes off-canvas */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; overflow: auto; z-index: 90; transform: translateX(-105%); transition: transform .22s ease; /* keep your theme background; don't force colors */ } /* When opened */ body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .mobile-overlay { opacity: 1; pointer-events: auto; } } /* Optional: if you have a "collapsed" desktop mode, make sure it truly removes width */ body.sidebar-collapsed .sidebar { width: 0 !important; max-width: 0 !important; flex-basis: 0 !important; overflow: hidden !important; } body.sidebar-collapsed .app-main, body.sidebar-collapsed .main, body.sidebar-collapsed .content, body.sidebar-collapsed .page { margin-left: 0 !important; } /* ========================================================= MOBILE OVERFLOW FIX — DO NOT REMOVE ========================================================= */ html, body{ width: 100%; max-width: 100%; overflow-x: hidden; } /* Allow grid children to shrink */ .app-main, .page, .page-wrap, .container{ min-width: 0; max-width: 100%; } /* Force shell to never exceed screen */ .app-shell{ width: 100%; max-width: 100%; } /* MOBILE: remove phantom sidebar column */ @media (max-width: 980px){ .app-shell{ display: block !important; /* kill grid on mobile */ } .app-main{ width: 100%; margin: 0 !important; } .sidebar{ left: 0; top: 0; height: 100vh; position: fixed; transform: translateX(-110%); } body.sidebar-open{ overflow: hidden; /* prevent page scroll when menu open */ } } /* ========================================================= MOBILE LAYOUT HARD FIX (phantom sidebar bug) ========================================================= */ html, body{ width:100%; max-width:100%; overflow-x:hidden; } /* Allow grid children to shrink instead of forcing width */ .app-main, .page, .page-wrap, .container{ min-width:0; max-width:100%; } /* Never let shell exceed screen */ .app-shell{ width:100%; max-width:100%; } /* MOBILE: kill grid and remove ghost sidebar column */ @media (max-width: 980px){ .app-shell{ display:block !important; /* removes grid math */ } .app-main{ width:100%; margin:0 !important; } .sidebar{ position:fixed; left:0; top:0; height:100vh; transform:translateX(-110%); } body.sidebar-open{ overflow:hidden; } } /* FINAL OVERRIDE: keep catalog 2 columns on all phones (>=320) */ @media (max-width: 719px){ .catalog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* GUARANTEE: 2 columns on all phones (>=320) */ @media (max-width: 980px){ .catalog-grid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* === PRODUCT IMAGE: SHOW FULL 1024x1024 WITHOUT CROPPING === */ .prod__media{ display:block; width:100%; aspect-ratio: 1 / 1; /* keeps square box */ background:#fff; overflow:hidden; border-radius: 14px; } .prod__media img{ width:100%; height:100%; object-fit: contain; /* ✅ show full image */ object-position: center; background:#fff; transition: transform .25s ease; } /* Optional subtle zoom on hover (desktop only) */ @media (hover:hover){ .prod__media:hover img{ transform: scale(1.03); } }