/* ═══ Client portal — all page views (no inline styles in blades) ═══ */ .pac-container { z-index: 9999 !important; } .cp-body .cp-page { padding: 0; } /* Shared list/table pages */ .cp-body .inventory-container, .cp-body .websites-container, .cp-body .notifications-container { padding: 0; min-height: auto; background: transparent; } .cp-body .inventory-header-card, .cp-body .header-card, .cp-body .notifications-header { padding: 1.35rem 1.5rem; margin-bottom: 1rem; } .cp-body .inventory-header-card h2, .cp-body .header-card h2 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--cp-text); } .cp-body .inventory-header-card p { color: var(--cp-muted); font-size: 0.85rem; margin: 0.35rem 0 0; } .cp-body .stats-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.85rem; } .cp-body .action-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .cp-body .btn-secondary-custom { background: #fff; border: 1px solid var(--cp-border); color: var(--cp-text); border-radius: 12px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.84rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; transition: all 0.15s; } .cp-body .btn-secondary-custom:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-body .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--cp-muted); } .cp-body .masserie-food-rows-scroll { max-height: 280px; overflow-y: auto; padding-right: 4px; } .cp-body .mobile-filter-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cp-border); background: #fff; color: var(--cp-primary); } .cp-body .filters-panel { display: block; } .cp-body .client-filters-form .form-label { font-weight: 700; font-size: 0.78rem; color: #475569; margin-bottom: 0.35rem; } .cp-body .client-filters-form .input-group-text { background: #f8fafc; border-color: var(--cp-border); border-radius: 12px 0 0 12px; } .cp-body .client-filters-form .form-control, .cp-body .client-filters-form .form-select { border-radius: 12px; border-color: var(--cp-border); } /* Sales & reports */ .cp-body .sales-container, .cp-body .reports-container { padding: 0; } .cp-body .sales-header, .cp-body .reports-header, .cp-body .filters-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.35rem 1.5rem; margin-bottom: 1rem; box-shadow: var(--cp-shadow); } .cp-body .sales-header h1, .cp-body .reports-header h1 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.25rem; color: var(--cp-text); } .cp-body .sales-header p, .cp-body .reports-header p { color: var(--cp-muted); margin: 0; font-size: 0.85rem; } .cp-body .filters-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; align-items: end; } .cp-body .filters-form .form-group { display: flex; flex-direction: column; } .cp-body .filters-form .form-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 0.35rem; } .cp-body .filters-form .form-control, .cp-body .filters-form .form-select { border-radius: 12px; border-color: var(--cp-border); padding: 0.55rem 0.75rem; } .cp-body .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; } .cp-body .stats-grid .stat-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.1rem; box-shadow: var(--cp-shadow); position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; } .cp-body .stats-grid .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cp-primary); } .cp-body .stats-grid .stat-card.success::before { background: #10b981; } .cp-body .stats-grid .stat-card.warning::before { background: #f59e0b; } .cp-body .stats-grid .stat-card.danger::before { background: #ef4444; } .cp-body .stats-grid .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .cp-body .stats-grid .stat-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 0.65rem; font-size: 1rem; background: rgba(91, 92, 245, 0.1); color: var(--cp-primary); } .cp-body .stats-grid .stat-icon.success { background: #ecfdf5; color: #059669; } .cp-body .stats-grid .stat-icon.warning { background: #fffbeb; color: #d97706; } .cp-body .stats-grid .stat-icon.danger { background: #fef2f2; color: #dc2626; } .cp-body .stats-grid .stat-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cp-muted); margin-bottom: 0.35rem; } .cp-body .stats-grid .stat-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; color: var(--cp-text); } .cp-body .stats-grid .stat-value.success { color: #059669; } .cp-body .stats-grid .stat-value.info { color: var(--cp-primary); } .cp-body .stats-grid .stat-value.warning { color: #d97706; } .cp-body .stats-grid .stat-value.danger { color: #dc2626; } .cp-body .stat-trend { font-size: 0.68rem; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.25rem; color: var(--cp-muted); } .cp-body .stat-trend.positive { color: #059669; } .cp-body .stat-trend.negative { color: #dc2626; } .cp-body .chart-card, .cp-body .data-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.25rem 1.35rem; margin-bottom: 1rem; box-shadow: var(--cp-shadow); } .cp-body .chart-header h3, .cp-body .data-card h3 { font-size: 0.95rem; font-weight: 800; margin: 0 0 1rem; color: var(--cp-text); } .cp-body .chart-wrap-lg { height: 320px; position: relative; } .cp-body .chart-container { height: 320px; position: relative; } /* Sales — top customers & locations */ .cp-body .cp-sales-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } @media (max-width: 991.98px) { .cp-body .cp-sales-lists { grid-template-columns: 1fr; } } .cp-body .top-list-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); overflow: hidden; } .cp-body .top-list-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); background: #fafbff; } .cp-body .top-list-header h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--cp-text); } .cp-body .top-list-body { padding: 0.35rem 0; } .cp-body .top-list-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid #f1f5f9; transition: background 0.15s; } .cp-body .top-list-item:last-child { border-bottom: none; } .cp-body .top-list-item:hover { background: #f8fafc; } .cp-body .top-list-rank { width: 28px; height: 28px; border-radius: 8px; background: #1a1c24; color: #fff; font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; } .cp-body .top-list-info { flex: 1; min-width: 0; } .cp-body .top-list-name { font-size: 0.88rem; font-weight: 700; color: var(--cp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-body .top-list-meta { font-size: 0.75rem; color: var(--cp-muted); margin-top: 0.15rem; } .cp-body .top-list-value { text-align: right; flex-shrink: 0; } .cp-body .top-list-revenue { font-size: 0.88rem; font-weight: 800; color: #059669; } .cp-body .top-list-orders { font-size: 0.72rem; color: var(--cp-muted); margin-top: 0.15rem; } .cp-body .top-list-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--cp-muted); } .cp-body .top-list-empty i { font-size: 2rem; color: #cbd5e1; margin-bottom: 0.75rem; display: block; } .cp-body .stats-grid .stat-icon.info { background: rgba(91, 92, 245, 0.1); color: var(--cp-primary); } /* Websites */ .cp-body .website-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.25rem; margin-bottom: 0; box-shadow: var(--cp-shadow); height: 100%; transition: transform 0.15s, box-shadow 0.15s; } .cp-body .website-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } .cp-body .website-card h5 { font-weight: 800; font-size: 0.95rem; color: var(--cp-text); } .cp-body .website-card h5 i { color: var(--cp-primary); } .cp-body .status-badge { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; } .cp-body .status-active { background: #d1fae5; color: #065f46; } .cp-body .status-inactive { background: #fee2e2; color: #991b1b; } .cp-body .cp-empty-hero { padding: 3.5rem 1.5rem; text-align: center; } .cp-body .cp-empty-hero i { font-size: 3rem; color: #cbd5e1; margin-bottom: 1rem; } /* Notifications page */ .cp-body .notifications-card .notification-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); display: flex; gap: 0.85rem; align-items: flex-start; text-decoration: none; color: inherit; transition: background 0.15s; cursor: pointer; } .cp-body .notifications-card .notification-item:hover { background: #f8fafc; } .cp-body .notifications-card .notification-item.unread { background: rgba(91, 92, 245, 0.06); border-left: 3px solid var(--cp-primary); } .cp-body .notifications-card .notification-item:last-child { border-bottom: none; } .cp-body .notif-page-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(91, 92, 245, 0.12); color: var(--cp-primary); display: grid; place-items: center; flex-shrink: 0; } /* Profile */ .cp-body .profile-wrap { padding: 0; min-height: auto; background: transparent; } .cp-body .profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .cp-body .profile-grid .hero-card { grid-column: 1 / -1; padding: 1.25rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cp-body .profile-grid .avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--cp-primary); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; } .cp-body .profile-grid .hero-title { margin: 0; font-size: 1.15rem; font-weight: 800; } .cp-body .profile-grid .hero-sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--cp-muted); } .cp-body .btn-ghost-dark { border: 1px solid var(--cp-border); background: #fff; color: var(--cp-text); border-radius: 12px; padding: 0.45rem 0.85rem; font-size: 0.8rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } .cp-body .pill-active { background: #ecfdf5; color: #047857; } .cp-body .pill-pending { background: #fff7ed; color: #c2410c; } .cp-body .pill-suspended { background: #fef2f2; color: #b91c1c; } .cp-body .pill-neutral { background: #f1f5f9; color: #475569; } .cp-body .profile-grid .stat-card { padding: 1rem 1.1rem; display: flex; align-items: center; gap: 0.85rem; min-height: 88px; } .cp-body .profile-grid .stat-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--cp-primary); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .cp-body .profile-grid .stat-cap { margin: 0 0 4px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--cp-muted); } .cp-body .profile-grid .stat-val { font-size: 1rem; font-weight: 800; } .cp-body .panel-card .panel-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); display: flex; align-items: center; gap: 0.65rem; } .cp-body .panel-card .panel-body { padding: 1.25rem; } .cp-body .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } /* Profile — form fields & layout */ .cp-body .profile-grid .hero-card { grid-column: 1 / -1; } .cp-body .hero-left { display: flex; align-items: center; gap: 0.85rem; } .cp-body .hero-actions { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .cp-body .status-pill { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .cp-body .panel-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(91, 92, 245, 0.1); color: var(--cp-primary); display: grid; place-items: center; flex-shrink: 0; } .cp-body .panel-title { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--cp-text); } .cp-body .panel-sub { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--cp-muted); } .cp-body .field-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--cp-text); margin-bottom: 0.35rem; } .cp-body .field-input { display: block; width: 100%; border: 1px solid var(--cp-border); border-radius: 12px; padding: 0.6rem 0.85rem; font-size: 0.875rem; color: var(--cp-text); background: #fff; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .cp-body .field-input:focus { outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 3px rgba(91, 92, 245, 0.15); } .cp-body .field-input.is-invalid { border-color: #ef4444; } .cp-body .field-hint { font-size: 0.75rem; color: var(--cp-muted); margin-top: 0.35rem; } .cp-body .invalid-hint { font-size: 0.75rem; color: #ef4444; margin-top: 0.25rem; } .cp-body .input-wrap { position: relative; } .cp-body .input-wrap .field-input { padding-right: 2.75rem; } .cp-body .toggle-eye { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: #94a3b8; padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer; line-height: 1; } .cp-body .toggle-eye:hover { color: var(--cp-primary); background: #f1f5f9; } .cp-body .btn-primary-dark { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--cp-primary); color: #fff; border: none; border-radius: 12px; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; } .cp-body .btn-primary-dark:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(91, 92, 245, 0.28); } .cp-body .btn-outline-dark { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; color: var(--cp-text); border: 1px solid var(--cp-border); border-radius: 12px; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; } .cp-body .btn-outline-dark:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-body .detail-key { color: var(--cp-muted); font-weight: 600; font-size: 0.82rem; } .cp-body .detail-val { font-weight: 700; font-size: 0.84rem; text-align: right; } .cp-body .tip-list { display: flex; flex-direction: column; gap: 0.85rem; } .cp-body .tip-item { display: flex; gap: 0.75rem; align-items: flex-start; } .cp-body .tip-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(91, 92, 245, 0.1); color: var(--cp-primary); display: grid; place-items: center; flex-shrink: 0; font-size: 0.8rem; } .cp-body .tip-title { margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--cp-text); } .cp-body .tip-text { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--cp-muted); } .cp-body .alert-clean { border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; border: 1px solid transparent; } .cp-body .alert-success-clean { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .cp-body .alert-danger-clean { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } /* Reports — order details table */ .cp-body .orders-table-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); overflow: hidden; margin-bottom: 1rem; } .cp-body .orders-table-card .table-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); background: #fafbff; } .cp-body .orders-table-card .table-header h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--cp-text); } .cp-body .orders-table-card .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cp-body .orders-table-card .premier-table { width: 100%; margin-bottom: 0; border-collapse: collapse; } .cp-body .reports-container .container { max-width: 100%; padding: 0; } /* Website details */ .cp-body .website-details-container { padding: 0; } .cp-body .website-details-container .main-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.35rem 1.5rem; box-shadow: var(--cp-shadow); } .cp-body .website-details-container .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .cp-body .website-details-container .page-title h1 { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 800; color: var(--cp-text); } .cp-body .website-details-container .page-title .url { font-size: 0.85rem; color: var(--cp-muted); } .cp-body .website-details-container .status-badge { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .cp-body .website-details-container .status-active { background: #ecfdf5; color: #047857; } .cp-body .website-details-container .status-inactive { background: #fef2f2; color: #b91c1c; } .cp-body .credentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; margin-bottom: 0.85rem; } .cp-body .credential-box { background: #f8fafc; border: 1px solid var(--cp-border); border-radius: 12px; padding: 1rem; } .cp-body .credential-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cp-muted); margin-bottom: 0.5rem; } .cp-body .credential-value { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; word-break: break-all; color: var(--cp-text); margin-bottom: 0.65rem; line-height: 1.45; } .cp-body .copy-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cp-border); background: #fff; color: var(--cp-text); border-radius: 10px; padding: 0.4rem 0.85rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .cp-body .copy-btn:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-body .copy-btn.copied { background: #ecfdf5; border-color: #10b981; color: #047857; } .cp-body .website-details-container .actions-row { display: flex; flex-wrap: wrap; gap: 0.65rem; } /* Website create/edit forms */ .cp-body .form-container { padding: 0; } .cp-body .form-container .form-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.35rem 1.5rem; box-shadow: var(--cp-shadow); max-width: 640px; } /* Sidebar account link */ .cp-body .cp-sidebar-account-link { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.65rem; padding: 0.45rem 0.55rem; font-size: 0.75rem; font-weight: 700; color: var(--cp-muted); text-decoration: none; border-radius: 10px; } .cp-body .cp-sidebar-account-link:hover { background: #f8fafc; color: var(--cp-primary); } /* Order detail view */ .cp-body .order-view-container { padding: 0; } .cp-body .order-view-container .container { max-width: 100%; padding: 0; } .cp-body .order-header-section { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: var(--cp-shadow); } .cp-body .back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cp-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; } .cp-body .back-link:hover { color: var(--cp-primary); } .cp-body .order-title-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cp-body .order-title-group h1 { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 800; } .cp-body .order-number { font-family: ui-monospace, monospace; font-size: 0.9rem; color: var(--cp-muted); } .cp-body .status-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: #f1f5f9; color: #475569; } .cp-body .status-chip.status-delivered, .cp-body .status-chip.status-paid { background: #ecfdf5; color: #047857; } .cp-body .status-chip.status-pending, .cp-body .status-chip.status-not_answering { background: #fffbeb; color: #b45309; } .cp-body .status-chip.status-cancelled { background: #fef2f2; color: #b91c1c; } .cp-body .status-chip.status-assigned, .cp-body .status-chip.status-picked_up, .cp-body .status-chip.status-in_transit { background: #eff6ff; color: #1d4ed8; } .cp-body .pending-approval-banner { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid #fde68a; background: #fffbeb; font-size: 0.85rem; } .cp-body .status-change-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: var(--cp-shadow); } .cp-body .status-change-card h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 800; } .cp-body .status-change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; align-items: end; } .cp-body .status-change-field label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--cp-text); margin-bottom: 0.35rem; } .cp-body .status-change-field select, .cp-body .status-change-field input, .cp-body .status-change-field textarea { width: 100%; border: 1px solid var(--cp-border); border-radius: 12px; padding: 0.55rem 0.75rem; font-size: 0.875rem; background: #fff; box-sizing: border-box; } .cp-body .status-change-field textarea { min-height: 72px; resize: vertical; } .cp-body .status-change-field select:focus, .cp-body .status-change-field input:focus, .cp-body .status-change-field textarea:focus { outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 3px rgba(91, 92, 245, 0.12); } .cp-body .status-extra-field { display: none; } .cp-body .status-extra-field.is-visible { display: block; } .cp-body .btn-request-status { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--cp-primary); color: #fff; border: none; border-radius: 12px; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; } .cp-body .btn-request-status:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(91, 92, 245, 0.25); } .cp-body .info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .cp-body .info-card, .cp-body .receiver-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.15rem 1.25rem; box-shadow: var(--cp-shadow); } .cp-body .info-card-header, .cp-body .receiver-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--cp-border); } .cp-body .info-card-header h3, .cp-body .receiver-title { margin: 0; font-size: 0.95rem; font-weight: 800; } .cp-body .info-item, .cp-body .receiver-item { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.84rem; } .cp-body .info-item:last-child, .cp-body .receiver-item:last-child { border-bottom: none; } .cp-body .info-label, .cp-body .receiver-item-label { color: var(--cp-muted); font-weight: 600; } .cp-body .info-value, .cp-body .receiver-item-value { font-weight: 700; text-align: right; } .cp-body .info-value.highlight { color: #1d4ed8; } .cp-body .info-value.success { color: #047857; } .cp-body .receiver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; } .cp-body .receiver-id { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--cp-muted); } .cp-body .alert-message { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; color: #1e40af; font-size: 0.85rem; margin-bottom: 1rem; } .cp-body .orders-table-card .premier-table tbody tr { display: table-row; } .cp-body .orders-table-card .premier-table tbody td { color: var(--cp-text) !important; background: #fff !important; } /* API settings */ .cp-body .api-hero-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.35rem 1.5rem; margin-bottom: 1rem; color: var(--cp-text); box-shadow: var(--cp-shadow); } .cp-body .api-hero-card h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.35rem; color: var(--cp-text); } .cp-body .api-hero-card p { margin: 0; font-size: 0.85rem; color: var(--cp-muted); } .cp-body .api-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .cp-body .api-stat-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1rem; box-shadow: var(--cp-shadow); } .cp-body .api-stat-card.highlight { background: var(--cp-primary); border-color: transparent; color: #fff; } .cp-body .api-key-box { background: #f8fafc; border: 1px dashed var(--cp-border); border-radius: 12px; padding: 0.75rem 1rem; font-family: ui-monospace, monospace; font-size: 0.8rem; word-break: break-all; } .cp-body .content-section .btn-warning { border-radius: 12px; font-weight: 700; } /* Team */ .cp-body .cp-page-header-actions .invite-btn { box-shadow: 0 4px 14px rgba(91, 92, 245, 0.25); } .cp-body .team-table-wrap { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); overflow: hidden; box-shadow: var(--cp-shadow); } /* Order show / create */ .cp-body .order-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .cp-body .order-info-card { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.25rem; box-shadow: var(--cp-shadow); } .cp-body .order-info-card h5 { font-size: 0.88rem; font-weight: 800; margin-bottom: 0.85rem; color: var(--cp-text); } .cp-body .detail-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--cp-border); font-size: 0.84rem; } .cp-body .detail-row:last-child { border-bottom: none; } .cp-body .detail-label { color: var(--cp-muted); font-weight: 600; } /* Lightbox */ .cp-inventory-lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 2000; align-items: center; justify-content: center; padding: 1rem; } .cp-inventory-lightbox.open { display: flex; } .cp-inventory-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Team invite accept (standalone) */ body.cp-invite-body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--cp-bg, #d9dbf1); min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; margin: 0; } .cp-invite-card { width: 100%; max-width: 480px; background: #fff; border-radius: 24px; border: 1px solid #f1f5f9; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); overflow: hidden; } .cp-invite-head { background: #fff; color: var(--cp-text); padding: 1.5rem 1.75rem 0.5rem; text-align: center; border-bottom: 1px solid var(--cp-border); } .cp-invite-head i { color: var(--cp-primary); } .cp-invite-body { padding: 1.5rem; } @media (max-width: 991.98px) { .cp-body .profile-grid { grid-template-columns: 1fr; } .cp-body .order-detail-grid { grid-template-columns: 1fr; } .cp-body .form-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .cp-body .mobile-filter-toggle { display: inline-flex; } .cp-body .filters-panel { display: none; } .cp-body .filters-panel.show { display: block; } .cp-body .inventory-header-card .header-actions-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; width: 100%; } .cp-body .inventory-header-card .d-flex.justify-content-between { flex-direction: column; align-items: stretch !important; gap: 0.7rem; } } /* Notifications reason modal */ .cp-body .reason-modal { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 2000; align-items: center; justify-content: center; padding: 1rem; } .cp-body .reason-modal.open, .cp-body .reason-modal.show { display: flex; } .cp-body .reason-modal-content { background: #fff; border-radius: 20px; width: min(480px, 100%); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); overflow: hidden; } .cp-body .reason-modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); display: flex; justify-content: space-between; align-items: center; } .cp-body .reason-modal-title { margin: 0; font-size: 1rem; font-weight: 800; } .cp-body .reason-modal-close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--cp-muted); cursor: pointer; } .cp-body .reason-modal-body { padding: 1.25rem; } .cp-body .reason-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--cp-muted); margin-bottom: 0.35rem; } .cp-body .reason-text { background: #f8fafc; border-radius: 12px; padding: 0.85rem; font-size: 0.88rem; } .cp-body .reason-modal-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--cp-border); text-align: right; } .cp-body .btn-close-modal, .cp-body .btn-mark-all-read { background: var(--cp-primary); color: #fff; border: none; border-radius: 12px; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.82rem; cursor: pointer; } .cp-body .btn-mark-all-read:hover, .cp-body .btn-close-modal:hover { opacity: 0.92; } .cp-body .notifications-card .notification-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(91, 92, 245, 0.12); color: var(--cp-primary); display: grid; place-items: center; flex-shrink: 0; } .cp-body .notifications-card .notification-content { flex: 1; min-width: 0; } .cp-body .notifications-card .notification-text { margin: 0 0 0.25rem; font-size: 0.86rem; font-weight: 600; } .cp-body .notifications-card .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-primary); flex-shrink: 0; margin-top: 0.45rem; } .cp-body .cp-team-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--cp-primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; flex-shrink: 0; } .cp-body .api-hero-card, .cp-body .dashboard-hero { background: #fff; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 1.35rem 1.5rem; margin-bottom: 1rem; color: var(--cp-text); box-shadow: var(--cp-shadow); } .cp-body .dashboard-hero .status-badge, .cp-body .api-hero-card .status-badge { background: #f8fafc; color: var(--cp-text); border: 1px solid var(--cp-border); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } @media print { .cp-sidebar, .cp-mobile-header, .client-navbar, .client-mobile-bottom-nav, .cp-impersonation, .no-print, .modal, .pagination, .alert, .mobile-filter-toggle { display: none !important; } .cp-shell { margin: 0 !important; width: 100% !important; } .cp-content { padding: 0 !important; } .cp-body .inventory-container { padding: 0 !important; background: #fff !important; } .cp-body .inventory-header-card button, .cp-body .inventory-header-card form { display: none !important; } .cp-body .premier-table { font-size: 0.7rem !important; } .cp-body .premier-table thead th { background: #f8fafc !important; color: #111 !important; border: 1px solid #e5e7eb !important; } .cp-body .premier-table tbody td { border: 1px solid #e5e7eb !important; } @page { margin: 1cm; size: A4; } }