/* ============================================================================= KAWAWA MARKET — SUPER ADMIN : MODERN UI LAYER ============================================================================= Same approach as the seller admin's `seller-admin-modern.css` on the website: this file is a presentation layer only. No markup, no component logic and no API behaviour is touched by it — every dynamic binding, guard and service call keeps working exactly as before. Rules are scoped to `.left_pannel` (the admin sidebar) and `.right_pannel` (the admin content column), plus the two dialogs that are declared at the layout root (outside `.right_pannel`) and the login screen, which renders without the shell. Loaded last in index.html so it wins over style.css / media_screen.css. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Brand — same ramp as the seller admin */ --kw-brand: #d45500; --kw-brand-2: #ff7a18; --kw-brand-grad: linear-gradient(135deg, #ff8a2b 0%, #d45500 100%); --kw-brand-soft: rgba(212, 85, 0, .08); --kw-brand-soft-2: rgba(212, 85, 0, .16); /* Surfaces */ --kw-bg: #ffffff; --kw-surface: #ffffff; --kw-sidebar: #ffffff; --kw-subtle: #f4f6fa; /* Ink */ --kw-ink: #0f172a; --kw-ink-2: #475569; --kw-muted: #7b8794; /* Semantic */ --kw-success: #1fb489; --kw-success-ink: #0f8a68; --kw-danger: #d92d20; /* Lines & elevation. The canvas is pure white, so cards are separated from it by a hairline border plus a soft lift rather than by a contrasting background. */ --kw-line: #e3e8ef; --kw-radius: 16px; --kw-radius-sm: 12px; --kw-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --kw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 20px -8px rgba(16, 24, 40, .14); --kw-shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 34px -12px rgba(16, 24, 40, .16); --kw-shadow-brand: 0 8px 20px -6px rgba(212, 85, 0, .45); --kw-ease: cubic-bezier(.4, 0, .2, 1); } /* ============================================================================= 1. TYPE & SHELL ========================================================================== */ body { font-family: 'Inter', 'Poppins', sans-serif; color: var(--kw-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The grey canvas and the inset blue glow both date from the original template. A flat white page lets the hairline-bordered cards do the separating, which is what the seller admin does. */ .right_pannel { background: var(--kw-bg); box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } /* Deliberately NO z-index here. `position: relative` on its own does not form a stacking context, so the Bootstrap dialogs rendered inside `.body` keep their z-index 1055 and stay above the backdrop (which is appended to at 1050). Adding a z-index would trap them and put the grey veil on top of the open dialog. */ .right_pannel .body { padding: 24px 28px 56px; min-height: calc(100vh - 66px); } .copy_right { left: 28px; bottom: 14px; color: var(--kw-muted); font-size: 12.5px; } /* ============================================================================= 2. SIDEBAR ========================================================================== */ .left_pannel { background: var(--kw-sidebar); border-right: 1px solid var(--kw-line); box-shadow: 6px 0 26px -22px rgba(16, 24, 40, .55); } /* -- Brand lockup --------------------------------------------------------- logo.svg is a pure-white silhouette drawn for the old orange strip. On the white rail it is flattened to ink instead, so the rail can stay light like the seller admin's. Height matches the top bar so both baselines line up. */ .left_pannel .logo { height: 66px; padding: 0 18px; background: transparent; justify-content: flex-start; align-items: center; border-bottom: 1px solid var(--kw-line); } .left_pannel .logo img { width: auto; max-width: 100%; height: 28px; object-fit: contain; object-position: left center; } /* -- Navigation ----------------------------------------------------------- */ .left_pannel .push_menu { margin-top: 14px; padding: 0 10px; } .left_pannel .push_menu .nav-link { position: relative; display: flex; align-items: center; margin-top: 4px; padding: 11px 14px; border-radius: var(--kw-radius-sm); font-size: 14px; font-weight: 500; letter-spacing: -.1px; color: var(--kw-ink-2); background: transparent; transition: color .2s var(--kw-ease), background .2s var(--kw-ease); } /* Glyphs are flattened to a neutral silhouette on the white rail, then inverted to white once the item becomes active on the orange pill. */ .left_pannel .push_menu .nav-item img { width: 18px; height: 18px; margin-right: 12px; opacity: .5; filter: brightness(0) !important; transition: opacity .2s var(--kw-ease); } .left_pannel .push_menu .nav-link:hover { background: var(--kw-brand-soft); color: var(--kw-brand); } .left_pannel .push_menu .nav-item:hover img { opacity: .8; filter: brightness(0) !important; } .left_pannel .push_menu .nav-link.active, .left_pannel .push_menu .nav-item .active { background: var(--kw-brand-grad) !important; color: #ffffff !important; font-weight: 600; box-shadow: var(--kw-shadow-brand); } .left_pannel .push_menu .nav-link.active img, .left_pannel .push_menu .nav-item .active img, .left_pannel .push_menu .nav-item:hover .nav-link.active img { opacity: 1; filter: brightness(0) invert(1) !important; } /* Counter pill. `float: right` does nothing inside a flex row, so the pill is pushed to the trailing edge with an auto margin instead. */ .left_pannel .push_menu .nav-link span { float: none; margin-left: auto; padding: 2px 9px; min-width: 26px; border-radius: 999px; background: var(--kw-subtle); border: 1px solid var(--kw-line); color: var(--kw-ink-2); font-size: 11.5px; font-weight: 600; text-align: center; line-height: 18px; } .left_pannel .push_menu .nav-link.active span, .left_pannel .push_menu .nav-item .active span { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3); color: #ffffff; } /* The fraud-report warning sits between the label and the counter. It carried a hard-coded `margin-left: 60px` to fake the alignment a flex row now does properly. */ .left_pannel .push_menu .nav_report { margin: 0 0 0 auto; font-size: 12.5px; color: #f0453a; } .left_pannel .push_menu .nav-link.active .nav_report, .left_pannel .push_menu .nav-item .active .nav_report { color: #ffffff; } .left_pannel .push_menu .nav_report ~ span { margin-left: 8px; } /* Same reason as the counter pill: the caret was floated. */ .left_pannel .push_menu .nav-link .fa-angle-down { float: none; margin-left: auto; font-size: 12px; opacity: .55; transition: transform .2s var(--kw-ease); } .left_pannel .push_menu .nav-link[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); } /* CMS sub-menu */ .left_pannel .push_menu .subnav { padding-left: 14px; } .left_pannel .push_menu .subnav .nav-link { padding: 9px 14px; font-size: 13.5px; } .left_pannel .push_menu .subnav .nav-item img, .left_pannel .push_menu .subnav img { width: 16px; height: 16px; } /* -- Sidebar scrollbar ---------------------------------------------------- */ .left_pannel .inside { padding-bottom: 28px; } .left_pannel .inside::-webkit-scrollbar { width: 6px; background-color: transparent; } .left_pannel .inside::-webkit-scrollbar-track { -webkit-box-shadow: none; background-color: transparent; } .left_pannel .inside::-webkit-scrollbar-thumb { background-color: #d6dde7; border-radius: 999px; } .left_pannel .inside::-webkit-scrollbar-thumb:hover { background-color: #b9c4d2; } /* -- Collapsed state: icon rail ------------------------------------------- The hamburger used to slide the whole rail out of view. On desktop that state is reinterpreted as a narrow icon-only rail instead: the square logo.png mark on top, nav glyphs below, labels and counters hidden. Clicking the hamburger again restores the full rail. Keyed off `.right_pannel.active2` rather than `.left_pannel.active`. The sidebar carries two `[ngClass]` bindings and Angular applies the last one, so `.left_pannel` only ever receives `active3` (toggled by nav clicks, which must NOT collapse the rail) — `.active` never lands on it at all. `.active2` is the one class the hamburger reliably toggles. Both widths live behind `:has()` on purpose: if a browser cannot parse it, the pair is dropped together and the panel falls back to today's behaviour (content column at 100%, covering the rail) rather than to a half-applied layout with a gap down the middle. */ @media screen and (min-width: 993px) { :has(> .right_pannel.active2) > .left_pannel { width: 76px; margin-left: 0; } :has(> .right_pannel.active2) > .right_pannel { width: calc(100% - 76px); } :has(> .right_pannel.active2) > .left_pannel .inside { overflow-x: hidden; } /* Brand: the wide wordmark gives way to the square mark. Swapped with `content` rather than by hiding the , so the element stays in the DOM and its (click)="dashboard()" handler keeps working. */ :has(> .right_pannel.active2) > .left_pannel .logo { padding: 0; justify-content: center; } :has(> .right_pannel.active2) > .left_pannel .logo img { content: url(../images/logo.png); width: 38px; height: 38px; object-fit: contain; object-position: center; } /* Nav: centred glyphs. The labels are bare text nodes with no element to target, so they are collapsed with font-size rather than display. The icons keep their explicit box, so they are unaffected — and the text stays in the accessibility tree for screen readers. */ :has(> .right_pannel.active2) > .left_pannel .push_menu .nav-link { justify-content: center; padding: 11px 0; font-size: 0; } :has(> .right_pannel.active2) > .left_pannel .push_menu .nav-item img { margin-right: 0; } :has(> .right_pannel.active2) > .left_pannel .push_menu .nav-link span, :has(> .right_pannel.active2) > .left_pannel .push_menu .nav_report, :has(> .right_pannel.active2) > .left_pannel .push_menu .nav-link .fa-angle-down { display: none; } :has(> .right_pannel.active2) > .left_pannel .push_menu .subnav { padding-left: 0; } :has(> .right_pannel.active2) > .left_pannel .push_menu .subnav .nav-link { padding: 9px 0; } } /* Below 992px media_screen.css parks the rail off-canvas and reopens it with `.left_pannel.active` — a class that, for the binding reason above, never arrives. Same handle as the desktop rule brings the drawer back. */ @media screen and (max-width: 992px) { :has(> .right_pannel.active2) > .left_pannel { margin-left: 0; } } /* ============================================================================= 3. TOP BAR ========================================================================== */ .right_top_header { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--kw-line); box-shadow: 0 1px 0 rgba(16, 24, 40, .02), 0 8px 24px -18px rgba(16, 24, 40, .5); } .right_pannel .header_inner { height: 66px; padding: 0 4px; } /* Hamburger becomes a proper icon button. */ .right_top_header .menu { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 12px; border-radius: 11px; background: var(--kw-subtle); border: 1px solid var(--kw-line); transition: background .2s var(--kw-ease), border-color .2s var(--kw-ease); } .right_top_header .menu:hover { background: var(--kw-brand-soft); border-color: var(--kw-brand-soft-2); } .right_top_header .menu img { width: 17px; height: 17px; object-fit: contain; opacity: .7; } .right_top_header .header_right { gap: 4px; padding-right: 6px; } /* Notification bell */ .right_pannel .notification_box { width: 40px; height: 40px; border-radius: 12px; margin-right: 10px; background: var(--kw-brand-soft); border: 1px solid var(--kw-brand-soft-2); transition: background .2s var(--kw-ease), border-color .2s var(--kw-ease), box-shadow .2s var(--kw-ease); } .right_pannel .notification_box i { color: var(--kw-brand); font-size: 16px; transition: color .2s var(--kw-ease); } .right_pannel .notification_box:hover { background: var(--kw-brand-grad); border-color: transparent; box-shadow: var(--kw-shadow-brand); } .right_pannel .notification_box:hover i { color: #ffffff; } .right_pannel .notification_box p { margin: 0; top: -7px; right: -7px; width: 20px; height: 20px; font-size: 11px; font-weight: 600; background: #e52636; border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(229, 38, 54, .45); } /* Avatar. `display: block` removes the inline descender strip under the image so the box is exactly as tall as the avatar — which is what the menu below measures itself against. */ .right_pannel .header_profile_img img { display: block; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #ffffff; box-shadow: 0 0 0 2px var(--kw-brand-soft-2), var(--kw-shadow-xs); transition: box-shadow .2s var(--kw-ease); } .right_pannel .header_profile_img img:hover { box-shadow: 0 0 0 2px var(--kw-brand), var(--kw-shadow-sm); } /* Offset from the avatar's own bottom edge rather than a hard 50px, so the gap the bridge below has to cover is a known 10px. */ .right_pannel .header_profile_img .profile_drop { top: calc(100% + 10px); width: 178px; padding: 8px; border-radius: 14px; border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-md); } /* The menu is only kept open by `.header_profile_img:hover`, and that box ends at the avatar's bottom edge. Moving the pointer down to the menu crossed the 10px gap in between — bare page, not part of the hover target — so the menu closed before it could be reached. This bridges the gap with a transparent strip. It is a child of the menu, so hovering it still counts as hovering `.header_profile_img`, and it only exists while the menu is displayed. `right: -2px` reaches past the menu's right edge to the avatar's, so a straight-down drag from the avatar stays on target the whole way. */ .right_pannel .header_profile_img .profile_drop::before { content: ""; position: absolute; left: 0; right: -2px; top: -12px; height: 12px; } .right_pannel .header_profile_img .profile_drop ul li { padding: 0; } .right_pannel .header_profile_img .profile_drop ul li a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: var(--kw-ink-2); font-size: 13.5px; font-weight: 500; transition: background .18s var(--kw-ease), color .18s var(--kw-ease); } .right_pannel .header_profile_img .profile_drop ul li a i { width: 15px; font-size: 13px; opacity: .7; } .right_pannel .header_profile_img .profile_drop ul li a:hover { background: var(--kw-brand-soft); color: var(--kw-brand); } /* ============================================================================= 4. PAGE HEADINGS ========================================================================== */ /* The dashboard heads its page with `.heading > h3` while every other page uses `.page_main_heading > h2`; both are the same level of information, so they resolve to one page title. */ .right_pannel .page_main_heading h2, .right_pannel .heading h3 { font-size: 26px; font-weight: 700; letter-spacing: -.6px; color: var(--kw-ink); line-height: 1.2; } .right_pannel .card .heading h3 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; } .right_pannel .page_main_heading2 h2 { font-size: 17px; font-weight: 600; letter-spacing: -.3px; color: var(--kw-ink); } .right_pannel .section_title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--kw-ink); } /* ============================================================================= 5. STAT TILES ========================================================================== */ .right_pannel .dashboard_top_section .box1 { position: relative; overflow: hidden; padding: 22px 20px; border-radius: var(--kw-radius); background: var(--kw-surface); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-sm); transition: transform .25s var(--kw-ease), box-shadow .25s var(--kw-ease), border-color .25s var(--kw-ease); } .right_pannel .dashboard_top_section .box1:hover { transform: translateY(-3px); border-color: #dfe6f0; box-shadow: var(--kw-shadow-md); } .right_pannel .dashboard_top_section .box1 .icon_area { width: 54px; height: 54px; flex: 54px 0 0; border-radius: 15px; font-size: 20px; box-shadow: 0 10px 22px -10px currentColor; } .right_pannel .dashboard_top_section .box1 .text_area { padding-left: 16px; } .right_pannel .dashboard_top_section .box1 .text_area p { color: var(--kw-muted); font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } .right_pannel .dashboard_top_section .box1 .text_area h4 { margin-top: 4px; font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--kw-ink); line-height: 1.1; } .right_pannel .dashboard_top_bg1 { background: linear-gradient(135deg, #a5a3ff 0%, #6c69f5 100%); color: #6c69f5; } .right_pannel .dashboard_top_bg2 { background: linear-gradient(135deg, #6bd6f2 0%, #2ba7cf 100%); color: #2ba7cf; } .right_pannel .dashboard_top_bg3 { background: linear-gradient(135deg, #6fe3c0 0%, #1fb489 100%); color: #1fb489; } .right_pannel .dashboard_top_section .box1 .icon_area i, .right_pannel .dashboard_top_section .box1 .icon_area img { color: #ffffff; } /* ============================================================================= 6. CARDS ========================================================================== */ .right_pannel .card { margin-top: 24px; padding: 22px; border-radius: var(--kw-radius); background: var(--kw-surface) !important; border: 1px solid var(--kw-line) !important; box-shadow: var(--kw-shadow-sm); } .right_pannel .admin_graph_header { padding-bottom: 14px; border-bottom: 1px solid var(--kw-line); } .right_pannel .admin_graph_header .left h2 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--kw-ink); } .right_pannel .admin_graph_header .right { font-size: 13px; color: var(--kw-ink-2); } .right_pannel .admin_graph_header .right span { display: inline-flex; align-items: center; gap: 7px; margin: 0 8px; padding: 5px 12px; border-radius: 999px; background: var(--kw-subtle); border: 1px solid var(--kw-line); font-weight: 500; white-space: nowrap; } .right_pannel .admin_graph_header .right span i { font-size: 9px; } .right_pannel .view_graph_img_area { margin-top: 14px; } .right_pannel .terms_and_conditions_body, .right_pannel .user_details_body_section, .right_pannel .category_main_box, .right_pannel .owner_details_box1 { border-radius: var(--kw-radius); background: var(--kw-surface); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-sm); } /* ============================================================================= 7. SEARCH / FILTER BAR ========================================================================== */ .right_pannel .card_search_pannel { gap: 12px; margin-top: 20px; align-items: flex-end; } .right_pannel .search_area { max-width: 360px; margin: 0; } .right_pannel .search_area .search { height: 48px; padding: 11px 14px; border: 1px solid var(--kw-line) !important; border-radius: 12px !important; background: var(--kw-surface) !important; color: var(--kw-ink) !important; font-size: 14px; box-shadow: var(--kw-shadow-xs); transition: border-color .18s var(--kw-ease), box-shadow .18s var(--kw-ease); } .right_pannel .search_area .search:focus { border-color: var(--kw-brand-2) !important; box-shadow: 0 0 0 3px var(--kw-brand-soft); } .right_pannel .search_area .search::placeholder { color: #a8b3c1; } .right_pannel .search_area .input-group .btn { height: 48px; background: transparent; border: none !important; box-shadow: none !important; z-index: 3; } .right_pannel .search_but i { color: var(--kw-muted); } .right_pannel .search_area .input-group .btn:hover i { color: var(--kw-brand) !important; } .right_pannel .support_sub_heading_filter { gap: 10px; margin: 0; justify-content: flex-end; } /* `width: 100%` made each select claim the whole filter block, so the two dropdowns wrapped onto separate lines. They size to their own content now and the flex gap does the spacing. */ .right_pannel .support_sub_heading_filter .form-select { flex: 0 1 auto; width: auto; min-width: 158px; max-width: 200px; margin-left: 0 !important; } /* No wrap at this width: `.left` is 100% wide, so allowing a wrap pushed the Search button onto its own line. media_screen.css still turns on wrapping below 992px. */ .right_pannel .search_box_main_area { gap: 12px; } .right_pannel .search_box_main_area .left { flex: 1 1 auto; width: auto; gap: 10px; } .right_pannel .search_box_main_area .left p { margin: 0; color: var(--kw-muted); font-size: 13px; font-weight: 600; } .right_pannel .dashboard_search_box { border-radius: 12px !important; } /* ============================================================================= 8. BUTTONS ============================================================================= One button system for the whole admin. The inner list names every legacy class that used to be a flat pill, so they all resolve to the same handful of treatments — brand, outline, success, danger. ========================================================================== */ :is(.right_pannel, #admin-logout, #profile-password) :is(.but_style1, .purple_but, .owner_blue_but, .blue_but, .red_but2, .category_add_but, .add_faq_but, .add_new_cagory, .add_new_sprint, .btn-primary) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 11px 24px; border-radius: 12px; border: 1px solid transparent !important; background: var(--kw-brand-grad); background-color: transparent; color: #ffffff !important; font-size: 14px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; box-shadow: var(--kw-shadow-brand); transition: transform .18s var(--kw-ease), box-shadow .18s var(--kw-ease), filter .18s var(--kw-ease); } :is(.right_pannel, #admin-logout, #profile-password) :is(.but_style1, .purple_but, .owner_blue_but, .blue_but, .red_but2, .category_add_but, .add_faq_but, .add_new_cagory, .add_new_sprint, .btn-primary):hover { background: var(--kw-brand-grad); background-color: transparent; border-color: transparent !important; color: #ffffff !important; transform: translateY(-1px); filter: saturate(115%) brightness(1.04); box-shadow: 0 12px 26px -8px rgba(212, 85, 0, .55); } :is(.right_pannel, #admin-logout, #profile-password) :is(.but_style1, .purple_but, .owner_blue_but, .blue_but, .red_but2, .category_add_but, .add_faq_but, .add_new_cagory, .add_new_sprint, .btn-primary):active { transform: translateY(0); } /* Secondary / dismiss actions. Declared after the brand rule and one class deeper so the `btn btn-primary but_style_out_line` combination used by every dialog resolves to the outline treatment. */ :is(.right_pannel, #admin-logout, #profile-password) :is(.btn.but_style_out_line, .btn.cancel_but2, .btn.clear_btn, .btn.owner_blue_but_line, .but_style_out_line, .cancel_but2, .clear_btn, .owner_blue_but_line, .btn-secondary, .btn-outline-secondary) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 11px 24px; border-radius: 12px; border: 1px solid var(--kw-line) !important; background: var(--kw-surface) !important; color: var(--kw-ink-2) !important; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: var(--kw-shadow-xs); transition: background .18s var(--kw-ease), border-color .18s var(--kw-ease), color .18s var(--kw-ease); } :is(.right_pannel, #admin-logout, #profile-password) :is(.btn.but_style_out_line, .btn.cancel_but2, .btn.clear_btn, .btn.owner_blue_but_line, .but_style_out_line, .cancel_but2, .clear_btn, .owner_blue_but_line, .btn-secondary, .btn-outline-secondary):hover { background: var(--kw-brand-soft) !important; border-color: var(--kw-brand-soft-2) !important; color: var(--kw-brand) !important; } /* Semantic actions keep their meaning — only the shape is modernised. */ .right_pannel :is(.green_but, .btn-success, .approved_but) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 12px; border: 1px solid transparent !important; background: linear-gradient(135deg, #34d3a5 0%, var(--kw-success) 100%); color: #ffffff !important; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(31, 180, 137, .6); transition: transform .18s var(--kw-ease), filter .18s var(--kw-ease); } .right_pannel :is(.green_but, .btn-success, .approved_but):hover { background: linear-gradient(135deg, #34d3a5 0%, var(--kw-success) 100%); color: #ffffff !important; transform: translateY(-1px); filter: saturate(115%) brightness(1.03); } .right_pannel :is(.red_but, .btn-danger, .declined_but) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 12px; border: 1px solid transparent !important; background: linear-gradient(135deg, #f97066 0%, var(--kw-danger) 100%); color: #ffffff !important; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(217, 45, 32, .55); transition: transform .18s var(--kw-ease), filter .18s var(--kw-ease); } .right_pannel :is(.red_but, .btn-danger, .declined_but):hover { background: linear-gradient(135deg, #f97066 0%, var(--kw-danger) 100%); color: #ffffff !important; transform: translateY(-1px); filter: saturate(115%) brightness(1.03); } .right_pannel .btn-sm { padding: 7px 14px !important; font-size: 12.5px !important; } .right_pannel .btn:disabled, .right_pannel .btn.disabled { opacity: .55; box-shadow: none; transform: none; } /* Dialogs lay their two actions side by side. */ :is(.right_pannel, #admin-logout, #profile-password) .cancle_booking_but_area, :is(.right_pannel, #admin-logout, #profile-password) .cancle_booking_but_area2 { gap: 12px; justify-content: center; } :is(.right_pannel, #admin-logout, #profile-password) .cancle_booking_but_area .btn { flex: 1 1 0; width: auto; margin: 0; } /* File-picker button */ .right_pannel .upload-btn-wrapper .btn { padding: 10px 20px; border: 1px solid var(--kw-brand-soft-2); border-radius: 11px; background-color: var(--kw-brand-soft); color: var(--kw-brand); font-size: 14px; font-weight: 600; transition: all .18s var(--kw-ease); } /* style.css marks `.upload-btn-wrapper .btn:hover` !important, so the hover fill has to answer in kind or it drops back to the old flat colour. */ .right_pannel .upload-btn-wrapper .btn:hover { background: var(--kw-brand-grad) !important; border-color: transparent; color: #ffffff !important; box-shadow: var(--kw-shadow-brand); } /* The round camera button on the profile avatar keeps its circle. */ .right_pannel .profile_main_section .left_area .upload_setion .btn { background-image: var(--kw-brand-grad); background-color: transparent; border: 2px solid #ffffff; box-shadow: var(--kw-shadow-brand); } .right_pannel .profile_main_section .left_area .upload_setion .btn:hover { background-image: var(--kw-brand-grad) !important; background-color: transparent !important; color: #fff !important; filter: saturate(115%) brightness(1.04); } /* ============================================================================= 9. TABLES (card-row list) ========================================================================== */ .right_pannel .user_table_area { margin-top: 18px; } .right_pannel .user_table_area .table_header { padding: 13px 12px; border-radius: 14px; background: var(--kw-brand-grad); box-shadow: var(--kw-shadow-brand); font-size: 12px; font-weight: 600; letter-spacing: .55px; text-transform: uppercase; } /* The per-column widths are inline percentages that do not always add up to 100 — the seller list totals less, which left a dead strip down the right of every row and crowded the last column inward. flex-grow hands that remainder back to the columns so the row fills its full width. Tables that already total 100 have no free space to hand out, so they are unaffected. */ .right_pannel .user_table_area .table_header > div, .right_pannel .user_table_area .table_body > div { flex-grow: 1; } .right_pannel .user_table_area .table_body { margin-top: 10px; padding: 12px; min-height: 74px; border-radius: 14px; background: var(--kw-surface); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-xs); color: var(--kw-ink-2); transition: transform .2s var(--kw-ease), box-shadow .2s var(--kw-ease), border-color .2s var(--kw-ease); } .right_pannel .user_table_area .table_body:hover { transform: translateY(-2px); border: 1px solid var(--kw-brand-soft-2); box-shadow: var(--kw-shadow-sm); } .right_pannel .user_table_area .table_body p { font-size: 13.5px; color: var(--kw-ink-2); } .right_pannel .user_table_area .table_body .sl_no { padding: 0; font-size: 13px; font-weight: 700; color: var(--kw-muted); } .right_pannel .user_table_area .table_body .mobile_heading { color: var(--kw-muted); font-size: 12.5px; } .right_pannel .user_table_area .table_body .profile_img img { border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-xs); } .right_pannel .user_table_area .table_body .place_image img { border-radius: 12px; border: 1px solid var(--kw-line); } /* Row actions */ .right_pannel :is(.details, .del, .edit) { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 4px; padding: 0; border-radius: 10px; border: 1px solid transparent; font-size: 13px; line-height: 1; transition: all .18s var(--kw-ease); } .right_pannel .details { background: var(--kw-brand-soft); border-color: var(--kw-brand-soft-2); color: var(--kw-brand); } .right_pannel .details:hover { background: var(--kw-brand); border-color: var(--kw-brand); color: #ffffff; } .right_pannel .edit { background: #eef2f7; border-color: #e2e8f0; color: var(--kw-ink-2); } .right_pannel .edit:hover { background: var(--kw-ink); border-color: var(--kw-ink); color: #ffffff; } .right_pannel .del { background: rgba(229, 38, 54, .09); border-color: rgba(229, 38, 54, .18); color: var(--kw-danger); } .right_pannel .del:hover { background: var(--kw-danger); border-color: var(--kw-danger); color: #ffffff; } /* Toggle switches */ .right_pannel .form-switch .form-check-input { transform: scale(1.2); } .right_pannel .form-check-input:checked, .right_pannel .user_table_area .table_body .form-check-input:checked { background-color: var(--kw-brand); border-color: var(--kw-brand); } .right_pannel .form-check-input:focus { border-color: var(--kw-brand-2); box-shadow: 0 0 0 3px var(--kw-brand-soft); } /* Empty state */ .right_pannel .no_data { margin-top: 44px; } .right_pannel .no_data p { color: var(--kw-muted); font-size: 14px; font-weight: 500; } /* Content scrollbars */ .right_pannel .user_table_area::-webkit-scrollbar, .right_pannel .category_boxes::-webkit-scrollbar { width: 9px; height: 9px; background-color: transparent; } .right_pannel .user_table_area::-webkit-scrollbar-track, .right_pannel .category_boxes::-webkit-scrollbar-track { -webkit-box-shadow: none; background-color: transparent; } .right_pannel .user_table_area::-webkit-scrollbar-thumb, .right_pannel .category_boxes::-webkit-scrollbar-thumb { -webkit-box-shadow: none; background-color: #cfd8e3; border-radius: 999px; } /* ============================================================================= 10. FORMS ========================================================================== */ :is(.right_pannel, #admin-logout, #profile-password) .form-label, :is(.right_pannel, #admin-logout, #profile-password) .modal-body label { margin-bottom: 6px; color: var(--kw-ink-2) !important; font-size: 13px; font-weight: 600; } :is(.right_pannel, #admin-logout, #profile-password) .form-label > strong { font-weight: 700; color: var(--kw-ink); } :is(.right_pannel, #admin-logout, #profile-password) .form-control, :is(.right_pannel, #admin-logout, #profile-password) .form-select { height: auto; min-height: 48px; padding: 11px 13px; border: 1px solid var(--kw-line) !important; border-radius: 12px !important; background-color: var(--kw-surface) !important; color: var(--kw-ink) !important; font-size: 14px; transition: border-color .18s var(--kw-ease), box-shadow .18s var(--kw-ease); } :is(.right_pannel, #admin-logout, #profile-password) .form-control:focus, :is(.right_pannel, #admin-logout, #profile-password) .form-select:focus { border-color: var(--kw-brand-2) !important; box-shadow: 0 0 0 3px var(--kw-brand-soft); } :is(.right_pannel, #admin-logout, #profile-password) .form-control::placeholder { color: #a8b3c1; } :is(.right_pannel, #admin-logout, #profile-password) .form-control[readonly], :is(.right_pannel, #admin-logout, #profile-password) .form-control:disabled { background-color: #f6f7f9 !important; } :is(.right_pannel, #admin-logout, #profile-password) textarea.form-control { min-height: 110px; } :is(.right_pannel, #admin-logout, #profile-password) .password_eye { top: 50%; transform: translateY(-50%); color: var(--kw-muted); cursor: pointer; } .right_pannel .validation_error, .right_pannel .error, .right_pannel .form-text.text-danger { display: inline-block; margin-top: 6px; color: #e5232f; font-size: 12.5px; font-weight: 500; } /* Rich-text editor chrome */ .right_pannel .angular-editor-toolbar { border-radius: 12px 12px 0 0 !important; border-color: var(--kw-line) !important; background: var(--kw-subtle) !important; } .right_pannel .angular-editor-textarea { border-radius: 0 0 12px 12px !important; border-color: var(--kw-line) !important; } /* ============================================================================= 11. MODALS ========================================================================== */ :is(.right_pannel, #admin-logout, #profile-password) .modal-content { border: none; border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .4); overflow: hidden; } :is(.right_pannel, #admin-logout, #profile-password) .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--kw-line); border-radius: 20px 20px 0 0 !important; } :is(.right_pannel, #admin-logout, #profile-password) .modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--kw-ink); } :is(.right_pannel, #admin-logout, #profile-password) .modal-body { padding: 22px; color: var(--kw-ink-2); } :is(.right_pannel, #admin-logout, #profile-password) .modal-footer { gap: 10px; padding: 16px 22px; border-top: 1px solid var(--kw-line); } :is(.right_pannel, #admin-logout, #profile-password) .modal-header .btn-close { width: 32px; height: 32px; padding: 0; margin: 0; flex: 0 0 32px; box-shadow: var(--kw-shadow-brand); transition: transform .2s var(--kw-ease); } :is(.right_pannel, #admin-logout, #profile-password) .modal-header .btn-close:hover { transform: rotate(90deg); } :is(.right_pannel, #admin-logout, #profile-password) .delete_modal_body h2 { font-size: 17px; font-weight: 600; color: var(--kw-ink); line-height: 1.45; } :is(.right_pannel, #admin-logout, #profile-password) .delete_modal_body h3 { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--kw-muted); } :is(.right_pannel, #admin-logout, #profile-password) .delete_modal_body p { margin-top: 8px; font-size: 14px; color: var(--kw-muted); } /* ============================================================================= 12. DETAIL PAGES (seller / user details, profile) ========================================================================== */ .right_pannel .owner_details_main_section .nav-pills { gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--kw-line); } .right_pannel .owner_details_main_section .nav-link { padding: 9px 18px; border-radius: 999px; color: var(--kw-ink-2); font-size: 14px; font-weight: 600; transition: all .18s var(--kw-ease); } .right_pannel .owner_details_main_section .nav-link:hover { background: var(--kw-brand-soft); color: var(--kw-brand); } .right_pannel .owner_details_main_section .nav-pills .nav-link.active, .right_pannel .owner_details_main_section .nav-pills .show > .nav-link { background: var(--kw-brand-grad); color: #ffffff; box-shadow: var(--kw-shadow-brand); } .right_pannel .owner_details_main_section .nav-link span { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e52636; color: #ffffff; font-size: 11px; font-weight: 700; } .right_pannel .owner_details_main_section .tab-content { padding: 20px 16px 22px; } .right_pannel .owner_details_box1_heading h3, .right_pannel .personal_info_id_section h3, .right_pannel .profile_main_section h3 { color: var(--kw-ink); font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; } .right_pannel .owner_details_box1_body .top_pannel_img_area > img { border: 3px solid #ffffff; box-shadow: 0 0 0 2px var(--kw-brand-soft-2), var(--kw-shadow-sm); } .right_pannel .owner_details_box1_body .top_pannel h2 { font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--kw-ink); } .right_pannel .personal_info_box, .right_pannel .personal_info_id_section { padding: 20px; border-radius: var(--kw-radius); background: var(--kw-surface); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-xs); } .right_pannel .personal_info_box p, .right_pannel .owner_details_box1_body .bottom_pannel p { font-size: 14px; color: var(--kw-ink-2); line-height: 1.6; } .right_pannel .personal_info_box p strong, .right_pannel .owner_details_box1_body .bottom_pannel p strong { color: var(--kw-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .2px; text-transform: uppercase; } .right_pannel .personal_info_id_box1 img { border-radius: 14px; background: var(--kw-subtle); border: 1px solid var(--kw-line); } .right_pannel .user_details_main_section { border-radius: var(--kw-radius); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-sm); } .right_pannel .user_details_main_section img { border: 5px solid #ffffff; box-shadow: 0 0 0 2px var(--kw-brand-soft-2), var(--kw-shadow-sm); } .right_pannel .user_details_main_section p:nth-child(odd) { background: var(--kw-subtle); border-radius: 10px; } .right_pannel .profile_main_section .left_area .img_area { border: 4px solid #ffffff; box-shadow: 0 0 0 3px var(--kw-brand-soft-2), var(--kw-shadow-sm); } .right_pannel .profile_right_area label { color: var(--kw-ink-2); font-weight: 600; font-size: 13px; } .right_pannel .verify_icon img { border-radius: 50%; background: #ffffff; box-shadow: 0 2px 6px rgba(16, 24, 40, .25); } /* ============================================================================= 13. NOTIFICATIONS ========================================================================== */ .right_pannel .notification_box1 { border-radius: var(--kw-radius); background: var(--kw-surface); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-xs); transition: transform .2s var(--kw-ease), box-shadow .2s var(--kw-ease); } .right_pannel .notification_box1:hover { transform: translateY(-2px); box-shadow: var(--kw-shadow-sm); } .right_pannel .notification_box1 .icon_area { border-radius: 12px; background: var(--kw-brand-soft); border: 1px solid var(--kw-brand-soft-2); } .right_pannel .notification_box1 .text_area p { font-size: 15px; color: var(--kw-ink); line-height: 1.55; } .right_pannel .notification_box1 .bottom p { color: var(--kw-muted); font-size: 12.5px; font-weight: 500; } /* ============================================================================= 14. SETTINGS / CATEGORIES ========================================================================== */ .right_pannel .category_main_box { padding: 20px; } .right_pannel .category_box1 { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-xs); transition: border-color .18s var(--kw-ease), box-shadow .18s var(--kw-ease); } .right_pannel .category_box1:hover { border-color: var(--kw-brand-soft-2); box-shadow: var(--kw-shadow-sm); } .right_pannel .category_mid p { font-size: 14px; color: var(--kw-ink); font-weight: 500; } .right_pannel .category_sl_no { color: var(--kw-muted); font-weight: 700; font-size: 13px; } .right_pannel .category_add_bottom_section { gap: 10px; border-top: 1px solid var(--kw-line); } .right_pannel .category_add_but { flex: 0 0 auto; padding: 10px 18px !important; font-size: 13.5px !important; } .right_pannel .category_del { color: var(--kw-danger); cursor: pointer; } /* ============================================================================= 15. ADVERTISEMENT / CONTENT PAGES ========================================================================== */ .right_pannel .adertisement_box1 { border-radius: var(--kw-radius); border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-sm); overflow: hidden; } .right_pannel .adertisement_box1 .form-check-input:checked { background-color: var(--kw-brand); border-color: var(--kw-brand); } .right_pannel .adertisement_add_text_box1 { border-radius: 14px; border: 1px solid var(--kw-line); box-shadow: var(--kw-shadow-xs); } .right_pannel .adertisement_add_text_box1 .form-check-input:checked { background-color: var(--kw-brand); border-color: var(--kw-brand); } .right_pannel .contact_body_address_box1 p { color: var(--kw-ink-2); font-size: 14px; line-height: 1.6; } /* ============================================================================= 16. LOGIN ============================================================================= The login screen renders outside the shell, so it is reached through its own classes rather than a wrapper. ========================================================================== */ .login_page_logo { margin-top: 46px; margin-bottom: 40px; } .login_page_logo img { max-width: 260px; } .login_card { padding: 30px !important; border-radius: 20px !important; background: var(--kw-surface) !important; border: 1px solid var(--kw-line) !important; box-shadow: var(--kw-shadow-md) !important; } .login_heading { font-size: 26px; font-weight: 700; letter-spacing: -.6px; color: var(--kw-ink); } .login_card .card-body > form > p { margin-top: 6px; color: var(--kw-muted); font-size: 14px; } .login_card .form-control { height: auto; min-height: 50px; padding: 13px 15px; border: 1px solid var(--kw-line) !important; border-radius: 12px !important; background: var(--kw-surface) !important; color: var(--kw-ink) !important; font-size: 14px; } .login_card .form-control:focus { border-color: var(--kw-brand-2) !important; box-shadow: 0 0 0 3px var(--kw-brand-soft); } .login_card .form-control::placeholder { color: #a8b3c1; } .login_card .error { display: inline-block; width: 100%; margin-top: 6px; color: #e5232f; font-size: 12.5px; font-weight: 500; } .login_but { padding: 13px 20px; border-radius: 12px; border: 1px solid transparent; background: var(--kw-brand-grad); color: #ffffff; font-size: 15px; font-weight: 600; box-shadow: var(--kw-shadow-brand); transition: transform .18s var(--kw-ease), box-shadow .18s var(--kw-ease), filter .18s var(--kw-ease); } .login_but:hover { background: var(--kw-brand-grad); border-color: transparent; color: #ffffff; transform: translateY(-1px); filter: saturate(115%) brightness(1.04); box-shadow: 0 12px 26px -8px rgba(212, 85, 0, .55); } .copy_right_right p { color: var(--kw-muted); font-size: 12.5px; } /* ============================================================================= 17. RESPONSIVE ========================================================================== */ @media screen and (max-width: 1200px) { .right_pannel .body { padding: 20px 20px 48px; } .copy_right { left: 20px; } } @media screen and (max-width: 992px) { .left_pannel { box-shadow: 24px 0 60px -30px rgba(15, 23, 42, .7); } .right_pannel .body { padding: 18px 16px 44px; } .copy_right { left: 16px; } .right_pannel .heading h3, .right_pannel .page_main_heading h2 { font-size: 22px; } .right_pannel .card { padding: 18px; } .right_pannel .card_search_pannel { align-items: stretch; } .right_pannel .search_area { max-width: 100%; } .right_pannel .support_sub_heading_filter .form-select { max-width: 100%; } } /* Row cards read as stacked key/value pairs once the header is dropped. */ @media screen and (max-width: 768px) { .right_pannel .user_table_area .table_body { padding: 14px 16px; } .right_pannel .user_table_area .table_body > div { padding: 0; margin: 3px 0; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; } .right_pannel .user_table_area .table_body .mobile_heading { min-width: 128px; margin-right: 8px; } } @media screen and (max-width: 600px) { .right_pannel .header_inner { height: 60px; } .right_pannel .dashboard_top_section .box1 { padding: 18px 16px; } .right_pannel .dashboard_top_section .box1 .text_area h4 { font-size: 26px; } .right_pannel .admin_graph_header .right { margin-top: 10px; } .right_pannel .admin_graph_header .right span { margin: 4px 6px 0 0; } .login_card { padding: 22px !important; } } /* ============================================================================= 18. MOTION PREFERENCES ========================================================================== */ @media (prefers-reduced-motion: reduce) { .left_pannel *, .right_pannel * { transition-duration: .01ms !important; animation-duration: .01ms !important; } .right_pannel .dashboard_top_section .box1:hover, .right_pannel .user_table_area .table_body:hover, .right_pannel .notification_box1:hover, .right_pannel .category_box1:hover { transform: none; } }