/* =========================================================
   SuperPanel — Menu Boards
   DESIGN LOCKED — do not restyle unless user explicitly asks.
   Font: Manrope only (font-lock.css loads last)
   ========================================================= */

/* Hide hub/module search bars under Operations / Menu boards */
.hub-inline-search,
.hub-panel .hub-inline-search,
.menu-hub-panel .hub-inline-search,
#hubSearchMain,
#hubSearchMenu,
#hubSearchCats,
#hubSearchImgs {
    display: none !important;
}

/* ---------- Shared board card (hub + menu) ---------- */
.menu-hub-panel.lux-page,
body.edit-suite .menu-hub-panel.lux-page {
    padding: 0 !important;
    background: #f3f3f3 !important;
    width: 100% !important;
    max-width: none !important;
}

body.edit-suite .menu-hub-panel > .edit-topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.7rem clamp(1.1rem, 3vw, 2rem) !important;
}

.menu-hub-shell {
    padding: 1.35rem clamp(1.1rem, 3vw, 2rem) 2.2rem;
    box-sizing: border-box;
}

.menu-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
}

.menu-hub-card,
.hub-feat,
.hub-tool-pro {
    position: relative;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.85rem !important;
    text-decoration: none !important;
    color: #000 !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease;
}

/* Menu board cards — compact height (original) */
.menu-hub-card {
    min-height: 76px !important;
    padding: 0.85rem 1rem !important;
}

/* Operations hub cards — slightly taller */
.hub-feat,
.hub-tool-pro {
    min-height: 118px !important;
    padding: 1.25rem 3.25rem 1.25rem 1.2rem !important;
    gap: 1rem !important;
}

.menu-hub-card:hover,
.hub-feat:hover,
.hub-tool-pro:hover {
    border-color: #000 !important;
    background: #fff !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

.menu-hub-card:active,
.hub-feat:active,
.hub-tool-pro:active {
    transform: translateY(0);
}

.menu-hub-ico,
.hub-feat-ico {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: #f2f2f2 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #000 !important;
    flex-shrink: 0;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.menu-hub-card:hover .menu-hub-ico,
.hub-feat:hover .hub-feat-ico,
.hub-tool-pro:hover .hub-feat-ico {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.menu-hub-ico svg,
.menu-hub-ico .dash-ico,
.hub-feat-ico svg,
.hub-feat-ico .dash-ico {
    width: 18px !important;
    height: 18px !important;
    color: inherit !important;
    stroke: currentColor !important;
}

.menu-hub-copy,
.hub-feat-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.menu-hub-card-title,
.hub-feat-title {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #000 !important;
    line-height: 1.2 !important;
}

.menu-hub-card-desc,
.hub-feat-desc {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #666 !important;
    line-height: 1.35 !important;
    max-width: none !important;
}

.menu-hub-go,
.hub-feat-go {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #888 !important;
    background: #f0f0f0 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.menu-hub-card:hover .menu-hub-go,
.hub-feat:hover .hub-feat-go,
.hub-tool-pro:hover .hub-feat-go {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    transform: translateX(3px);
}

/* Hub feature numbers — keep clear of title/arrow */
.hub-feat::before {
    top: 1rem !important;
    right: 1.15rem !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(0, 0, 0, 0.28) !important;
    line-height: 1 !important;
}

.hub-feat-go {
    align-self: center !important;
    margin-top: 0.35rem !important;
}

.hub-feat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.hub-tool-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
    padding: 0 clamp(1rem, 2.5vw, 1.75rem) !important;
}

@media (max-width: 980px) {
    .hub-feat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .menu-hub-grid,
    .hub-feat-grid,
    .hub-tool-row {
        grid-template-columns: 1fr !important;
    }
}

/* Flow steps as page links */
.hub-flow-track > li {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
}

a.hub-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0 0.25rem;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

a.hub-flow-step:hover .hub-flow-ico {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

a.hub-flow-step:hover .hub-flow-ico svg,
a.hub-flow-step:hover .hub-flow-ico .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

/* ---------- One pill button language (whole panel) ---------- */
.btn,
.btn-primary,
.btn-ghost,
.btn-outline,
.btn-sm,
.btn-lg,
.btn-save,
.nav-btn,
.edit-topbar-btn,
.edit-topbar-link,
.login-submit,
.shortcuts-save,
.time-update-save,
.topping-btn,
.addon-btn,
.size-btn,
.price-action-btn,
.order-action-btn,
.more-time-submit,
.add-resto-save,
.add-resto-cancel,
.update-item-save,
.website-list-btn,
.notice-popup-ok,
.category-items-btn,
.category-save-btn,
.category-btn,
.dash-ghost-btn,
.dash-primary-btn {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

.edit-sidebar-link {
    border-radius: 10px !important;
    padding: 0.65rem 0.85rem !important;
}

.edit-sidebar-label {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Edit sidebar — soft rounded cards (not pills) */
.edit-sidebar {
    background: #ececec !important;
    gap: 0.5rem !important;
    padding: 0.85rem 0.75rem !important;
}

.edit-sidebar-brand {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #000 !important;
    padding: 0.25rem 0.55rem 0.45rem !important;
}

.edit-sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.38rem !important;
}

.edit-sidebar a.edit-sidebar-link,
.edit-sidebar .edit-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    padding: 0.78rem 0.9rem !important;
    border-radius: 10px !important;
    border: 1.5px solid #000 !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.edit-sidebar a.edit-sidebar-link:hover,
.edit-sidebar .edit-sidebar-link:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #000 !important;
    box-shadow: none !important;
    transform: none !important;
}

.edit-sidebar a.edit-sidebar-link.is-active,
.edit-sidebar .edit-sidebar-link.is-active {
    background: #fff !important;
    color: #000 !important;
    border: 1.5px solid #000 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}

.edit-sidebar-ico {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: inherit !important;
}

.edit-sidebar-ico .dash-ico,
.edit-sidebar-ico svg {
    width: 18px !important;
    height: 18px !important;
    color: inherit !important;
    stroke: currentColor !important;
}

.edit-sidebar-ico svg [fill="currentColor"],
.edit-sidebar-ico .dash-ico [fill="currentColor"] {
    fill: currentColor !important;
}

.edit-sidebar-label {
    color: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.edit-topbar-btn,
.edit-topbar-btn-back,
.edit-topbar-right .btn,
.edit-topbar-right a.btn {
    border-radius: 999px !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.edit-client-name,
.hub-pro-heading,
.menu-hub-card-title,
.hub-feat-title {
    font-family: "Manrope", system-ui, sans-serif !important;
    text-transform: none !important;
}

.hub-pro-eyebrow,
.hub-flow-step strong {
    font-family: "Manrope", system-ui, sans-serif !important;
}

.hub-empty {
    display: none !important;
}

/* =========================================================
   CRM board pages — dense professional tables (no marketing copy)
   ========================================================= */

body.edit-suite .category-panel.lux-page,
body.edit-suite .price-panel.lux-page,
body.edit-suite .cat-order-panel.lux-page,
body.edit-suite .item-order-panel.lux-page,
body.edit-suite .item-images-panel.lux-page,
body.edit-suite .addon-panel.lux-page,
body.edit-suite .size-panel.lux-page,
body.edit-suite .topping-panel.lux-page {
    padding: 0 !important;
    background: #ececec !important;
    width: 100% !important;
    max-width: none !important;
}

body.edit-suite .category-panel > .edit-topbar,
body.edit-suite .price-panel > .edit-topbar,
body.edit-suite .cat-order-panel > .edit-topbar,
body.edit-suite .item-order-panel > .edit-topbar,
body.edit-suite .item-images-panel > .edit-topbar,
body.edit-suite .addon-panel > .edit-topbar,
body.edit-suite .size-panel > .edit-topbar,
body.edit-suite .topping-panel > .edit-topbar {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #d8d8d8 !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.55rem 1rem !important;
}

/* Item order / Images category pickers — compact rows */
.hub-panel .dash-card.hub-tile.item-order-cat-btn,
.hub-panel a.dash-card.hub-tile.item-order-cat-btn {
    min-height: 64px !important;
    height: auto !important;
    padding: 0.55rem 0.9rem 0.55rem 0.75rem !important;
    border-radius: 10px !important;
    align-items: center !important;
}

.hub-panel .item-order-cat-btn .dash-card-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
}

.hub-panel .item-order-cat-btn .dash-card-title {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.hub-panel .item-order-cat-btn .dash-card-desc {
    font-size: 0.72rem !important;
    margin: 0.1rem 0 0 !important;
    line-height: 1.2 !important;
}

.hub-panel .item-order-cat-btn::before {
    top: 0.55rem !important;
    right: 0.75rem !important;
    font-size: 0.62rem !important;
}

.crm-board-wrap {
    padding: 0.65rem 0.85rem 1rem !important;
    max-width: none;
    margin: 0;
}

.cat-studio-hero,
.cat-studio-kicker,
.cat-studio-title,
.cat-studio-lead,
.cat-studio-stat,
.category-update-head,
.category-update-eyebrow {
    display: none !important;
}

.crm-table,
.price-list-card.crm-table,
.cat-order-card.crm-table,
.addon-list-card,
.size-list-card,
.topping-list-card,
.update-item-card.crm-edit-card {
    margin: 0 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden;
}

.price-suite {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.crm-thead,
.price-list-head.crm-thead,
.cat-order-table-head.crm-thead {
    display: grid !important;
    grid-template-columns: 48px 1fr 1fr 140px;
    gap: 0.65rem;
    align-items: center;
    padding: 0.5rem 0.75rem !important;
    background: #f3f3f3 !important;
    border-bottom: 1px solid #d8d8d8 !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #444 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cat-order-table-head.crm-thead { grid-template-columns: 1fr 120px !important; }
.price-list-head.crm-thead { grid-template-columns: minmax(0, 1fr) 88px 148px !important; }
.crm-th-num { text-align: center; }
.crm-th-actions { text-align: right; }

.crm-row,
.crm-row-cat,
.price-row.crm-row,
.cat-order-row.crm-row,
.addon-row,
.size-row,
.topping-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 140px !important;
    gap: 0.65rem;
    align-items: start;
    padding: 0.65rem 0.75rem !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    background: #fff !important;
}

.price-row.crm-row {
    grid-template-columns: 44px 72px minmax(0, 1fr) 100px 100px 180px !important;
    align-items: center !important;
}

.cat-order-row.crm-row {
    grid-template-columns: minmax(0, 1fr) 120px !important;
    align-items: center !important;
}

.crm-row-cat > input[type="hidden"] {
    display: none !important;
}

.crm-cell-num {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #555;
}

.crm-cell-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.crm-cell-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.crm-inline-form {
    margin: 0;
    display: block;
}

.crm-input,
.crm-textarea,
.crm-board .update-item-field input,
.crm-board .update-item-field select,
.crm-board .update-item-price-row input,
.cat-order-no input.crm-input,
.addon-field input,
.topping-field input,
.size-field input {
    width: 100%;
    box-sizing: border-box;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 6px !important;
    padding: 0.42rem 0.55rem !important;
    box-shadow: none !important;
}

.crm-board .update-item-field input,
.crm-board .update-item-field select,
.crm-board .update-item-price-grid .update-item-field input {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.9rem !important;
}

.crm-board .update-item-grid,
.crm-board .update-item-price-grid {
    gap: 0.85rem 0.95rem !important;
}

.crm-board .update-item-field > span {
    font-size: 0.82rem !important;
    margin-bottom: 0.15rem !important;
}

.crm-textarea { min-height: 52px; resize: vertical; line-height: 1.35; }

.crm-input:focus,
.crm-textarea:focus,
.crm-board .update-item-field input:focus,
.crm-board .update-item-field select:focus,
.cat-order-no input:focus {
    outline: none !important;
    border-color: #111 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
}

.crm-input-sm { max-width: 96px; text-align: center; }

.crm-btn,
.crm-board .category-btn,
.crm-board .addon-btn,
.crm-board .topping-btn,
.crm-board .size-btn,
.crm-board .price-action-btn,
.crm-board .update-item-save,
.crm-board .cat-order-save {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    padding: 0.35rem 0.7rem !important;
    border: 1px solid #111 !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.crm-btn-primary,
.crm-board .update-item-save,
.crm-board .cat-order-save {
    background: #111 !important;
    color: #fff !important;
}

.crm-btn-danger { color: #b42318 !important; border-color: #d7a9a4 !important; }

.crm-footer {
    padding: 0.55rem 0.7rem;
    border-top: 1px solid #e4e4e4;
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
}

.crm-footer .crm-btn,
.crm-footer .cat-order-save { width: auto; min-width: 120px; }

.price-list-toolbar.crm-toolbar {
    padding: 0.45rem 0.7rem !important;
    background: #f7f7f7 !important;
    border-bottom: 1px solid #e4e4e4 !important;
}

.price-search-bar {
    border-radius: 6px !important;
    border: 1px solid #cfcfcf !important;
    box-shadow: none !important;
    padding: 0.2rem 0.55rem !important;
    background: #fff !important;
}

.price-row.crm-row {
    grid-template-columns: 44px 72px minmax(0, 1fr) 100px 100px 180px !important;
    align-items: center !important;
    padding: 0.45rem 0.7rem !important;
}

.price-row-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
    align-items: center !important;
}

.price-row-no {
    min-width: 1.7rem !important;
    height: 1.7rem !important;
    border-radius: 4px !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    font-size: 0.68rem !important;
}

.price-row-name { font-size: 0.88rem !important; font-weight: 650 !important; }
.price-row-sub { font-size: 0.74rem !important; }
.price-row-price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.cat-order-row.crm-row {
    grid-template-columns: minmax(0, 1fr) 120px !important;
    align-items: center !important;
    padding: 0.45rem 0.7rem !important;
}

.cat-order-index {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 4px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    font-size: 0.7rem;
    font-weight: 700;
    color: #444;
    margin-right: 0.45rem;
}

.cat-order-main { display: flex; align-items: center; min-width: 0; }
.cat-order-name { font-size: 0.88rem; font-weight: 600; color: #111; }
.cat-order-no { display: flex; justify-content: flex-end; }

.crm-edit-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.65rem 0.85rem !important;
    border-bottom: 1px solid #e4e4e4;
    background: #f5f5f5;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.crm-edit-head.form-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.crm-edit-head > span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.crm-edit-head .form-head-save {
    position: static !important;
    float: none !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.crm-board .update-item-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem 0.85rem !important;
    padding: 0.7rem 0.75rem 0.25rem !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

body.edit-suite .price-panel .update-item-grid,
body.edit-suite .update-item-card .update-item-grid,
.update-item-grid.update-item-grid-2col,
div.update-item-grid,
.crm-board .update-item-grid,
.crm-board .update-item-price-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem 0.85rem !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.crm-board .update-item-price-block {
    margin: 0.55rem 0.85rem 1.15rem !important;
    padding: 0.75rem 0.85rem 0.9rem !important;
    border-radius: 8px !important;
    border: 1px solid #e4e4e4 !important;
    background: #fafafa !important;
}

.crm-board .update-item-price-table {
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #fff !important;
}

.crm-board .update-item-price-head,
.crm-board .update-item-price-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch;
}

.crm-board .update-item-price-head {
    background: #f3f3f3 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.crm-board .update-item-price-head span {
    padding: 0.38rem 0.65rem !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #555 !important;
    border-right: 1px solid #e0e0e0 !important;
}

.crm-board .update-item-price-head span:last-child {
    border-right: none !important;
}

.crm-board .update-item-price-row {
    border-bottom: 1px solid #ececec !important;
}

.crm-board .update-item-price-row:last-child {
    border-bottom: none !important;
}

.crm-board .update-item-price-row input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0.3rem 0.65rem !important;
    border: none !important;
    border-right: 1px solid #ececec !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: #111 !important;
    box-shadow: none !important;
}

.crm-board .update-item-price-row input:last-child {
    border-right: none !important;
}

.crm-board .update-item-price-row input[readonly] {
    background: #f7f7f7 !important;
    color: #333 !important;
    font-weight: 650 !important;
    cursor: default;
}

.crm-board .update-item-price-row input:focus:not([readonly]) {
    outline: none !important;
    background: #fafafa !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 900px) {
    .crm-board .update-item-price-head,
    .crm-board .update-item-price-row {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .crm-board .update-item-price-head span,
    .crm-board .update-item-price-row input {
        border-bottom: none !important;
        border-right: 1px solid #ececec !important;
    }

    .crm-board .update-item-price-head span:last-child,
    .crm-board .update-item-price-row input:last-child {
        border-right: none !important;
    }
}

.crm-board .update-item-card.crm-edit-card,
.update-item-card.crm-edit-card {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.25rem !important;
}

.crm-board .update-item-form,
.update-item-card .update-item-form {
    padding-bottom: 0.35rem !important;
}

.crm-board .update-item-grid {
    padding: 0.75rem 0.85rem 0.35rem !important;
}

.crm-board .update-item-price-label {
    margin: 0 0 0.55rem !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #111 !important;
}

.crm-board .update-item-price-grid {
    padding: 0 !important;
    margin: 0 !important;
}

/* Prices list — column alignment lock */
.price-crm .price-list-head.price-crm-head,
.price-crm .price-row.price-crm-row,
.price-crm .price-row.crm-row {
    display: grid !important;
    grid-template-columns: 44px 72px minmax(0, 1fr) 100px 100px 180px !important;
    gap: 0.55rem !important;
    align-items: center !important;
}

.price-crm .price-col-price,
.price-crm .price-col-actions,
.price-crm .price-col-status,
.price-crm .price-col-num {
    text-align: center !important;
}

.price-crm .price-col-price,
.price-crm .price-col-actions,
.price-crm .price-col-status {
    justify-self: stretch !important;
}

.price-crm-head .price-col-actions,
.price-crm .price-col-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.price-crm .price-row-price,
.price-crm .price-col-status {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.price-crm .price-row-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
    width: 100% !important;
    justify-items: stretch !important;
}
.crm-board .update-item-price-block { margin: 0.55rem 0.85rem 1.15rem !important; padding: 0.75rem 0.85rem 0.9rem !important; border-radius: 8px !important; }
.crm-board .update-item-save { margin: 0.65rem 0.75rem 0.75rem !important; width: auto !important; min-width: 120px; }

.addon-row, .size-row, .topping-row {
    grid-template-columns: 36px minmax(0, 1fr) 120px !important;
    padding: 0.45rem 0.65rem !important;
}

.addon-row-index, .topping-row-index, .size-row-index {
    min-width: 1.55rem !important;
    height: 1.55rem !important;
    border-radius: 4px !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    font-size: 0.68rem !important;
}

.addon-list-card, .size-list-card, .topping-list-card { margin: 0.65rem 0.85rem 1rem !important; }

.crm-empty, .price-empty, .addon-empty, .size-empty, .topping-empty, .cat-order-empty {
    padding: 1.5rem 1rem !important;
    font-size: 0.86rem !important;
    color: #777 !important;
}

.hub-feats { padding: 1.1rem 0 0.25rem !important; }
.hub-pro-head { margin: 0 0 0.85rem !important; }
.hub-section-main, .hub-section-tools { margin-bottom: 0.85rem !important; }
.item-order-panel .hub-inline-search, .item-images-panel .hub-inline-search { display: none !important; }

@media (max-width: 900px) {
    .crm-thead, .crm-table-cats .crm-row, .crm-row { grid-template-columns: 1fr !important; }
    .crm-row-form { grid-column: auto; grid-template-columns: 1fr; }
    .crm-cell-actions { flex-direction: row; }
    .crm-btn { width: auto; }
    .price-row.crm-row, .cat-order-row.crm-row { grid-template-columns: 1fr !important; }
}

/* =========================================================
   Prices CRM — richer professional table
   ========================================================= */

.price-panel.crm-board .crm-board-wrap {
    padding: 0.75rem 1rem 1.1rem !important;
}

.price-crm {
    border: 1px solid #cfcfcf !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.price-crm .price-list-toolbar.crm-toolbar {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem !important;
    background: linear-gradient(180deg, #fafafa, #f3f3f3) !important;
    border-bottom: 1px solid #ddd !important;
}

.price-toolbar-left {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    align-self: stretch;
}

.cat-items-panel .price-toolbar-left {
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cat-items-panel.crm-board .crm-board-wrap {
    padding: 0.45rem 0.75rem 0.65rem !important;
}

.cat-items-panel .price-crm .price-list-toolbar.crm-toolbar {
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.38rem 0.65rem !important;
}

.cat-items-panel .price-count {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.28rem 0.6rem !important;
    font-size: 0.74rem !important;
    border-radius: 6px !important;
}

.cat-items-panel .price-count strong {
    font-size: 0.82rem !important;
}

.cat-items-panel .img-crm-cat-pill {
    padding: 0.22rem 0.55rem !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
}

.cat-items-panel .price-crm .price-search-bar {
    min-height: 32px !important;
    padding: 0 0.55rem !important;
    border-radius: 6px !important;
}

.cat-items-panel .price-crm .price-search-bar input {
    padding: 0.28rem 0 !important;
    font-size: 0.82rem !important;
}

.cat-items-panel .price-crm .price-search-bar svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.cat-items-panel .price-crm-head,
.cat-items-panel .price-list-head.price-crm-head {
    padding: 0.38rem 0.65rem !important;
    gap: 0.4rem !important;
}

.cat-items-panel .price-crm-row,
.cat-items-panel .price-row.price-crm-row,
.cat-items-panel .price-row.crm-row.price-crm-row {
    padding: 0.42rem 0.65rem !important;
    gap: 0.4rem !important;
    border-bottom-color: #e8e8e8 !important;
}

.cat-items-panel .price-crm .price-row-name {
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
}

.cat-items-panel .price-crm .price-row-sub {
    margin-top: 0.06rem !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
}

.cat-items-panel .price-status {
    min-height: 1.35rem !important;
    padding: 0.08rem 0.45rem !important;
    font-size: 0.65rem !important;
}

.cat-items-panel .price-amount {
    min-height: 1.55rem !important;
    min-width: 3.6rem !important;
    padding: 0.12rem 0.5rem !important;
    font-size: 0.84rem !important;
    border-radius: 6px !important;
}

.cat-items-panel .price-crm .price-row-no {
    min-width: 2.1rem !important;
    height: 1.45rem !important;
    font-size: 0.68rem !important;
    border-radius: 5px !important;
}

.cat-items-panel .price-col-num {
    font-size: 0.72rem !important;
}

.cat-items-panel .price-crm .price-row-actions {
    gap: 0.45rem !important;
}

.cat-items-panel .price-crm .price-row-actions .crm-btn {
    min-height: 30px !important;
    padding: 0.28rem 0.45rem !important;
    font-size: 0.74rem !important;
    border-radius: 6px !important;
}

.price-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    align-self: stretch;
    white-space: nowrap;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    min-height: 42px;
    height: 100%;
    padding: 0 0.85rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #c8c8c8;
    line-height: 1;
    box-sizing: border-box;
}

.price-count strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.02em;
}

.price-count > span {
    font-weight: 600;
    color: #666;
}

.price-crm .price-search-bar {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    border-radius: 8px !important;
    border: 1px solid #c8c8c8 !important;
    background: #fff !important;
    padding: 0 0.7rem !important;
    box-sizing: border-box;
}

.price-crm .price-search-bar input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.55rem 0 !important;
    font-size: 0.86rem !important;
}

.price-crm-head,
.price-list-head.price-crm-head {
    display: grid !important;
    grid-template-columns: 44px 72px minmax(0, 1fr) 100px 100px 180px !important;
    gap: 0.55rem !important;
    align-items: center !important;
    padding: 0.55rem 0.85rem !important;
    background: #111 !important;
    border-bottom: none !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.price-crm-head > span {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

.price-crm-head .price-col-price,
.price-crm-head .price-col-actions,
.price-crm-head .price-col-status,
.price-crm-head .price-col-num {
    text-align: center !important;
}

.price-crm-row,
.price-row.price-crm-row,
.price-row.crm-row.price-crm-row {
    display: grid !important;
    grid-template-columns: 44px 72px minmax(0, 1fr) 100px 100px 180px !important;
    gap: 0.55rem !important;
    align-items: center !important;
    padding: 0.7rem 0.85rem !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
    transition: background 0.15s ease;
}

.price-crm-row:nth-child(even) {
    background: #fafafa !important;
}

.price-crm-row:hover {
    background: #f3f3f3 !important;
}

.price-col-num {
    text-align: center;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #777;
}

.price-col-code {
    display: flex;
    justify-content: flex-start;
}

.price-crm .price-row-no {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 2.4rem !important;
    height: 1.7rem !important;
    padding: 0 0.45rem !important;
    border-radius: 6px !important;
    background: #111 !important;
    color: #fff !important;
    border: none !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

.price-crm .price-row-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #111 !important;
    line-height: 1.25 !important;
}

.price-crm .price-row-sub {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.76rem !important;
    color: #777 !important;
    font-weight: 500 !important;
}

.price-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #555;
}

.price-status.is-active {
    background: #111;
    border-color: #111;
    color: #fff;
}

.price-status.is-inactive {
    background: #fff;
    border-color: #d7a9a4;
    color: #b42318;
}

.price-col-status {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.price-crm .price-row-price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.price-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    min-height: 1.85rem;
    padding: 0.2rem 0.65rem;
    border-radius: 8px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111;
    text-align: center;
}

.price-crm .price-row-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
}

.price-crm .price-row-actions .crm-btn {
    width: 100%;
    min-height: 34px !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    box-sizing: border-box !important;
}

.price-crm .crm-btn-primary {
    background: #111 !important;
    color: #fff !important;
}

.price-crm .crm-inline-form,
.price-crm .price-delete-form {
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

.price-crm .crm-inline-form .crm-btn,
.price-crm .price-delete-form .crm-btn {
    width: 100% !important;
}

@media (max-width: 980px) {
    .price-crm-head,
    .price-row.price-crm-row {
        grid-template-columns: 36px 60px minmax(0, 1fr) 148px !important;
    }
    .price-col-status,
    .price-crm-head .price-col-status,
    .price-crm-head .price-col-price {
        display: none !important;
    }
    .price-row.price-crm-row .price-col-status,
    .price-row.price-crm-row .price-row-price {
        display: none !important;
    }
}

/* =========================================================
   Categories — dual-pane editor cards (unique vs prices table)
   ========================================================= */

body.edit-suite .category-panel.cat-editor.lux-page {
    background: #ececec !important;
    padding: 0 !important;
}

body.edit-suite .category-panel.cat-editor > .edit-topbar {
    padding: 0.55rem 1rem !important;
    background: #fff !important;
    border-bottom: 1px solid #d8d8d8 !important;
}

.cat-editor-wrap {
    padding: 0.85rem 1rem 1.25rem;
    max-width: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.cat-editor-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cat-editor-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    margin: 0;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.cat-editor-card > input[type="hidden"] { display: none; }

.cat-editor-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0.7rem;
    background: #f7f7f7;
    color: #111;
    border-right: 1px solid #e4e4e4;
}

.cat-editor-idx {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.cat-editor-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    margin-top: auto;
}

.cat-ed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cat-ed-btn-primary {
    background: #111;
    color: #fff;
    border-color: #111;
}

.cat-ed-btn:not(.cat-ed-btn-primary):not(.cat-ed-btn-danger) {
    background: #fff;
    color: #111;
    border-color: #111;
}

.cat-ed-btn-danger {
    background: #fff;
    border-color: #c9c9c9;
    color: #b42318;
}

.cat-ed-btn:hover {
    background: #222;
    border-color: #222;
    color: #fff;
}

.cat-ed-btn:not(.cat-ed-btn-primary):not(.cat-ed-btn-danger):hover {
    background: #111;
    color: #fff;
}

.cat-ed-btn-danger:hover {
    background: #fff5f4;
    border-color: #b42318;
    color: #b42318;
}

.cat-editor-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    background: #fff;
}

.cat-editor-pane {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    border-left: 1px solid #ececec;
    background: #fff;
}

.cat-editor-pane:first-child { border-left: none; }

.cat-editor-pane-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 2.25rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.cat-ed-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.cat-ed-field > span {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    text-transform: none;
    letter-spacing: 0.01em;
}

.cat-ed-field input,
.cat-ed-field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: #111;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    padding: 0.55rem 0.7rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cat-ed-field textarea {
    min-height: 64px;
    resize: vertical;
    line-height: 1.45;
}

.cat-ed-field input:focus,
.cat-ed-field textarea:focus {
    background: #fff;
    border-color: #111;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

@media (max-width: 820px) {
    .cat-editor-card { grid-template-columns: 1fr; }
    .cat-editor-rail {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.7rem 0.85rem;
        border-right: none;
        border-bottom: 1px solid #e4e4e4;
    }
    .cat-editor-idx { margin: 0; }
    .cat-editor-rail-actions { flex-direction: row; width: auto; margin-top: 0; }
    .cat-ed-btn { width: auto; min-width: 76px; }
    .cat-editor-body { grid-template-columns: 1fr; }
    .cat-editor-pane { border-left: none; border-top: 1px solid #ececec; }
    .cat-editor-pane:first-child { border-top: none; }
}

/* =========================================================
   Category order — compact editable cards grid
   ========================================================= */

body.edit-suite .cat-order-panel.cat-rank.lux-page {
    background: #ececec !important;
    padding: 0 !important;
}

body.edit-suite .cat-order-panel.cat-rank > .edit-topbar {
    padding: 0.55rem 1rem !important;
    background: #fff !important;
    border-bottom: 1px solid #d8d8d8 !important;
}

.cat-rank-wrap {
    padding: 0.75rem 1rem 1.15rem;
    max-width: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.cat-rank-board {
    margin: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.cat-rank-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, #fafafa, #f3f3f3);
    border-bottom: 1px solid #ddd;
}

.cat-rank-toolbar .cat-rank-save {
    margin-left: auto;
    min-width: 120px;
    min-height: 34px;
    padding: 0.35rem 0.95rem;
    font-size: 0.8rem;
}

.cat-rank-footer { display: none; }

.cat-rank-list {
    list-style: none;
    margin: 0;
    padding: 0.7rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.55rem;
    position: relative;
}

.cat-rank-list::before { display: none; content: none; }

.cat-rank-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
    padding: 0.55rem 0.6rem 0.6rem;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cat-rank-item:hover {
    background: #fff;
    border-color: #111;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.cat-rank-badge {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: #111;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    box-shadow: none;
    flex-shrink: 0;
}

.cat-rank-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1 1 auto;
}

.cat-rank-name {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-rank-meta {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-rank-order {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    margin-top: auto;
    padding-top: 0.3rem;
    border-top: 1px solid #ebebeb;
}

.cat-rank-order > span {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    color: #888;
    text-align: left;
    letter-spacing: 0.02em;
}

.cat-rank-order input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111;
    background: #fff;
    border: 1.5px solid #111;
    border-radius: 6px;
    padding: 0.35rem 0.25rem;
    outline: none;
}

.cat-rank-order input:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.cat-rank-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid #e4e4e4;
    background: #f5f5f5;
}

.cat-rank-save {
    min-width: 140px;
    min-height: 38px;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.cat-rank-save:hover { background: #222; }

@media (max-width: 520px) {
    .cat-rank-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        padding: 0.55rem;
    }
    .cat-rank-name { font-size: 0.74rem; }
}

/* =========================================================
   Images + Item order — CRM detail tables
   ========================================================= */

.img-crm .img-update-wrap,
.order-crm .item-order-detail-card {
    padding: 0.75rem 1rem 1.1rem !important;
    background: transparent !important;
}

.img-crm-card,
.order-crm-card {
    border: 1px solid #cfcfcf !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.img-crm-toolbar,
.order-crm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, #fafafa, #f3f3f3);
    border-bottom: 1px solid #ddd;
}

.img-crm-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

.img-crm-toolbar .form-head-save,
.order-crm-toolbar .form-head-save {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.order-crm-footer,
.item-order-save-bar {
    display: none !important;
}

.img-crm-count {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: #333;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d6d6d6;
}

.img-crm-cat-pill {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 650;
    color: #fff;
    background: #111;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-crm-table,
.order-crm-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.img-crm-table thead th,
.order-crm-table thead th {
    padding: 0.55rem 0.85rem !important;
    text-align: left !important;
    background: #111 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

.img-crm-table tbody td,
.order-crm-table tbody td {
    padding: 0.7rem 0.85rem !important;
    border-bottom: 1px solid #ececec !important;
    vertical-align: middle !important;
    background: #fff !important;
    font-family: "Manrope", system-ui, sans-serif;
}

.img-crm-table tbody tr:nth-child(even) td,
.order-crm-table tbody tr:nth-child(even) td {
    background: #fafafa !important;
}

.img-crm-table tbody tr:hover td,
.order-crm-table tbody tr:hover td {
    background: #f3f3f3 !important;
}

.img-crm-table tbody tr:last-child td,
.order-crm-table tbody tr:last-child td {
    border-bottom: none !important;
}

.img-crm-table .img-col-item,
.img-crm-table .img-list-item-name,
.order-crm-table .item-order-col-name {
    width: 38%;
}

.img-crm-table .img-col-cat,
.img-crm-table .img-list-cat-name,
.order-crm-table .item-order-col-cat {
    width: 22%;
}

.img-crm-table .img-col-view,
.img-crm-table .img-list-view,
.img-list-table .img-list-view {
    width: 96px !important;
    text-align: center !important;
    padding-right: 1.25rem !important;
}

.img-crm-table .img-col-file,
.img-crm-table .img-list-img-name,
.img-list-table .img-list-img-name {
    width: auto;
    padding-left: 1.35rem !important;
    text-align: left !important;
}

.img-crm-table thead th.img-col-file,
.img-list-table thead th:nth-child(4) {
    padding-left: 1.35rem !important;
}

.img-crm-table .img-list-view + .img-list-img-name,
.img-list-table .img-list-view + .img-list-img-name {
    border-left: 1px solid #ececec;
}

.img-crm-item {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    color: #111;
    line-height: 1.35;
}

.img-crm-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    background: #f0f0f0;
    border: 1px solid #d8d8d8;
    color: #333;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-crm-thumb {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    background: #f5f5f5;
    color: #888;
    overflow: hidden;
    box-sizing: border-box;
}

.img-crm-thumb.has-img {
    background: #111;
    border-color: #111;
}

.img-crm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-crm-file {
    display: inline-block;
    max-width: 100%;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    color: #222;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-crm-missing {
    font-size: 0.78rem;
    font-weight: 600;
    color: #999;
}

.order-crm-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
    background: #f0f0f0;
    border: 1px solid #d8d8d8;
    font-size: 0.78rem;
    font-weight: 700;
    color: #333;
}

.order-crm-table .item-order-col-orderno input {
    width: 72px !important;
    min-height: 34px !important;
    padding: 0.35rem 0.5rem !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 7px !important;
    background: #fff !important;
    text-align: center !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #111 !important;
}

.order-crm-table .item-order-col-orderno input:focus {
    border-color: #111 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

.order-crm-footer {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0.65rem 0.85rem !important;
    border-top: 1px solid #e4e4e4 !important;
    background: #f5f5f5 !important;
}

.order-crm-footer .item-order-save {
    min-width: 140px;
    min-height: 38px;
    padding: 0.45rem 1.1rem;
    border-radius: 8px !important;
    border: 1px solid #111 !important;
    background: #111 !important;
    color: #fff !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer;
}

.order-crm-footer .item-order-save:hover {
    background: #222 !important;
}

@media (max-width: 720px) {
    .img-crm-table .img-col-cat,
    .img-crm-table .img-list-cat-name,
    .order-crm-table .item-order-col-cat {
        display: none;
    }
}

/* Orders list — left/right breathing room */
body.edit-suite .orders-panel.lux-page,
.orders-panel.lux-page {
    padding: 0 0.9rem 1.1rem !important;
    box-sizing: border-box !important;
}

body.edit-suite .orders-panel > .edit-topbar,
.orders-panel > .edit-topbar {
    margin-left: -0.9rem !important;
    margin-right: -0.9rem !important;
    width: calc(100% + 1.8rem) !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.orders-panel .lux-orders-toolbar,
.orders-panel .orders-toolbar,
.orders-panel .orders-table-wrap,
.orders-panel .lux-empty,
.orders-panel .orders-empty {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Order List — tighter address + delivery time lines */
.orders-panel .order-address,
.orders-panel .order-delivery,
.orders-panel td.pre-line.order-address,
.orders-panel td.pre-line.order-delivery {
    max-width: 200px !important;
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    color: #333 !important;
    white-space: pre-line !important;
}

.orders-panel .order-address br,
.orders-panel .order-delivery br {
    display: none !important;
}

.orders-panel .order-time,
.orders-panel td.order-time {
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    white-space: nowrap !important;
}

.orders-panel .orders-table tbody td {
    padding: 0.45rem 0.7rem !important;
    vertical-align: middle !important;
}

/* Backend Logs — left/right gap */
body.edit-suite .logs-panel.lux-page,
.logs-panel.lux-page {
    padding: 0 0.9rem 1.1rem !important;
    box-sizing: border-box !important;
}

body.edit-suite .logs-panel > .edit-topbar,
.logs-panel > .edit-topbar {
    margin-left: -0.9rem !important;
    margin-right: -0.9rem !important;
    width: calc(100% + 1.8rem) !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.logs-panel .logs-suite,
.logs-panel .logs-table-wrap,
.logs-panel .orders-table-wrap {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.logs-panel .logs-datetime {
    line-height: 1.12 !important;
}

.logs-panel .logs-date,
.logs-panel .logs-time {
    display: block !important;
    line-height: 1.12 !important;
    margin: 0 !important;
}

.logs-panel .logs-ip,
.logs-panel code.logs-ip {
    display: block !important;
    padding: 0.4rem 0.55rem !important;
    border-radius: 8px !important;
    background: #f7f7f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    white-space: nowrap !important;
}

/* Payment Methods — tighter gap between sections */
.payment-panel.form-suite .payment-form,
.form-suite.payment-panel .payment-form,
.edit-suite .payment-panel .payment-form,
.payment-form {
    gap: 0.45rem !important;
}

.payment-panel.form-suite .payment-suite-card,
.edit-suite .payment-panel .payment-suite-card,
.edit-suite .payment-panel .karvi-seo-card {
    padding: 0.7rem 0.9rem 1rem !important;
}

.payment-panel.form-suite .payment-section,
.payment-panel.form-suite .lux-pay-card,
.edit-suite .payment-panel .lux-pay-card,
.form-suite .payment-section.lux-pay-card {
    margin: 0 !important;
    margin-bottom: 0 !important;
}

.payment-panel.form-suite .payment-form-head,
.payment-form-head {
    margin-bottom: 0.45rem !important;
}

.form-suite .payment-section .lux-pay-card-head,
.form-suite .payment-section .karvi-seo-block-head {
    padding: 0.65rem 0.9rem !important;
}

.form-suite .payment-section .printing-grid.pay-grid,
.form-suite .payment-section .pay-modes-grid,
.form-suite .payment-section .pay-grid-compact {
    padding: 0.65rem 0.85rem 0.75rem !important;
    gap: 0.55rem !important;
    overflow: visible !important;
}

/* Payment dropdowns must not be clipped */
.payment-panel .lux-pay-card,
.payment-panel .payment-section.lux-pay-card,
.payment-panel .payment-suite-card,
.payment-panel .karvi-seo-card,
.edit-suite .payment-panel .lux-pay-card {
    overflow: visible !important;
}

.payment-panel .print-select-wrap,
.payment-panel .print-field,
.payment-panel .pay-field-mode {
    overflow: visible !important;
    position: relative !important;
    z-index: 1;
}

.payment-panel .adv-select.is-open,
.payment-panel .print-field:has(.adv-select.is-open),
.payment-panel .pay-field-mode:has(.adv-select.is-open) {
    z-index: 200 !important;
}

.payment-panel .adv-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0.35rem 0.7rem !important;
    border: 1.5px solid #111 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.payment-panel .adv-select-menu {
    z-index: 4000 !important;
    background: #fff !important;
    border: 1.5px solid #111 !important;
}

.payment-panel .pay-modes-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 980px) {
    .payment-panel .pay-modes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .payment-panel .pay-modes-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Time schedule — tighter gap between day sections */
.time-panel.form-suite .time-schedule-body,
.form-suite .time-schedule-body {
    gap: 0.4rem !important;
    padding: 0.75rem 0.85rem 0.9rem !important;
}

.time-panel.form-suite .time-day-block,
.form-suite .time-day-block {
    padding: 0.65rem 0.8rem 0.7rem !important;
    margin: 0 !important;
}

.time-panel.form-suite .time-day-block h3,
.form-suite .time-day-block h3 {
    margin: 0 0 0.45rem !important;
    padding-bottom: 0.35rem !important;
}

.time-panel.form-suite .time-day-fields,
.form-suite .time-day-fields {
    gap: 0.5rem !important;
    padding-top: 0.3rem !important;
}

.time-panel .time-day-fields input[type="text"],
.form-suite .time-day-fields input[type="text"] {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Form heads — short Save/Update on title row right */
.form-suite .form-head-row,
.form-suite .karvi-seo-block-head.form-head-row,
.payment-form-head,
.seo-suite-head.form-head-row,
.close-suite-head.form-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.payment-form-head {
    margin: 0 0 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background: #fff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 10px !important;
}

.payment-form-head .karvi-seo-block-title {
    margin: 0 !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #111 !important;
}

.form-suite .form-head-save,
.form-head-save.btn,
.form-head-save.btn-primary {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    min-width: 88px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0.35rem 1rem !important;
    border-radius: 999px !important;
    border: 1px solid #111 !important;
    background: #111 !important;
    color: #fff !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.form-suite .form-head-save:hover,
.form-head-save.btn:hover,
.form-head-save.btn-primary:hover {
    background: #222 !important;
    color: #fff !important;
}

.close-suite-head.form-head-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.close-suite-head.form-head-row h2 {
    margin: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.close-suite-head.form-head-row p {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #666 !important;
    line-height: 1.2 !important;
}

.close-suite-head.form-head-row .form-head-save {
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

/* Karvi Pro inline detail under the 3 buttons */
.printing-page-root.is-printing-inline .printing-detail-shell,
.printing-page-root.is-printing-inline #printingPanes {
    display: block !important;
}

.printing-page-root.is-printing-inline .printing-detail-shell {
    margin-top: 1rem !important;
}

.printing-group-menu .printing-menu-btn.is-active {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

.printing-group-menu .printing-menu-btn.is-active .printing-menu-label,
.printing-group-menu .printing-menu-btn.is-active .printing-menu-go {
    color: #fff !important;
}

/* Printing detail panes — clean single-card box pattern (full width) */
.printing-suite-card .printing-detail-shell,
.printing-page-root .printing-detail-shell,
.printing-suite-card .printing-panes,
.printing-page-root .printing-panes,
.printing-suite-card .printing-pane,
.printing-page-root .printing-pane,
.printing-suite-card .printing-popup-card,
.printing-page-root .printing-popup-card,
.printing-suite-card .printing-popup-form,
.printing-page-root .printing-popup-form {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.printing-suite-card .printing-detail-shell,
.printing-page-root .printing-detail-shell {
    margin-top: 0.75rem !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

.printing-suite-card .printing-detail-shell::before,
.printing-page-root .printing-detail-shell::before {
    display: none !important;
    content: none !important;
}

.printing-suite-card .printing-panes,
.printing-page-root .printing-panes {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    align-self: stretch !important;
}

.printing-suite-card .printing-pane,
.printing-page-root .printing-pane {
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.printing-pane-head.form-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.8rem 1rem !important;
    border-bottom: 1px solid #e6e6e6 !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
}

.printing-pane-head .printing-pane-title {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #111 !important;
    line-height: 1.25 !important;
}

.printing-pane-head .printing-pane-title::before {
    display: none !important;
    content: none !important;
}

.printing-pane-head .form-head-save {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.printing-suite-card .printing-status-field,
.printing-suite-card .printing-option-field,
.printing-page-root .printing-status-field,
.printing-page-root .printing-option-field {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.85rem !important;
    margin: 0.85rem 1rem !important;
    padding: 0.7rem 0.8rem !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 10px !important;
    background: #f6f6f6 !important;
    box-shadow: none !important;
}

.printing-suite-card .printing-status-field:hover,
.printing-suite-card .printing-option-field:hover,
.printing-page-root .printing-status-field:hover,
.printing-page-root .printing-option-field:hover {
    background: #f3f3f3 !important;
    box-shadow: none !important;
    border-color: #d8d8d8 !important;
}

.printing-suite-card .printing-status-label,
.printing-page-root .printing-status-label {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

.printing-suite-card .printing-status-label::after,
.printing-page-root .printing-status-label::after {
    content: none !important;
    display: none !important;
}

.printing-suite-card .printing-pane .field,
.printing-page-root .printing-pane .field,
.printing-suite-card .printing-pane-fields,
.printing-page-root .printing-pane-fields {
    margin: 0 1rem 1rem !important;
}

.printing-suite-card .printing-pane-fields,
.printing-page-root .printing-pane-fields {
    display: grid !important;
    gap: 0.65rem !important;
    padding: 0 !important;
}

.printing-suite-card .printing-pane .field:last-child,
.printing-page-root .printing-pane .field:last-child,
.printing-suite-card .printing-status-field:last-child,
.printing-suite-card .printing-option-field:last-child,
.printing-page-root .printing-status-field:last-child,
.printing-page-root .printing-option-field:last-child {
    margin-bottom: 1rem !important;
}

.printing-page-root .printing-popup-actions#printingSaveBar,
.printing-suite-card .printing-popup-actions#printingSaveBar {
    display: none !important;
}

.karvi-field .password-wrap,
.form-suite .password-wrap,
.field .password-wrap {
    width: 100%;
}

.karvi-field .toggle-pass,
.form-suite .toggle-pass {
    color: #777;
}

.karvi-field .toggle-pass:hover,
.form-suite .toggle-pass:hover,
.karvi-field .toggle-pass.is-on,
.form-suite .toggle-pass.is-on {
    color: #111;
}