/* ========================================================================== Haramain Connect — shared UI skin for the redesigned admin screens (Assign to Team, Videos, Collective Videos, WhatsApp Messages, Orders). Loaded globally, layered on top of the existing Metronic/Bootstrap theme. Page-specific rules are scoped via the body's `view-{module}` class so untouched admin pages are unaffected. ========================================================================== */ :root { --hc-green-950: #0c2b22; --hc-green-900: #10352a; --hc-green-800: #123c30; --hc-green-700: #16493a; --hc-green-600: #1c5c48; --hc-green-500: #23735a; --hc-gold: #cda45e; --hc-bg: #f5f7fa; --hc-card-border: #eef1f4; --hc-text-muted: #8a94a6; --hc-radius: 0.85rem; --hc-radius-sm: 0.6rem; --hc-shadow: 0 2px 10px rgba(16, 53, 42, .05); } /* ---------- Sidebar ---------- */ #kt_app_sidebar { background: linear-gradient(180deg, var(--hc-green-900), var(--hc-green-950)); } #kt_app_sidebar .app-sidebar-logo { border-bottom: 1px solid rgba(255,255,255,.08); } #kt_app_sidebar .search-input { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff !important; } #kt_app_sidebar .search-input::placeholder { color: rgba(255,255,255,.55); } #kt_app_sidebar .menu-link { border-radius: var(--hc-radius-sm); color: rgba(255,255,255,.78) !important; } /* Metronic's own theme CSS sets color directly on .menu-title/.menu-icon/.menu-arrow (not just inherited from .menu-link), so those need their own overrides too — otherwise they keep the light-sidebar theme's dark text, invisible on this dark bg. */ #kt_app_sidebar .menu-title, #kt_app_sidebar .menu-arrow:after, #kt_app_sidebar .menu-icon i, #kt_app_sidebar .menu-icon i:before { color: rgba(255,255,255,.78) !important; font-weight: 600; } #kt_app_sidebar .menu-item .menu-link:hover, #kt_app_sidebar .menu-item.here > .menu-link, #kt_app_sidebar .menu-link.active { background: var(--hc-green-600); color: #fff !important; } #kt_app_sidebar .menu-item .menu-link:hover .menu-title, #kt_app_sidebar .menu-item.here > .menu-link .menu-title, #kt_app_sidebar .menu-link.active .menu-title, #kt_app_sidebar .menu-item .menu-link:hover .menu-icon i, #kt_app_sidebar .menu-item.here > .menu-link .menu-icon i, #kt_app_sidebar .menu-link.active .menu-icon i { color: #fff !important; } /* ---------- Trim the reserved toolbar gap above content on the redesigned screens. Metronic's real source of the gap: .app-wrapper gets `margin-top: calc(header-height + toolbar-height)` whenever data-kt-app-toolbar-fixed=true on — reserved space for a FIXED toolbar bar, applied whether or not a toolbar is actually rendered on the page. None of these 5 screens render #kt_app_toolbar except Order Actions (screen 5) when its bulk-action buttons are visible — so only collapse the margin down to just the header height when there's truly no toolbar in the DOM to reserve space for (otherwise the fixed toolbar would sit under the header instead of below it). Scoping note: the body's `view-{{ getUri(3) }}` class reflects the action segment (form/groups/templates/…), not the module — and is EMPTY for bare module URLs (team_assignments, collective_videos, review_queue all default there), so it can't identify "one of the 5 redesigned screens" reliably. `.hc-page-head` is unique to those screens' content, so use :has() to scope from it instead (supported in all evergreen browsers this admin targets). */ body:has(.hc-page-head):not(:has(#kt_app_toolbar)) .app-wrapper { margin-top: var(--bs-app-header-height) !important; } body:has(.hc-page-head) #kt_app_content { padding-top: 1.25rem !important; } body:has(.hc-page-head) #kt_app_toolbar { padding-top: .5rem !important; padding-bottom: .5rem !important; } /* ---------- Numbered page header (mockup's "1 Screen Title" pattern) ---------- */ .hc-page-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.5rem; } .hc-page-head .hc-step { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--hc-green-800); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .hc-page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #16211d; } .hc-page-head p { margin: .2rem 0 0; color: var(--hc-text-muted); font-size: .925rem; } /* ---------- Cards / filters ---------- */ .hc-card { background: #fff; border: 1px solid var(--hc-card-border); border-radius: var(--hc-radius); box-shadow: var(--hc-shadow); } .hc-card .hc-card-body { padding: 1.25rem 1.5rem; } .hc-filter-bar { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem; } .hc-filter-bar .hc-filter-field { display: flex; flex-direction: column; gap: .35rem; min-width: 190px; } .hc-filter-bar .hc-filter-field-wide { min-width: 340px; flex: 1 1 340px; } .hc-filter-bar label { font-size: .8rem; font-weight: 700; color: #4b5563; } /* ---------- Tables ---------- */ .hc-table thead th { background: #fafbfc; color: #6b7280; font-size: .78rem; text-transform: none; font-weight: 700; border-bottom: 1px solid var(--hc-card-border) !important; } .hc-table tbody td { vertical-align: middle; } .hc-table tbody tr:hover { background: #f8faf9; } /* ---------- Status pills ---------- */ .hc-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; } .hc-pill-green { background: #e6f4ea; color: #1c7c3c; } .hc-pill-amber { background: #fdf1dd; color: #b6790a; } .hc-pill-red { background: #fde8e8; color: #c0392b; } .hc-pill-blue { background: #e7f0fd; color: #2360c4; } .hc-pill-gray { background: #eef0f2; color: #667085; } /* ---------- Buttons ---------- */ .hc-btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: var(--hc-radius-sm); padding: .55rem 1.1rem; font-weight: 700; font-size: .875rem; border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .hc-btn-primary { background: var(--hc-green-800); color: #fff; } .hc-btn-primary:hover { background: var(--hc-green-700); color: #fff; } .hc-btn-outline { background: #fff; color: var(--hc-green-800); border-color: #e1e6e3; } .hc-btn-outline:hover { background: #f3f7f5; color: var(--hc-green-800); } .hc-btn-whatsapp { background: #25d366; color: #fff; } .hc-btn-whatsapp:hover { background: #1fb956; color: #fff; } .hc-btn:disabled, .hc-btn.disabled { opacity: .5; pointer-events: none; } /* ---------- Right-side "info card" (team member / send panel) ---------- */ .hc-side-card { position: sticky; top: 1rem; } .hc-avatar { width: 46px; height: 46px; border-radius: 50%; background: #dfe7ff; color: #4a5fd6; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; } .hc-team-meta .hc-name { font-weight: 700; color: #16211d; } .hc-team-meta .hc-sub { color: var(--hc-text-muted); font-size: .82rem; } /* ---------- Video thumbnails ---------- */ .hc-video-thumb { display: inline-block; position: relative; width: 44px; height: 32px; border-radius: 8px; overflow: hidden; background: #16211d; cursor: pointer; } .hc-video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; } .hc-video-thumb .hc-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; } /* ---------- WhatsApp preview bubble (screens 4 & 5) ---------- */ .hc-wa-preview { background: #e9edc9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3C/svg%3E"); border-radius: var(--hc-radius); overflow: hidden; } .hc-wa-header { background: var(--hc-green-900); color: #fff; padding: .8rem 1.1rem; display: flex; align-items: center; gap: .65rem; } .hc-wa-header .hc-wa-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--hc-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #16211d; } .hc-wa-header .hc-wa-title { font-weight: 700; font-size: .9rem; } .hc-wa-header .hc-wa-sub { font-size: .72rem; color: rgba(255,255,255,.7); } .hc-wa-body { padding: 1.25rem 1rem; min-height: 220px; } .hc-wa-bubble { background: #dcf3d1; border-radius: .6rem; border-top-left-radius: 0; padding: .75rem 1rem; max-width: 88%; font-size: .875rem; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.06); } .hc-wa-bubble .hc-wa-time { display: block; text-align: right; font-size: .68rem; color: #6b7f60; margin-top: .4rem; } /* ---------- Rich text editor toolbar (screen 4) ---------- */ .hc-rte-toolbar { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; padding: .4rem .5rem; border: 1px solid var(--hc-card-border); border-bottom: none; border-radius: var(--hc-radius-sm) var(--hc-radius-sm) 0 0; background: #fafbfc; } .hc-rte-toolbar button { width: 30px; height: 30px; border: none; background: transparent; border-radius: 6px; color: #4b5563; display: inline-flex; align-items: center; justify-content: center; } .hc-rte-toolbar button:hover, .hc-rte-toolbar button.active { background: #e6ece9; color: var(--hc-green-800); } .hc-rte-toolbar .hc-rte-sep { width: 1px; height: 20px; background: var(--hc-card-border); margin: 0 .35rem; } textarea.hc-rte-body { width: 100%; min-height: 220px; padding: .9rem 1rem; border: 1px solid var(--hc-card-border); border-radius: 0 0 var(--hc-radius-sm) var(--hc-radius-sm); font-size: .9rem; outline: none; resize: vertical; font-family: inherit; } textarea.hc-rte-body:focus { border-color: var(--hc-green-600); box-shadow: none; } /* ---------- Product/type picker list (screen 4 left column) ---------- */ .hc-type-list { list-style: none; margin: 0; padding: 0; } .hc-type-list li { margin-bottom: .25rem; } .hc-type-list button { width: 100%; text-align: left; border: none; background: transparent; padding: .6rem .75rem; border-radius: var(--hc-radius-sm); display: flex; align-items: center; gap: .6rem; color: #374151; font-weight: 600; } .hc-type-list button:hover { background: #f3f7f5; } .hc-type-list button.active { background: var(--hc-green-800); color: #fff; } /* ---------- Certificate template file cards ---------- */ #hc-ct-dropzone.dropzone { border: 1px dashed #c9d2ce; border-radius: var(--hc-radius); background: #fafbfc; padding: 1.75rem 1rem; min-height: auto; } #hc-ct-dropzone.dropzone:hover { border-color: var(--hc-green-600); background: #f6faf8; } #hc-ct-dropzone.dropzone.dz-drag-hover { border-color: var(--hc-green-600); background: #eef6f1; } #hc-ct-dropzone .dz-message { margin: 0; } .hc-tpl-card { background: #fff; border: 1px solid var(--hc-card-border); border-radius: var(--hc-radius-sm); overflow: hidden; box-shadow: var(--hc-shadow); transition: box-shadow .15s ease, transform .15s ease; display: flex; flex-direction: column; } .hc-tpl-card:hover { box-shadow: 0 6px 18px rgba(16, 53, 42, .1); transform: translateY(-2px); } .hc-tpl-thumb { position: relative; } .hc-tpl-thumb img { display: block; width: 100%; height: 120px; object-fit: cover; background: var(--hc-bg); } .hc-tpl-delete { position: absolute; top: .5rem; right: .5rem; margin: 0; opacity: 0; transition: opacity .15s ease; } .hc-tpl-card:hover .hc-tpl-delete, .hc-tpl-card:focus-within .hc-tpl-delete { opacity: 1; } .hc-tpl-delete-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(20, 24, 22, .55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; } .hc-tpl-delete-btn:hover { background: #c0392b; } .hc-tpl-body { padding: .65rem .85rem .8rem; } /* ---------- Order-actions inline panels (screen 5) ---------- */ .hc-order-row { cursor: pointer; } .hc-order-row.hc-active { background: #eef6f1 !important; } .hc-panel-placeholder { color: var(--hc-text-muted); text-align: center; padding: 3rem 1rem; }