/* =========================================================================== admin.css - the app's design system. Loaded after style.css and Fomantic, so it may override both. How to restyle: change the tokens in :root. Nothing below hardcodes a colour, radius or shadow, so a new palette is a token edit, not a hunt through the views. Sections 1 tokens 2 app shell (sidebar / topbar / content) 3 cards + typography 4 tables 5 Fomantic component overrides 6 DataTables chrome 7 ibu- components used by the views 8 responsive =========================================================================== */ /* == 1. tokens ============================================================ */ :root { /* surfaces */ --ibu-bg: #f5f7fb; --ibu-surface: #ffffff; --ibu-surface-alt: #f7f8fa; --ibu-surface-sunk: #f2f4f7; --ibu-border: #eaecf0; --ibu-border-strong: #d0d5dd; /* text */ --ibu-text: #101828; --ibu-text-soft: #667085; --ibu-text-faint: #98a2b3; /* brand */ --ibu-primary: #2563eb; --ibu-primary-hover: #1d4ed8; --ibu-primary-soft: #eff4ff; /* status */ --ibu-ok: #027a48; --ibu-ok-bg: #ecfdf3; --ibu-warn: #b54708; --ibu-warn-bg: #fffaeb; --ibu-danger: #b42318; --ibu-danger-bg: #fef3f2; /* shape */ --ibu-radius-card: 14px; --ibu-radius: 8px; --ibu-radius-pill: 999px; --ibu-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); --ibu-shadow-lift: 0 4px 12px rgba(16,24,40,.08); /* rhythm */ --ibu-gap-xs: 4px; --ibu-gap-sm: 8px; --ibu-gap: 12px; --ibu-gap-lg: 20px; --ibu-gap-xl: 28px; --ibu-font: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ibu-font-sm: .86rem; --ibu-font-xs: .76rem; /* data tables: body cells and their column headers */ --ibu-font-table: .86rem; --ibu-font-table-th: .76rem; /* the Sales Out Detail drill-down runs denser than the rest: many columns, long product names, and it is a read-only inspection view */ --ibu-font-detail: .72rem; --ibu-font-detail-th: .64rem; --ibu-sidebar-w: 232px; } /* == 2. app shell ========================================================= */ html { background: var(--ibu-bg); } body { margin: 0 !important; /* style.css pins 0 50px */ background: var(--ibu-bg) !important; color: var(--ibu-text); font-family: var(--ibu-font) !important; -webkit-font-smoothing: antialiased; } body, .header, .ui.menu, .ui.table, .ui.button, .ui.form, .ui.header, .ui.input input, .ui.dropdown { font-family: var(--ibu-font) !important; } .ibu-app { display: flex; min-height: 100vh; align-items: stretch; } /* --- sidebar --- */ .ibu-sidebar { width: var(--ibu-sidebar-w); flex: 0 0 var(--ibu-sidebar-w); background: var(--ibu-surface); border-right: 1px solid var(--ibu-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 100; } .ibu-sidebar__brand { display: flex; align-items: center; gap: var(--ibu-gap-sm); padding: var(--ibu-gap-lg) var(--ibu-gap-lg) var(--ibu-gap); font-weight: 700; font-size: 1.05rem; color: var(--ibu-text); text-decoration: none; } .ibu-sidebar__brand img { width: 130px; height: auto; display: block; } .ibu-nav { padding: var(--ibu-gap-sm) var(--ibu-gap); display: flex; flex-direction: column; gap: 2px; } .ibu-nav__label { padding: var(--ibu-gap) var(--ibu-gap-sm) var(--ibu-gap-xs); font-size: var(--ibu-font-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ibu-text-faint); } .ibu-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--ibu-radius); color: var(--ibu-text-soft); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background .12s, color .12s; white-space: nowrap; } .ibu-nav a:hover { background: var(--ibu-surface-alt); color: var(--ibu-text); } .ibu-nav a.active { background: var(--ibu-primary-soft); color: var(--ibu-primary); font-weight: 600; } .ibu-nav a i.icon { width: 18px; margin: 0; font-size: 1rem; opacity: .85; } .ibu-nav__spacer { flex: 1; } .ibu-nav hr { border: 0; border-top: 1px solid var(--ibu-border); margin: var(--ibu-gap) var(--ibu-gap-sm); } /* --- main column --- */ .ibu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ibu-topbar { display: flex; align-items: center; gap: var(--ibu-gap-lg); padding: var(--ibu-gap-lg) var(--ibu-gap-xl); background: var(--ibu-bg); position: sticky; top: 0; z-index: 90; } .ibu-topbar__greeting { flex: 1; min-width: 0; } .ibu-topbar__greeting h1 { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; color: var(--ibu-text); } .ibu-topbar__greeting p { margin: 2px 0 0; color: var(--ibu-text-soft); font-size: var(--ibu-font-sm); } .ibu-topbar { padding-bottom: var(--ibu-gap); } .ibu-topbar__actions { display: flex; align-items: center; gap: var(--ibu-gap); } .ibu-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ibu-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; flex-shrink: 0; } .ibu-iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ibu-border); background: var(--ibu-surface); color: var(--ibu-text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; } .ibu-iconbtn:hover { background: var(--ibu-surface-alt); color: var(--ibu-text); } .ibu-iconbtn i.icon { margin: 0; } .ibu-content { padding: 0 var(--ibu-gap-xl) var(--ibu-gap-xl); flex: 1; } /* the hamburger only exists on small screens */ .ibu-burger { display: none; } .ibu-scrim { display: none; } /* == 3. cards + typography ================================================ */ .ibu-content .ui.grid > .row > .column > * { min-width: 0; } /* Every top-level block a module renders becomes a card. */ .ibu-card { background: var(--ibu-surface); border: 1px solid var(--ibu-border); border-radius: var(--ibu-radius-card); box-shadow: var(--ibu-shadow); padding: var(--ibu-gap-lg); margin-bottom: var(--ibu-gap-lg); } .ibu-card__head { display: flex; align-items: center; gap: var(--ibu-gap); flex-wrap: wrap; margin-bottom: var(--ibu-gap); } .ibu-card__title { font-size: 1rem; font-weight: 650; margin: 0; flex: 1; min-width: 0; } .ui.segment { border-radius: var(--ibu-radius-card) !important; border: 1px solid var(--ibu-border) !important; box-shadow: var(--ibu-shadow) !important; padding: var(--ibu-gap-lg) !important; } .ui.header, h1.ui.header, h2.ui.header { color: var(--ibu-text); font-weight: 650; } .ui.dividing.header { border-bottom: 1px solid var(--ibu-border); padding-bottom: var(--ibu-gap); } h1.ui.dividing.header { font-size: 1.25rem; } h2.ui.dividing.header { font-size: 1.05rem; } /* Breadcrumb segments arrive as
. Fomantic's own .ui.breadcrumb made those inline; without that wrapper they stacked one per line, so force the row here. */ .ibu-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -6px 0 var(--ibu-gap) 0; font-size: var(--ibu-font-sm); color: var(--ibu-text-soft); } .ibu-breadcrumb .section { display: inline; } .ibu-breadcrumb a { color: var(--ibu-text-soft); } .ibu-breadcrumb a:hover { color: var(--ibu-primary); text-decoration: underline; } .ibu-breadcrumb .section:last-child { color: var(--ibu-text); font-weight: 600; } .ibu-breadcrumb .section:last-child a { color: var(--ibu-text); } /* stat card: label / big number / delta */ .ibu-stat__label { color: var(--ibu-text-soft); font-size: var(--ibu-font-sm); font-weight: 500; } .ibu-stat__value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: 6px 0; } .ibu-delta { display: inline-block; padding: 2px 8px; border-radius: var(--ibu-radius-pill); font-size: var(--ibu-font-xs); font-weight: 600; } .ibu-delta--up { background: var(--ibu-ok-bg); color: var(--ibu-ok); } .ibu-delta--down { background: var(--ibu-danger-bg); color: var(--ibu-danger); } /* == 4. tables ============================================================ */ /* Flat, roomy, one hairline per row - no Fomantic cell grid. */ .ui.table { border: 1px solid var(--ibu-border) !important; border-radius: var(--ibu-radius-card) !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--ibu-surface) !important; color: var(--ibu-text) !important; font-size: var(--ibu-font-table); overflow: hidden; } .ui.table thead th { background: var(--ibu-surface-alt) !important; color: var(--ibu-text-soft) !important; font-size: var(--ibu-font-table-th) !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--ibu-border) !important; border-left: 0 !important; padding: 12px 14px !important; white-space: nowrap; } .ui.table tbody td { border-top: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--ibu-border) !important; padding: 12px 14px !important; vertical-align: middle; } .ui.table tbody tr:last-child td { border-bottom: 0 !important; } .ui.table tbody tr:hover td { background: var(--ibu-surface-alt) !important; } .ui.celled.table tr td, .ui.celled.table tr th { border-left: 0 !important; } .ui.table a { color: var(--ibu-primary); } .ui.table a:hover { color: var(--ibu-primary-hover); } /* status colouring inside tables */ .ui.table td.positive { background: var(--ibu-ok-bg) !important; color: var(--ibu-ok) !important; } .ui.table td.warning { background: var(--ibu-warn-bg) !important; color: var(--ibu-warn) !important; } .ui.table td.negative { background: var(--ibu-danger-bg) !important; color: var(--ibu-danger) !important; } .ui.table tr.red td, .ui.table td.red { color: var(--ibu-danger) !important; } /* == 5. Fomantic overrides ================================================ */ .ui.button { border-radius: var(--ibu-radius) !important; font-weight: 600; box-shadow: none !important; background: var(--ibu-surface); border: 1px solid var(--ibu-border-strong); color: var(--ibu-text); } .ui.button:hover { background: var(--ibu-surface-alt); color: var(--ibu-text); } .ui.primary.button, .ui.blue.button { background: var(--ibu-primary) !important; color: #fff !important; border-color: transparent; } .ui.primary.button:hover, .ui.blue.button:hover { background: var(--ibu-primary-hover) !important; } .ui.green.button { background: var(--ibu-ok) !important; color: #fff !important; border-color: transparent; } .ui.red.button { background: var(--ibu-danger) !important; color: #fff !important; border-color: transparent; } .ui.teal.button { background: var(--ibu-primary) !important; color: #fff !important; border-color: transparent; } .ui.basic.buttons .button, .ui.basic.button { box-shadow: none !important; border: 1px solid var(--ibu-border-strong) !important; color: var(--ibu-text-soft) !important; } .ui.basic.buttons .button.active { background: var(--ibu-primary-soft) !important; color: var(--ibu-primary) !important; border-color: var(--ibu-primary) !important; } .ui.mini.button { font-size: var(--ibu-font-xs); padding: 6px 10px !important; } .ui.input > input, .ui.form input[type=text], .ui.form textarea, .ui.selection.dropdown { border-radius: var(--ibu-radius) !important; border: 1px solid var(--ibu-border-strong) !important; color: var(--ibu-text); } .ui.input > input:focus, .ui.form input[type=text]:focus, .ui.form textarea:focus { border-color: var(--ibu-primary) !important; box-shadow: 0 0 0 3px var(--ibu-primary-soft) !important; } /* top menu bar from modular.php is replaced by the sidebar */ .ui.menu.ibu-legacy-menu { display: none !important; } /* secondary nav (master sub-pages) reads as a pill row */ .ui.pointing.secondary.menu { border-bottom: 1px solid var(--ibu-border); margin-bottom: var(--ibu-gap-lg); overflow-x: auto; flex-wrap: nowrap; } .ui.pointing.secondary.menu .item { color: var(--ibu-text-soft) !important; font-weight: 500; white-space: nowrap; border-bottom-width: 2px !important; } .ui.pointing.secondary.menu .item.active { color: var(--ibu-primary) !important; border-color: var(--ibu-primary) !important; font-weight: 600; } /* tabs */ .ui.tabular.menu { border-bottom: 1px solid var(--ibu-border) !important; } .ui.tabular.menu .item { color: var(--ibu-text-soft) !important; font-weight: 500; border: 0 !important; background: transparent !important; border-bottom: 2px solid transparent !important; } .ui.tabular.menu .item.active { color: var(--ibu-primary) !important; border-bottom-color: var(--ibu-primary) !important; font-weight: 600; } .ui.bottom.attached.tab.segment { border-top: 0 !important; border-radius: 0 0 var(--ibu-radius-card) var(--ibu-radius-card) !important; } .ui.label { border-radius: var(--ibu-radius-pill) !important; } .ui.message { border-radius: var(--ibu-radius-card) !important; box-shadow: none !important; } .ui.modal { border-radius: var(--ibu-radius-card) !important; } .ui.modal > .header { border-radius: var(--ibu-radius-card) var(--ibu-radius-card) 0 0 !important; } /* == 6. DataTables chrome ================================================= */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: var(--ibu-gap); } .dataTables_filter input { width: 320px; max-width: 100%; padding: 9px 12px; border: 1px solid var(--ibu-border-strong); border-radius: var(--ibu-radius); } .dataTables_filter input:focus { border-color: var(--ibu-primary); outline: none; box-shadow: 0 0 0 3px var(--ibu-primary-soft); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { color: var(--ibu-text-soft); font-size: var(--ibu-font-sm); } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--ibu-radius) !important; border: 1px solid var(--ibu-border) !important; color: var(--ibu-text-soft) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ibu-primary) !important; color: #fff !important; border-color: var(--ibu-primary) !important; } /* == 7. ibu- components used by the views ================================= */ .ibu-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ibu-scroll > table { margin-bottom: 0; } .ibu-toolbar { display: flex; align-items: center; gap: var(--ibu-gap); flex-wrap: wrap; margin-bottom: var(--ibu-gap); } .ibu-toolbar--tight { gap: var(--ibu-gap-sm); margin-bottom: var(--ibu-gap-sm); } .ibu-toolbar__grow { flex: 1 1 200px; min-width: 0; } .ibu-toolbar__note { color: var(--ibu-text-soft); font-size: var(--ibu-font-sm); } .ibu-search { flex: 0 1 320px; min-width: 180px; } .ibu-select { padding: 9px 12px; border: 1px solid var(--ibu-border-strong); border-radius: var(--ibu-radius); background: var(--ibu-surface); color: var(--ibu-text); font: inherit; font-size: var(--ibu-font-sm); } .ibu-pager { display: flex; align-items: center; gap: var(--ibu-gap-xs); flex-wrap: wrap; padding: var(--ibu-gap) 0 var(--ibu-gap-lg); } .ibu-pager__gap { padding: 0 var(--ibu-gap-xs); color: var(--ibu-text-faint); } .ibu-meta { width: 100%; } .ibu-meta th, .ibu-meta td { padding: 12px 14px; vertical-align: middle; } .ibu-meta th { width: 220px; text-align: left; font-weight: 600; color: var(--ibu-text-soft); background: var(--ibu-surface-alt); border-bottom: 1px solid var(--ibu-border); text-transform: none !important; letter-spacing: 0 !important; font-size: var(--ibu-font-sm) !important; } .ibu-meta td { border-bottom: 1px solid var(--ibu-border); } .ibu-pill { display: inline-block; padding: 3px 10px; border-radius: var(--ibu-radius-pill); font-size: var(--ibu-font-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; } .ibu-pill--ok { background: var(--ibu-ok-bg); color: var(--ibu-ok); } .ibu-pill--warn { background: var(--ibu-warn-bg); color: var(--ibu-warn); } .ibu-pill--danger { background: var(--ibu-danger-bg); color: var(--ibu-danger); } .ibu-pill--muted { background: var(--ibu-surface-sunk); color: var(--ibu-text-soft); } .ibu-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--ibu-font-table); } .ibu-grid th { padding: 10px 10px; background: var(--ibu-surface-alt); border-bottom: 1px solid var(--ibu-border); text-align: center; white-space: nowrap; font-weight: 600; font-size: var(--ibu-font-table-th); color: var(--ibu-text-soft); text-transform: uppercase; letter-spacing: .04em; } .ibu-grid td { padding: 8px 10px; border-bottom: 1px solid var(--ibu-border); vertical-align: middle; } .ibu-grid td.is-wrap { word-break: break-word; overflow-wrap: anywhere; white-space: normal; } .ibu-grid td.is-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ibu-grid td.is-center { text-align: center; white-space: nowrap; } .ibu-grid td.is-empty { text-align: center; color: var(--ibu-text-soft); padding: 18px; } .ibu-grid tbody tr:hover > td { background: var(--ibu-surface-alt); } .ibu-split { display: flex; gap: var(--ibu-gap-lg); align-items: flex-start; } .ibu-split__main { flex: 1; min-width: 0; } .ibu-split__aside { width: 280px; flex-shrink: 0; } #MasterContainer { overflow-x: auto; } #MasterContainer table.dataTable { font-size: var(--ibu-font-table); } #MasterContainer .email-cell a { font-weight: 600; } .ibu-muted { color: var(--ibu-text-soft); } .ibu-faint { color: var(--ibu-text-faint); } .ibu-ok-text { color: var(--ibu-ok); font-weight: 600; } .ibu-stale { color: var(--ibu-danger); font-weight: 600; } .ibu-nowrap { white-space: nowrap; } .ibu-ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ibu-hint { display: block; font-weight: 400; font-size: var(--ibu-font-xs); color: var(--ibu-text-soft); text-transform: none; letter-spacing: 0; } .ibu-clickable { cursor: pointer; } .fake-anchor { cursor: pointer; } /* == 8. responsive ======================================================== */ @media (max-width: 1100px) { :root { --ibu-sidebar-w: 76px; } .ibu-sidebar__brand span, .ibu-nav a span, .ibu-nav__label { display: none; } .ibu-sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; } .ibu-sidebar__brand img { width: 34px; object-fit: cover; object-position: left; } .ibu-nav a { justify-content: center; padding: 11px 0; } .ibu-nav a i.icon { font-size: 1.1rem; } } @media (max-width: 820px) { .ibu-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; flex-basis: 250px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--ibu-shadow-lift); } .ibu-app.is-open .ibu-sidebar { transform: none; } .ibu-app.is-open .ibu-scrim { display: block; position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 99; } .ibu-sidebar__brand span, .ibu-nav a span, .ibu-nav__label { display: inline; } .ibu-sidebar__brand { justify-content: flex-start; padding: var(--ibu-gap-lg); } .ibu-sidebar__brand img { width: 130px; } .ibu-nav a { justify-content: flex-start; padding: 9px 12px; } .ibu-burger { display: flex; } .ibu-topbar { padding: var(--ibu-gap) var(--ibu-gap); gap: var(--ibu-gap); } .ibu-topbar__greeting h1 { font-size: 1.15rem; } .ibu-topbar__greeting p { display: none; } .ibu-content { padding: 0 var(--ibu-gap) var(--ibu-gap-lg); } .ibu-search { flex: 1 1 100%; } .ibu-meta, .ibu-meta tbody, .ibu-meta tr, .ibu-meta th, .ibu-meta td { display: block; width: auto; } .ibu-meta th { border-bottom: 0; padding-bottom: 2px; background: transparent; font-size: var(--ibu-font-xs) !important; text-transform: uppercase !important; letter-spacing: .04em !important; } .ibu-meta td { padding-top: 0; } .ibu-split { flex-direction: column; } .ibu-split__aside { width: 100%; } .ui.tabular.menu { overflow-x: auto; flex-wrap: nowrap; } .ui.tabular.menu .item { white-space: nowrap; flex-shrink: 0; } .dataTables_filter input { width: 100%; } .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { float: none; text-align: left; } .segment { padding: var(--ibu-gap) !important; } } /* multi-module rows (controllers push arrays of blocks) */ .ibu-cols { display: grid; grid-template-columns: 1fr; gap: var(--ibu-gap-lg); } .ibu-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .ibu-cols--2 { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Fomantic stacks every table into a single column below 767px, which turns a data grid into an unreadable list of headings. Keep tables tabular and let them scroll sideways inside .ibu-scroll / #MasterContainer instead. .ibu-meta is exempt: that one is a label/value summary and SHOULD stack. --------------------------------------------------------------------------- */ @media only screen and (max-width: 767.98px) { /* Mirrors Fomantic's own child-combinator selectors, plus :not(.ibu-meta), so these win on specificity instead of losing silently. */ .ui.table:not(.unstackable):not(.ibu-meta) { width: 100% !important; } .ui.table:not(.unstackable):not(.ibu-meta) > thead { display: table-header-group !important; } .ui.table:not(.unstackable):not(.ibu-meta) > tbody { display: table-row-group !important; } .ui.table:not(.unstackable):not(.ibu-meta) > tfoot { display: table-footer-group !important; } .ui.table:not(.unstackable):not(.ibu-meta) > thead > tr, .ui.table:not(.unstackable):not(.ibu-meta) > tbody > tr, .ui.table:not(.unstackable):not(.ibu-meta) > tfoot > tr { display: table-row !important; } .ui.table:not(.unstackable):not(.ibu-meta) > thead > tr > th, .ui.table:not(.unstackable):not(.ibu-meta) > thead > tr > td, .ui.table:not(.unstackable):not(.ibu-meta) > tbody > tr > th, .ui.table:not(.unstackable):not(.ibu-meta) > tbody > tr > td, .ui.table:not(.unstackable):not(.ibu-meta) > tfoot > tr > th, .ui.table:not(.unstackable):not(.ibu-meta) > tfoot > tr > td { display: table-cell !important; width: auto !important; padding: 12px 14px !important; box-shadow: none !important; } } /* Below the desktop breakpoint a wide grid overflows its scroll container rather than squeezing every column into an unreadable wrap. */ @media (max-width: 1100px) { .ibu-scroll > table, #MasterContainer > table, #MasterContainer .dataTables_wrapper table { min-width: 860px; } } /* Collapsed icon rail: the wordmark is unreadable at 34px, so show a mark. */ @media (max-width: 1100px) and (min-width: 821px) { .ibu-sidebar__brand img { display: none; } .ibu-sidebar__brand:after { content: 'IBU'; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ibu-primary); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; } } /* --------------------------------------------------------------------------- Report MBR --------------------------------------------------------------------------- */ /* Filters: compact, wrapping row rather than six full-width columns. */ .ui.form .fields.mbr-filters { display: flex; flex-wrap: wrap; gap: var(--ibu-gap); margin: 0 0 var(--ibu-gap) 0 !important; } .ui.form .fields.mbr-filters > .field.mbr-filter { width: auto !important; flex: 0 0 auto; padding: 0 !important; margin: 0 !important; } .ui.form .fields.mbr-filters > .field.mbr-filter > label { font-size: var(--ibu-font-xs); font-weight: 600; color: var(--ibu-text-soft); margin-bottom: 4px; } /* the dropdown itself, not the field, sets the width */ .ui.form .fields.mbr-filters .ui.selection.dropdown { min-width: 150px; width: 150px; padding: 8px 28px 8px 10px !important; min-height: 0 !important; font-size: var(--ibu-font-sm); } .ui.form .fields.mbr-filters .ui.selection.dropdown > .dropdown.icon { padding: 9px !important; } .ui.form .fields.mbr-filters input[type="date"] { width: 150px; padding: 8px 10px; border: 1px solid var(--ibu-border-strong); border-radius: var(--ibu-radius); font-size: var(--ibu-font-sm); } .ui.form .fields.mbr-filters .ui.button { padding: 9px 14px; font-size: var(--ibu-font-sm); } @media (max-width: 640px) { .ui.form .fields.mbr-filters > .field.mbr-filter { flex: 1 1 100%; } .ui.form .fields.mbr-filters .ui.selection.dropdown, .ui.form .fields.mbr-filters input[type="date"] { width: 100%; } } /* Summary tiles: wide enough that a billion-rupiah figure stays on one line. */ #MbrCards.ui.cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ibu-gap); margin: 0 0 var(--ibu-gap-lg) 0 !important; } #MbrCards .ui.card { width: auto !important; margin: 0 !important; border-radius: var(--ibu-radius-card) !important; border: 1px solid var(--ibu-border) !important; box-shadow: var(--ibu-shadow) !important; } #MbrCards .ui.card > .content { padding: var(--ibu-gap) var(--ibu-gap-lg) !important; } #MbrCards .ui.card .header { font-size: var(--ibu-font-sm) !important; font-weight: 500 !important; color: var(--ibu-text-soft) !important; } #MbrCards .ui.card .description { margin-top: 4px !important; color: var(--ibu-text) !important; } .cards-number { font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: -.02em; white-space: nowrap; /* never split a figure across two lines */ } .ibu-cur { font-size: .62em; font-weight: 600; color: var(--ibu-text-soft); margin-right: 5px; vertical-align: 2px; } /* money and counts line up on the decimal */ #MbrRegionalTable td:not(:first-child), #MbrProductTable td:nth-child(n+3), #MbrDistTable td:nth-child(n+4) { text-align: right; white-space: nowrap; } /* --------------------------------------------------------------------------- Report Products (report_products) and its distributor drill-down Borrows .mbr-filters for the filter row; only the pieces MBR has no equivalent for live here. --------------------------------------------------------------------------- */ #RpCards.ui.cards, #RpdCards.ui.cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ibu-gap); margin: 0 0 var(--ibu-gap-lg) 0 !important; } #RpCards .ui.card, #RpdCards .ui.card { width: auto !important; margin: 0 !important; border-radius: var(--ibu-radius-card) !important; border: 1px solid var(--ibu-border) !important; box-shadow: var(--ibu-shadow) !important; } #RpCards .ui.card > .content, #RpdCards .ui.card > .content { padding: var(--ibu-gap) var(--ibu-gap-lg) !important; } #RpCards .ui.card .header, #RpdCards .ui.card .header { font-size: var(--ibu-font-sm) !important; font-weight: 500 !important; color: var(--ibu-text-soft) !important; } #RpCards .ui.card .description, #RpdCards .ui.card .description { margin-top: 4px !important; color: var(--ibu-text) !important; } /* Search box + toggle that sit above a product table. */ .rp-tabletools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ibu-gap); margin: 0 0 var(--ibu-gap) 0; } .rp-tabletools input[type="text"] { width: 260px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--ibu-border-strong); border-radius: var(--ibu-radius); font-size: var(--ibu-font-sm); } .rp-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ibu-font-sm); color: var(--ibu-text-soft); cursor: pointer; } /* A row whose distributor code never resolved to an IBU product. */ .rp-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: var(--ibu-border); color: var(--ibu-text-soft); font-size: .68rem; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; } .rp-share { color: var(--ibu-text-soft); font-size: .8em; margin-left: 6px; } /* Tabs: the three views of a period. */ .ui.tabular.menu.rp-tabs { margin-top: var(--ibu-gap-lg); border-bottom-color: var(--ibu-border); } .ui.tabular.menu.rp-tabs .item { font-size: var(--ibu-font-sm); font-weight: 600; color: var(--ibu-text-soft); padding: 10px 16px; } .ui.tabular.menu.rp-tabs .item.active { color: var(--ibu-text); } .ui.bottom.attached.tab.segment { border-color: var(--ibu-border); padding: var(--ibu-gap-lg); margin-bottom: var(--ibu-gap-lg); } .rp-inline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ibu-font-sm); color: var(--ibu-text-soft); } .rp-inline .ui.selection.dropdown { min-width: 220px; padding: 8px 28px 8px 10px !important; min-height: 0 !important; font-size: var(--ibu-font-sm); } .rp-tabletools .ui.button.rp-smallbtn { padding: 8px 12px; font-size: var(--ibu-font-sm); } /* Grouped outlet table: a blank cell continues the row above, so the rule that separates groups is what makes the grouping readable. */ #RpOutletTable.rp-grouped td { border-top: none; } #RpOutletTable.rp-grouped tr.rp-group td { border-top: 1px solid var(--ibu-border-strong); } #RpOutletTable.rp-grouped td:nth-child(1), #RpOutletTable.rp-grouped td:nth-child(4) { font-weight: 600; } #RpOutletTable td:nth-child(n+7) { text-align: right; white-space: nowrap; } #RpDistTable.rp-grouped td { border-top: none; } #RpDistTable.rp-grouped tr.rp-group td { border-top: 1px solid var(--ibu-border-strong); } #RpDistTable.rp-grouped td:nth-child(1) { font-weight: 600; } /* The distributor drill-down reached from the outlet tab: same grouping, with the outlet in the second column. Only that page carries .rp-grouped. */ #RpdProductTable.rp-grouped td { border-top: none; } #RpdProductTable.rp-grouped tr.rp-group td { border-top: 1px solid var(--ibu-border-strong); } #RpdProductTable.rp-grouped td:nth-child(2) { font-weight: 600; } /* Sortable headers. The arrow only appears on the column currently sorted. */ th.rp-sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.rp-sortable:hover { background: var(--ibu-surface-sunk); } th.rp-sortable.rp-reset { cursor: pointer; } /* Fomantic icon, not a border triangle -- see RpSortArrows(). Faint on every sortable column so the header reads as clickable; solid on the active one. The size/margin overrides beat Fomantic's own i.icon defaults. */ .rp-arrow.icon { margin: 0 0 0 6px !important; width: auto !important; font-size: .9em !important; opacity: .3; vertical-align: baseline; color: var(--ibu-text-soft); } th.rp-sortable:hover .rp-arrow.icon { opacity: .7; } .rp-arrow--on.icon { opacity: 1 !important; color: var(--ibu-primary) !important; } /* Export progress note; turns red only when the download actually failed. */ .rp-error { color: var(--ibu-danger); font-weight: 600; } /* A product code clipped to 15 characters; the full one is in the title. */ .rp-clip { border-bottom: 1px dotted var(--ibu-border-strong); cursor: help; } /* counts line up on the right; figures never wrap */ #RpProductTable td:nth-child(n+4), #RpDistTable td:nth-child(n+6), #RpdProductTable td:nth-child(n+4) { text-align: right; white-space: nowrap; } /* The outlet drill-down adds a column in front, so Qty and Value sit one to the right and Product goes back to reading left. */ #RpdProductTable.rp-grouped td:nth-child(4) { text-align: left; white-space: normal; } #RpdProductTable.rp-grouped td:nth-child(n+5) { text-align: right; white-space: nowrap; } /* --------------------------------------------------------------------------- Master pages (data/master/*) --------------------------------------------------------------------------- */ /* Sub-navigation: a segmented control sitting directly above the card. Reads as one grouped switch rather than a row of loose text links. */ .ibu-subnav { margin: 0 0 var(--ibu-gap) 0; } .ibu-subnav .ui.pointing.secondary.menu { display: inline-flex; margin: 0; border: 1px solid var(--ibu-border) !important; background: var(--ibu-surface-sunk); border-radius: var(--ibu-radius-pill); padding: 4px; gap: 2px; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .ibu-subnav .ui.pointing.secondary.menu .item { margin: 0 !important; padding: 7px 14px !important; border: 0 !important; border-radius: var(--ibu-radius-pill) !important; color: var(--ibu-text-soft) !important; font-size: var(--ibu-font-sm); font-weight: 500; white-space: nowrap; flex-shrink: 0; transition: background .12s, color .12s; } .ibu-subnav .ui.pointing.secondary.menu .item:before { display: none !important; } .ibu-subnav .ui.pointing.secondary.menu .item:hover { background: rgba(0,0,0,.04); color: var(--ibu-text) !important; } .ibu-subnav .ui.pointing.secondary.menu .item.active { background: var(--ibu-surface) !important; color: var(--ibu-text) !important; font-weight: 600; box-shadow: var(--ibu-shadow); } /* One row: "Add New" on the left, search on the right. */ .ibu-tabletools { display: flex; align-items: center; justify-content: space-between; gap: var(--ibu-gap); flex-wrap: wrap; margin-bottom: var(--ibu-gap); } .ibu-tabletools .dataTables_filter { float: none !important; margin: 0 !important; } .ibu-tabletools .dataTables_filter label { margin: 0; color: var(--ibu-text-soft); font-size: var(--ibu-font-sm); } .ibu-tabletools > .ui.button { margin: 0; } .ibu-tablefoot { display: flex; align-items: center; justify-content: space-between; gap: var(--ibu-gap); flex-wrap: wrap; margin-top: var(--ibu-gap); } .ibu-tablefoot .dataTables_info, .ibu-tablefoot .dataTables_length, .ibu-tablefoot .dataTables_paginate { float: none !important; margin: 0 !important; padding: 0 !important; } /* Row actions: real buttons rather than bare coloured glyphs. */ td.ibu-rowactions { white-space: nowrap; text-align: right; width: 1%; } td.ibu-rowactions .ui.button { margin: 0 0 0 4px; padding: 6px 8px !important; color: var(--ibu-text-soft) !important; box-shadow: none !important; border: 1px solid var(--ibu-border) !important; background: var(--ibu-surface) !important; } td.ibu-rowactions .ui.button i.icon { margin: 0 !important; opacity: 1; } td.ibu-rowactions .ui.button:hover { background: var(--ibu-surface-alt) !important; color: var(--ibu-text) !important; } td.ibu-rowactions .ui.button.delete:hover { background: var(--ibu-danger-bg) !important; color: var(--ibu-danger) !important; border-color: var(--ibu-danger-bg) !important; } td.ibu-rowactions .ui.button.edit:hover { background: var(--ibu-primary-soft) !important; color: var(--ibu-primary) !important; border-color: var(--ibu-primary-soft) !important; } @media (max-width: 640px) { .ibu-tabletools, .ibu-tablefoot { justify-content: flex-start; } .ibu-tabletools .dataTables_filter input { width: 100%; } } /* card heading sits tighter above its toolbar */ #MasterContainer { margin-top: var(--ibu-gap); } .ibu-card > h1.ui.dividing.header:first-child { margin-top: 0; } .ibu-tabletools .dataTables_filter input { min-width: 260px; } .ibu-tabletools #MasterPairFilter { margin: 0; } /* --------------------------------------------------------------------------- Master grids On desktop the whole grid must fit the card with no horizontal scrollbar, so the layout is fixed, the type sets its column widths, and long values wrap onto a second line instead of being clipped. Below 900px that inverts: cells go back to one line and the card scrolls, which reads better on a phone than eleven columns squeezed to nothing. --------------------------------------------------------------------------- */ #MasterContainer table.ibu-master { table-layout: fixed; width: 100% !important; font-size: .78rem; } #MasterContainer table.ibu-master th, #MasterContainer table.ibu-master td { padding: 9px 10px !important; white-space: normal; word-break: break-word; overflow-wrap: break-word; /* prefer the points, split mid-word only if forced */ vertical-align: middle; } #MasterContainer table.ibu-master thead th { font-size: .68rem; letter-spacing: .03em; } #MasterContainer table.ibu-master .ibu-hint { font-size: .92em; white-space: nowrap; } #MasterContainer table.ibu-master .ibu-pill { font-size: .72rem; padding: 2px 8px; } /* dates, counts and the action column never wrap */ #MasterContainer table.ibu-master td.ibu-nowrap, #MasterContainer table.ibu-master td.ibu-rowactions { white-space: nowrap; overflow-wrap: normal; } /* Email grid: 10 columns (no row number), widths summing to 100%%. */ #MasterContainer table.ibu-master--email th:nth-child(1), #MasterContainer table.ibu-master--email td:nth-child(1) { width: 19%; } #MasterContainer table.ibu-master--email th:nth-child(2), #MasterContainer table.ibu-master--email td:nth-child(2) { width: 9%; } #MasterContainer table.ibu-master--email th:nth-child(3), #MasterContainer table.ibu-master--email td:nth-child(3) { width: 7%; } #MasterContainer table.ibu-master--email th:nth-child(4), #MasterContainer table.ibu-master--email td:nth-child(4) { width: 8%; } #MasterContainer table.ibu-master--email th:nth-child(5), #MasterContainer table.ibu-master--email td:nth-child(5) { width: 14%; } #MasterContainer table.ibu-master--email th:nth-child(6), #MasterContainer table.ibu-master--email td:nth-child(6) { width: 13%; } #MasterContainer table.ibu-master--email th:nth-child(7), #MasterContainer table.ibu-master--email td:nth-child(7) { width: 9%; } #MasterContainer table.ibu-master--email th:nth-child(8), #MasterContainer table.ibu-master--email td:nth-child(8) { width: 8%; } #MasterContainer table.ibu-master--email th:nth-child(9), #MasterContainer table.ibu-master--email td:nth-child(9) { width: 8%; } #MasterContainer table.ibu-master--email th:nth-child(10), #MasterContainer table.ibu-master--email td:nth-child(10) { width: 5%; } @media (max-width: 900px) { #MasterContainer table.ibu-master { table-layout: auto; min-width: 900px; width: auto !important; } #MasterContainer table.ibu-master th, #MasterContainer table.ibu-master td { white-space: nowrap; overflow-wrap: normal; } #MasterContainer table.ibu-master--email th, #MasterContainer table.ibu-master--email td { width: auto !important; } } /* --------------------------------------------------------------------------- Segmented controls One definition for every "pick one of these" row: the email list's All/Mapped/Not mapped filter, the Sales Out Data period selector and the email page's year filter. They were three near-identical copies. Fomantic's .ui.buttons stretches its children and gives first/last child their own radii and margins, which pushed the active pill out of the track, so the geometry is all set explicitly here. --------------------------------------------------------------------------- */ #MasterPairFilter.ui.buttons, #SellOutSpan.ui.buttons, #SalesOutYears.ui.buttons, #FilesFilterTabs.ui.buttons { display: inline-flex; align-items: center; padding: 4px; gap: 4px; border: 1px solid var(--ibu-border) !important; background: var(--ibu-surface-sunk); border-radius: var(--ibu-radius-pill); box-shadow: none !important; min-height: 0; vertical-align: middle; max-width: 100%; overflow-x: auto; } #MasterPairFilter.ui.buttons .button, #MasterPairFilter.ui.buttons .button:first-child, #MasterPairFilter.ui.buttons .button:last-child, #SellOutSpan.ui.buttons .button, #SellOutSpan.ui.buttons .button:first-child, #SellOutSpan.ui.buttons .button:last-child, #SalesOutYears.ui.buttons .button, #SalesOutYears.ui.buttons .button:first-child, #SalesOutYears.ui.buttons .button:last-child, #FilesFilterTabs.ui.buttons .button, #FilesFilterTabs.ui.buttons .button:first-child, #FilesFilterTabs.ui.buttons .button:last-child { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0 !important; padding: 7px 12px !important; border: 0 !important; border-radius: var(--ibu-radius-pill) !important; background: transparent !important; color: var(--ibu-text-soft) !important; font-size: var(--ibu-font-xs); font-weight: 500; line-height: 1; min-height: 0; box-shadow: none !important; white-space: nowrap; flex-shrink: 0; transition: background .12s, color .12s; } #MasterPairFilter.ui.buttons .button:hover, #SellOutSpan.ui.buttons .button:hover, #SalesOutYears.ui.buttons .button:hover, #FilesFilterTabs.ui.buttons .button:hover { background: rgba(0,0,0,.05) !important; color: var(--ibu-text) !important; } #MasterPairFilter.ui.buttons .button.active, #SellOutSpan.ui.buttons .button.active, #SalesOutYears.ui.buttons .button.active, #FilesFilterTabs.ui.buttons .button.active { background: var(--ibu-surface) !important; color: var(--ibu-text) !important; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.10) !important; } /* count chips inside a segmented button */ #MasterPairFilter .ui.label { display: inline-flex; align-items: center; margin: 0 !important; padding: 2px 7px !important; min-height: 0; font-size: .68rem !important; font-weight: 600; line-height: 1; background: rgba(0,0,0,.07) !important; color: var(--ibu-text-soft) !important; box-shadow: none !important; } #MasterPairFilter .button.active .ui.label { background: var(--ibu-surface-sunk) !important; color: var(--ibu-text) !important; } #MasterPairFilter .ui.green.label { background: var(--ibu-ok-bg) !important; color: var(--ibu-ok) !important; } #MasterPairFilter .ui.red.label { background: var(--ibu-danger-bg) !important; color: var(--ibu-danger) !important; } /* --------------------------------------------------------------------------- Sales Out Data cells Each cell carries three figures. Unlabelled and stacked they were indistinguishable, so each is now a label/value pair on its own line. --------------------------------------------------------------------------- */ td.sellout-cell { padding: 8px 12px !important; vertical-align: top; } .sellout-figures { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 1px; align-items: baseline; color: inherit !important; } .sellout-figures:hover { background: var(--ibu-primary-soft); border-radius: var(--ibu-radius); } .sellout-figures .k { text-align: left; font-size: .68rem; font-weight: 500; color: var(--ibu-text-faint); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .sellout-figures .v { text-align: right; font-size: var(--ibu-font-sm); font-variant-numeric: tabular-nums; color: var(--ibu-text); white-space: nowrap; } /* the row count is the least interesting of the three */ .sellout-figures .k:first-child + .v { color: var(--ibu-text-soft); } /* --------------------------------------------------------------------------- Product mapping (email page > Products tab) The action buttons and search fields were full-size Fomantic controls, which dominated a screen whose real content is the two mapping grids below them. --------------------------------------------------------------------------- */ #ProductsContainer .ui.button { padding: 7px 12px !important; font-size: var(--ibu-font-xs); font-weight: 600; min-height: 0; } #ProductsContainer .ui.mini.button { padding: 6px 10px !important; } #ProductsContainer .ui.input > input { padding: 7px 10px !important; font-size: var(--ibu-font-sm); min-height: 0; line-height: 1.3; } #ProductsContainer .ui.icon.input > i.icon { font-size: .85em; opacity: .5; } /* the toolbar rows themselves sit tighter */ #ProductsContainer .ibu-toolbar { gap: var(--ibu-gap-sm); margin-bottom: var(--ibu-gap-sm); } #ProductsContainer label { font-size: var(--ibu-font-sm); } /* --------------------------------------------------------------------------- Files list (email page > Sales tab) The controls were four stacked rows of full-size components above a table that is usually one row tall. They are now two rows of compact controls. --------------------------------------------------------------------------- */ /* plain checkbox + label pair, no Fomantic .ui.checkbox scaffolding */ .ibu-check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ibu-font-sm); color: var(--ibu-text-soft); cursor: pointer; white-space: nowrap; } .ibu-check input { margin: 0; cursor: pointer; } .ibu-check:hover { color: var(--ibu-text); } #FilesContainer .ui.mini.button { padding: 5px 9px !important; font-size: var(--ibu-font-xs); font-weight: 600; white-space: nowrap; } #FilesContainer .ui.mini.button i.icon { margin: 0 4px 0 0 !important; opacity: .6; } #FilesContainer select.ui.dropdown, #FilesContainer select { padding: 5px 8px !important; font-size: var(--ibu-font-xs); min-height: 0 !important; border-radius: var(--ibu-radius) !important; border: 1px solid var(--ibu-border-strong) !important; } #FilesContainer table td { padding: 8px 10px !important; } #FilesContainer .ui.toggle.checkbox { min-height: 0; } /* the two bulk actions read as secondary next to the row actions */ #ai-mapping-all-btn i.icon, #ai-mapping-all-stocks-btn i.icon { margin: 0 5px 0 0 !important; opacity: .6; } /* --------------------------------------------------------------------------- Sales Out Detail modal --------------------------------------------------------------------------- */ #SalesOutDetailModal > .header { font-size: 1.05rem !important; font-weight: 650 !important; padding: 14px 18px !important; } #SalesOutDetailModal > .header i.icon { font-size: .95em; opacity: .55; } .salesout-controls { display: flex; align-items: center; gap: var(--ibu-gap-sm); flex-wrap: wrap; flex-shrink: 0; padding: 10px 18px; border-bottom: 1px solid var(--ibu-border); background: var(--ibu-surface); } .salesout-controls label { font-size: var(--ibu-font-xs); font-weight: 600; color: var(--ibu-text-soft); text-transform: uppercase; letter-spacing: .03em; margin-left: var(--ibu-gap-xs); } .salesout-controls .ui.input > input, .salesout-controls .ibu-select { padding: 6px 10px !important; font-size: var(--ibu-font-sm); min-height: 0; line-height: 1.3; } .salesout-controls .ibu-search { flex: 0 1 260px; min-width: 160px; } .salesout-controls .ui.icon.input > i.icon { font-size: .85em; opacity: .45; } /* the grid itself: dense, numbers aligned on their digits */ #SalesOutDetail table { width: 100%; border-collapse: collapse; font-size: var(--ibu-font-detail); } #SalesOutDetail thead th { position: sticky; top: 0; z-index: 2; background: var(--ibu-surface-alt); border-bottom: 1px solid var(--ibu-border); padding: 8px 10px; font-size: var(--ibu-font-detail-th); font-weight: 600; color: var(--ibu-text-soft); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } #SalesOutDetail tbody td { padding: 7px 10px; border-bottom: 1px solid var(--ibu-border); font-variant-numeric: tabular-nums; } #SalesOutDetail tbody tr:hover td { background: var(--ibu-surface-alt); } #SalesOutDetail tbody td.right.aligned { text-align: right; } #SalesOutPagination .ui.button { padding: 5px 9px !important; font-size: var(--ibu-font-xs); } /* --------------------------------------------------------------------------- Master record form (Add / Edit modal on regional, asm, area, sales, distributor and email) The markup is plain Fomantic .ui.form / .field /