/* ========================================================================== Mobile / responsive layer for the kwik-plus web admin. Project-owned; loaded LAST in index.html so it wins over the vendored theme. Desktop (>= 992px) is intentionally untouched. The phone navigation is a dedicated React drawer (MobileNav.jsx) portaled to with its own `kk-mnav-*` classes — the SPRUHA horizontal menu and its disabled jQuery toggles are bypassed entirely on mobile. ========================================================================== */ /* These only ever show inside the mobile drawer / filter bar. */ .kk-mnav, .kk-mnav-backdrop { display: none; } .kk-filterbar-toggle { display: none; } /* Page-header action buttons ("Add X", etc.): center the label/icon on every screen. The theme's `.btn-icon-text` has no LTR rule, so a bare text label renders slightly off-center inside the inline-block button. inline-flex centers it both ways without changing the button's size. App-wide. */ .page-header .btn { display: inline-flex !important; align-items: center; justify-content: center; } @media (max-width: 991.98px) { /* ---------------------------------------------------------------- header */ /* Hide the (broken) desktop horizontal menu on mobile. */ .main-menu.main-navbar.hor-menu { display: none !important; } /* Theme toggle + profile live in the drawer now; drop the header-right cluster and the dead collapse toggler. Keep only burger + centered logo. */ .main-header .main-header-right, .navbar-toggler.navresponsive-toggler { display: none !important; } .main-header .main-container.container { position: relative; min-height: 56px; } .main-header .main-header-left { position: relative; z-index: 2; } .main-header .main-header-center { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; pointer-events: none; } .main-header .main-header-center a { pointer-events: auto; display: inline-block; } .responsive-logo img, .header-brand-img { height: 26px !important; width: auto !important; line-height: normal !important; } /* ----------------------------------------------------------- nav drawer */ .kk-mnav-backdrop { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(8, 12, 22, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .kk-mnav-backdrop.open { opacity: 1; visibility: visible; } .kk-mnav { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 100%; max-width: 340px; z-index: 1100; background: #ffffff; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .kk-mnav.open { transform: translateX(0); } .kk-mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid #eef0f7; } .kk-mnav-logo { height: 30px; width: auto; } .kk-mnav-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(3, 40, 82, 0.06); color: #032852; font-size: 18px; } .kk-mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px; } .kk-mnav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; background: transparent; border-radius: 10px; color: #3c4858; font-size: 14.5px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; } .kk-mnav-item:hover { background: rgba(3, 40, 82, 0.05); } .kk-mnav-item.active { background: rgba(3, 40, 82, 0.1); color: #032852; } .kk-mnav-icon { font-size: 17px; width: 20px; text-align: center; color: #6b7a99; } .kk-mnav-item.active .kk-mnav-icon { color: #032852; } .kk-mnav-text { flex: 1 1 auto; } .kk-mnav-caret { font-size: 14px; color: #9aa3bd; } .kk-mnav-sub { padding: 2px 0 6px 44px; } .kk-mnav-subitem { display: block; padding: 10px 12px; border-radius: 8px; color: #5a6478; font-size: 13.5px; text-decoration: none; } .kk-mnav-subitem:hover { background: rgba(3, 40, 82, 0.05); } .kk-mnav-subitem.active { color: #032852; font-weight: 600; } .kk-mnav-foot { border-top: 1px solid #eef0f7; padding: 10px; display: flex; flex-direction: column; gap: 4px; } .kk-mnav-user { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; } .kk-mnav-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #5b6cff 0%, #8a5bff 100%); color: #fff; font-size: 16px; } .kk-mnav-userinfo { display: flex; flex-direction: column; line-height: 1.2; } .kk-mnav-name { font-weight: 600; font-size: 14px; color: #1d212f; } .kk-mnav-role { font-size: 11px; color: #8f9cc0; } .kk-mnav-foot-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: rgba(3, 40, 82, 0.05); color: #3c4858; font-size: 14px; font-weight: 500; cursor: pointer; } .kk-mnav-foot-btn i { font-size: 16px; } .kk-mnav-foot-btn.danger { background: rgba(253, 96, 116, 0.12); color: #f1474d; } /* lock background scroll while the drawer is open */ body.mobile-nav-open { overflow: hidden; } /* ----------------------------------- compact page header (whole app) */ /* The header is not pinned on mobile in this build (body has no `main-body` class and the theme JS is disabled, so nothing adds position:fixed). Force it static as insurance, then reclaim the theme's large page-header top padding (120px / 63px) which only existed to clear a fixed header+navbar that are not pinned here. A small gap is kept so the title sits just under the header. */ .main-header, .main-header.sticky, .main-header.side-header { position: static !important; top: auto !important; } .page-header { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 0.5rem 0 !important; padding-left: 4px !important; padding-right: 4px !important; padding-bottom: 0 !important; } /* Beat the theme's `.main-content .page-header { padding-top: 120px !important }` (same specificity, this sheet loads later). */ .main-content .page-header, .main-content.side-content .page-header { padding-top: 8px !important; } .page-header > div:first-child { min-width: 0; } .main-content-title { font-size: 15.5px !important; line-height: 1.2 !important; margin-bottom: 1px !important; } .breadcrumb { margin-bottom: 0 !important; padding: 0 !important; background: transparent !important; font-size: 10.5px; line-height: 1.2; } .breadcrumb .breadcrumb-item { font-size: 10.5px; } .tx-32 { font-size: 20px !important; } .tx-24 { font-size: 16px !important; } .tx-20 { font-size: 15px !important; } /* ----------------------------------------------------- spacing / cards */ .main-content > .container, .main-container.container, .main-content .container { max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; } .card-body { padding: 12px !important; } [class*='col-'] { padding-left: 8px !important; padding-right: 8px !important; } /* Permission checkbox grid (staff form): the bare `.col` items squeeze 4-5 into a row and force ugly label wraps. Give each half the row so labels like "Porters Payout" fit cleanly. */ .parsley-checkbox > .col { flex: 0 0 50%; max-width: 50%; margin-bottom: 6px; } /* --------------------------------------------------------------- buttons */ .btn { font-size: 13px; } /* Compact, right-aligned page-header action button(s) — no full-width bar */ .page-header .d-flex { flex-shrink: 0; align-items: center; } .page-header .d-flex > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .page-header .btn { width: auto !important; margin: 0 !important; padding: 7px 14px !important; font-size: 12px !important; font-weight: 500; line-height: 1.25; border-radius: 8px !important; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); } .page-header .btn i { font-size: 13px; } /* ---------------------------------------------------------------- footer */ .main-footer { position: relative !important; bottom: 0 !important; margin: 1rem 0 0 0 !important; padding: 12px !important; font-size: 12px; } /* ---------------------------------------------- FilterBar (collapsible) */ .kk-filterbar .kk-filterbar-body { display: none; } .kk-filterbar .kk-filterbar-body.open { display: block; border-top: 1px solid #eef0f7; } .kk-filterbar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 14px; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: #032852; cursor: pointer; } .kk-filterbar-toggle i { font-size: 15px; } /* Inside the filter panel: stack EVERY field full-width — including the bare `.col` columns the old `[class*='col-']` selector missed (which is why the selects stayed cramped side-by-side). Drop the grid gutters so fields align flush, and hide the empty ` ` spacer labels that only exist to vertically align buttons on desktop (they left dead gaps between Filter / Download). */ .kk-filterbar-body { padding: 12px 14px 16px !important; } .kk-filterbar-body .row { margin-left: 0; margin-right: 0; } .kk-filterbar-body .row > * { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 12px; } .kk-filterbar-body .row > *:last-child { margin-bottom: 0; } .kk-filterbar-body .form-label { margin-bottom: 4px; font-size: 12px; font-weight: 600; } .kk-filterbar-body .btn, .kk-filterbar-body .input-group { width: 100% !important; } /* --------------------------------------------------- dark mode (drawer) */ body.dark-theme .kk-mnav { background: #14141a; } body.dark-theme .kk-mnav-head, body.dark-theme .kk-mnav-foot { border-color: rgba(255, 255, 255, 0.08); } body.dark-theme .kk-mnav-item { color: #cfcfe0; } body.dark-theme .kk-mnav-item:hover { background: rgba(255, 255, 255, 0.06); } body.dark-theme .kk-mnav-item.active { background: rgba(97, 205, 187, 0.16); color: #ffffff; } body.dark-theme .kk-mnav-item.active .kk-mnav-icon, body.dark-theme .kk-mnav-subitem.active { color: #61cdbb; } body.dark-theme .kk-mnav-icon, body.dark-theme .kk-mnav-subitem { color: #aab2c8; } body.dark-theme .kk-mnav-name { color: #e6e6ea; } body.dark-theme .kk-mnav-close { background: rgba(255, 255, 255, 0.08); color: #e6e6ea; } body.dark-theme .kk-mnav-foot-btn { background: rgba(255, 255, 255, 0.06); color: #cfcfe0; } body.dark-theme .kk-filterbar-toggle { color: #61cdbb; } body.dark-theme .kk-filterbar .kk-filterbar-body.open { border-top-color: rgba(255, 255, 255, 0.08); } } /* Phone tier */ @media (max-width: 575.98px) { .main-content-title { font-size: 14.5px !important; } .card-body { padding: 10px !important; } }