/* AccountHab — Marketplace & Buyer Dashboard styles. Extracted verbatim from the original Buyer.html design file (do not redesign — this is the source of truth). The :root block below fills in design tokens (--white, --blue-900, --border, --shadow-md, --text-muted, --blue-700, --success, --blue-50, --blue-500, --blue-800, --border-soft) that the original inline styles reference but never defined — values chosen to match the navy/blue/green palette already used in Admin.html/Seller.html. */ :root{ --white:#fff;--text:#202124;--text-muted:#777; --blue-900:#092e6b;--blue-800:#123f86;--blue-700:#1769e0;--blue-500:#3b82f6;--blue-50:#eef4ff; --success:#16a34a;--border:#e3e5e8;--border-soft:#eee; --shadow-md:0 4px 16px rgba(24,55,100,.08) } *{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f7f9;color:#202124} a{text-decoration:none;color:inherit} button,input,select{font:inherit} .header{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 28px;gap:16px;position:sticky;top:0;z-index:20} .logo{font-size:22px;font-weight:700} .nav{display:flex;gap:24px;font-size:14px;color:#555} .nav a:hover{color:#111} /* Reference-design header — search icon inside the same existing .search input (behavior/placeholder/Enter-to-search unchanged), plus a notification bell and a user avatar/role chip (both additive, see .header-icon-btn/.header-user-chip below). */ .search-wrap{position:relative;margin-left:auto;width:300px;flex:0 1 300px} .search-wrap .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:#9aa1ac;pointer-events:none} .search{width:100%;height:38px;border:1px solid #d8dce1;border-radius:6px;padding:0 12px 0 32px} .dashboard-link{font-size:14px;font-weight:600;white-space:nowrap} .header-icon-btn{position:relative;width:38px;height:38px;border-radius:8px;border:1px solid #e3e5e8;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#4b5563;flex:0 0 auto;padding:0} .header-icon-btn:hover{background:var(--blue-50);color:var(--blue-800);border-color:var(--blue-500)} .header-icon-btn svg{width:18px;height:18px;fill:currentColor} .header-icon-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center} .header-icon-badge:empty{display:none} .header-user-chip{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid #e3e5e8;cursor:pointer;flex:0 0 auto;color:var(--text)} .header-user-chip:hover{background:var(--blue-50);border-color:var(--blue-500)} .header-user-avatar{width:28px;height:28px;border-radius:50%;background:var(--blue-700);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .header-user-meta{display:flex;flex-direction:column;line-height:1.2} .header-user-name{font-size:12.5px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .header-user-role{font-size:10.5px;color:var(--text-muted)} .header-user-chevron{width:14px;height:14px;fill:#9aa1ac;flex:0 0 auto} .container{max-width:1250px;margin:24px auto;padding:0 20px} .hidden{display:none!important} .section-title{font-size:22px;font-weight:700;margin:0 0 18px} .category-bar{background:#fff;border:1px solid #e3e5e8;border-radius:7px;padding:16px 12px;display:flex;align-items:center;gap:8px;margin-bottom:16px} .cat-arrow{width:34px;height:34px;border:1px solid #ddd;background:#fff;border-radius:5px;cursor:pointer;flex:0 0 auto} .categories{display:flex;gap:11px;overflow:hidden;scroll-behavior:smooth;flex:1} /* Buyer Marketplace UX (Category Logo Size / All Sub Categories / Product Price Sorting / Direct Buy), section 1 — Main Category chips only, given moderately taller vertical padding so their resolved logo (see .category-icon below) has more visual presence. Deliberately NOT a redesign: still the same border/radius/hover chip language, still the same horizontally-scrolling row driven by #catLeft/#catRight — only the padding and icon size increase. Sub Category chips (.subcategory, further down) are explicitly untouched by this change. */ .category{display:flex;align-items:center;gap:9px;white-space:nowrap;border:1px solid #e2e4e7;background:#fff;border-radius:6px;padding:13px 16px;font-size:13px;cursor:pointer} .category:hover,.category.active{background:#f5f5f5;border-color:#bbb} .cat-icon{font-size:15px} /* Category -> Sub Category -> Product Logo Inheritance & Override System — the resolved Category/Sub Category logo shown inline before the name, when one exists. Sized up moderately (18px -> 30px) per Buyer Marketplace UX section 1 so it actually reads as a logo rather than a small bullet — object-fit:cover preserves its aspect ratio without distortion regardless of the source image's own proportions. */ .category-icon{width:30px;height:30px;object-fit:cover;border-radius:5px;flex:0 0 auto} .sub-wrap{background:#fff;border:1px solid #e3e5e8;border-radius:7px;padding:14px;margin-bottom:18px} .sub-title{font-size:14px;font-weight:700;margin-bottom:10px} .subcategories{display:flex;gap:8px;flex-wrap:wrap} .subcategory{display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd;border-radius:5px;padding:7px 11px;font-size:12px;cursor:pointer} .subcategory:hover,.subcategory.active{background:#f6f6f6} /* Sub Category chip icon — deliberately its OWN class, kept at the exact original 18px .category-icon size/radius from before Buyer Marketplace UX section 1 resized the Main Category one. Section 1 explicitly requires Sub Category presentation stay untouched, so this must never be merged back into .category-icon. */ .subcategory-icon{width:18px;height:18px;object-fit:cover;border-radius:4px;flex:0 0 auto} .products{background:transparent;border:0;box-shadow:none;overflow:visible} /* Grouped marketplace listing (Buyer Grouped Product List UI task, and its "Final Column Layout Correction" follow-up). Each .product-group is one grouped block: a dark .group-header bar (group name + "In Stock" / "Price per pc" / "Price" column labels — Price per pc is a column in its own right, deliberately never merged into Price) followed by its member products as .product-row lines. Both the header and the rows share the same grid-template-columns at every breakpoint so the column labels stay aligned with the data beneath them — the header's name cell simply spans the icon+title columns via grid-column. This reuses the existing --blue-900/--border-soft/--text-muted/--success tokens rather than introducing a new palette. */ .product-group{background:var(--white);border:1px solid var(--border-soft);border-radius:8px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-md)} .product-group:last-child{margin-bottom:0} .group-header{display:grid;grid-template-columns:52px minmax(160px,1fr) 104px 116px 96px 84px;gap:10px;align-items:center;padding:13px 16px;background:var(--blue-900);color:#fff} .group-header-name{grid-column:1/3;font-weight:700;font-size:14px;overflow-wrap:anywhere} .group-header-col{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.85} .product-row{display:grid;grid-template-columns:52px minmax(160px,1fr) 104px 116px 96px 84px;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-soft);font-size:13px} .product-row:last-child{border-bottom:0} .product-row:hover{background:#f7f9fc} .product-logo{width:40px;height:40px;border:1px solid #ddd;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#fafafa;overflow:hidden} .product-logo img{width:100%;height:100%;object-fit:cover} .product-title{font-weight:700;margin-bottom:3px;overflow-wrap:anywhere} .product-meta{color:#777;font-size:12px;overflow-wrap:anywhere} .product-cell-label{display:none;color:#888;font-size:11px;margin-bottom:3px} /* Exact stock + sold counters (cell-stock) — the "In Stock" column now shows the real Product::$stock/$sold values, not a boolean pill. */ .cell-stock{display:flex;flex-direction:column;line-height:1.35} .stock-qty{font-weight:700;font-size:13px} .stock-qty.zero{color:#b42318} .sold-qty{color:var(--text-muted);font-size:11px} /* Price-per-unit column — deliberately its own column, always the literal label "Price per pc" per row, matching the group header's own "Price per pc" column label directly above it. */ .cell-pplabel{color:var(--text-muted)} .pp-label{font-size:12px} .product-price-value{font-weight:700;font-size:14px} .buy-btn,.primary-btn{border:0;background:#222;color:#fff;border-radius:5px;height:36px;padding:0 14px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .buy-btn:hover,.primary-btn:hover{opacity:.9} .buy-btn:disabled{opacity:.4;cursor:not-allowed} .product-row .buy-btn{justify-self:end} .price{font-weight:700} .dashboard-layout{display:flex;gap:22px} .sidebar{width:220px;background:#fff;border:1px solid #e3e5e8;border-radius:7px;height:max-content;flex:0 0 auto;overflow:hidden} .side-title{padding:16px 18px;border-bottom:1px solid #eee;font-weight:700;display:flex;align-items:center;gap:9px} .side-title-icon{width:17px;height:17px;fill:var(--blue-700);flex:0 0 auto} /* Sidebar redesign — extends the approved Download Orders file-row visual language (clean white background, subtle borders/separators, modern typography, balanced spacing, small readable icons, consistent hover/active states, no excessive animation) to every nav item. Still the exact same nav destinations/functionality/Sign Out confirmation popup as before — see the (untouched) click-handling JS above; only the look changes. A left accent bar (box-shadow, not a layout-shifting border, so it never nudges the icon/label) marks the active item, matching the "keep the active navigation item visually distinguishable" requirement without the heavier full-row shading the plain .active/.hover rule used to rely on alone. */ .side-link{display:flex;align-items:center;gap:11px;padding:11px 18px;font-size:14px;line-height:1.3;color:#4b5563;border-bottom:1px solid #f1f1f1;cursor:pointer;transition:background-color .12s ease,color .12s ease;box-shadow:inset 3px 0 0 transparent} .side-link:last-child{border-bottom:0} .side-link:hover{background:var(--blue-50);color:var(--blue-800)} .side-link.active{background:var(--blue-50);color:var(--blue-800);font-weight:700;box-shadow:inset 3px 0 0 var(--blue-700)} .side-icon{width:18px;height:18px;flex:0 0 auto;fill:currentColor;opacity:.72;transition:opacity .12s ease} .side-link:hover .side-icon,.side-link.active .side-icon{opacity:1} .side-link-label{flex:1;min-width:0;overflow-wrap:anywhere} /* Sign Out — a subtle visual break from the rest of the list (a slightly heavier top border) since it ends the session rather than navigating within it; still the same row treatment otherwise, no separate red/ danger styling that would misrepresent it as destructive/irreversible (it only opens the existing confirmation popup). */ .side-link-signout{border-top:1px solid #e3e5e8} /* "Need Help?" card + footer — reference-design sidebar additions below the nav list. Contact Support reuses the existing Live Chat widget (see the click binding in dashboard.blade.php); no new markup/CSS is introduced for the chat itself. */ .sidebar-help-card{margin:14px;padding:14px;background:var(--blue-50);border:1px solid #dde8fb;border-radius:8px;text-align:center} .sidebar-help-title{font-weight:700;font-size:13px;color:var(--blue-900);margin-bottom:4px} .sidebar-help-text{font-size:11.5px;color:var(--text-muted);margin-bottom:10px;line-height:1.4} .sidebar-help-btn{width:100%;border:1px solid var(--blue-700);background:#fff;color:var(--blue-700);border-radius:6px;padding:8px 10px;font-size:12px;font-weight:700;cursor:pointer} .sidebar-help-btn:hover{background:var(--blue-700);color:#fff} .sidebar-footer{padding:14px 18px;text-align:center;border-top:1px solid #eee} .sidebar-footer-brand{font-weight:700;font-size:12.5px;color:var(--blue-900)} .sidebar-footer-tag{font-size:10.5px;color:var(--text-muted);margin-top:2px} .sidebar-footer-copy{font-size:10px;color:#aaa;margin-top:6px} /* Notifications count — a small pill badge instead of the old plain "(N)" text; empty (0 unread) collapses to nothing rather than showing a hollow pill. */ #notifCountBadge:empty{display:none} #notifCountBadge:not(:empty){flex:0 0 auto;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--blue-700);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center} .side-link.active #notifCountBadge:not(:empty){background:var(--blue-900)} .dashboard-main{flex:1;min-width:0} .page{display:none}.page.active{display:block} h1{font-size:23px;margin:0 0 7px} .subtitle{font-size:13px;color:#777;margin-bottom:20px} /* Reference-design page header — rounded-square icon + title + breadcrumb, used so far only by Download Orders (#page-downloads). */ .page-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px} .page-header-titlewrap{display:flex;align-items:center;gap:14px} .page-header-icon{width:44px;height:44px;border-radius:12px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .page-header-icon svg{width:22px;height:22px;fill:var(--blue-700)} .page-header-titlewrap h1{margin:0} .page-header-titlewrap .subtitle{margin:2px 0 0} .page-breadcrumb{font-size:12.5px;color:var(--text-muted);white-space:nowrap} .page-breadcrumb a{color:var(--text-muted);cursor:pointer} .page-breadcrumb a:hover{color:var(--blue-700)} .page-breadcrumb-sep{margin:0 6px;color:#c6cbd2} .panel{background:#fff;border:1px solid #e3e5e8;border-radius:7px;padding:20px;margin-bottom:18px} .panel-title{font-size:16px;font-weight:700;margin-bottom:16px} .table-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;color:#555} .table-top select{height:30px;border:1px solid #ddd;border-radius:4px} .table-scroll{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:13px} th,td{border-bottom:1px solid #eee;padding:12px 10px;text-align:left;white-space:nowrap} th{background:#fafafa;font-weight:700} .empty{text-align:center!important;color:#888;padding:35px!important} .pagination{display:flex;justify-content:flex-end;gap:6px;margin-top:14px} .pagination button{border:1px solid #ddd;background:#fff;padding:7px 12px;border-radius:5px;cursor:pointer;font-size:12px} .profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .detail-row{padding:12px 0;border-bottom:1px solid #eee;font-size:14px} .detail-label{font-weight:700;margin-bottom:5px}.muted{color:#777} .form-group{margin-bottom:15px} .form-group label{display:block;font-size:13px;font-weight:700;margin-bottom:7px} .input,.select{width:100%;height:40px;border:1px solid #d8dce1;border-radius:5px;padding:0 11px;background:#fff} .gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .gateway{border:1px solid #ddd;border-radius:6px;padding:15px;cursor:pointer} .gateway.selected{border-color:#222} .gateway strong{display:block;margin-bottom:5px}.gateway span{font-size:12px;color:#777} .recommended{font-size:11px;background:#eee;padding:3px 6px;border-radius:4px;margin-left:5px} .quick{display:flex;gap:8px;margin:8px 0 14px}.quick button{background:#fff;border:1px solid #ddd;border-radius:5px;padding:7px 14px;cursor:pointer} .crypto-list{display:flex;flex-wrap:wrap;gap:8px}.crypto{border:1px solid #e2e2e2;border-radius:5px;padding:8px 11px;font-size:12px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{border:1px solid #eee;border-radius:6px;padding:15px} .step-num{font-size:20px;font-weight:700;margin-bottom:8px}.step-text{font-size:13px;color:#666;line-height:1.45} .security{text-align:center;color:#666;font-size:13px;padding:5px 0 15px} .tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:16px} .tab{padding:10px 17px;font-size:13px;color:#666;cursor:pointer}.tab.active{color:#111;font-weight:700;border-bottom:2px solid #222} .status{font-weight:700}.failed{color:#b42318} .purchase-box{background:#fff;border:1px solid #dfe2e5;border-radius:4px;padding:0 22px 22px} .purchase-title{font-size:15px;font-weight:700;padding:15px 0;border-bottom:1px solid #ddd;overflow-wrap:anywhere} .price-banner{margin-top:20px;background:#d98222;color:#fff;border-radius:4px;padding:18px 15px;font-weight:700} .purchase-info{border:1px solid #dfe2e5;border-radius:4px;margin-top:20px;padding:14px} .info-row{display:grid;grid-template-columns:175px 1fr;padding:8px 0;font-size:14px;align-items:center} .quantity{width:100%;max-width:213px;height:34px;border:1px solid #ddd;border-radius:4px;padding:0 10px} .total-box{border:1px solid #dfe2e5;border-radius:4px;margin-top:20px;padding:14px} .total-row{display:grid;grid-template-columns:175px 1fr;padding:8px 0;font-size:14px}.grand{font-weight:700}.grand-value{color:#16883b;font-size:17px;font-weight:700} .purchase-btn{width:100%;height:40px;margin-top:100px;border:0;border-radius:4px;background:#73cf88;color:#fff;font-weight:700;cursor:pointer} .purchase-btn:disabled{opacity:.5;cursor:not-allowed} .description{border:1px solid #dfe2e5;border-radius:4px;margin-top:22px;padding:16px;font-size:14px} /* Task 13 (Phase 6) — the product description is now rendered as real, server-sanitized HTML (see App\Services\ProductDescriptionSanitizer) rather than escaped plain text, so it needs basic typography for the tags the seller's rich-text editor can actually produce. Nothing else about .description above changes. */ .description h2{font-size:17px;margin:14px 0 8px;color:var(--blue-900)} .description h3{font-size:15px;margin:12px 0 6px;color:var(--blue-900)} .description ul,.description ol{margin:0 0 10px;padding-left:22px} .description blockquote{margin:0 0 10px;padding:6px 12px;border-left:3px solid var(--blue-500);color:#555;background:#f7f9fc} .description a{color:var(--blue-700)} .description hr{border:0;border-top:1px solid var(--border);margin:14px 0} .description p:last-child{margin-bottom:0} /* Table support (bug fix — pasted tables were collapsing to flat text on save; see App\Services\ProductDescriptionSanitizer's table handling). No inline style ever survives sanitization, so borders/spacing/header shading are applied here in CSS rather than trusting anything from the seller's paste. */ .description table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13px} .description th,.description td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top} .description th{background:#f3f6fb;color:var(--blue-900);font-weight:700} .description table tr:nth-child(even) td{background:#fafbfd} /* Extended-formatting toolbar (alignment, indent, text color, highlight, font size, font family) — task: "Enhance the existing rich-text editor". Buyer/Public never edits, only renders, so this is display- only CSS for the same class vocabulary Seller/Admin's editors produce and App\Services\ProductDescriptionSanitizer allowlists — kept in sync with that class's SPAN_*_CLASSES/ALIGN_CLASSES/INDENT_CLASSES and with the identical rules in admin.css's .description block. */ .description .ah-align-left{text-align:left} .description .ah-align-center{text-align:center} .description .ah-align-right{text-align:right} .description .ah-align-justify{text-align:justify} .description .ah-indent-1{margin-left:28px} .description .ah-indent-2{margin-left:56px} .description .ah-indent-3{margin-left:84px} .description .ah-color-black{color:#111827} .description .ah-color-darkgray{color:#4b5563} .description .ah-color-red{color:#dc2626} .description .ah-color-orange{color:#ea580c} .description .ah-color-green{color:#16a34a} .description .ah-color-blue{color:#2563eb} .description .ah-color-purple{color:#7c3aed} .description .ah-hl-yellow{background:#fde047} .description .ah-hl-green{background:#86efac} .description .ah-hl-blue{background:#93c5fd} .description .ah-hl-orange{background:#fdba74} .description .ah-hl-pink{background:#f9a8d4} .description .ah-size-small{font-size:.8em} .description .ah-size-normal{font-size:1em} .description .ah-size-large{font-size:1.3em} .description .ah-size-xlarge{font-size:1.6em} .description .ah-font-arial{font-family:Arial,Helvetica,sans-serif} .description .ah-font-georgia{font-family:Georgia,'Times New Roman',serif} .description .ah-font-tahoma{font-family:Tahoma,Geneva,sans-serif} .description .ah-font-times{font-family:'Times New Roman',Times,serif} .description .ah-font-verdana{font-family:Verdana,Geneva,sans-serif} /* Admin-only fonts (50) — a buyer never CHOOSES these (there is no buyer-facing UI at all), but a product description an Admin enhanced with one of these tokens must still render correctly here, same as any other admin-approved formatting. Kept in sync with App\Services\ProductDescriptionSanitizer::ADMIN_FONT_CLASSES. These are REAL, self-hosted webfont assets (public/fonts/admin/*.woff2) — see admin.css's identical @font-face block for the full note. */ @font-face{font-family:'Aerial Faster - Regular';src:url('/fonts/admin/aerial-faster-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Armelie';src:url('/fonts/admin/armelie.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Awesome';src:url('/fonts/admin/awesome.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'BalapDemo';src:url('/fonts/admin/balapdemo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Baron Kuffner';src:url('/fonts/admin/baron-kuffner.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Bastliga One';src:url('/fonts/admin/bastliga-one.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Battlesbridge Demo';src:url('/fonts/admin/battlesbridge-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Black Crush';src:url('/fonts/admin/black-crush-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Blackbones DEMO';src:url('/fonts/admin/blackbones-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Blocksmith Stacked';src:url('/fonts/admin/blocksmith-stacked.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'brotheric';src:url('/fonts/admin/brotheric.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'ByteBounce';src:url('/fonts/admin/bytebounce.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Dearllane';src:url('/fonts/admin/dearllane.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Drason Demo';src:url('/fonts/admin/drason-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Electrone';src:url('/fonts/admin/electrone.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Galway';src:url('/fonts/admin/galway.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'GERALDINE PERSONAL USE';src:url('/fonts/admin/geraldine-personal-use.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Gondens DEMO';src:url('/fonts/admin/gondens-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Graen Metal';src:url('/fonts/admin/graen-metal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Graffiti Stream Extrude';src:url('/fonts/admin/graffiti-stream-extrude.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Grindy Brush';src:url('/fonts/admin/grindy-brush.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Hero archer free version';src:url('/fonts/admin/hero-archer-free-version.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Heroking';src:url('/fonts/admin/heroking.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'High Beasty';src:url('/fonts/admin/high-beasty.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Higher Jump';src:url('/fonts/admin/higher-jump.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Jersey Varsity';src:url('/fonts/admin/jersey-varsity.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Kultum Ramadhan';src:url('/fonts/admin/kultum-ramadhan.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Lucy Said Ok Personal Use';src:url('/fonts/admin/lucy-said-ok-personal-use.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Manbow';src:url('/fonts/admin/manbow.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Metal Thorn';src:url('/fonts/admin/metal-thorn.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Moralana';src:url('/fonts/admin/moralana.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Over Fear';src:url('/fonts/admin/over-fear.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Perfograma';src:url('/fonts/admin/perfograma.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Priestacy';src:url('/fonts/admin/priestacy.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'ROOSTER PERSONAL USE';src:url('/fonts/admin/rooster-personal-use.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Rostex';src:url('/fonts/admin/rostex.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Runethia';src:url('/fonts/admin/runethia.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Runiga';src:url('/fonts/admin/runiga.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Rustic Roadway - Personal use';src:url('/fonts/admin/rustic-roadway-personal-use.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'RUSTY ATTACK DEMO';src:url('/fonts/admin/rusty-attack-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'SF Sports Night';src:url('/fonts/admin/sf-sports-night.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Sketch Chalk';src:url('/fonts/admin/sketch-chalk.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Sobek Personal Use Only';src:url('/fonts/admin/sobek-personal-use-only.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'SpeedBackDemo';src:url('/fonts/admin/speedbackdemo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Symphonie Calligraphy DEMO';src:url('/fonts/admin/symphonie-calligraphy-demo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'The munday free version';src:url('/fonts/admin/the-munday-free-version.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Transcity';src:url('/fonts/admin/transcity.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Twilight Is Beautiful';src:url('/fonts/admin/twilight-is-beautiful.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Vandals Slash';src:url('/fonts/admin/vandals-slash.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Westner';src:url('/fonts/admin/westner.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} .description .ah-font-aerial-faster-regular{font-family:'Aerial Faster - Regular',sans-serif} .description .ah-font-armelie{font-family:'Armelie',sans-serif} .description .ah-font-awesome{font-family:'Awesome',sans-serif} .description .ah-font-balapdemo{font-family:'BalapDemo',sans-serif} .description .ah-font-baron-kuffner{font-family:'Baron Kuffner',sans-serif} .description .ah-font-bastliga-one{font-family:'Bastliga One',sans-serif} .description .ah-font-battlesbridge-demo{font-family:'Battlesbridge Demo',sans-serif} .description .ah-font-black-crush-demo{font-family:'Black Crush',sans-serif} .description .ah-font-blackbones-demo{font-family:'Blackbones DEMO',sans-serif} .description .ah-font-blocksmith-stacked{font-family:'Blocksmith Stacked',sans-serif} .description .ah-font-brotheric{font-family:'brotheric',sans-serif} .description .ah-font-bytebounce{font-family:'ByteBounce',sans-serif} .description .ah-font-dearllane{font-family:'Dearllane',sans-serif} .description .ah-font-drason-demo{font-family:'Drason Demo',sans-serif} .description .ah-font-electrone{font-family:'Electrone',sans-serif} .description .ah-font-galway{font-family:'Galway',sans-serif} .description .ah-font-geraldine-personal-use{font-family:'GERALDINE PERSONAL USE',sans-serif} .description .ah-font-gondens-demo{font-family:'Gondens DEMO',sans-serif} .description .ah-font-graen-metal{font-family:'Graen Metal',sans-serif} .description .ah-font-graffiti-stream-extrude{font-family:'Graffiti Stream Extrude',sans-serif} .description .ah-font-grindy-brush{font-family:'Grindy Brush',sans-serif} .description .ah-font-hero-archer-free-version{font-family:'Hero archer free version',sans-serif} .description .ah-font-heroking{font-family:'Heroking',sans-serif} .description .ah-font-high-beasty{font-family:'High Beasty',sans-serif} .description .ah-font-higher-jump{font-family:'Higher Jump',sans-serif} .description .ah-font-jersey-varsity{font-family:'Jersey Varsity',sans-serif} .description .ah-font-kultum-ramadhan{font-family:'Kultum Ramadhan',sans-serif} .description .ah-font-lucy-said-ok-personal-use{font-family:'Lucy Said Ok Personal Use',sans-serif} .description .ah-font-manbow{font-family:'Manbow',sans-serif} .description .ah-font-metal-thorn{font-family:'Metal Thorn',sans-serif} .description .ah-font-moralana{font-family:'Moralana',sans-serif} .description .ah-font-over-fear{font-family:'Over Fear',sans-serif} .description .ah-font-perfograma{font-family:'Perfograma',sans-serif} .description .ah-font-priestacy{font-family:'Priestacy',sans-serif} .description .ah-font-rooster-personal-use{font-family:'ROOSTER PERSONAL USE',sans-serif} .description .ah-font-rostex{font-family:'Rostex',sans-serif} .description .ah-font-runethia{font-family:'Runethia',sans-serif} .description .ah-font-runiga{font-family:'Runiga',sans-serif} .description .ah-font-rustic-roadway-personal-use{font-family:'Rustic Roadway - Personal use',sans-serif} .description .ah-font-rusty-attack-demo{font-family:'RUSTY ATTACK DEMO',sans-serif} .description .ah-font-sf-sports-night{font-family:'SF Sports Night',sans-serif} .description .ah-font-sketch-chalk{font-family:'Sketch Chalk',sans-serif} .description .ah-font-sobek-personal-use-only{font-family:'Sobek Personal Use Only',sans-serif} .description .ah-font-speedbackdemo{font-family:'SpeedBackDemo',sans-serif} .description .ah-font-symphonie-calligraphy-demo{font-family:'Symphonie Calligraphy DEMO',sans-serif} .description .ah-font-the-munday-free-version{font-family:'The munday free version',sans-serif} .description .ah-font-transcity{font-family:'Transcity',sans-serif} .description .ah-font-twilight-is-beautiful{font-family:'Twilight Is Beautiful',sans-serif} .description .ah-font-vandals-slash{font-family:'Vandals Slash',sans-serif} .description .ah-font-westner{font-family:'Westner',sans-serif} .auth-box{max-width:470px;margin:45px auto;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:26px;box-shadow:var(--shadow-md)} .auth-title{font-size:23px;font-weight:800;color:var(--blue-900);margin-bottom:7px}.auth-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:22px} .auth-footer{text-align:center;font-size:13px;color:var(--text-muted);margin-top:18px}.auth-footer a{color:var(--blue-700);font-weight:700} .confirm-box{max-width:520px;margin:55px auto;text-align:center;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:30px;box-shadow:var(--shadow-md)} .confirm-icon{font-size:38px;color:var(--success);margin-bottom:10px}.confirm-title{font-size:22px;font-weight:800;color:var(--blue-900);margin-bottom:8px} .confirm-text{font-size:14px;color:var(--text-muted);line-height:1.6}.confirm-actions{display:flex;justify-content:center;gap:10px;margin-top:22px} .secondary-btn{height:40px;border:1px solid var(--border);background:var(--white);color:var(--text);border-radius:7px;padding:0 16px;font-weight:700;cursor:pointer} .secondary-btn:hover{background:var(--blue-50);border-color:var(--blue-500);color:var(--blue-800);transform:translateY(-1px)} .order-details{margin-top:20px;border:1px solid var(--border);border-radius:8px;overflow:hidden;text-align:left} .order-detail-row{display:grid;grid-template-columns:150px 1fr;padding:11px 13px;border-bottom:1px solid var(--border-soft);font-size:13px}.order-detail-row:last-child{border-bottom:0} .search-results{margin-top:15px}.result-empty{padding:28px;text-align:center;color:var(--text-muted);border:1px dashed var(--border);border-radius:8px;background:var(--white)} .form-error{background:#fff1f1;border:1px solid #ffd4d4;color:#a21d1d;border-radius:7px;padding:10px 14px;margin-bottom:14px;font-size:13px} /* Buyer Refund/Replacement Request modal — 30-minute eligibility notice, made visually prominent/action-oriented per the Buyer request UI revision (styling only; the window rule itself is still computed entirely server-side by App\Services\RefundReplacementService). Same text/countdown JS as before (openRefundReplacementModal() in buyer/dashboard.blade.php), just no longer a plain muted line. */ .rr-window-notice{background:#fff8e6;border:1px solid #ffd875;color:#8a5a00;border-radius:7px;padding:11px 14px;margin-bottom:14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px} .rr-window-notice:before{content:"⏱";font-size:15px} @media(max-width:900px){ .header{padding:0 15px;gap:15px}.nav{display:none}.search-wrap{width:210px} .header-user-meta{display:none} .dashboard-layout{display:block}.sidebar{width:100%;margin-bottom:15px} .profile-grid,.gateway-grid,.steps{grid-template-columns:1fr} /* Tablet: still the same five logical columns (Product | In Stock | Price per pc | Price | Buy) as a real grid, just narrower — nothing is dropped or merged, only compacted. */ .group-header,.product-row{grid-template-columns:40px 1fr 90px 98px 82px 74px;gap:6px} .group-header{padding:11px 10px} .group-header-col{font-size:10px} .product-row{padding:12px 10px;font-size:12px} .product-cell-label{display:block} .stock-qty{font-size:12px} .pp-label{font-size:11px} } @media(max-width:600px){ .header{height:auto;padding:12px;flex-wrap:wrap}.search-wrap{order:3;width:100%;margin:0}.container{padding:0 12px;margin:15px auto} .page-header-row{align-items:flex-start}.page-breadcrumb{order:3;width:100%} /* Mobile: reflow to a single readable column per product instead of a cramped 6-up grid — icon on the left spanning the stacked info, Buy button on its own row so it stays a full, easy-to-tap target. Nothing is removed: title, subtitle, exact stock, sold count, "Price per pc", and price all still appear, just stacked instead of side-by-side, and the page never scrolls horizontally. */ .group-header{grid-template-columns:1fr;padding:11px 12px} .group-header-name{grid-column:1} .group-header-col{display:none} .product-cell-label{display:none} .product-row{ display:grid; grid-template-columns:40px 1fr; grid-template-areas: "logo title" "logo stock" "logo pplabel" "logo price" ". buy"; row-gap:4px;column-gap:10px; padding:13px 10px; } .product-row .cell-logo{grid-area:logo;align-self:start} .product-row .cell-title{grid-area:title} .product-row .cell-stock{grid-area:stock} .product-row .cell-pplabel{grid-area:pplabel} .product-row .cell-price{grid-area:price;text-align:left;justify-self:start} .product-row .buy-btn{grid-area:buy;justify-self:end;margin-top:2px} .product-title{font-size:12px}.purchase-box{padding:0 12px 15px}.info-row,.total-row{grid-template-columns:125px 1fr}.purchase-btn{margin-top:50px} } .logo-img{height:42px;width:auto;display:block;object-fit:contain} @media(max-width:760px){.logo-img{height:37px}} /* ===== Loading / API-state helpers (new, additive — not part of the original design) ===== */ /* Role-aware header nav actions (Task 7) — a small flex row of .dashboard-link items, rendered by AccountHabAPI.renderNav(). */ .nav-actions{display:flex;align-items:center;gap:14px} .guard-box{max-width:420px;margin:80px auto;text-align:center;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:30px;box-shadow:var(--shadow-md)} .guard-box h2{color:var(--blue-900);margin-top:0} .guard-box a{display:inline-block;margin-top:12px;background:var(--blue-700);color:#fff;border-radius:6px;padding:10px 18px;font-weight:700} /* Order detail modal (Orders + Checkout Foundation) — same tokens/shadow as .guard-box above, just as an overlay instead of a page-centered box, so it matches the existing visual language rather than introducing a new one. */ .order-overlay{position:fixed;inset:0;background:rgba(9,20,40,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto} .order-overlay.show{display:flex} .order-modal{background:var(--white);border-radius:10px;max-width:560px;width:100%;padding:24px;box-shadow:var(--shadow-md)} .order-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .order-modal-close{border:0;background:none;font-size:22px;cursor:pointer;color:#888;line-height:1} /* Horizontal Scrollbar fix (Buyer Order Details modal) — the Product Name popup (#rrHistoryProductNameOverlay) can now be opened from a Product title INSIDE the Order Details modal, which is itself an .order-overlay already showing. Every .order-overlay shares the same z-index:50, so without this override the two tie and DOM order decides the winner — #orderDetailOverlay is declared later in dashboard.blade.php than #rrHistoryProductNameOverlay, so it would paint on top and make the popup invisible/unclickable (confirmed in real-browser testing before this rule was added). This popup is only ever meant to sit on top of whatever page or modal opened it, so it gets its own, higher z-index rather than relying on DOM order — safe because it is the only element with this id, so this cannot change the stacking of anything else. */ #rrHistoryProductNameOverlay{z-index:60} /* Buyer Notifications inbox (Task 12) — reuses .panel/.empty/.secondary-btn/ .status tokens already established above rather than introducing a new visual language. */ .notif-item{display:flex;gap:12px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid var(--border-soft)} .notif-item:last-child{border-bottom:0} .notif-item.unread{background:var(--blue-50)} .notif-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--blue-500)} .notif-item.unread .notif-dot{background:var(--blue-700)} .notif-body{flex:1;min-width:0} .notif-title{font-weight:700;font-size:14px;overflow-wrap:anywhere} .notif-message{font-size:13px;color:var(--text-muted);margin-top:3px;overflow-wrap:anywhere} .notif-meta{font-size:11px;color:#999;margin-top:5px} .notif-item-actions{flex:0 0 auto} /* Task 14 — per-file download list (Order Detail modal's #odFiles, and the extra rows the Download Orders table grows per file-based order). Reuses .order-details' border/row language rather than a new one. */ .file-list{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden} .file-list-title{padding:9px 13px;font-size:12px;font-weight:700;color:var(--text-muted);background:var(--blue-50);border-bottom:1px solid var(--border-soft)} /* Reference-design Download Orders card layout — replaces the earlier table-based Download Orders markup (from the original responsive-layout fix) with a rounded card per order and a distinct "Files Delivered" panel, per the attached reference image. The three wrap/width/flex fixes that table-based layout needed (documented in the git history for this section) are superseded here: .doc-files-panel's own max-width now bounds the files column instead of an nth-child(7) table-cell selector, and .file-row/.file-row-name/.file-row-meta (still a single shared component reused by the Order Detail overlay and Refund & Replacement History — see fileRowHtml()'s own docblock) keep the same white-space:normal/overflow-wrap:anywhere overrides so long filenames still wrap safely, table cell or not. */ .downloads-order-list{display:flex;flex-direction:column;gap:14px} .downloads-empty{text-align:center;color:#888;padding:35px;background:#fff;border:1px solid var(--border-soft);border-radius:8px} .download-order-card{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--border-soft);border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.06);overflow:hidden} .doc-info{flex:1 1 300px;min-width:260px;padding:16px 18px;display:flex;flex-direction:column;gap:8px} .doc-info-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .doc-order-num{font-weight:700;font-size:13px;color:var(--blue-900)} .doc-badges{display:flex;gap:6px;flex-wrap:wrap} .doc-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap} .doc-badge-paid,.doc-badge-ready{background:#e8f8ee;color:var(--success)} .doc-badge-na{background:#fdeceb;color:#b42318} .doc-badge-pending{background:#fff6e6;color:#a15c00} .doc-product{min-width:0} .doc-meta-row{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--text-muted)} .doc-order-action{margin-top:4px} .doc-files-panel{flex:1 1 300px;min-width:260px;max-width:420px;background:#f8fafc;border-left:1px solid var(--border-soft);display:flex;flex-direction:column} .doc-files-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:12px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border-soft)} .doc-files-header svg{width:12px;height:12px;fill:#9aa1ac;flex:0 0 auto} .doc-files-list{padding:2px 6px} @media(max-width:760px){ .download-order-card{flex-direction:column} /* flex-basis:300px on .doc-info/.doc-files-panel is a WIDTH hint for the side-by-side row layout above — once flex-direction switches to column, the same flex-basis is read as a HEIGHT hint instead, forcing each panel to a tall minimum height it doesn't need and leaving a large blank gap before the next one starts. flex-basis:auto here lets each panel size to its own content height when stacked. */ .doc-info,.doc-files-panel{flex-basis:auto;min-width:0} .doc-files-panel{max-width:none;border-left:0;border-top:1px solid var(--border-soft)} } .file-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 13px;border-bottom:1px solid var(--border-soft);font-size:13px} .file-row:last-child{border-bottom:0} .file-row-icon{width:26px;height:26px;border-radius:6px;background:#eef1f5;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .file-row-icon svg{width:14px;height:14px;fill:#5b6473} .file-row-download-btn{display:inline-flex;align-items:center;gap:6px} .file-row-download-btn svg{width:13px;height:13px;fill:currentColor} .file-row-info{flex:1 1 220px;min-width:0} .file-row-name{font-weight:600;white-space:normal;overflow-wrap:anywhere} /* UI simplification — the meta line now holds only the file size (the full MIME type and the per-file Product Title, both redundant with other UI already shown, were removed; see fileRowHtml()'s own docblock in dashboard.blade.php). A short file-extension badge next to the filename replaces the old MIME type text; kept as an inline pill (not its own stacked line like .file-row-replacement-badge) since it's short enough to sit beside the name without risking the column-overflow bug this row already had fixed once. */ .file-row-type-badge{display:inline-block;margin-left:6px;background:var(--blue-50);color:var(--text-muted);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;vertical-align:middle;white-space:nowrap} .file-row-meta{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:normal;overflow-wrap:anywhere} .file-row .secondary-btn{height:32px;padding:0 12px;white-space:nowrap;flex-shrink:0} .file-row-unavailable{font-size:12px;color:#b42318;font-weight:700} .downloads-file-list{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-soft)} .downloads-file-list .file-row{padding:6px 0;border-bottom:0;font-size:12px} /* Narrow screens — stack the file info above a full-width Download button (same "own row, full tap target" pattern already used for the Marketplace product row's Buy button in this file's 600px breakpoint) rather than letting the row keep squeezing horizontally. */ @media(max-width:600px){ /* flex-wrap:nowrap here is required, not decorative — .file-row's base rule sets flex-wrap:wrap for the >600px row layout (so a very long inline run can drop to a second line without fully stacking); left on at the same time as flex-direction:column here, a flex container wraps into additional COLUMNS instead of just growing taller, which silently blew .file-row-info/the Download button out to hundreds of pixels wide, further right than the row itself — this is what actually caused it, confirmed by comparing each element's own getBoundingClientRect() in a real headless-browser run. */ .file-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch} .file-row-info{flex-basis:auto} .file-row .secondary-btn,.file-row>.file-row-unavailable{align-self:stretch;text-align:center} } /* ===== Phase 4B — Replacement delivery labeling + Buyer feedback (additive only; reuses .form-group/.input/.primary-btn/.secondary-btn). ===== */ .file-row-replacement-badge{display:inline-block;margin-top:3px;background:#eef4ff;color:#1d4ed8;border-radius:5px;padding:2px 7px;font-size:10px;font-weight:700} .rr-feedback-note{font-size:12px;color:var(--text-muted);margin-top:6px} /* Buyer Replacement History — a dedicated, clearly-labeled summary block in the Order Detail modal (separate from the plain #odFiles list and from the existing inline refund-only text), plus the "Replacement Delivery" file-list group it sits alongside. Deliberately reuses the same .file-list/.status/.rr-window-notice visual language already established above rather than introducing a new component style. */ .rr-history{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden} .rr-history-title{padding:9px 13px;font-size:12px;font-weight:700;color:var(--text-muted);background:var(--blue-50);border-bottom:1px solid var(--border-soft)} .rr-history-row{display:grid;grid-template-columns:175px 1fr;gap:8px;padding:8px 13px;font-size:13px;border-bottom:1px solid var(--border-soft)} .rr-history-row:last-child{border-bottom:0} .rr-history-row strong{font-weight:700;color:var(--text-muted);font-size:12px} .rr-history-note{font-size:12px;color:#8a5a00;background:#fff8e6;border-top:1px solid var(--border-soft);padding:9px 13px} .rr-history-file-list{margin-top:10px;border-color:#c7d7fb} .rr-history-file-list .file-list-title{background:#eef4ff;color:#1d4ed8} /* Buyer Refund & Replacement History table only — Requested column shows date and time stacked on two lines instead of one. white-space:normal overrides the shared th,td{white-space:nowrap} rule (line ~123) for just these two lines; every other table/column in the app keeps its existing single-line behavior. */ .rrh-requested-date{white-space:normal;font-weight:600} .rrh-requested-time{white-space:normal;margin-top:2px;font-size:11px} /* Fix Refund/Replacement Request Form — Inventory Method Specific Logic. "Affected Product / Delivered Files" picker (#rrFilesGroup, Upload Files products only) — reuses the same .file-row proportions/spacing already established above for a checkbox-selectable row instead of a bare read-only one, plus the same .product-logo-sm/.file-row-type-badge components (via productLogoHtml()/fileTypeLabel() in dashboard.blade.php) so this list looks consistent with the Files Delivered panel it mirrors. Scrollable with a max-height so an order with many delivered files never grows the modal itself unreasonably tall. */ .rr-files-list{max-height:260px;overflow-y:auto;border:1px solid var(--border-soft);border-radius:8px} .rr-file-select-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border-soft);cursor:pointer;font-size:13px} .rr-file-select-row:last-child{border-bottom:0} .rr-file-select-row:hover{background:var(--blue-50)} .rr-file-select-row input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;cursor:pointer} .rr-file-select-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px} .rr-file-select-product{font-size:11px;color:var(--text-muted);font-weight:700} .rr-file-select-filename{font-weight:600;white-space:normal;overflow-wrap:anywhere} .rr-file-select-meta{font-size:11px;color:var(--text-muted)} /* Requested Quantity is derived from the checkbox selection in this mode (see rrSyncQuantityFromFileSelection() in dashboard.blade.php) rather than typed — a subtle "not directly editable" treatment on the same .input element, not a different component. */ #rrQuantity[readonly]{background:#f4f6f9;color:var(--text-muted);cursor:not-allowed} @media(max-width:600px){ .rr-files-list{max-height:220px} } /* Buyer Refund & Replacement History table only — Product column: a fixed, reasonable width with the name clamped to two lines and an ellipsis, so a long Product name can never stretch the table or force a horizontal scrollbar. A real