/* ============================================================ KDM CMS - shared design system (v2.0.0) Loaded last in so it wins over the per-page inline CSS. Keeps the existing dark-glass identity, fixes density, responsiveness, touch targets, focus states and feedback. ============================================================ */ :root{ /* surface */ --kdm-bg:#080710; --kdm-surface:rgba(255,255,255,.09); --kdm-surface-2:rgba(255,255,255,.06); --kdm-border:rgba(255,255,255,.14); --kdm-border-strong:rgba(255,255,255,.28); /* text */ --kdm-text:#f4f6fb; --kdm-text-dim:rgba(244,246,251,.72); --kdm-text-faint:rgba(244,246,251,.52); /* brand + semantic */ --kdm-primary:#23a2f6; --kdm-primary-dark:#1a8cd8; --kdm-success:#3ddc84; --kdm-warning:#ffc043; --kdm-danger:#ff5c5c; --kdm-info:#7aa2ff; --kdm-track:#b98cff; /* spacing scale (dense admin: 4/8/12/16/24/32) */ --kdm-s1:4px; --kdm-s2:8px; --kdm-s3:12px; --kdm-s4:16px; --kdm-s5:24px; --kdm-s6:32px; --kdm-radius:10px; --kdm-radius-sm:6px; --kdm-shadow:0 8px 30px rgba(0,0,0,.45); --kdm-ring:0 0 0 3px rgba(35,162,246,.45); --kdm-fast:160ms cubic-bezier(.2,.8,.3,1); --kdm-slow:240ms cubic-bezier(.2,.8,.3,1); } /* ---------- base ---------- */ html{ -webkit-text-size-adjust:100%; } body{ font-size:15px; line-height:1.55; letter-spacing:.1px; } .container{ width:100%; } /* ---------- ambient background ---------- The decorative blobs used to sit on top of the cards and wash out text. They are now clipped, blurred and pushed well behind everything. */ .background{ position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; z-index:-2 !important; overflow:hidden !important; pointer-events:none; } .background .shape{ filter:blur(90px); opacity:.30; height:340px !important; width:340px !important; } .background .shape:first-child{ left:-140px !important; top:-160px !important; } .background .shape:nth-child(2){ right:-160px !important; top:22% !important; } .background .shape:nth-child(3){ bottom:-220px !important; } /* readable numbers in tables */ td, .stat-number, .kdm-num{ font-variant-numeric:tabular-nums; } /* ---------- accessibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:none; box-shadow:var(--kdm-ring); border-radius:var(--kdm-radius-sm); } .kdm-skip{ position:absolute; left:-9999px; top:0; background:var(--kdm-primary); color:#fff; padding:10px 16px; z-index:10000; border-radius:0 0 8px 0; } .kdm-skip:focus{ left:0; } .kdm-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---------- navbar ---------- */ .navbar{ position:sticky; top:0; z-index:900; background:rgba(12,11,24,.72) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--kdm-border) !important; padding:10px 20px !important; margin-bottom:var(--kdm-s5) !important; gap:var(--kdm-s3); } .navbar-brand{ font-size:19px !important; letter-spacing:.2px; display:flex; align-items:center; gap:8px; } .navbar-brand::before{ content:""; width:22px; height:22px; border-radius:6px; flex:none; background:linear-gradient(135deg,#23a2f6,#7a5cff); box-shadow:0 0 14px rgba(35,162,246,.6); } .navbar-nav{ gap:var(--kdm-s3) !important; align-items:center; } .navbar-nav li{ display:flex; } .nav-link{ font-size:14px; padding:8px 12px; border-radius:8px; line-height:1; min-height:38px; display:inline-flex; align-items:center; transition:background var(--kdm-fast), color var(--kdm-fast); } .nav-link:hover{ background:rgba(255,255,255,.09); } .nav-link.active{ background:rgba(35,162,246,.18); color:#fff !important; box-shadow:inset 0 0 0 1px rgba(35,162,246,.45); } .logout-btn{ min-height:38px; display:inline-flex; align-items:center; font-size:14px; } .kdm-user{ font-size:13px; color:var(--kdm-text-dim); display:inline-flex; align-items:center; gap:6px; } .kdm-user::before{ content:""; width:26px; height:26px; border-radius:50%; flex:none; background:linear-gradient(135deg,rgba(35,162,246,.9),rgba(122,92,255,.9)); } /* mobile nav toggle */ .kdm-navtoggle{ display:none; width:auto !important; margin:0 !important; padding:8px 10px !important; background:rgba(255,255,255,.12) !important; border-radius:8px; line-height:1; } @media (max-width:900px){ .navbar{ flex-direction:row !important; align-items:center; } .kdm-navtoggle{ display:inline-flex; align-items:center; gap:6px; } .navbar-nav{ display:none !important; width:100%; flex-direction:column !important; align-items:stretch !important; padding-top:var(--kdm-s3); } .navbar-nav.kdm-open{ display:flex !important; } .navbar-nav li{ width:100%; } .nav-link, .logout-btn{ width:100%; min-height:44px; } } /* ---------- headings / cards ---------- */ h2{ font-size:24px !important; margin-bottom:var(--kdm-s5) !important; text-align:left !important; letter-spacing:.2px; } h2.kdm-center{ text-align:center !important; } /* Cards are opaque so nothing behind them can bleed through the content. */ .glass-card{ background:rgba(19,18,30,.94) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--kdm-border) !important; border-radius:var(--kdm-radius) !important; box-shadow:var(--kdm-shadow) !important; padding:var(--kdm-s5) !important; margin-bottom:var(--kdm-s5) !important; } .card-header{ font-size:16px !important; margin-bottom:var(--kdm-s4) !important; border-bottom:1px solid var(--kdm-border) !important; padding-bottom:var(--kdm-s3) !important; } /* stat cards */ .stats-grid{ gap:var(--kdm-s4) !important; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important; } .stat-card{ padding:var(--kdm-s4) var(--kdm-s5) !important; text-align:left !important; background:rgba(19,18,30,.94) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--kdm-border) !important; box-shadow:var(--kdm-shadow) !important; border-radius:var(--kdm-radius) !important; position:relative; overflow:hidden; } .stat-card::after{ content:""; position:absolute; inset:auto auto 0 0; height:3px; width:100%; background:linear-gradient(90deg,var(--kdm-primary),transparent); opacity:.7; } .stat-number{ font-size:34px !important; margin-bottom:2px !important; } .stat-label{ font-size:12px !important; text-transform:uppercase; letter-spacing:.9px; color:var(--kdm-text-faint) !important; } /* ---------- forms ---------- */ label{ font-size:13px !important; color:var(--kdm-text-dim) !important; font-weight:500 !important; } input, select, textarea{ background:rgba(255,255,255,.07) !important; border:1px solid var(--kdm-border) !important; border-radius:var(--kdm-radius-sm) !important; color:var(--kdm-text) !important; min-height:42px; font-size:15px !important; transition:border-color var(--kdm-fast), box-shadow var(--kdm-fast); } textarea{ min-height:90px; padding:10px 12px; font-family:inherit; } input:hover, select:hover, textarea:hover{ border-color:var(--kdm-border-strong) !important; } input:focus, select:focus, textarea:focus{ border-color:var(--kdm-primary) !important; box-shadow:var(--kdm-ring); } input[readonly], input[disabled], select[disabled]{ opacity:.6; cursor:not-allowed; } input.kdm-locked{ background:rgba(255,255,255,.03) !important; border-style:dashed !important; } select option{ background:#14131f; } .kdm-help{ font-size:12px; color:var(--kdm-text-faint); margin-top:4px; display:block; } .kdm-err{ font-size:12px; color:var(--kdm-danger); margin-top:4px; display:block; } /* ---------- buttons ---------- */ button, .kdm-btn{ border-radius:var(--kdm-radius-sm) !important; min-height:42px; font-weight:500; transition:transform var(--kdm-fast), background var(--kdm-fast), box-shadow var(--kdm-fast); cursor:pointer; } /* Consistent colours everywhere, including pages whose own CSS styled buttons white-on-white inside filter bars. */ .kdm-filters button, .kdm-btn-row button, .controls button{ background:var(--kdm-primary) !important; color:#fff !important; border:none !important; padding:0 18px !important; width:auto !important; white-space:nowrap; } .kdm-filters button:hover, .kdm-btn-row button:hover, .controls button:hover{ background:var(--kdm-primary-dark) !important; } .kdm-filters button.secondary, .kdm-btn-row button.secondary, .controls button.secondary{ background:rgba(255,255,255,.13) !important; color:var(--kdm-text) !important; } .kdm-filters button.secondary:hover, .kdm-btn-row button.secondary:hover{ background:rgba(255,255,255,.2) !important; } .kdm-filters button.danger, .kdm-btn-row button.danger{ background:var(--kdm-danger) !important; } button:hover:not(:disabled){ transform:translateY(-1px); } button:active:not(:disabled){ transform:translateY(0) scale(.99); } button:disabled{ opacity:.45; cursor:not-allowed; transform:none; } button.secondary, button.danger{ min-height:36px; } .kdm-btn-row{ display:flex; gap:var(--kdm-s2); flex-wrap:wrap; } /* button busy state */ button.kdm-busy{ position:relative; color:transparent !important; pointer-events:none; } button.kdm-busy::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:kdm-spin .7s linear infinite; } @keyframes kdm-spin{ to{ transform:rotate(360deg); } } /* ---------- tables ---------- */ .table-responsive{ border-radius:var(--kdm-radius); border:1px solid var(--kdm-border); overflow:auto; } table{ font-size:14px; } thead th{ position:sticky; top:0; z-index:2; background:#141327 !important; padding:10px 12px !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.7px; white-space:nowrap; } td{ padding:10px 12px !important; } tbody tr{ transition:background var(--kdm-fast); } tbody tr:hover td{ background:rgba(255,255,255,.055) !important; } tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02); } tbody tr:nth-child(even):hover td{ background:rgba(255,255,255,.055) !important; } /* keep the identity column readable instead of wrapping mid-name */ #clientsTable td:first-child, #logsTableBody td:nth-child(2), #additionLogsTableBody td:nth-child(2){ min-width:160px; } #clientsTable td:first-child input[type=checkbox]{ vertical-align:middle; } /* small screens: never let a page scroll sideways */ body{ overflow-x:hidden; } .container{ max-width:100%; } @media (max-width:820px){ .container{ padding-left:16px !important; padding-right:16px !important; } .stats-grid{ grid-template-columns:repeat(auto-fit,minmax(148px,1fr)) !important; gap:12px !important; } .stat-card{ padding:14px 16px !important; } .stat-number{ font-size:26px !important; } .glass-card{ padding:18px !important; } .kdm-filters{ padding:14px; } .kdm-filters .f{ flex:1 1 100%; } .kdm-filters .kdm-btn-row{ width:100%; } .kdm-filters .kdm-btn-row button, .kdm-filters .kdm-btn-row a.kdm-reset{ flex:1; justify-content:center; } /* Some pages set table{min-width:900px} for phones, which pushes the whole layout past the viewport. Stacked tables need no width at all; tables that did not stack scroll inside their own box instead. */ html, body{ max-width:100vw; } .container, .glass-card, .stats-grid, .kdm-filters, .table-responsive{ max-width:100%; } table{ min-width:0 !important; } .table-responsive{ -webkit-overflow-scrolling:touch; overflow-x:auto; } .table-responsive > table:not(.kdm-stack){ min-width:620px !important; } .pager{ justify-content:center; } .pg-count{ width:100%; text-align:center; } } @media (max-width:420px){ .stats-grid{ grid-template-columns:1fr 1fr !important; } } /* card-style table rows on small screens */ @media (max-width:820px){ table.kdm-stack thead{ display:none; } table.kdm-stack tbody tr{ display:block; margin-bottom:var(--kdm-s3); border:1px solid var(--kdm-border); border-radius:var(--kdm-radius); background:var(--kdm-surface-2); padding:var(--kdm-s2); } table.kdm-stack tbody td{ display:flex; justify-content:space-between; gap:var(--kdm-s4); border:none !important; padding:8px 6px !important; text-align:right; } table.kdm-stack tbody td::before{ content:attr(data-label); font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--kdm-text-faint); text-align:left; flex:none; } } /* ---------- badges ---------- */ .kdm-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.3px; white-space:nowrap; line-height:1.5; border:1px solid transparent; } .kdm-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .kdm-badge.is-paid,.kdm-badge.is-active,.kdm-badge.is-settled, .kdm-badge.is-paid-in-full{ color:var(--kdm-success); background:rgba(61,220,132,.14); border-color:rgba(61,220,132,.35); } .kdm-badge.is-pending,.kdm-badge.is-on-hold{ color:var(--kdm-warning); background:rgba(255,192,67,.14); border-color:rgba(255,192,67,.35); } .kdm-badge.is-failed,.kdm-badge.is-rejected,.kdm-badge.is-terminated, .kdm-badge.is-disputed,.kdm-badge.is-suspended{ color:var(--kdm-danger); background:rgba(255,92,92,.14); border-color:rgba(255,92,92,.35); } .kdm-badge.is-tracking{ color:var(--kdm-track); background:rgba(185,140,255,.16); border-color:rgba(185,140,255,.4); } .kdm-badge.is-inactive,.kdm-badge.is-none{ color:var(--kdm-text-faint); background:rgba(255,255,255,.07); border-color:var(--kdm-border); } /* ---------- modals ---------- */ .modal{ z-index:1000; } .modal-content{ background:#14131f !important; border:1px solid var(--kdm-border) !important; border-radius:14px !important; box-shadow:0 24px 60px rgba(0,0,0,.6) !important; animation:kdm-pop var(--kdm-slow) both; } @keyframes kdm-pop{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } } @media (max-width:640px){ .modal-content{ width:100% !important; max-width:100% !important; margin:0 !important; border-radius:14px 14px 0 0 !important; position:absolute; bottom:0; left:0; max-height:92vh; } } /* ---------- tabs ---------- */ .kdm-tabs{ display:flex; gap:var(--kdm-s1); border-bottom:1px solid var(--kdm-border); margin-bottom:var(--kdm-s4); overflow-x:auto; } .kdm-tab{ background:none !important; border:none !important; color:var(--kdm-text-dim) !important; padding:10px 14px !important; margin:0 !important; width:auto !important; border-bottom:2px solid transparent !important; border-radius:8px 8px 0 0 !important; font-size:14px; white-space:nowrap; } .kdm-tab:hover{ color:#fff !important; background:rgba(255,255,255,.05) !important; } .kdm-tab.active{ color:#fff !important; border-bottom-color:var(--kdm-primary) !important; background:rgba(35,162,246,.1) !important; } /* ---------- loaders ---------- */ #kdm-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,#23a2f6,#7a5cff); z-index:11000; box-shadow:0 0 12px rgba(35,162,246,.9); transition:width .2s ease, opacity .3s ease; opacity:0; } #kdm-progress.kdm-on{ opacity:1; } .kdm-skeleton{ background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.06) 63%); background-size:400% 100%; animation:kdm-shimmer 1.3s ease infinite; border-radius:6px; height:14px; display:block; } @keyframes kdm-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} } .kdm-skel-row td{ padding:12px !important; } .kdm-overlay{ position:fixed; inset:0; background:rgba(8,7,16,.78); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:10500; flex-direction:column; gap:16px; } .kdm-overlay.kdm-on{ display:flex; } .kdm-spinner{ width:46px; height:46px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:var(--kdm-primary); animation:kdm-spin .8s linear infinite; } .kdm-overlay p{ color:var(--kdm-text-dim); font-size:14px; } /* empty state */ .kdm-empty{ text-align:center; padding:var(--kdm-s6) var(--kdm-s4); color:var(--kdm-text-faint); } .kdm-empty strong{ display:block; color:var(--kdm-text-dim); font-size:15px; margin-bottom:6px; } /* ---------- history timeline ---------- */ .kdm-timeline{ list-style:none; margin:0; padding:0 0 0 18px; border-left:1px solid var(--kdm-border); } .kdm-timeline li{ position:relative; padding:0 0 var(--kdm-s4) var(--kdm-s4); } .kdm-timeline li::before{ content:""; position:absolute; left:-25px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--kdm-primary); box-shadow:0 0 0 3px rgba(35,162,246,.2); } .kdm-timeline li.ev-created::before{ background:var(--kdm-success); box-shadow:0 0 0 3px rgba(61,220,132,.2); } .kdm-timeline li.ev-deleted::before,.kdm-timeline li.ev-product_removed::before{ background:var(--kdm-danger); box-shadow:0 0 0 3px rgba(255,92,92,.2); } .kdm-timeline li.ev-api::before{ background:var(--kdm-track); box-shadow:0 0 0 3px rgba(185,140,255,.2); } .kdm-tl-head{ font-size:14px; color:var(--kdm-text); } .kdm-tl-meta{ font-size:12px; color:var(--kdm-text-faint); margin-top:2px; } .kdm-tl-diff{ font-size:13px; margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .kdm-old{ color:var(--kdm-danger); text-decoration:line-through; opacity:.85; } .kdm-new{ color:var(--kdm-success); } /* sibling records panel */ .kdm-sibling{ display:flex; justify-content:space-between; align-items:center; gap:var(--kdm-s3); padding:10px 12px; border:1px solid var(--kdm-border); border-radius:var(--kdm-radius-sm); background:var(--kdm-surface-2); margin-bottom:var(--kdm-s2); flex-wrap:wrap; } /* notice strip */ .kdm-notice{ border:1px solid rgba(35,162,246,.4); background:rgba(35,162,246,.12); border-radius:var(--kdm-radius-sm); padding:12px 14px; font-size:14px; margin-bottom:var(--kdm-s4); } .kdm-notice.warn{ border-color:rgba(255,192,67,.45); background:rgba(255,192,67,.12); } .kdm-notice.danger{ border-color:rgba(255,92,92,.45); background:rgba(255,92,92,.12); } /* ---------- sweetalert2 dark skin ---------- */ .swal2-popup.kdm-swal{ background:#14131f !important; color:var(--kdm-text) !important; border:1px solid var(--kdm-border); border-radius:14px !important; font-family:'Poppins',system-ui,sans-serif; box-shadow:0 24px 60px rgba(0,0,0,.6) !important; } .swal2-popup.kdm-swal .swal2-title{ font-size:20px !important; color:#fff !important; } .swal2-popup.kdm-swal .swal2-html-container{ color:var(--kdm-text-dim) !important; font-size:15px !important; } .swal2-popup.kdm-swal .swal2-input, .swal2-popup.kdm-swal .swal2-textarea, .swal2-popup.kdm-swal .swal2-select{ background:rgba(255,255,255,.07) !important; color:#fff !important; border:1px solid var(--kdm-border) !important; border-radius:8px !important; box-shadow:none !important; } .swal2-popup.kdm-swal .swal2-confirm{ background:var(--kdm-primary) !important; border-radius:8px !important; box-shadow:none !important; } .swal2-popup.kdm-swal .swal2-cancel{ background:rgba(255,255,255,.14) !important; border-radius:8px !important; } .swal2-popup.kdm-swal .swal2-deny{ background:var(--kdm-danger) !important; border-radius:8px !important; } /* Dialogs must always sit ABOVE the blocking overlay (10500), otherwise a success message can appear behind the spinner with its button unclickable. */ .swal2-container{ z-index:11500 !important; } .swal2-container.swal2-backdrop-show{ background:rgba(8,7,16,.72) !important; } .swal2-toast.kdm-swal{ background:#191828 !important; } .swal2-toast.kdm-swal .swal2-title{ font-size:14px !important; } /* ---------- page header ---------- */ .kdm-pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--kdm-s4); flex-wrap:wrap; margin-bottom:var(--kdm-s5); } .kdm-pagehead h2{ margin-bottom:2px !important; } .kdm-pagehead .kdm-sub{ color:var(--kdm-text-faint); font-size:14px; } /* ---------- section tabs (server-rendered links) ---------- */ .rep-tabs{ display:flex; gap:var(--kdm-s1); flex-wrap:wrap; border-bottom:1px solid var(--kdm-border); margin:0 0 var(--kdm-s5); padding-bottom:2px; } .rep-tab{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:8px 8px 0 0; color:var(--kdm-text-dim); text-decoration:none; font-size:14px; font-weight:500; border-bottom:2px solid transparent; white-space:nowrap; min-height:44px; transition:background var(--kdm-fast), color var(--kdm-fast); } .rep-tab:hover{ background:rgba(255,255,255,.05); color:#fff; } .rep-tab.is-active{ color:#fff; background:rgba(35,162,246,.12); border-bottom-color:var(--kdm-primary); } .rep-tab .pill{ font-size:11px; font-weight:700; letter-spacing:.3px; background:rgba(255,255,255,.12); color:var(--kdm-text-dim); padding:2px 8px; border-radius:999px; } .rep-tab.is-active .pill{ background:rgba(35,162,246,.3); color:#fff; } /* ---------- filter bar ---------- */ .kdm-filters{ display:flex; gap:var(--kdm-s3); flex-wrap:wrap; align-items:flex-end; padding:var(--kdm-s4); margin-bottom:var(--kdm-s4); background:var(--kdm-surface-2); border:1px solid var(--kdm-border); border-radius:var(--kdm-radius); } .kdm-filters .f{ flex:1 1 170px; min-width:150px; } .kdm-filters .f label{ display:block; margin-bottom:6px; } .kdm-filters .f input, .kdm-filters .f select{ width:100%; } .kdm-filters .kdm-btn-row{ flex:0 0 auto; padding-bottom:1px; } .kdm-filters .kdm-btn-row a.kdm-reset{ display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:var(--kdm-radius-sm); background:rgba(255,255,255,.1); color:var(--kdm-text-dim); text-decoration:none; font-size:14px; } .kdm-filters .kdm-btn-row a.kdm-reset:hover{ background:rgba(255,255,255,.16); color:#fff; } /* ---------- pager ---------- */ .pager{ display:flex; align-items:center; justify-content:space-between; gap:var(--kdm-s3); flex-wrap:wrap; margin-top:var(--kdm-s4); } .pg-count{ font-size:13px; color:var(--kdm-text-faint); font-variant-numeric:tabular-nums; } .pg-links{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; } .pg-btn{ min-width:40px; min-height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--kdm-border); border-radius:var(--kdm-radius-sm); background:rgba(255,255,255,.04); color:var(--kdm-text-dim); text-decoration:none; font-size:13.5px; font-variant-numeric:tabular-nums; transition:background var(--kdm-fast), color var(--kdm-fast), border-color var(--kdm-fast); } .pg-btn:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:var(--kdm-border-strong); } .pg-btn.is-current{ background:rgba(35,162,246,.2); border-color:rgba(35,162,246,.55); color:#fff; font-weight:600; } .pg-btn.is-disabled{ opacity:.35; pointer-events:none; } .pg-gap{ color:var(--kdm-text-faint); padding:0 2px; } /* ---------- misc ---------- */ .kdm-toolbar{ display:flex; gap:var(--kdm-s2); flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:var(--kdm-s4); } .pagination button{ min-height:38px; } .controls .control-group{ min-width:170px; } .kdm-chip{ display:inline-block; padding:2px 8px; margin:2px 4px 2px 0; font-size:12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--kdm-border); } @media print{ .navbar,.kdm-navtoggle,.pagination,button{ display:none !important; } body{ background:#fff !important; color:#000 !important; } .glass-card{ box-shadow:none !important; border:1px solid #ccc !important; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }