/* ============================================================================= JUST58 — Admin Brand Stylesheet (Phase 1) Implements documents/BRAND-GUIDELINES-BACKEND.html — colors, type and the reusable "manager pattern" components (page header, manager card, data table, badges, action buttons) referenced there as the Video Gallery pattern (see public/css/video-admin.css + resources/views/admin/videos/*). Scope of this phase: the shared admin shell (sidebar / topbar / content background) loaded from layoutsdashboard/dashboard-design.blade.php, plus the Banner Manager module. Once approved, the same component classes below are meant to be reused by every other manager-style screen in the admin (coupons, classified ads, CMS, directory, etc.) — no need to duplicate them per module. This file is purely additive/overriding: it does not edit usercss/adminstyle.css. It is loaded last in so its rules win on equal specificity. ============================================================================= */ :root{ --brand-primary:#6875F5; --brand-primary-deep:#614EC4; --accent-teal:#06AFB0; --highlight-yellow:#F4C534; --success:#63BD5D; --success-deep:#558B2F; --warning:#FF9800; --danger:#EF4444; --danger-deep:#D93634; --info:#387BBE; --neutral:#9CA3AF; --sidebar-bg:#2B333F; --sidebar-text:#C6C6C6; --sidebar-active:#6875F5; --topbar:#FFFFFF; --content-bg:#EFF2F5; --ink:#2B333F; --body:#3E4347; --muted:#6B7280; --border:#E5E7EB; --surface:#FFFFFF; --row-hover:#F8F9FA; --font-heading:'Poppins',Helvetica,Arial,sans-serif; --font-body:'Nunito',Helvetica,Arial,sans-serif; --shadow-sm:0 1px 2px rgba(43,51,63,.06); --shadow-lg:0 12px 28px rgba(43,51,63,.14); } /* ============================================================================= 1. App shell — sidebar / topbar / content background Color + type only. Existing spacing/layout/toggle behaviour is untouched. ============================================================================= */ body{ font-family:var(--font-body); color:var(--body); background:var(--content-bg); } h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); color:var(--ink); } .main-content{ background:var(--content-bg); } /* Sidebar (drawer) */ #sidebar-wrapper{ background:var(--sidebar-bg); } .sidebar-nav > li > a, .sidebar-nav > li > form a, #sidebar-wrapper .nav-link{ color:var(--sidebar-text); font-family:var(--font-body); } .sidebar-nav > li > a:hover, .sidebar-nav > li.active > a, #sidebar-wrapper .nav-link:hover, #sidebar-wrapper .nav-link:focus{ background:var(--sidebar-active); color:#fff; } .sidebar-nav > li > form a:hover, .sidebar-nav .nav-item form:hover{ background:rgba(255,255,255,.08); color:#fff; } #sidebar-wrapper .nav-link.active, #sidebar-wrapper li.active > .nav-link{ background:var(--sidebar-active); color:#fff; border-radius:6px; } /* Topbar */ #navbar-wrapper .navbar{ background-color:var(--topbar); box-shadow:var(--shadow-sm); } #navbar-wrapper .navbar a{ color:var(--ink); } #navbar-wrapper .navbar a:hover{ color:var(--brand-primary-deep); } #navbar-wrapper .bi.bi-justify-left{ color:var(--ink) !important; } /* Logo was inverted to white for the old dark topbar — show it in its natural colors now that the topbar is white. */ .adminimg{ filter:none; } /* ============================================================================= 2. Buttons ============================================================================= */ .btn-brand-primary,.btn-brand-outline{ display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body); font-weight:700;font-size:.9rem;border-radius:8px;padding:10px 18px;cursor:pointer; text-decoration:none;border:1.5px solid transparent; transition:background .15s,color .15s,border-color .15s,box-shadow .15s; } .btn-brand-primary{ background:var(--brand-primary); color:#fff; } .btn-brand-primary:hover{ background:var(--brand-primary-deep); color:#fff; box-shadow:0 4px 12px rgba(97,78,196,.28); } .btn-brand-outline{ background:#fff; color:var(--body); border-color:var(--border); } .btn-brand-outline:hover{ border-color:var(--brand-primary); color:var(--brand-primary-deep); } /* ============================================================================= 3. Alerts ============================================================================= */ .admin-alert{display:flex;align-items:center;gap:10px;border-radius:10px;padding:12px 16px;font-family:var(--font-body);font-size:.9rem;margin-bottom:16px;border:1px solid transparent} .admin-alert i{font-size:1.1rem} .admin-alert.success{background:#E9F7E8;color:#1B5E20;border-color:#cdeccb} .admin-alert.error{background:#FDECEC;color:#B3261E;border-color:#f3cccc} /* ============================================================================= 4. Page header (title + breadcrumb + actions) ============================================================================= */ .page-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:20px} .page-header-left h3{font-family:var(--font-heading);font-weight:700;color:var(--ink);margin:0 0 4px;font-size:1.55rem} .breadcrumb-custom{font-family:var(--font-body);font-size:.82rem;color:var(--muted)} .breadcrumb-custom a{color:#5247BC;text-decoration:none;font-weight:700} .breadcrumb-custom a:hover{text-decoration:underline} .breadcrumb-sep{margin:0 6px;color:var(--muted)} /* ============================================================================= 5. Manager card / data table — the reusable "module pattern" ============================================================================= */ .vd-wrap{padding:24px 28px 36px;font-family:var(--font-body);color:var(--body)} @media(max-width:768px){ .vd-wrap{padding:16px 14px 28px} } .manager-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;font-family:var(--font-body)} .manager-card-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)} .manager-card-header h4{margin:0;font-family:var(--font-heading);font-weight:700;color:var(--ink);font-size:1.1rem;display:flex;align-items:center} .manager-toolbar{display:flex;align-items:center;gap:10px} .tbl-search{position:relative;display:flex;align-items:center} .tbl-search i{position:absolute;left:12px;color:var(--muted);font-size:.9rem;pointer-events:none} .tbl-search input{font-family:var(--font-body);border:1px solid var(--border);border-radius:8px;padding:9px 12px 9px 34px;font-size:.88rem;min-width:240px;background:#fff;color:var(--body)} .tbl-search input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(104,117,245,.18)} .admin-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:.88rem;background:#fff} .admin-table th{text-align:left;padding:11px 14px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800;background:var(--row-hover);border-bottom:1px solid var(--border);white-space:nowrap} .admin-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--body)} .admin-table tbody tr:hover{background:var(--row-hover)} .td-thumb{border-radius:6px;object-fit:cover;border:1px solid var(--border)} .td-title{display:block;font-weight:700;color:var(--ink)} .td-sub{display:block;font-size:.76rem;color:var(--muted);font-family:ui-monospace,Consolas,monospace} /* Chips & status badges */ .chip{display:inline-flex;align-items:center;border-radius:50rem;padding:3px 11px;font-size:.74rem;font-weight:800;border:1px solid transparent} .chip.navy{background:#e3eef7;color:#2F6DA8;border-color:#c5dcee} .chip.neutral{background:#EEF0F2;color:#4A5360;border-color:#dfe2e6} .badge-status{display:inline-flex;align-items:center;gap:5px;border-radius:50rem;padding:3px 11px;font-size:.74rem;font-weight:800} .badge-active{background:#E9F7E8;color:#1B5E20} /* Live/Approved — AA */ .badge-inactive{background:#EEF0F2;color:#4A5360} /* Draft/Inactive — AA */ .badge-pending{background:#FFF3E0;color:#8A5000} /* Pending/Featured — AA */ .badge-rejected{background:#FDECEC;color:#B3261E} /* Rejected/Failed — AA */ /* Row action buttons (icon, colour-coded by action) */ .action-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;text-decoration:none;font-size:1rem;line-height:1;transition:transform .12s ease,background .15s,border-color .15s,color .15s,box-shadow .15s} .action-btn i{display:block} .action-btn.view{background:#E7F0F8;border-color:#CFE0EF;color:#2F6DA8} .action-btn.edit{background:#EEF0FF;border-color:#DFE3FF;color:#5247BC} .action-btn.delete{background:#FDECEC;border-color:#F3CCCC;color:#B3261E} .action-btn.approve{background:#E9F7E8;border-color:#cdeccb;color:#1B5E20} .action-btn:hover{color:#fff;transform:translateY(-1px)} .action-btn.view:hover{background:#387BBE;border-color:#387BBE;box-shadow:0 4px 10px rgba(56,123,190,.30)} .action-btn.edit:hover{background:var(--brand-primary);border-color:var(--brand-primary);box-shadow:0 4px 10px rgba(104,117,245,.30)} .action-btn.delete:hover{background:var(--danger-deep);border-color:var(--danger-deep);box-shadow:0 4px 10px rgba(217,54,52,.30)} .action-btn.approve:hover{background:var(--success-deep);border-color:var(--success-deep);box-shadow:0 4px 10px rgba(85,139,47,.30)} .action-btn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px} .action-btn[type="submit"],button.action-btn{border-width:1px;font:inherit} /* Pagination */ .pagination-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 20px;border-top:1px solid var(--border);font-family:var(--font-body)} .pagination-info{font-size:.85rem;color:var(--muted)} .pagination-controls{display:inline-flex;gap:5px} .page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 9px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--body);text-decoration:none;font-size:.85rem;font-weight:700} .page-btn:hover:not(.disabled):not(.active){border-color:var(--brand-primary);color:var(--brand-primary-deep)} .page-btn.active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff} .page-btn.disabled{opacity:.45;pointer-events:none} /* Form helpers (create/edit screens — reused as those pages are upgraded) */ .form-label-admin{display:block;font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:.85rem;margin-bottom:6px} .form-label-admin .req,.req{color:var(--danger)} .form-control-admin{width:100%;font-family:var(--font-body);border:1px solid var(--border);border-radius:8px;padding:10px 13px;font-size:.9rem;background:#fff;color:var(--body)} .form-control-admin:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(104,117,245,.18)} .form-control-admin.is-invalid{border-color:var(--danger)} .form-control-admin.is-invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,.16)} .form-error{display:block;color:var(--danger);font-size:.8rem;margin-top:5px} .form-help{display:block;color:var(--muted);font-size:.78rem;margin-top:5px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media(max-width:640px){ .form-row{grid-template-columns:1fr} } .form-group-admin{margin-bottom:16px} /* ============================================================================= 6. Form card — wraps create/edit forms in the same bordered-card language as .manager-card, so list screens and forms read as one system. ============================================================================= */ .form-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);font-family:var(--font-body)} .form-card-header{padding:16px 20px;border-bottom:1px solid var(--border)} .form-card-header h4{margin:0;font-family:var(--font-heading);font-weight:700;color:var(--ink);font-size:1.1rem} .form-card-body{padding:20px} .form-card-footer{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border)} /* admin-alert ul reset — used for the session/validation summary block at the top of upgraded forms (replaces error.error-display inline). */ .admin-alert ul{margin:0;padding-left:18px} .admin-alert.error ul li,.admin-alert.success ul li{font-size:.88rem} /* ============================================================================= 7. Image upload area — the brand guidelines doc has no spec for file uploads, so this is a new component built from the same tokens (8–12px radius, var(--border), brand-primary accent) for use on every form with an image/file field. ============================================================================= */ .upload-area{position:relative;display:flex;align-items:center;gap:16px;border:1.5px dashed var(--border);border-radius:10px;padding:16px;background:var(--row-hover);transition:border-color .15s,background .15s} .upload-area:hover,.upload-area.dragover{border-color:var(--brand-primary);background:#F4F5FF} .upload-area input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .upload-area-preview{flex-shrink:0;width:84px;height:56px;border-radius:8px;border:1px solid var(--border);background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.3rem} .upload-area-preview img{width:100%;height:100%;object-fit:cover;display:block} .upload-area-text{font-size:.85rem;color:var(--body)} .upload-area-text strong{color:var(--brand-primary-deep);font-weight:700} .upload-area-hint{display:block;font-size:.76rem;color:var(--muted);margin-top:2px} .upload-area-remove{position:relative;z-index:2;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid #F3CCCC;background:#FDECEC;color:#B3261E;text-decoration:none;font-size:.85rem} .upload-area-remove:hover{background:var(--danger-deep);border-color:var(--danger-deep);color:#fff} /* ============================================================================= 8. Sidebar logout button Styled distinctively at the bottom of every sidebar; red accent draws the eye so users always know where to sign out. ============================================================================= */ /* Separator line above the logout item */ .sidebar-logout-item{ border-top:1px solid rgba(255,255,255,.10); margin-top:8px !important; padding-top:4px; } /* The logout link itself */ .sidebar-logout-link{ display:flex !important; align-items:center; gap:0; color:rgba(255,255,255,.65) !important; font-weight:600 !important; border-radius:8px; transition:background .15s, color .15s !important; } .sidebar-logout-link:hover, .sidebar-logout-link:focus{ background:rgba(239,68,68,.18) !important; color:#fca5a5 !important; } .sidebar-logout-link .icon-shape i{ color:rgba(255,255,255,.55); font-size:18px; } .sidebar-logout-link:hover .icon-shape i{ color:#fca5a5; } /* ============================================================================= 9. User-profile block in sidebar (already in adminstyle.css but we refine it here so it looks right against the dark sidebar-bg token). ============================================================================= */ #sidebar-wrapper .user-profile{ padding:18px 14px 12px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:6px; } #sidebar-wrapper .user-profile img{ width:54px;height:54px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); } #sidebar-wrapper .user-profile h2{ font-size:.92rem !important; font-weight:700 !important; color:#fff !important; margin:8px 0 2px !important; } #sidebar-wrapper .user-profile p{ font-size:.73rem !important; color:rgba(255,255,255,.50) !important; margin:0 !important; } /* ============================================================================= 10. Topbar — hide the icon-only logout from the top bar now that the sidebar carries its own labelled logout. (Keeps the home icon.) ============================================================================= */ #navbar-wrapper .topbar-menu li.logout{ display:none; }