/* ==========================================================================
   EMARE THEME OVERLAY
   --------------------------------------------------------------------------
   Loaded AFTER sb-admin-2.min.css / datatables / toastr / sweetalert2.
   Pure re-skin: no layout-structure assumptions beyond SB Admin 2 markup.
   Everything is scoped to @media screen so printed output (barcodes,
   gider pusulası, printThis regions) is never affected.
   Rollback: remove the <link> in layouts/header.blade.php.
   ========================================================================== */

@media screen {

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --em-sidebar-bg:      #1c2430;
    --em-sidebar-bg-2:    #171e28;   /* submenu panel */
    --em-sidebar-fg:      #aeb9c9;
    --em-sidebar-fg-dim:  #7d8896;
    --em-sidebar-active:  #ffffff;
    --em-primary:         #3b5bdb;
    --em-primary-600:     #2f4ec4;
    --em-primary-100:     #e7ecfd;
    --em-success:         #2f9e44;
    --em-success-100:     #e3f4e6;
    --em-warning:         #e8930c;
    --em-warning-100:     #fdf0dc;
    --em-danger:          #e03131;
    --em-danger-100:      #fdeaea;
    --em-info:            #1098ad;
    --em-info-100:        #e0f4f7;

    /* Surfaces */
    --em-bg:              #f4f6fa;
    --em-surface:         #ffffff;
    --em-border:          #e3e8ef;
    --em-border-strong:   #cbd4e1;

    /* Text */
    --em-text:            #1f2937;
    --em-text-muted:      #6b7280;
    --em-text-faint:      #9aa3af;

    /* Shape & depth */
    --em-radius:          10px;
    --em-radius-sm:       7px;
    --em-shadow-sm:       0 1px 2px rgba(16, 24, 40, .06);
    --em-shadow-md:       0 4px 12px rgba(16, 24, 40, .08);
    --em-shadow-lg:       0 12px 32px rgba(16, 24, 40, .16);

    /* Type */
    --em-font:            'Montserrat', 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
    font-family: var(--em-font);
    font-size: .875rem;
    color: var(--em-text);
    background-color: var(--em-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--em-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

a { color: var(--em-primary); }
a:hover { color: var(--em-primary-600); }

table { font-variant-numeric: tabular-nums; }

::selection { background: var(--em-primary-100); }

/* Slim scrollbars on overflow containers */
* { scrollbar-width: thin; scrollbar-color: var(--em-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--em-border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--em-text-faint); }

/* Checkboxes: proper sizing instead of the old transform:scale(1.5) hack */
input[type="checkbox"] {
    transform: none;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--em-primary);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar.bg-gradient-primary {
    background-color: var(--em-sidebar-bg) !important;
    background-image: none !important;
}

.sidebar .sidebar-brand {
    height: 4.375rem;
    padding: 1rem 1.25rem;
}
.sidebar .sidebar-brand img { max-height: 26px; }

.sidebar hr.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: .5rem 1rem;
}

.sidebar .sidebar-heading {
    color: var(--em-sidebar-fg-dim);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 0 1rem;
}

/* Nav items → rounded hover/active pills */
.sidebar .nav-item .nav-link {
    color: var(--em-sidebar-fg);
    font-weight: 500;
    margin: .125rem .625rem;
    padding: .625rem .75rem;
    border-radius: var(--em-radius-sm);
    transition: background-color .15s ease, color .15s ease;
}
.sidebar .nav-item .nav-link:hover {
    color: var(--em-sidebar-active);
    background-color: rgba(255, 255, 255, .06);
}
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link[aria-expanded="true"] {
    color: var(--em-sidebar-active);
    background-color: rgba(255, 255, 255, .09);
}
.sidebar .nav-item .nav-link span {
    font-size: .8125rem;
}
.sidebar .nav-item .nav-link i {
    color: var(--em-sidebar-fg-dim) !important;  /* beats inline color:white/orange letter icons */
    font-size: .8125rem;
    margin-right: .375rem;
}
.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item.active .nav-link i,
.sidebar .nav-item .nav-link[aria-expanded="true"] i {
    color: var(--em-sidebar-active) !important;
}

/* Collapse chevron */
.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
    color: var(--em-sidebar-fg-dim);
}

/* Submenu panels: dark instead of pasted white boxes */
.sidebar .collapse-inner.bg-white,
.sidebar .collapsing .collapse-inner,
.sidebar .collapse .collapse-inner {
    background-color: var(--em-sidebar-bg-2) !important;
    border-radius: var(--em-radius-sm);
    margin: 0 .625rem .5rem;
    padding: .5rem 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.sidebar .collapse-inner .sidebar-heading {
    color: var(--em-sidebar-fg-dim) !important;   /* beats inline style="color:black" */
    padding: .375rem 1rem .25rem;
}
.sidebar .collapse-item {
    color: var(--em-sidebar-fg) !important;
    font-size: .8125rem;
    margin: 0 .5rem;
    padding: .45rem .75rem;
    border-radius: 6px;
    white-space: normal;          /* long Turkish labels wrap instead of clipping */
    line-height: 1.35;
    display: flex;
    align-items: baseline;
    gap: .375rem;
    transition: background-color .12s ease, color .12s ease;
}
.sidebar .collapse-item:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}
.sidebar .collapse-item:active {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}
.sidebar .collapse-item i {
    color: var(--em-sidebar-fg-dim);
    font-size: .6875rem;
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
}

/* Collapsed (icon-only) sidebar: keep floating submenus readable */
.sidebar.toggled .nav-item .collapse .collapse-inner,
.sidebar.toggled .nav-item .collapsing .collapse-inner {
    box-shadow: var(--em-shadow-lg);
    margin: 0;
}

/* Sidebar toggler circle */
#sidebarToggle {
    background-color: rgba(255, 255, 255, .12);
}
#sidebarToggle:hover { background-color: rgba(255, 255, 255, .22); }

/* --------------------------------------------------------------------------
   4. TOPBAR
   -------------------------------------------------------------------------- */
.topbar {
    height: 3.5rem;
    box-shadow: none !important;
    border-bottom: 1px solid var(--em-border);
    background-color: var(--em-surface) !important;
}
.topbar h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--em-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar .topbar-divider {
    border-right: 1px solid var(--em-border);
    height: 1.75rem;
    margin: auto .75rem;
}
.topbar .nav-item .nav-link { color: var(--em-text-muted); }
.topbar .nav-item .nav-link:hover { color: var(--em-text); }
.topbar .nav-item .nav-link .small,
.topbar .text-gray-600 { color: var(--em-text-muted) !important; font-weight: 500; }

/* --------------------------------------------------------------------------
   5. CARDS
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    box-shadow: var(--em-shadow-sm);
}
.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--em-border);
    padding: .875rem 1.25rem;
    font-weight: 600;
    color: var(--em-text);
    border-radius: var(--em-radius) var(--em-radius) 0 0 !important;
}
.card .card-header .text-primary,
.card .card-header.text-primary,
.card .card-header h6.text-primary {
    color: var(--em-text) !important;   /* card titles: neutral, not link-blue */
}
.card .card-header .font-weight-bold { font-weight: 600 !important; }

/* SB Admin colored-left-border status cards → soften */
.card.border-left-primary { border-left: 3px solid var(--em-primary) !important; }
.card.border-left-success { border-left: 3px solid var(--em-success) !important; }
.card.border-left-info    { border-left: 3px solid var(--em-info) !important; }
.card.border-left-warning { border-left: 3px solid var(--em-warning) !important; }
.card.border-left-danger  { border-left: 3px solid var(--em-danger) !important; }

.card .card-body { border-radius: var(--em-radius); }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    font-weight: 500;
    border-radius: var(--em-radius-sm);
    padding: .4375rem .875rem;
    font-size: .8125rem;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:focus, .btn.focus {
    box-shadow: 0 0 0 3px var(--em-primary-100) !important;
}
.btn-sm, .btn-group-sm > .btn {
    padding: .3125rem .625rem;
    font-size: .75rem;
    border-radius: 6px;
}
.btn-lg { border-radius: var(--em-radius); }

.btn-primary {
    background-color: var(--em-primary);
    border-color: var(--em-primary);
}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--em-primary-600);
    border-color: var(--em-primary-600);
}

.btn-secondary {
    color: var(--em-text);
    background-color: var(--em-surface);
    border-color: var(--em-border-strong);
}
.btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--em-text);
    background-color: var(--em-bg);
    border-color: var(--em-text-faint);
}

.btn-success { background-color: var(--em-success); border-color: var(--em-success); }
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active {
    background-color: #268a3a; border-color: #268a3a;
}
.btn-danger { background-color: var(--em-danger); border-color: var(--em-danger); }
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active {
    background-color: #c92626; border-color: #c92626;
}
.btn-warning { background-color: var(--em-warning); border-color: var(--em-warning); color: #fff; }
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active {
    background-color: #d08108; border-color: #d08108; color: #fff;
}
.btn-info { background-color: var(--em-info); border-color: var(--em-info); }
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active {
    background-color: #0d8496; border-color: #0d8496;
}
.btn-light {
    background-color: var(--em-surface);
    border-color: var(--em-border);
    color: var(--em-text);
}

.btn-outline-primary   { color: var(--em-primary); border-color: var(--em-border-strong); }
.btn-outline-primary:hover { background-color: var(--em-primary); border-color: var(--em-primary); }
.btn-outline-secondary { color: var(--em-text-muted); border-color: var(--em-border-strong); }
.btn-outline-secondary:hover {
    color: var(--em-text);
    background-color: var(--em-bg);
    border-color: var(--em-text-faint);
}
.btn-outline-success   { color: var(--em-success); border-color: var(--em-border-strong); }
.btn-outline-success:hover { background-color: var(--em-success); border-color: var(--em-success); }
.btn-outline-danger    { color: var(--em-danger); border-color: var(--em-border-strong); }
.btn-outline-danger:hover { background-color: var(--em-danger); border-color: var(--em-danger); }
.btn-outline-info      { color: var(--em-info); border-color: var(--em-border-strong); }
.btn-outline-info:hover { background-color: var(--em-info); border-color: var(--em-info); }
.btn-outline-warning   { color: var(--em-warning); border-color: var(--em-border-strong); }
.btn-outline-warning:hover { background-color: var(--em-warning); border-color: var(--em-warning); color:#fff; }

.btn:disabled, .btn.disabled { opacity: .55; }

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.form-control {
    border: 1px solid var(--em-border-strong);
    border-radius: var(--em-radius-sm);
    color: var(--em-text);
    font-size: .875rem;
    min-height: 2.375rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--em-primary);
    box-shadow: 0 0 0 3px var(--em-primary-100);
}
.form-control::placeholder { color: var(--em-text-faint); }
.form-control-sm { min-height: 1.9rem; border-radius: 6px; }

label, .col-form-label {
    font-weight: 500;
    font-size: .8125rem;
    color: var(--em-text);
}

select.form-control, .custom-select {
    border-radius: var(--em-radius-sm);
    border-color: var(--em-border-strong);
}

/* Select2 to match */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--em-border-strong);
    border-radius: var(--em-radius-sm);
    min-height: 2.375rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--em-primary);
}
.select2-dropdown {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    box-shadow: var(--em-shadow-md);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--em-primary);
}

/* --------------------------------------------------------------------------
   8. BADGES
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .3em .7em;
    letter-spacing: .01em;
}
.badge-primary   { background-color: var(--em-primary-100); color: var(--em-primary-600); }
.badge-secondary { background-color: #eceff4; color: var(--em-text-muted); }
.badge-success   { background-color: var(--em-success-100); color: #23742f; }
.badge-danger    { background-color: var(--em-danger-100); color: #b02525; }
.badge-warning   { background-color: var(--em-warning-100); color: #a86400; }
.badge-info      { background-color: var(--em-info-100); color: #0b6c7b; }

/* --------------------------------------------------------------------------
   9. MODALS, DROPDOWNS, TOOLTIPS
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: var(--em-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--em-border);
    padding: 1rem 1.25rem;
}
.modal-header .modal-title { font-weight: 600; font-size: 1rem; }
.modal-footer { border-top: 1px solid var(--em-border); padding: .875rem 1.25rem; }
.modal-backdrop.show { opacity: .4; }

.dropdown-menu {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    box-shadow: var(--em-shadow-md);
    font-size: .8125rem;
}
.dropdown-item { color: var(--em-text); padding: .5rem 1rem; }
.dropdown-item:hover { background-color: var(--em-bg); }

.tooltip-inner {
    background-color: var(--em-sidebar-bg);
    border-radius: 6px;
    font-size: .75rem;
    padding: .375rem .625rem;
}

/* --------------------------------------------------------------------------
   10. ALERTS, TOASTR, SWEETALERT
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--em-radius-sm); border: 1px solid transparent; }
.alert-success { background-color: var(--em-success-100); color: #23742f; border-color: #c4e8cb; }
.alert-danger  { background-color: var(--em-danger-100); color: #b02525; border-color: #f6c8c8; }
.alert-warning { background-color: var(--em-warning-100); color: #a86400; border-color: #f5ddb8; }
.alert-info    { background-color: var(--em-info-100); color: #0b6c7b; border-color: #bce5eb; }

/* Toastr: white surface + colored rail, below the topbar */
#toast-container { margin-top: 4rem; }
#toast-container > div {
    opacity: 1;
    background-color: var(--em-surface);
    color: var(--em-text);
    border-radius: var(--em-radius-sm);
    box-shadow: var(--em-shadow-md);
    border-left: 4px solid var(--em-border-strong);
    padding: .875rem 1.25rem .875rem 3.25rem;
}
#toast-container > .toast-success { border-left-color: var(--em-success); background-color: var(--em-surface); }
#toast-container > .toast-error   { border-left-color: var(--em-danger); background-color: var(--em-surface); }
#toast-container > .toast-warning { border-left-color: var(--em-warning); background-color: var(--em-surface); }
#toast-container > .toast-info    { border-left-color: var(--em-info); background-color: var(--em-surface); }
#toast-container > div .toast-title { font-weight: 600; color: var(--em-text); }
#toast-container > div .toast-message { color: var(--em-text-muted); }
/* Toastr ships white icons — swap to dark-friendly filter */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info { background-image: none !important; padding-left: 1.25rem; }
.toast-progress { opacity: .15; }

/* SweetAlert2 */
.swal2-popup {
    border-radius: 14px !important;
    font-family: var(--em-font) !important;
    box-shadow: var(--em-shadow-lg) !important;
}
.swal2-title { color: var(--em-text) !important; font-size: 1.25rem !important; }
.swal2-html-container { color: var(--em-text-muted) !important; }
.swal2-styled.swal2-confirm {
    background-color: var(--em-primary) !important;
    border-radius: var(--em-radius-sm) !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-cancel {
    background-color: var(--em-surface) !important;
    color: var(--em-text) !important;
    border: 1px solid var(--em-border-strong) !important;
    border-radius: var(--em-radius-sm) !important;
}
.swal2-styled.swal2-deny {
    background-color: var(--em-danger) !important;
    border-radius: var(--em-radius-sm) !important;
}

/* --------------------------------------------------------------------------
   11. LOADING STATES
   -------------------------------------------------------------------------- */
#sending-overlay {
    background-color: rgba(15, 20, 30, .45);
    backdrop-filter: blur(2px);
    z-index: 1080;
}
#sending-overlay .overlay-content {
    background: var(--em-surface);
    color: var(--em-text);
    font-size: 1rem;
    font-weight: 500;
    padding: 1.5rem 2.25rem;
    border-radius: var(--em-radius);
    box-shadow: var(--em-shadow-lg);
}

.spinner-border { color: var(--em-primary); }

/* --------------------------------------------------------------------------
   12. FOOTER & MISC SHELL
   -------------------------------------------------------------------------- */
footer.sticky-footer {
    background-color: transparent;
    border-top: 1px solid var(--em-border);
}
footer.sticky-footer .copyright {
    color: var(--em-text-faint);
    font-size: .75rem;
}

.scroll-to-top {
    background-color: var(--em-sidebar-bg);
    border-radius: 50% !important;
    opacity: .85;
}
.scroll-to-top:hover { background-color: var(--em-primary); }

/* Utility text-gray remaps (SB Admin grays → theme grays) */
.text-gray-800 { color: var(--em-text) !important; }
.text-gray-600 { color: var(--em-text-muted) !important; }
.text-gray-400 { color: var(--em-text-faint) !important; }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--em-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   13. MOBILE: OFF-CANVAS SIDEBAR DRAWER  (<768px)
   Driven by body.em-sidebar-open (set by layouts/footer.blade.php JS).
   Default state is CLOSED — content gets the full viewport width.
   -------------------------------------------------------------------------- */
#em-sidebar-backdrop { display: none; }

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        min-height: 100vh;
        width: 16rem !important;
        z-index: 1050;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: var(--em-shadow-lg);
    }
    /* Neutralize SB Admin's width-based mobile states — transform owns visibility */
    .sidebar.toggled {
        width: 16rem !important;
        overflow-y: auto;
    }
    body.em-sidebar-open .sidebar { transform: translateX(0); }
    body.em-sidebar-open { overflow: hidden; }

    body.em-sidebar-open #em-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1049;
        background: rgba(15, 20, 30, .5);
    }

    /* Drawer uses the desktop-style item layout (base CSS is icon-mode) */
    .sidebar .nav-item .nav-link {
        width: auto;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .sidebar .nav-item .nav-link span {
        font-size: .8125rem;
        display: inline;
    }
    .sidebar .nav-item .collapse,
    .sidebar .nav-item .collapsing {
        position: static;
        top: 0;
        left: 0;
        margin: 0;
    }
    .sidebar .nav-item .collapsing { display: block; }
    .sidebar .collapse .collapse-inner,
    .sidebar .collapsing .collapse-inner {
        min-width: 0;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    }
    .sidebar #sidebarToggle { display: none; }
}

/* --------------------------------------------------------------------------
   14. CONTEXT SWITCHER  (brand/store pills in the sidebar)
   -------------------------------------------------------------------------- */
.em-context-switch {
    display: flex;
    gap: .25rem;
    margin: .25rem .625rem .5rem;
    padding: .25rem;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
}
.em-context-btn {
    flex: 1 1 0;
    border: none;
    background: transparent;
    color: var(--em-sidebar-fg);
    font-family: inherit;
    font-size: .6875rem;
    font-weight: 600;
    padding: .4375rem .25rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.em-context-btn:hover:not(.active) {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.em-context-btn.active {
    background: var(--em-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   15. COMMAND PALETTE  (Ctrl+K quick nav)
   -------------------------------------------------------------------------- */
.em-palette-trigger {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--em-border);
    background: var(--em-bg);
    color: var(--em-text-muted);
    border-radius: 8px;
    padding: .375rem .75rem;
    font-family: inherit;
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.em-palette-trigger:hover {
    border-color: var(--em-border-strong);
    color: var(--em-text);
}
.em-palette-trigger kbd {
    background: var(--em-surface);
    border: 1px solid var(--em-border-strong);
    border-radius: 4px;
    padding: 0 .375rem;
    font-size: .625rem;
    color: var(--em-text-faint);
    font-family: inherit;
}

#em-palette {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 20, 30, .5);
    backdrop-filter: blur(2px);
}
#em-palette.open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 1rem;
}
.em-palette-panel {
    width: min(560px, 100%);
    background: var(--em-surface);
    border-radius: 12px;
    box-shadow: var(--em-shadow-lg);
    overflow: hidden;
}
.em-palette-input {
    width: 100%;
    border: none;
    outline: none;
    padding: .875rem 1rem;
    font-family: inherit;
    font-size: .9375rem;
    color: var(--em-text);
    border-bottom: 1px solid var(--em-border);
    background: var(--em-surface);
}
.em-palette-input::placeholder { color: var(--em-text-faint); }
.em-palette-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: .375rem;
}
.em-palette-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .75rem;
    border-radius: 8px;
    color: var(--em-text);
    text-decoration: none;
    font-size: .8125rem;
}
.em-palette-item:hover { text-decoration: none; }
.em-palette-item .em-ctx {
    color: var(--em-text-faint);
    font-size: .6875rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.em-palette-item.active {
    background: var(--em-primary-100);
    color: var(--em-primary-600);
}
.em-palette-item.active .em-ctx { color: var(--em-primary-600); }
.em-palette-empty {
    padding: 1.25rem 1rem;
    color: var(--em-text-faint);
    font-size: .8125rem;
    text-align: center;
}
.em-palette-hint {
    display: flex;
    gap: 1rem;
    padding: .4375rem .875rem;
    font-size: .6875rem;
    color: var(--em-text-faint);
    border-top: 1px solid var(--em-border);
}

} /* end @media screen */