/* =============================================================================
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) {
/* No shadow on the off-canvas drawer. Parked at margin-left: -260px, its
shadow still bled a dark strip down the left edge of every page; when
open, the dimmed content behind it already sets it apart. */
.left_pannel {
box-shadow: none;
}
.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;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SETTINGS — the catalogue every seller lists against.
Ported from mockup/admin_panel/css/admin-modern.css. The rules above this
line are byte-identical to the mockup; this block is what the mockup adds.
The old .at_tree / .at_cat sizes-and-colours tree is deliberately NOT here:
the three sc_cols columns replaced it and nothing renders those classes.
═══════════════════════════════════════════════════════════════════════════ */
.at_panel { flex: 1; min-width: 0; background: #fff; border-radius: 14px; box-shadow: 0 4px 11px #0000000f; padding: 22px 24px; }
.at_head { padding-bottom: 16px; border-bottom: 1px solid #eee9e2; }
.at_head h3 { margin: 0; font-size: 19px; font-weight: 700; color: #161718; }
.at_head p { margin: 3px 0 0; font-size: 13.5px; color: #857d71; }
.at_crumb { font-size: 12.5px; color: #809fb8; font-weight: 600; }
.at_block { margin-top: 22px; }
.at_block h4 { font-size: 15px; font-weight: 700; color: #161718; margin: 0 0 4px; }
.at_block .lead { font-size: 13px; color: #857d71; margin: 0 0 12px; }
.at_chips { display: flex; flex-wrap: wrap; gap: 8px; }
.at_chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px 0 14px; border: 1.5px solid #e7e2da; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: #4a453d; }
.at_chip .sw { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #0000001f; }
.at_chip .x { width: 26px; height: 26px; border: none; border-radius: 50%; background: none; color: #b8b2a8; font-size: 15px; line-height: 1; cursor: pointer; }
.at_chip .x:hover { background: #ffeceb; color: #e3000b; }
.at_chip.seller { border-style: dashed; border-color: #f0b07a; }
.at_chip .tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #c75000; }
.at_add { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.at_add input[type=text] { min-height: 42px; padding: 0 14px; border: 1.5px solid #e7e2da; border-radius: 10px; font-size: 14.5px; min-width: 160px; }
.at_add input[type=text]:focus { outline: none; border-color: #c75000; }
.at_add input[type=color] { width: 46px; height: 42px; padding: 3px; border: 1.5px solid #e7e2da; border-radius: 10px; background: #fff; cursor: pointer; }
/* the "add another way of selling this" picker */
.at_add select { min-height: 42px; padding: 0 12px; border: 1.5px solid #e7e2da; border-radius: 10px; background: #fff; font-family: inherit; font-size: 14.5px; color: #161718; min-width: 180px; }
.at_add select:focus { outline: none; border-color: #c75000; }
.at_add button:disabled { opacity: .5; cursor: not-allowed; }
/* the last unit on a shelf cannot be removed — say so by going inert, not by
erroring after the click */
.at_chip .x:disabled { opacity: .35; cursor: not-allowed; }
.at_chip .x:disabled:hover { background: none; color: #b8b2a8; }
.at_empty { padding: 16px; border: 1.5px dashed #e7e2da; border-radius: 12px; font-size: 13.5px; color: #857d71; }
.at_none { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; color: #857d71; }
.at_none input { width: 18px; height: 18px; accent-color: #c75000; cursor: pointer; }
.at_pick { padding: 60px 20px; text-align: center; color: #857d71; }
.at_pick i { font-size: 30px; color: #d9d3ca; display: block; margin-bottom: 12px; }
@media (max-width: 900px) {
}
/* ═══════════════════════════════════════════════════════════════════════════
SETTINGS — CATALOGUE BROWSER
═══════════════════════════════════════════════════════════════════════════
Replaces three widgets that each navigated the same tree in a different way:
a category list, a sub-category panel driven by its own