/* "Press Sheet" admin design system --------------------------------- Ink-on-paper utilitarian system from the design handoff (design_handoff_press_sheet_admin/README.md): hairline rules, zero border-radius, monospaced numerals, and the brand's CMYK process colors used only as signal color. Loaded automatically after tailwind.css and style.css (see application/helpers/assets_helper.php), so plain selectors here win the cascade for the admin shell. */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap"); :root { /* paper + ink */ --ps-ink: #1a1a1c; --ps-paper: #ffffff; --ps-paper-tint: #fbfbf8; --ps-text: #1a1a1c; --ps-text-secondary: #55554f; --ps-text-tertiary: #75756e; --ps-text-muted: #9a9a92; --ps-hairline: #e6e6e0; --ps-hairline-soft: #f0f0eb; --ps-hairline-strong: #d8d8d2; --ps-row-hover: #fbfbf8; --ps-chip-bg: #ecece7; /* process signals */ --ps-cyan: #00aeef; --ps-cyan-text: #00719c; --ps-cyan-bg: #e3f5fd; --ps-magenta: #ec008c; --ps-magenta-text: #c40070; --ps-magenta-bg: #fde9f4; --ps-yellow: #fff200; --ps-yellow-border: #e0d200; --ps-yellow-text: #7a6e00; --ps-yellow-bg: #fffbd6; --ps-green: #00a651; --ps-green-text: #00733a; --ps-green-bg: #e4f6ec; --ps-neutral-pill-text: #75756e; --ps-neutral-pill-border: #c9c9c2; --ps-billed-bg: #f2f2ef; --ps-billed-text: #8a8a84; --ps-billed-border: #e0e0da; /* inverted ("active") elements */ --ps-active-bg: #1a1a1c; --ps-active-fg: #ffffff; /* press bar's K block */ --ps-pressbar-k: #1a1a1c; --ps-font-ui: "Archivo", sans-serif; --ps-font-mono: "IBM Plex Mono", monospace; } /* Dark mode — production room variant. Enable with */ body.ps-dark { --ps-ink: #f2f2ee; --ps-paper: #161618; --ps-paper-tint: #1b1b1d; --ps-text: #f2f2ee; --ps-text-secondary: #b8b8b2; --ps-text-tertiary: #8e8e88; --ps-text-muted: #6e6e68; --ps-hairline: #2c2c2f; --ps-hairline-soft: #222225; --ps-hairline-strong: #3a3a3e; --ps-row-hover: #1b1b1d; --ps-chip-bg: #2c2c2f; --ps-cyan: #29bdff; --ps-cyan-text: #29bdff; --ps-magenta: #ff4db8; --ps-magenta-text: #ff4db8; --ps-yellow: #f7e72a; --ps-yellow-border: #f7e72a; --ps-yellow-text: #f7e72a; --ps-green: #2bc46f; --ps-green-text: #2bc46f; --ps-active-bg: #f2f2ee; --ps-active-fg: #161618; --ps-pressbar-k: #ffffff; } /* ============================================================ Press color bar — fixed across the very top of every page ============================================================ */ body.admin { padding-top: 8px; } body.admin::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 8px; z-index: 1030; background: linear-gradient( to right, var(--ps-cyan) 0 25%, var(--ps-magenta) 25% 50%, var(--ps-yellow) 50% 75%, var(--ps-pressbar-k) 75% 100% ); } body.admin .sidebar { top: 8px; } /* ============================================================ Base typography & surfaces ============================================================ */ body.admin { font-family: var(--ps-font-ui); background: var(--ps-paper); color: var(--ps-text); } body.admin h1, body.admin h2, body.admin h3, body.admin h4, body.admin h5, body.admin .h3, body.admin .h4 { font-family: var(--ps-font-ui); color: var(--ps-text); } body.admin #wrapper, body.admin .content { background: var(--ps-paper); } /* Square corners everywhere inside the app */ body.admin .btn, body.admin .btn-group .btn, body.admin .form-control, body.admin input, body.admin select, body.admin textarea, body.admin .panel, body.admin .panel_s, body.admin .panel-body, body.admin .panel-heading, body.admin .panel-footer, body.admin .label, body.admin .badge, body.admin .alert, body.admin .well, body.admin .dropdown-menu, body.admin .modal-content, body.admin .nav-tabs > li > a, body.admin .pagination > li > a, body.admin .pagination > li > span, body.admin .input-group-addon, body.admin .progress, body.admin .thumbnail, body.admin .list-group-item, body.admin .popover, body.admin .tooltip-inner, body.admin img.staff-profile-image-small, body.admin img.staff-profile-image, body.admin img.client-profile-image-small, body.admin .sidebar .sidebar-user-profile .profile { border-radius: 0 !important; } /* No shadows inside the app — 1px hairlines do the separating */ body.admin #header { box-shadow: none; border-bottom: 1px solid var(--ps-hairline); background: var(--ps-paper); } body.admin .panel, body.admin .panel_s { box-shadow: none; border: 1px solid var(--ps-hairline); background: var(--ps-paper); } /* Card headers: 13px/800 uppercase on paper-tint */ body.admin .panel-heading, body.admin .panel_s .panel-heading { background: var(--ps-paper-tint); border-bottom: 1px solid var(--ps-hairline); color: var(--ps-text); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } /* ============================================================ Sidebar ============================================================ */ body.admin .sidebar { background: var(--ps-paper-tint); border-right: 1px solid var(--ps-hairline); } body.admin .sidebar #side-menu > li > a, body.admin .sidebar #setup-menu > li > a { font-family: var(--ps-font-ui); font-size: 13px; font-weight: 500; color: var(--ps-text-secondary); border-radius: 0; } body.admin .sidebar #side-menu > li > a:hover, body.admin .sidebar #side-menu > li > a:focus { background: var(--ps-hairline-soft); color: var(--ps-text); } body.admin .sidebar #side-menu > li.active > a, body.admin .sidebar #side-menu > li > a.active { background: var(--ps-active-bg) !important; color: var(--ps-active-fg) !important; font-weight: 700; } body.admin .sidebar #side-menu > li.active > a .menu-icon, body.admin .sidebar #side-menu > li > a.active .menu-icon { color: var(--ps-active-fg); } body.admin .sidebar > ul.nav > li { border-left: 0; } body.admin .sidebar .nav-second-level a { font-size: 12.5px; color: var(--ps-text-secondary); } /* Count badges: right-aligned mono; invert to yellow on the active item */ body.admin .sidebar #side-menu .badge { font-family: var(--ps-font-mono); font-size: 10.5px; font-weight: 600; background: #ecece7 !important; color: var(--ps-text-secondary) !important; border-radius: 0; padding: 2px 7px; } body.ps-dark .sidebar #side-menu .badge { background: var(--ps-chip-bg) !important; color: var(--ps-text-secondary) !important; } body.admin .sidebar #side-menu li.active .badge, body.admin .sidebar #side-menu a.active .badge { background: var(--ps-yellow) !important; color: #1a1a1c !important; } body.admin .sidebar .sidebar-user-profile .profile { border-color: var(--ps-hairline-strong) !important; background: var(--ps-paper); box-shadow: none; } /* ============================================================ Buttons Primary = ink bg / white 13px/700. Secondary = white, 1px strong hairline, secondary text. ============================================================ */ body.admin .btn { font-family: var(--ps-font-ui); transition: none; } body.admin .btn-primary, body.admin .btn-info { background: var(--ps-active-bg); border: 1px solid var(--ps-active-bg); color: var(--ps-active-fg); font-size: 13px; font-weight: 700; } body.admin .btn-primary:hover, body.admin .btn-primary:focus, body.admin .btn-primary:active, body.admin .btn-info:hover, body.admin .btn-info:focus, body.admin .btn-info:active { background: #000000; border-color: #000000; color: #ffffff; } body.ps-dark .btn-primary:hover, body.ps-dark .btn-primary:focus, body.ps-dark .btn-primary:active, body.ps-dark .btn-info:hover, body.ps-dark .btn-info:focus, body.ps-dark .btn-info:active { background: #ffffff; border-color: #ffffff; color: #161618; } body.admin .btn-default { background: var(--ps-paper); border: 1px solid var(--ps-hairline-strong); color: var(--ps-text-secondary); font-size: 12.5px; font-weight: 600; } body.admin .btn-default:hover, body.admin .btn-default:focus, body.admin .btn-default:active { background: var(--ps-paper); border-color: var(--ps-ink); color: var(--ps-text); } /* ============================================================ Forms ============================================================ */ body.admin .form-control { border: 1px solid var(--ps-hairline-strong); background: var(--ps-paper); color: var(--ps-text); font-family: var(--ps-font-ui); font-size: 13px; box-shadow: none; } body.admin .form-control:focus { border-color: var(--ps-ink); box-shadow: none; } body.admin .form-control::placeholder { color: var(--ps-text-muted); } body.admin label, body.admin .control-label { color: var(--ps-text-secondary); font-weight: 600; } /* ============================================================ Tables ============================================================ */ body.admin .table > thead > tr > th { background: var(--ps-paper-tint); border-bottom: 1px solid var(--ps-hairline); color: var(--ps-text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } body.admin .table > tbody > tr > td { border-top: 1px solid var(--ps-hairline-soft); color: var(--ps-text); font-size: 13px; vertical-align: middle; } body.admin .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; } body.admin .table > tbody > tr:hover { background: var(--ps-row-hover); } body.admin .table-responsive, body.admin .dataTables_wrapper { border: 0; } /* ============================================================ Pagination — square, mono, active inverts to ink ============================================================ */ body.admin .pagination > li > a, body.admin .pagination > li > span { font-family: var(--ps-font-mono); font-size: 12px; border: 1px solid var(--ps-hairline-strong); color: var(--ps-text-secondary); background: var(--ps-paper); margin-left: 6px; } body.admin .pagination > .active > a, body.admin .pagination > .active > span, body.admin .pagination > .active > a:hover, body.admin .pagination > .active > span:hover { background: var(--ps-active-bg); border-color: var(--ps-active-bg); color: var(--ps-active-fg); } /* ============================================================ Labels & alerts ============================================================ */ body.admin .label { font-family: var(--ps-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; } /* Notifications: ink toast — square, white text, mono timestamp */ body.admin .alert { border: 1px solid var(--ps-hairline); } body.admin .alert-success { background: var(--ps-active-bg); border-color: var(--ps-active-bg); color: var(--ps-active-fg); } /* ============================================================ Reusable Press Sheet components ============================================================ */ .ps-mono { font-family: var(--ps-font-mono) !important; } /* --- Status pill: square, 1px border, 10–10.5px/700 uppercase --- */ .ps-pill { display: inline-block; padding: 3px 9px; border: 1px solid var(--ps-neutral-pill-border); background: var(--ps-paper); color: var(--ps-neutral-pill-text); font-family: var(--ps-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; } .ps-pill--new { background: var(--ps-paper); color: var(--ps-text); border-color: var(--ps-ink); } .ps-pill--proof-sent, .ps-pill--overdue, .ps-pill--unpaid { background: var(--ps-magenta-bg); color: var(--ps-magenta-text); border-color: var(--ps-magenta); } .ps-pill--in-production, .ps-pill--out-for-delivery { background: var(--ps-cyan-bg); color: var(--ps-cyan-text); border-color: var(--ps-cyan); } .ps-pill--at-vendor { background: var(--ps-yellow-bg); color: var(--ps-yellow-text); border-color: var(--ps-yellow-border); } .ps-pill--ready, .ps-pill--paid, .ps-pill--delivered { background: var(--ps-green-bg); color: var(--ps-green-text); border-color: var(--ps-green); } .ps-pill--billed { background: var(--ps-billed-bg); color: var(--ps-billed-text); border-color: var(--ps-billed-border); } /* Dark mode: pills go transparent with colored border + text */ body.ps-dark .ps-pill, body.ps-dark [class*="ps-pill--"] { background: transparent; } /* --- Filter chip: square, label + mono count, active inverts to ink --- */ .ps-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-family: var(--ps-font-ui); font-size: 12px; font-weight: 600; background: var(--ps-paper); color: var(--ps-text-secondary); border: 1px solid var(--ps-hairline-strong); border-radius: 0; cursor: pointer; user-select: none; transition: none; } .ps-chip:hover { border-color: var(--ps-ink); color: var(--ps-text); } .ps-chip.active, .ps-chip.selected { background: var(--ps-active-bg); color: var(--ps-active-fg); border-color: var(--ps-active-bg); } .ps-chip .ps-chip-count { font-family: var(--ps-font-mono); font-size: 11px; opacity: 0.65; } /* --- KPI strip: one bordered container, equal cells, right hairlines --- */ .ps-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ps-hairline); background: var(--ps-paper); } .ps-kpi { padding: 16px 20px; border-right: 1px solid var(--ps-hairline); display: flex; flex-direction: column; gap: 4px; } .ps-kpi:last-child { border-right: 0; } .ps-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ps-text-muted); } .ps-kpi-value { font-family: var(--ps-font-mono); font-size: 26px; font-weight: 600; color: var(--ps-text); } .ps-kpi-value.is-cyan { color: var(--ps-cyan-text); } .ps-kpi-value.is-magenta { color: var(--ps-magenta-text); } .ps-kpi-value.is-green { color: var(--ps-green-text); } .ps-kpi-note { font-size: 12px; color: var(--ps-text-tertiary); } /* --- Card --- */ .ps-card { border: 1px solid var(--ps-hairline); background: var(--ps-paper); } .ps-card-header { display: flex; align-items: baseline; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--ps-hairline); background: var(--ps-paper-tint); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ps-text); } .ps-card-header .ps-card-meta { font-family: var(--ps-font-mono); font-size: 11.5px; font-weight: 500; color: var(--ps-text-muted); text-transform: none; } /* --- Page title row --- */ .ps-page-title { font-size: 25px; font-weight: 800; color: var(--ps-text); margin: 0; } .ps-page-count { font-family: var(--ps-font-mono); font-size: 13px; color: var(--ps-text-muted); } /* --- Due-date signals --- */ .ps-due-late { color: var(--ps-magenta-text) !important; font-weight: 600; } .ps-due-today { color: var(--ps-cyan-text) !important; font-weight: 600; } .ps-due-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; } /* --- Progress bar: 6px on hairline-soft track, signal-colored fill --- */ .ps-progress { height: 6px; background: var(--ps-hairline-soft); display: flex; } .ps-progress-fill { background: var(--ps-cyan); } /* --- Ink toast (replaces green banners) --- */ .ps-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: var(--ps-active-bg); color: var(--ps-active-fg); border: 0; border-radius: 0; padding: 10px 20px; font-family: var(--ps-font-ui); font-size: 12.5px; font-weight: 600; z-index: 2000; } .ps-toast.error { background: var(--ps-magenta-text); color: #ffffff; } .ps-toast .ps-toast-time { font-family: var(--ps-font-mono); font-size: 10.5px; opacity: 0.7; margin-left: 10px; }