/* ===================================================================== Cat Spinner — License Admin console Design system v2 (2026-09-05). Written as one coherent system: tokens -> shell (sidebar + topbar) -> page furniture -> components. The Inter webfont is loaded via in layout.php's , not an @import here (an @import placed after any style rule is invalid CSS and gets dropped silently -- which is exactly what happened to the first attempt at this). ===================================================================== */ :root { /* Brand */ --p: #4f46e5; --p-dark: #4338ca; --p-darker: #3730a3; --p-light: #eef2ff; --p-300: #a5b4fc; --ring: rgba(79, 70, 229, .16); /* Surfaces */ --canvas: #f5f6fa; --surface: #ffffff; --surface-2: #fafbfd; --surface-3: #f2f4f9; --sidebar-top: #0e1120; --sidebar-bottom: #141830; /* Ink */ --text: #0f1222; --text-2: #3f4557; --muted: #6c7387; --faint: #98a0b3; /* Lines */ --border: #e5e8f0; --border-soft: #eef0f6; /* Semantic */ --green: #15a34a; --green-bg: #e7f8ee; --green-ink: #12693a; --red: #dc2626; --red-bg: #fdecec; --red-ink: #96201f; --amber: #d97706; --amber-bg: #fdf3e2; --amber-ink: #8a5108; --blue: #2563eb; --blue-bg: #e9f0fe; --blue-ink: #1c4bb0; /* Shape + depth */ --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --shadow-xs: 0 1px 2px rgba(15, 18, 34, .05); --shadow: 0 1px 2px rgba(15, 18, 34, .04), 0 2px 8px rgba(15, 18, 34, .05); --shadow-lg: 0 12px 32px rgba(15, 18, 34, .12), 0 2px 8px rgba(15, 18, 34, .06); /* Legacy aliases kept so any inline var() left in a view still resolves */ --bg: var(--canvas); --p-light-alias: var(--p-light); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Numbers line up in columns everywhere -- stats, tables, quota counters. */ .num, table td, .ais-trend-value, .ais-quota-line { font-variant-numeric: tabular-nums; } a { color: var(--p); } a:hover { color: var(--p-dark); } ::selection { background: var(--p-light); color: var(--p-darker); } /* ===================================================================== Shell ===================================================================== */ .ais-shell { display: flex; align-items: stretch; min-height: 100vh; } /* ---- Sidebar ---- */ .ais-sidebar { width: 254px; flex-shrink: 0; background: linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bottom)); border-right: 1px solid rgba(255, 255, 255, .06); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width .18s ease; z-index: 30; } .ais-sidebar .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; padding: 18px 18px 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); } .brand-logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(99, 102, 241, .4); } .brand-logo svg { width: 18px; height: 18px; color: #fff; display: block; } .ais-sidebar .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .ais-sidebar .brand-text strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .ais-sidebar .brand-text small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .42); } .ais-sidenav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 12px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; } .ais-sidenav::-webkit-scrollbar { width: 6px; } .ais-sidenav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; } /* Section label above each cluster of links -- replaces the old click-to-expand
groups, so every destination is visible at a glance instead of hidden behind an accordion. */ .ais-nav-group-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .34); padding: 16px 10px 6px; white-space: nowrap; } .ais-sidenav > .ais-nav-group-label:first-child { padding-top: 6px; } .ais-nav-link { position: relative; display: flex; align-items: center; gap: 11px; color: rgba(255, 255, 255, .68); font-size: 13.5px; font-weight: 550; padding: 9px 11px; border-radius: var(--radius-sm); text-decoration: none; transition: background .15s ease, color .15s ease; white-space: nowrap; } .ais-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); } .ais-nav-link.active { color: #fff; background: rgba(99, 102, 241, .18); font-weight: 650; } .ais-nav-link.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--p-300); } .ais-nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; } .ais-nav-link.active .ais-nav-icon { opacity: 1; color: var(--p-300); } .ais-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ais-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; flex-shrink: 0; } .ais-sidebar-footer { padding: 10px 12px 14px; border-top: 1px solid rgba(255, 255, 255, .07); } .ais-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); min-width: 0; } .ais-sidebar-avatar { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, #6366f1, #8b5cf6); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .ais-sidebar-user-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; } .ais-sidebar-user-text strong { font-size: 12.5px; font-weight: 650; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ais-sidebar-user-text small { font-size: 10.5px; color: rgba(255, 255, 255, .4); } .ais-sidebar-logout { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: rgba(255, 255, 255, .5); flex-shrink: 0; transition: color .15s ease, background .15s ease; } .ais-sidebar-logout:hover { color: #fff; background: rgba(255, 255, 255, .1); } .ais-sidebar-logout svg { width: 15px; height: 15px; } /* ---- Collapsed rail (state class lives on , set pre-paint) ---- */ .ais-nav-collapsed .ais-sidebar { width: 72px; } .ais-nav-collapsed .ais-sidebar .brand { justify-content: center; padding: 18px 0 16px; } .ais-nav-collapsed .brand-text, .ais-nav-collapsed .ais-nav-text, .ais-nav-collapsed .ais-nav-badge, .ais-nav-collapsed .ais-sidebar-user-text { display: none; } .ais-nav-collapsed .ais-nav-group-label { padding: 14px 0 6px; text-align: center; font-size: 0; } .ais-nav-collapsed .ais-nav-group-label::after { content: ''; display: block; width: 20px; height: 1px; margin: 0 auto; background: rgba(255, 255, 255, .14); } .ais-nav-collapsed .ais-nav-link { justify-content: center; padding: 11px; } .ais-nav-collapsed .ais-nav-link.active::before { left: -12px; } .ais-nav-collapsed .ais-sidebar-user { justify-content: center; padding: 8px; } .ais-nav-collapsed .ais-sidebar-logout { display: none; } /* ===================================================================== Main column: sticky topbar + content ===================================================================== */ .ais-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ais-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 22px; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .ais-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .ais-topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .ais-sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; flex-shrink: 0; transition: color .15s ease, border-color .15s ease, background .15s ease; } .ais-sidebar-toggle:hover { color: var(--p); border-color: var(--p); background: var(--p-light); } .ais-sidebar-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; } .ais-nav-collapsed .ais-sidebar-toggle svg { transform: rotate(180deg); } .ais-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; } .ais-crumbs span { color: var(--faint); white-space: nowrap; } .ais-crumbs strong { color: var(--text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ais-crumbs svg { width: 13px; height: 13px; color: #c8cde0; flex-shrink: 0; } .ais-topbar-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .15s ease; white-space: nowrap; } .ais-topbar-link:hover { color: var(--p-dark); border-color: var(--p); background: var(--p-light); } .ais-topbar-link svg { width: 14px; height: 14px; } .ais-env-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--green-bg); color: var(--green-ink); font-size: 11.5px; font-weight: 700; } .ais-env-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } /* ===================================================================== Content area ===================================================================== */ .ais-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 22px 64px; } h1 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin: 0; color: var(--text); } h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); } h3 { font-size: 14.5px; font-weight: 680; letter-spacing: -.01em; margin-top: 0; color: var(--text); } p { margin: 0 0 12px; } /* ---- Page header (icon + title + one-line description) ---- */ .ais-page-header { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; } .ais-page-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(140deg, #6366f1, #8b5cf6); color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px rgba(99, 102, 241, .28); } .ais-page-icon svg { width: 20px; height: 20px; } .ais-page-header-text { min-width: 0; } .ais-page-header-text p { margin: 3px 0 0; color: var(--muted); font-size: 13px; max-width: 660px; } .ais-page-desc { color: var(--muted); margin: -10px 0 20px; max-width: 780px; font-size: 13px; } /* ---- Cards ---- */ .ais-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: 20px 22px; margin-bottom: 18px; } .ais-card > h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); } .ais-card > h3 svg { width: 16px; height: 16px; color: var(--p); flex-shrink: 0; } .ais-card > h3 .btn { margin-left: auto; } .ais-card > p:last-child { margin-bottom: 0; } .ais-card-alert { border-color: #f6dfb8; background: linear-gradient(180deg, #fffdf8, var(--surface) 60px); } .ais-card-alert > h3 { color: var(--amber-ink); border-bottom-color: #f6e6c9; } /* ---- Stat tiles ---- */ .ais-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; margin-bottom: 18px; } .ais-stat { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: 18px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .ais-stat:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #dcdfeb; } .ais-stat-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--p-light); color: var(--p); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ais-stat-icon svg { width: 20px; height: 20px; } .ais-stat .num { font-size: 27px; font-weight: 780; line-height: 1.1; letter-spacing: -.02em; color: var(--text); } .ais-stat .label { color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 500; } /* ---- Tables ---- Markup is a bare with no /, so the header row is the :first-child row. Tables live inside .ais-card and are pulled out to the card's edges so the header band reads as part of the card frame. */ .ais-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ais-table-scroll::-webkit-scrollbar { height: 8px; } .ais-table-scroll::-webkit-scrollbar-thumb { background: #d7dbe7; border-radius: 99px; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } /* Bleed to the card's edges. Crucially this is applied to the SCROLL WRAPPER (or to a bare table when there isn't one) -- never to a table *inside* a wrapper. Widening the inner table instead makes it permanently wider than its own scroll box, so the table shows a horizontal scrollbar at every window size even when the columns would have fit fine. */ .ais-card > table, .ais-card > .ais-table-scroll { width: calc(100% + 44px); margin: 0 -22px; } .ais-card > table:last-child, .ais-card > .ais-table-scroll:last-child { margin-bottom: -20px; } .ais-card > .ais-table-scroll > table { width: 100%; margin: 0; } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } table tr:first-child th, table tr:first-child td { color: var(--faint); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; background: var(--surface-2); border-bottom: 1px solid var(--border); padding-top: 10px; padding-bottom: 10px; white-space: nowrap; } table tr:last-child td { border-bottom: none; } /* "Belum ada data" rows are always a single colspan cell -- give them room and centre them so an empty table reads as an empty state, not a stray row. */ td[colspan] { color: var(--muted); text-align: center; padding: 30px 16px; } table tr:not(:first-child) { transition: background .12s ease; } table tr:not(:first-child):hover td { background: #fafaff; } td strong { font-weight: 650; } /* A table nested deeper in a card (quota-bonus wraps its list in a ) can't bleed to the card's edges, so give it a self-contained panel frame instead of leaving it looking like a half-applied version of the above. */ .ais-card form .ais-table-scroll { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; overflow-x: auto; } .ais-card form .ais-table-scroll table tr:last-child td { border-bottom: none; } /* ---- Notification target picker (admin/notifications.php) ---- */ .ais-target-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .ais-target-picker .ais-lang-chip { margin-bottom: 0; } .ais-target-picker input[type="radio"] { width: 15px; height: 15px; margin: 0; flex-shrink: 0; } /* ---- Inbox (admin/inbox.php) ---- */ tr.ais-msg-row { cursor: pointer; } tr.ais-msg-row:hover .ais-msg-phone { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--muted); } .ais-msg-phone svg { width: 12px; height: 12px; flex-shrink: 0; } .ais-msg-phone a { color: var(--muted); text-decoration: none; } .ais-msg-phone a:hover { color: var(--green); text-decoration: underline; } .ais-msg-preview { color: var(--text); } tr.ais-row-unread td { background: #fbfaff; } tr.ais-row-unread .ais-msg-preview { color: var(--text); font-weight: 550; } tr.ais-row-unread td:first-child { box-shadow: inset 3px 0 0 var(--p); } .ais-msg-preview { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } .ais-msg-full { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); padding: 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; } /* ---- Quota mini bar (inside table cells) ---- */ .ais-quota-line { font-size: 12.5px; font-weight: 650; margin-bottom: 5px; white-space: nowrap; color: var(--text); } .ais-mini-progress { background: var(--surface-3); border-radius: 99px; height: 6px; width: 78px; overflow: hidden; } .ais-mini-progress-bar { height: 100%; border-radius: 99px; } /* ---- Chart header: title + summary on the left, range filter on the right ---- */ .ais-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); } .ais-chart-title h3 { margin: 0; padding: 0; border: 0; } .ais-chart-title p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); } .ais-chart-title p strong { color: var(--text); font-weight: 700; } .ais-chart-filters { display: flex; gap: 6px; flex-wrap: wrap; } .ais-chart-pill { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 650; text-decoration: none; transition: all .15s ease; white-space: nowrap; } .ais-chart-pill:hover { border-color: var(--p); color: var(--p-dark); background: var(--p-light); } .ais-chart-pill.is-active { background: var(--p); border-color: var(--p); color: #fff; box-shadow: 0 1px 2px rgba(79, 70, 229, .25); } .ais-chart-pill.is-active:hover { background: var(--p-dark); color: #fff; } .ais-chart-empty { color: var(--muted); text-align: center; padding: 42px 0; margin: 0; font-size: 13.5px; } /* ---- Log page ---- */ .ais-log-filters { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; } .ais-log-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 16px; } /* ---- Trend chart (dependency-free bars) ---- */ .ais-trend-chart { display: flex; align-items: flex-end; gap: 16px; height: 148px; padding-top: 12px; } .ais-trend-bar-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; } .ais-trend-value { font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; } .ais-trend-bar { width: 100%; max-width: 46px; background: linear-gradient(180deg, #818cf8, var(--p)); border-radius: 8px 8px 3px 3px; transition: height .3s ease, filter .15s ease; } .ais-trend-bar-wrap:hover .ais-trend-bar { filter: brightness(1.08); } .ais-trend-bar.is-empty { background: var(--surface-3); } .ais-trend-label { font-size: 11px; color: var(--faint); margin-top: 8px; font-weight: 550; white-space: nowrap; } /* Many buckets (30 days, 13 weeks): thinner bars, tighter gaps, and the per-bar number is dropped -- the exact value lives in the hover title. */ .ais-trend-chart.is-dense { gap: 4px; height: 170px; } .ais-trend-chart.is-dense .ais-trend-bar { max-width: none; border-radius: 4px 4px 2px 2px; } .ais-trend-chart.is-dense .ais-trend-label { font-size: 10px; } /* ===================================================================== Forms ===================================================================== */ form label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 650; } form input, form select, form textarea, input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: 9px 12px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 13.5px; font-family: inherit; color: var(--text); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } form input::placeholder, form textarea::placeholder { color: #b3b9c9; } form input:hover, form select:hover, form textarea:hover { border-color: #d3d8e6; } form input:focus, form select:focus, form textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px var(--ring); } textarea { min-height: 84px; resize: vertical; line-height: 1.6; } /* Two form fields side by side (e.g. "Minimal WordPress" + "Minimal PHP" on releases.php); one column once there isn't room for both. */ .ais-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 640px) { .ais-field-row { grid-template-columns: 1fr; } } /* Native select chrome off, own chevron on -- otherwise the browser silently overrides padding/height on