/* ============================================================
BAIT AL MUSTABAL REAL ESTATE — Lease Manager
Palette: navy + gold + warm cream
============================================================ */
:root {
/* Brand */
--navy: #0F2C4C;
--navy-mid: #17395C;
--navy-light: #1F4E79;
--navy-deep: #08192E;
--gold: #B8935A;
--gold-light: #D4B37F;
--gold-pale: #F5EFE2;
/* Neutrals */
--cream: #FAF8F3;
--paper: #FFFFFF;
--slate: #5A6B7B;
--slate-light: #8A96A5;
--border: #E5DFD0;
--border-cool: #D9E1EC;
--row-alt: #FBF9F4;
/* Statuses */
--green: #1B7F5C;
--green-soft: #DCF3E7;
--red: #C0392B;
--red-soft: #FBE0DC;
--amber: #B7791F;
--amber-soft: #FDF1D6;
--teal: #0E7C86;
--teal-soft: #D6EEF1;
--violet: #5B4B8A;
--violet-soft: #E8E3F5;
}
* { box-sizing: border-box; }
body {
font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
background: var(--cream);
color: #202124;
font-size: 14px;
line-height: 1.5;
}
/* ============================================================ */
/* BRAND BAR */
/* ============================================================ */
.brand-bar {
background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
color: white;
display: flex; justify-content: space-between; align-items: center;
padding: 14px 32px;
border-bottom: 3px solid var(--gold);
gap: 24px;
}
.brand-left { display: flex; align-items: center; gap: 16px; }
.brand-crest {
width: 46px; height: 46px;
border-radius: 8px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
color: var(--navy-deep);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 18px; letter-spacing: 1px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
flex-shrink: 0;
}
.brand-logo {
height: 46px; width: auto; flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
font-size: 17px; font-weight: 700;
letter-spacing: .3px; line-height: 1.15;
color: #FFFFFF;
}
.brand-tagline {
color: var(--gold-light); font-size: 11px;
letter-spacing: 1.6px; text-transform: uppercase;
margin-top: 3px; font-weight: 500;
}
.brand-right {
display: flex; align-items: center; gap: 12px;
font-size: 12px; color: #C9D6E4;
}
.brand-date, .brand-user { white-space: nowrap; }
.brand-divider { color: var(--gold); font-weight: bold; }
.brand-logout {
color: var(--gold-light); text-decoration: none;
padding: 6px 14px; border: 1px solid rgba(184,147,90,.5);
border-radius: 6px; font-weight: 600; font-size: 11px;
transition: all .15s;
}
.brand-logout:hover {
background: var(--gold); color: var(--navy-deep);
border-color: var(--gold); text-decoration: none;
}
/* ============================================================ */
/* MAIN NAV */
/* ============================================================ */
.main-nav {
background: var(--navy);
padding: 0 24px;
display: flex; flex-wrap: wrap; gap: 2px;
border-bottom: 1px solid var(--navy-deep);
box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.main-nav a {
color: #C9D6E4; text-decoration: none;
padding: 12px 16px;
font-size: 13px; font-weight: 500;
border-bottom: 2px solid transparent;
transition: all .15s;
white-space: nowrap;
}
.main-nav a:hover {
color: white;
background: var(--navy-mid);
text-decoration: none;
}
.main-nav a.active {
color: var(--gold);
border-bottom-color: var(--gold);
background: var(--navy-mid);
}
/* ============================================================ */
/* MAIN CONTENT */
/* ============================================================ */
main {
max-width: 1280px;
margin: 28px auto 48px;
padding: 0 28px;
}
h1 {
color: var(--navy);
font-size: 24px;
margin: 0 0 20px;
font-weight: 700;
letter-spacing: -.2px;
}
h2 {
color: var(--navy);
font-size: 15px;
margin: 32px 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--gold-pale);
font-weight: 700;
letter-spacing: .2px;
}
h3 {
color: var(--navy);
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: .6px;
margin: 0 0 12px;
}
.page-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px;
gap: 16px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
/* ============================================================ */
/* TABLES */
/* ============================================================ */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
thead { background: var(--navy-light); color: white; }
th {
text-align: left; padding: 11px 14px;
font-weight: 600; font-size: 11px;
text-transform: uppercase; letter-spacing: .5px;
}
td {
padding: 10px 14px;
border-top: 1px solid var(--border-cool);
vertical-align: middle;
}
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: #F5F0E5; }
td.right, th.right { text-align: right; }
/* Links */
a { color: var(--teal); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
.back {
display: inline-block; margin-bottom: 12px;
color: var(--slate); font-size: 13px;
text-decoration: none;
}
.back:hover { color: var(--navy); text-decoration: none; }
/* ============================================================ */
/* STATUS PILLS */
/* ============================================================ */
.pill {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: .2px;
}
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-navy { background: var(--navy); color: white; }
.pill-plain { background: #EEF2F6; color: var(--slate); }
.pill-gold { background: var(--gold-pale); color: #8B6F37; }
/* ============================================================ */
/* FILTERS */
/* ============================================================ */
.filters {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 16px; align-items: center;
}
.filters input, .filters select {
padding: 9px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px; background: var(--paper);
transition: border-color .15s;
}
.filters input:focus, .filters select:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
.filters button {
padding: 9px 20px; border: 0;
background: var(--navy); color: white;
border-radius: 8px; cursor: pointer;
font-weight: 600; font-size: 13px;
}
.filters button:hover { background: var(--navy-mid); }
.filters .reset { color: var(--slate); font-size: 13px; margin-left: 4px; }
/* ============================================================ */
/* BUTTONS */
/* ============================================================ */
.btn {
padding: 10px 20px; border: 0; border-radius: 8px;
font-weight: 600; font-size: 13px; cursor: pointer;
display: inline-block; text-decoration: none;
transition: all .15s;
}
.btn-primary {
background: var(--navy); color: white;
}
.btn-primary:hover {
background: var(--navy-mid); color: white;
text-decoration: none;
box-shadow: 0 2px 8px rgba(15,44,76,.2);
}
.btn-danger { background: var(--red); color: white; }
.btn-danger:hover { background: #A93226; }
.btn-court { background: #8B1A1A; color: white; }
.btn-court:hover { background: #6D1414; color: white; text-decoration: none; }
.btn-ghost {
background: transparent; color: var(--slate);
border: 1px solid var(--border);
}
.btn-ghost:hover {
background: var(--gold-pale); color: var(--navy);
border-color: var(--gold); text-decoration: none;
}
.btn-ghost-inline {
color: var(--slate); font-size: 12px; text-decoration: none;
padding: 5px 12px;
border: 1px solid var(--border); border-radius: 6px;
white-space: nowrap; font-weight: 500;
}
.btn-ghost-inline:hover {
background: var(--gold-pale);
color: var(--navy); text-decoration: none;
border-color: var(--gold);
}
.head-actions { display: flex; gap: 10px; align-items: center; }
.action-row { display: flex; gap: 12px; margin: 8px 0 24px; flex-wrap: wrap; }
/* ============================================================ */
/* DASHBOARD KPI CARDS */
/* ============================================================ */
.kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px; margin-bottom: 32px;
}
.kpi {
background: var(--paper);
border: 1px solid var(--border);
border-top: 3px solid var(--navy);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
transition: transform .1s, box-shadow .15s;
}
.kpi:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(15,44,76,.08);
}
.kpi.accent-green { border-top-color: var(--green); }
.kpi.accent-red { border-top-color: var(--red); }
.kpi.accent-amber { border-top-color: var(--amber); }
.kpi.accent-coral { border-top-color: var(--red); }
.kpi.accent-gold { border-top-color: var(--gold); }
.kpi .label {
color: var(--slate); font-size: 11px;
text-transform: uppercase; letter-spacing: .8px;
font-weight: 600;
}
.kpi .value {
color: var(--navy); font-size: 30px; font-weight: 700;
margin-top: 6px; line-height: 1.05;
}
/* ============================================================ */
/* CARDS */
/* ============================================================ */
.card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
padding: 22px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.grid-2 {
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px; margin-bottom: 24px;
}
dl {
margin: 0; display: grid;
grid-template-columns: 130px 1fr;
gap: 8px 14px;
}
dt { color: var(--slate); font-size: 12px; }
dd { margin: 0; font-weight: 500; }
/* ============================================================ */
/* BANNERS */
/* ============================================================ */
.banner {
padding: 13px 20px; border-radius: 8px;
font-size: 13px; margin-bottom: 20px;
border-left: 4px solid transparent;
font-weight: 500;
}
.banner-success {
background: var(--green-soft); color: var(--green);
border-left-color: var(--green);
}
.banner-warn {
background: var(--amber-soft); color: var(--amber);
border-left-color: var(--amber);
}
.banner-info {
background: var(--teal-soft); color: var(--teal);
border-left-color: var(--teal);
}
.banner-info a { color: var(--teal); font-weight: 600; }
.banner-court {
background: var(--red-soft); color: #8B1A1A;
border-left-color: #8B1A1A;
}
.banner-court a { color: #8B1A1A; text-decoration: underline; }
/* ============================================================ */
/* ACTION CARDS (vacate, delete, etc) */
/* ============================================================ */
.action-card {
background: var(--paper);
border: 1px solid var(--border);
border-left: 4px solid var(--red);
border-radius: 10px;
padding: 22px;
margin-bottom: 24px;
}
.action-card h3 { color: var(--red); margin: 0 0 6px; }
.action-card .muted { margin: 0 0 16px; }
/* ============================================================ */
/* FORMS (renew / new lease / agreement / tenant) */
/* ============================================================ */
.renew-form fieldset {
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 22px 22px;
margin: 0 0 20px;
background: var(--paper);
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.renew-form legend {
color: var(--gold);
font-weight: 800;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 0 10px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
}
.renew-form label {
display: block; font-size: 12px; color: var(--slate);
font-weight: 600; letter-spacing: .2px;
}
.renew-form input, .renew-form select {
width: 100%; padding: 10px 14px; margin-top: 5px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; background: var(--paper);
transition: border-color .15s, box-shadow .15s;
}
.renew-form input:focus, .renew-form select:focus {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
.renew-form input.readonly {
background: var(--row-alt); color: var(--slate);
}
.form-actions {
display: flex; justify-content: flex-end; gap: 12px;
margin-top: 20px;
}
.rent-preview {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px; margin-bottom: 20px;
background: var(--gold-pale);
border-left: 3px solid var(--gold);
border-radius: 8px; font-size: 14px;
}
.rent-preview strong { color: var(--navy); font-size: 16px; }
#preview-arrow { color: var(--slate); margin: 0 4px; }
.radio-row { display: flex; gap: 24px; margin-bottom: 16px; }
.radio-row label.radio {
display: flex; align-items: center; gap: 8px;
font-size: 14px; color: #202124; cursor: pointer;
font-weight: 500;
}
.radio-row input[type="radio"] {
width: auto; margin: 0; accent-color: var(--navy);
}
.toggle-block { padding-top: 4px; }
.toggle-block.hidden { display: none; }
/* ============================================================ */
/* STATUS DROPDOWNS */
/* ============================================================ */
.inline { display: inline; }
.status-sel {
padding: 5px 24px 5px 10px;
border-radius: 999px; border: 1px solid transparent;
font-size: 11px; font-weight: 700;
cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
letter-spacing: .3px;
}
.status-pending { background-color: #F2F6FB; color: var(--slate); }
.status-cleared { background-color: var(--green-soft); color: var(--green); }
.status-bounced { background-color: var(--red-soft); color: var(--red); }
.status-replaced { background-color: var(--violet-soft); color: var(--violet); }
.opay-pending { background-color: var(--amber-soft); color: var(--amber); }
.opay-cleared { background-color: var(--green-soft); color: var(--green); }
.opay-bounced { background-color: var(--red-soft); color: var(--red); }
.opay-cancelled { background-color: #EEF2F6; color: var(--slate); }
.court-open { background-color: var(--red-soft); color: #8B1A1A; }
.court-hearing { background-color: var(--amber-soft); color: var(--amber); }
.court-won { background-color: var(--green-soft); color: var(--green); }
.court-lost { background-color: #EEF2F6; color: var(--slate); }
.court-settled { background-color: var(--teal-soft); color: var(--teal); }
/* ============================================================ */
/* ADD CHEQUE / ADD COST EXPANDERS */
/* ============================================================ */
.add-cheque {
margin-top: 16px;
background: var(--row-alt);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0 22px;
}
.add-cheque[open] { padding-bottom: 20px; }
.add-cheque summary {
cursor: pointer; padding: 15px 0;
font-weight: 700; color: var(--gold);
font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
list-style: none;
display: flex; align-items: center; gap: 10px;
}
.add-cheque summary::-webkit-details-marker { display: none; }
.add-cheque summary::before {
content: "+";
display: inline-block;
width: 22px; height: 22px; line-height: 20px;
text-align: center;
background: var(--gold); color: var(--navy-deep);
border-radius: 6px;
font-weight: 800; font-size: 15px;
}
.add-cheque[open] summary::before { content: "−"; }
.cheque-form .form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px; margin-bottom: 16px;
}
.cheque-form label {
display: block; font-size: 12px; color: var(--slate);
font-weight: 600;
}
.cheque-form input, .cheque-form select {
width: 100%; padding: 9px 12px; margin-top: 5px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; background: var(--paper);
}
.cheque-form input:focus, .cheque-form select:focus {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
/* ============================================================ */
/* PDC SCHEDULE */
/* ============================================================ */
.pdc-toolbar {
display: flex; gap: 10px; align-items: center;
margin-bottom: 12px;
}
.pdc-toolbar .btn-ghost { padding: 6px 14px; font-size: 12px; }
.pdc-toolbar .muted { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--gold); }
.pdc-table {
width: 100%; border-collapse: collapse; font-size: 13px;
background: var(--paper); border-radius: 8px; overflow: hidden;
border: 1px solid var(--border);
}
.pdc-table thead { background: var(--row-alt); }
.pdc-table th {
padding: 9px 12px; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .5px;
color: var(--slate); text-align: left;
border-bottom: 1px solid var(--border);
}
.pdc-table td { padding: 7px 10px; border-top: 1px solid var(--border-cool); }
.pdc-table input {
width: 100%; padding: 7px 10px; font-size: 13px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--paper); margin: 0;
}
.pdc-table input:focus {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(184,147,90,.15);
}
/* ============================================================ */
/* ICON BUTTONS */
/* ============================================================ */
.icon-btn {
background: transparent; border: 0; cursor: pointer;
color: var(--red); font-size: 14px; font-weight: 700;
padding: 5px 9px; border-radius: 6px;
transition: background .15s;
}
.icon-btn:hover { background: var(--red-soft); }
/* ============================================================ */
/* CALENDAR */
/* ============================================================ */
.cal-kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px; margin-bottom: 20px;
}
.cal-kpi {
background: var(--paper);
border: 1px solid var(--border);
border-top: 3px solid var(--navy-light);
border-radius: 10px;
padding: 18px 22px;
text-decoration: none; color: inherit;
transition: box-shadow .15s, transform .1s;
display: block;
}
.cal-kpi:hover {
box-shadow: 0 6px 18px rgba(15,44,76,.1);
transform: translateY(-2px);
text-decoration: none;
}
.cal-kpi.active { border-top-width: 4px; }
.cal-kpi .lbl {
color: var(--slate); font-size: 11px;
text-transform: uppercase; letter-spacing: .8px;
font-weight: 700;
}
.cal-kpi .n {
color: var(--navy); font-size: 32px; font-weight: 700;
line-height: 1.05; margin-top: 6px;
}
.cal-kpi .amt { color: var(--slate); font-size: 12px; margin-top: 3px; font-weight: 500; }
.cal-kpi.kpi-today { border-top-color: var(--teal); }
.cal-kpi.kpi-today .n { color: var(--teal); }
.cal-kpi.kpi-week { border-top-color: var(--green); }
.cal-kpi.kpi-week .n { color: var(--green); }
.cal-kpi.kpi-overdue { border-top-color: var(--red); }
.cal-kpi.kpi-overdue .n { color: var(--red); }
.cal-kpi.kpi-court { border-top-color: #8B1A1A; }
.cal-kpi.kpi-court .n { color: #8B1A1A; }
.cal-kpi.kpi-hearing { border-top-color: var(--amber); }
.cal-kpi.kpi-hearing .n{ color: var(--amber); }
.cal-kpi.kpi-resolved { border-top-color: var(--green); }
.cal-kpi.kpi-resolved .n { color: var(--green); }
.cal-kpi.kpi-upcoming { border-top-color: var(--violet); }
.cal-kpi.kpi-upcoming .n { color: var(--violet); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
padding: 7px 16px;
border: 1px solid var(--border);
background: var(--paper);
border-radius: 999px;
font-size: 12px; color: var(--slate);
text-decoration: none;
font-weight: 600;
transition: all .15s;
}
.chip:hover {
background: var(--gold-pale);
color: var(--navy);
border-color: var(--gold);
text-decoration: none;
}
.chip.active {
background: var(--navy); color: white;
border-color: var(--navy);
}
.chip.overdue { color: var(--red); border-color: var(--red-soft); }
.chip.overdue.active { background: var(--red); border-color: var(--red); color: white; }
.cal-window {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
padding: 14px 22px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 20px;
font-size: 13px;
}
.cal-window .totals { display: flex; gap: 8px; flex-wrap: wrap; }
.week-block {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden; margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.week-block.this-week {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(184,147,90,.18);
}
.week-head {
display: flex; justify-content: space-between; align-items: center;
padding: 13px 22px;
background: var(--navy-light); color: white;
font-size: 13px;
}
.week-block.this-week .week-head {
background: linear-gradient(135deg, #B8935A 0%, #D4B37F 100%);
color: var(--navy-deep);
}
.week-head .label { font-weight: 700; letter-spacing: .3px; }
.week-head .summary { opacity: .85; margin-left: 8px; font-size: 12px; }
.week-head .total { font-weight: 700; font-size: 15px; }
.week-table {
width: 100%; border-collapse: collapse; font-size: 13px;
border-radius: 0; border: 0;
}
.week-table thead { background: var(--row-alt); color: var(--slate); }
.week-table th {
padding: 9px 16px; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .5px;
border-bottom: 1px solid var(--border);
}
.week-table td { padding: 10px 16px; border-top: 1px solid var(--border-cool); }
.week-table tr:hover { background: var(--gold-pale); }
.week-table tr:first-child td { border-top: 0; }
.row-cleared { opacity: .55; }
.row-bounced { background: #FDF2F0 !important; }
.row-late { background: #FEFAF0 !important; }
.row-late .dow { color: var(--amber); font-weight: 700; }
.dow { font-weight: 700; color: var(--navy); }
/* ============================================================ */
/* BUILDING DETAIL */
/* ============================================================ */
.bldg-section { margin-bottom: 40px; }
.bldg-section h2 {
font-size: 15px; color: var(--navy);
padding-bottom: 8px; border-bottom: 2px solid var(--gold-pale);
margin-bottom: 18px;
}
.bldg-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px; margin-bottom: 26px;
}
.bldg-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
padding: 22px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.bldg-card h3 {
margin: 0 0 14px; color: var(--gold);
font-size: 11px; text-transform: uppercase;
letter-spacing: 1.2px; font-weight: 800;
}
.bldg-card dl { grid-template-columns: 120px 1fr; }
.pnl-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px; margin-bottom: 28px;
}
.pnl-stat {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 22px;
border-top: 3px solid var(--navy-light);
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.pnl-stat.income { border-top-color: var(--green); }
.pnl-stat.master { border-top-color: var(--red); }
.pnl-stat.costs { border-top-color: var(--amber); }
.pnl-stat.margin { border-top-color: var(--gold); }
.pnl-stat .lbl {
color: var(--slate); font-size: 11px;
text-transform: uppercase; letter-spacing: .8px;
font-weight: 700;
}
.pnl-stat .val {
color: var(--navy); font-size: 24px; font-weight: 700; margin-top: 6px;
}
.pnl-stat .sub { color: var(--slate); font-size: 11px; margin-top: 3px; }
.cost-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px; margin-bottom: 22px;
}
.cost-chip {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
border-top: 3px solid var(--amber);
}
.cost-chip .cat {
color: var(--slate); font-size: 11px;
text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
}
.cost-chip .amt {
color: var(--navy); font-size: 19px; font-weight: 700; margin-top: 4px;
}
.cost-chip .muted { font-size: 11px; }
/* ============================================================ */
/* REPORTS */
/* ============================================================ */
.report-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px; margin-top: 22px;
}
.report-card {
display: block; text-decoration: none; color: inherit;
background: var(--paper);
border: 1px solid var(--border);
border-left: 4px solid var(--gold);
border-radius: 10px;
padding: 24px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
transition: box-shadow .15s, transform .1s;
}
.report-card:hover {
box-shadow: 0 8px 24px rgba(15,44,76,.12);
transform: translateY(-2px);
text-decoration: none;
}
.report-icon { font-size: 32px; margin-bottom: 10px; }
.report-title {
color: var(--navy); font-size: 17px; font-weight: 700;
margin-bottom: 6px;
}
.report-desc {
color: var(--slate); font-size: 13px; line-height: 1.55;
margin-bottom: 12px;
}
.report-stat { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.report-block {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden; margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.report-block-head {
display: flex; justify-content: space-between; align-items: center;
padding: 13px 22px;
background: var(--navy-light); color: white;
font-size: 13px;
}
.report-block-head .label { font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.report-block-head .summary { opacity: .85; margin-left: 8px; font-size: 12px; }
.report-block-head .total { font-weight: 700; font-size: 15px; }
.report-table {
width: 100%; border-collapse: collapse; font-size: 13px;
border-radius: 0; border: 0;
}
.report-table thead { background: var(--row-alt); color: var(--slate); }
.report-table th {
padding: 9px 16px; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .5px;
border-bottom: 1px solid var(--border);
}
.report-table td { padding: 10px 16px; border-top: 1px solid var(--border-cool); }
.report-table tr:hover { background: var(--gold-pale); }
.report-grand-total {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 26px;
background: var(--navy); color: white;
border-radius: 10px; font-size: 14px; margin-bottom: 26px;
border-left: 4px solid var(--gold);
}
.report-grand-total .label { font-weight: 700; font-size: 15px; }
.report-grand-total .muted { color: var(--gold-light); margin-left: 8px; }
.report-grand-total .total { font-weight: 700; font-size: 22px; }
.report-total-row {
background: var(--gold-pale);
border-top: 2px solid var(--navy);
}
.report-total-row td { padding: 14px 16px; font-size: 14px; }
/* ============================================================ */
/* EMPTY STATES */
/* ============================================================ */
.empty-state {
text-align: center; padding: 60px 24px;
background: var(--paper);
border: 1px dashed var(--border);
border-radius: 10px;
}
.empty-state .empty-icon { font-size: 44px; margin-bottom: 10px; }
.empty-state h3 {
color: var(--navy); margin: 0 0 6px;
text-transform: none; letter-spacing: 0; font-size: 16px;
}
.empty-state .muted { margin: 0 0 20px; }
/* ============================================================ */
/* FOOTER */
/* ============================================================ */
.site-footer {
background: var(--navy-deep); color: #C9D6E4;
padding: 26px 32px 22px;
margin-top: 60px;
border-top: 3px solid var(--gold);
font-size: 12px;
}
.footer-brand { font-size: 13px; margin-bottom: 8px; }
.footer-brand .muted { color: var(--gold-light); }
.footer-meta {
display: flex; gap: 8px; flex-wrap: wrap;
color: #8A96A5; margin-bottom: 10px;
}
.footer-note {
color: #5D6C80; font-size: 11px;
border-top: 1px solid #17395C;
padding-top: 10px;
display: flex; justify-content: space-between; flex-wrap: wrap;
}
/* ============================================================ */
/* LOGIN */
/* ============================================================ */
.login-page {
background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, #1F4E79 100%);
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
margin: 0; padding: 20px;
position: relative;
}
.login-page::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(184,147,90,.12) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(184,147,90,.08) 0%, transparent 40%);
pointer-events: none;
}
.login-card {
background: var(--paper);
padding: 44px 40px 36px;
border-radius: 14px;
width: 400px; max-width: 100%;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
border-top: 4px solid var(--gold);
position: relative; z-index: 1;
}
.login-crest {
width: 60px; height: 60px;
margin: 0 auto 16px;
border-radius: 12px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
color: var(--navy-deep);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 22px; letter-spacing: 1px;
box-shadow: 0 6px 18px rgba(184,147,90,.35);
}
.login-logo {
display: block; margin: 0 auto 16px;
max-width: 120px; max-height: 80px;
}
.login-card h1 {
margin: 0 0 4px; font-size: 19px; color: var(--navy);
text-align: center; font-weight: 700;
}
.login-card .login-tagline {
color: var(--gold); font-size: 11px;
letter-spacing: 1.6px; text-transform: uppercase;
text-align: center; margin: 0 0 28px;
font-weight: 600;
}
.login-card .muted { font-size: 12px; text-align: center; margin: 0 0 20px; }
.login-card label {
display: block; margin-bottom: 16px;
font-size: 12px; color: var(--slate); font-weight: 600;
letter-spacing: .3px;
}
.login-card input {
width: 100%; padding: 12px 14px; margin-top: 6px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 14px;
transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.18);
}
.login-card button {
width: 100%; padding: 13px;
border: 0; background: var(--navy);
color: white; border-radius: 8px;
font-weight: 700; cursor: pointer;
font-size: 14px; margin-top: 8px;
letter-spacing: .5px;
transition: background .15s;
}
.login-card button:hover { background: var(--navy-mid); }
.login-card .error {
background: var(--red-soft); color: var(--red);
padding: 11px 14px; border-radius: 8px;
font-size: 13px; margin-bottom: 18px;
border-left: 3px solid var(--red);
}
/* ============================================================ */
/* TEXT HELPERS */
/* ============================================================ */
.muted { color: var(--slate); }
.text-green { color: var(--green); font-weight: 600; }
.text-red { color: var(--red); font-weight: 600; }
.hint {
font-size: 11px; color: var(--slate); margin-top: 6px;
font-weight: 400;
}
.hint a { color: var(--teal); }
/* ============================================================ */
/* PRINT HEADER (hidden on screen) */
/* ============================================================ */
.print-brand-header { display: none; }
/* ============================================================ */
/* PRINT */
/* ============================================================ */
@media print {
body {
background: white;
font-size: 10.5px;
color: #000;
}
.no-print,
.main-nav,
.brand-bar,
.site-footer,
.head-actions,
.filters,
.chips,
.banner,
.btn,
.btn-ghost,
.btn-primary,
.btn-danger,
.btn-court,
.icon-btn {
display: none !important;
}
main { max-width: 100%; margin: 0; padding: 0; }
/* Company header on the printed page */
.print-brand-header {
display: flex !important;
justify-content: space-between; align-items: flex-start;
border-bottom: 2.5px solid #0F2C4C;
padding-bottom: 10px; margin-bottom: 14px;
}
.print-brand-left { display: flex; align-items: center; gap: 12px; }
.print-crest {
width: 44px; height: 44px; border-radius: 6px;
background: #0F2C4C; color: #B8935A;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-logo { height: 44px; width: auto; }
.print-name {
font-size: 15px; font-weight: 700; color: #0F2C4C;
}
.print-tagline {
color: #B8935A; font-size: 10px;
letter-spacing: 1.4px; text-transform: uppercase;
font-weight: 600;
}
.print-brand-right {
text-align: right; font-size: 10px; color: #5A6B7B;
line-height: 1.45;
}
.print-title {
display: block !important;
margin-bottom: 16px;
}
.print-title h1 { margin: 0 0 4px; font-size: 17px; }
.print-title p { margin: 0; color: #5A6B7B; font-size: 10.5px; }
h1 { font-size: 17px; color: #0F2C4C; }
h2 { font-size: 12px; color: #0F2C4C;
border-bottom: 1px solid #B8935A; padding-bottom: 4px; }
a { color: #202124; text-decoration: none; }
table { border-color: #999; font-size: 10px; }
thead {
background: #EEF2F6 !important; color: #0F2C4C !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
th { padding: 6px 8px; font-size: 9px; }
td { padding: 6px 8px; }
.report-block { page-break-inside: avoid; border-color: #999; }
.report-block-head {
background: #EEF2F6 !important; color: #0F2C4C !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
padding: 8px 14px;
}
.report-block-head .summary { color: #5A6B7B !important; }
.report-grand-total {
background: #EEF2F6 !important; color: #0F2C4C !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
border-left: 3px solid #B8935A;
}
.report-grand-total .muted { color: #5A6B7B !important; }
.pnl-summary, .cal-kpis {
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
.pnl-stat, .cal-kpi {
padding: 10px 12px !important;
border-width: 1px !important;
box-shadow: none !important;
}
.pnl-stat .val, .cal-kpi .n { font-size: 15px !important; }
.pnl-stat .lbl, .cal-kpi .lbl { font-size: 9px !important; }
}
/* ============================================================ */
/* LOGO CONTAINERS — make the logo pop on navy backgrounds */
/* ============================================================ */
.brand-logo-box {
background: #FFFFFF;
padding: 8px 14px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,.18),
inset 0 0 0 1px rgba(184,147,90,.15);
flex-shrink: 0;
min-width: 76px; min-height: 60px;
}
.brand-logo {
height: 44px;
width: auto;
max-width: 160px;
display: block;
object-fit: contain;
}
.login-logo-box {
background: #FFFFFF;
padding: 16px 26px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 4px 16px rgba(0,0,0,.08),
inset 0 0 0 1px rgba(184,147,90,.15);
max-width: 100%;
width: fit-content;
}
.login-logo {
max-height: 72px;
max-width: 220px;
width: auto; height: auto;
display: block;
object-fit: contain;
}
.print-logo-box {
background: #FFFFFF;
padding: 6px 10px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
flex-shrink: 0;
}
.print-logo {
height: 40px;
width: auto;
max-width: 130px;
object-fit: contain;
}
/* ============================================================ */
/* LOGO SIZE OVERRIDE — doubles the logo everywhere */
/* ============================================================ */
.brand-bar {
padding: 16px 32px;
}
.brand-logo-box {
background: #FFFFFF;
padding: 12px 22px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 14px rgba(0,0,0,.22),
inset 0 0 0 1px rgba(184,147,90,.18);
flex-shrink: 0;
min-height: 112px;
min-width: 160px;
}
.brand-logo {
height: 88px;
width: auto;
max-width: 240px;
display: block;
object-fit: contain;
}
.brand-name {
font-size: 21px;
font-weight: 700;
letter-spacing: .3px;
line-height: 1.2;
}
.brand-tagline {
font-size: 12px;
letter-spacing: 1.8px;
margin-top: 5px;
font-weight: 600;
}
.login-logo-box {
background: #FFFFFF;
padding: 20px 32px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 6px 24px rgba(0,0,0,.12),
inset 0 0 0 1px rgba(184,147,90,.18);
max-width: 100%;
width: fit-content;
}
.login-logo {
max-height: 140px;
max-width: 320px;
width: auto; height: auto;
display: block;
object-fit: contain;
}
.print-logo-box {
padding: 6px 12px;
min-height: 56px;
}
.print-logo {
height: 60px;
width: auto;
max-width: 180px;
object-fit: contain;
}
@media (max-width: 640px) {
.brand-logo { height: 56px; max-width: 160px; }
.brand-logo-box { padding: 8px 14px; min-height: 72px; min-width: 120px; }
.brand-name { font-size: 15px; }
.brand-tagline { font-size: 10px; letter-spacing: 1.2px; }
.brand-bar { padding: 12px 16px; }
}
/* ============================================================ */
/* LOGO — no box, big, with glow */
/* ============================================================ */
.brand-bar {
padding: 22px 32px !important;
}
.brand-logo-box {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
min-width: auto !important;
min-height: auto !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.brand-logo {
height: 130px !important;
width: auto !important;
max-width: 280px !important;
transform: scale(1.15);
filter: drop-shadow(0 0 24px rgba(255,255,255,.35))
drop-shadow(0 2px 8px rgba(0,0,0,.45));
display: block;
}
.brand-name {
font-size: 24px !important;
font-weight: 700;
letter-spacing: .3px;
line-height: 1.2;
}
.brand-tagline {
font-size: 13px !important;
letter-spacing: 2px !important;
margin-top: 6px !important;
font-weight: 600;
}
.login-logo-box {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 auto 20px !important;
overflow: hidden;
}
.login-logo {
max-height: 180px !important;
max-width: 360px !important;
transform: scale(1.15);
filter: drop-shadow(0 6px 20px rgba(0,0,0,.3));
}
.print-logo-box {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
.print-logo {
height: 80px !important;
max-width: 220px !important;
transform: scale(1.1);
}
@media (max-width: 640px) {
.brand-logo { height: 80px !important; max-width: 180px !important; }
.brand-name { font-size: 17px !important; }
.brand-tagline { font-size: 10px !important; letter-spacing: 1.2px !important; }
.brand-bar { padding: 14px 16px !important; }
.login-logo { max-height: 120px !important; }
}
/* ============================================================ */
/* HEADER + NAV — light on left, dense on right */
/* ============================================================ */
.brand-bar {
background-color: #0F2C4C !important;
background-image:
repeating-linear-gradient(
45deg,
rgba(255,255,255,.028) 0px,
rgba(255,255,255,.028) 1px,
transparent 1px,
transparent 12px
),
repeating-linear-gradient(
-45deg,
rgba(184,147,90,.048) 0px,
rgba(184,147,90,.048) 1px,
transparent 1px,
transparent 12px
),
radial-gradient(ellipse at 12% 40%,
rgba(255,255,255,.06) 0%,
transparent 55%),
linear-gradient(135deg,
#1F4E79 0%,
#17395C 35%,
#0F2C4C 65%,
#08192E 100%
) !important;
}
.main-nav {
background-color: #0B2338 !important;
background-image:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.022) 0px,
rgba(255,255,255,.022) 1px,
transparent 1px,
transparent 14px
),
linear-gradient(135deg,
#17395C 0%,
#0F2C4C 55%,
#0B2338 100%
) !important;
}
.main-nav a {
background-color: transparent !important;
}
.main-nav a.active {
background-color: rgba(184,147,90,.12) !important;
border-bottom-color: #B8935A !important;
}
/* ============================================================ */
/* HEADER — half size */
/* ============================================================ */
.brand-bar {
padding: 10px 24px !important;
}
.brand-left {
gap: 14px !important;
}
.brand-logo-box {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
min-width: auto !important;
min-height: auto !important;
overflow: visible !important;
}
.brand-logo {
height: 68px !important;
width: auto !important;
max-width: 180px !important;
transform: scale(1.1);
filter:
drop-shadow(0 0 4px rgba(255,255,255,.9))
drop-shadow(0 0 12px rgba(255,255,255,.55))
drop-shadow(0 2px 6px rgba(0,0,0,.4)) !important;
}
.brand-name {
font-size: 15px !important;
font-weight: 700;
letter-spacing: .3px;
line-height: 1.15;
}
.brand-tagline {
font-size: 9px !important;
letter-spacing: 1.4px !important;
margin-top: 3px !important;
font-weight: 600;
}
.brand-right {
font-size: 11px !important;
gap: 10px !important;
}
.brand-logout {
padding: 5px 11px !important;
font-size: 10px !important;
}
.main-nav {
padding: 0 18px !important;
}
.main-nav a {
padding: 9px 13px !important;
font-size: 12px !important;
}
@media (max-width: 640px) {
.brand-bar { padding: 8px 14px !important; }
.brand-logo { height: 44px !important; max-width: 130px !important; }
.brand-name { font-size: 13px !important; }
.brand-tagline { font-size: 8px !important; letter-spacing: 1px !important; }
.main-nav a { padding: 8px 10px !important; font-size: 11px !important; }
}
/* ============================================================ */
/* Fixed 90px header — logo overflows gracefully */
/* ============================================================ */
.brand-bar {
padding: 6px 24px !important;
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
}
.brand-left {
gap: 18px !important;
align-items: center !important;
overflow: visible !important;
}
.brand-logo-box {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
min-height: auto !important;
min-width: auto !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
}
.brand-logo {
height: 130px !important;
width: auto !important;
max-width: 260px !important;
margin-top: -25px !important;
margin-bottom: -25px !important;
filter:
drop-shadow(0 0 5px rgba(255,255,255,.9))
drop-shadow(0 0 14px rgba(255,255,255,.5))
drop-shadow(0 3px 8px rgba(0,0,0,.45)) !important;
display: block;
}
.brand-name { font-size: 15px !important; line-height: 1.15 !important; }
.brand-tagline { font-size: 9px !important; letter-spacing: 1.4px !important; margin-top: 3px !important; }
.brand-right { font-size: 11px !important; gap: 10px !important; }
.brand-logout { padding: 5px 11px !important; font-size: 10px !important; }
/* ============================================================ */
/* USERS / ROLES */
/* ============================================================ */
.role-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
vertical-align: middle;
margin-left: 6px;
}
.role-admin { background: rgba(184,147,90,.22); color: #D4B37F; }
.role-staff { background: rgba(255,255,255,.12); color: #C9D6E4; }
.role-you { background: rgba(14,124,134,.25); color: #7FE2EC; }
.brand-link {
color: #D6E4F0;
text-decoration: none;
padding: 5px 11px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
transition: all .15s;
}
.brand-link:hover {
background: rgba(255,255,255,.08);
color: white;
text-decoration: none;
}
/* ============================================================ */
/* DAILY CASH REPORT */
/* ============================================================ */
.daily-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.daily-kpi {
background: white;
border: 1px solid #E5DFD0;
border-radius: 10px;
padding: 18px 22px;
border-top: 3px solid #1F4E79;
box-shadow: 0 1px 3px rgba(15,44,76,.04);
}
.daily-kpi.income { border-top-color: #1B7F5C; }
.daily-kpi.expense { border-top-color: #C0392B; }
.daily-kpi.positive { border-top-color: #B8935A; background: #FBF8F2; }
.daily-kpi.negative { border-top-color: #C0392B; background: #FDF6F5; }
.daily-kpi.neutral { border-top-color: #5B4B8A; }
.daily-kpi .lbl {
color: #5A6B7B; font-size: 11px;
text-transform: uppercase; letter-spacing: .8px;
font-weight: 700;
}
.daily-kpi .val {
color: #0F2C4C; font-size: 26px; font-weight: 700;
margin-top: 6px; line-height: 1.1;
}
.daily-kpi.income .val { color: #1B7F5C; }
.daily-kpi.expense .val { color: #C0392B; }
.daily-kpi.positive .val { color: #8B6F37; }
.daily-kpi.negative .val { color: #C0392B; }
.daily-kpi .sub {
color: #5A6B7B; font-size: 11px; margin-top: 4px;
}
.daily-section { margin-bottom: 36px; }
.daily-section h2 {
font-size: 14px;
display: flex; align-items: baseline; gap: 8px;
}
.daily-total-row {
background: #F2F6FB;
border-top: 2px solid #0F2C4C;
}
.daily-total-row td { padding: 12px 16px; font-size: 13px; }
.day-summary {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 28px;
border-radius: 12px;
margin-bottom: 36px;
border-left: 5px solid #B8935A;
background: linear-gradient(90deg, #FBF8F2 0%, #FFFFFF 100%);
box-shadow: 0 2px 8px rgba(15,44,76,.05);
}
.day-summary.is-positive { border-left-color: #1B7F5C; }
.day-summary.is-negative { border-left-color: #C0392B; background: linear-gradient(90deg, #FDF6F5 0%, #FFFFFF 100%); }
.day-summary .summary-label {
color: #0F2C4C; font-size: 15px; font-weight: 700;
}
.day-summary .summary-sub {
color: #5A6B7B; font-size: 12px; margin-top: 2px;
}
.day-summary .summary-value {
color: #0F2C4C;
font-size: 28px; font-weight: 800;
letter-spacing: -.5px;
}
.day-summary.is-positive .summary-value { color: #1B7F5C; }
.day-summary.is-negative .summary-value { color: #C0392B; }
.month-grid-section { margin-top: 40px; }
.month-grid { font-size: 12.5px; }
.month-grid th { padding: 8px 14px; font-size: 10px; }
.month-grid td { padding: 8px 14px; }
.month-grid .row-today {
background: #FFF9E5 !important;
box-shadow: inset 3px 0 0 #B8935A;
}
.month-grid .row-selected {
background: #EEF5FC !important;
font-weight: 600;
}
.month-grid .row-selected.row-today {
background: #FFF3D6 !important;
}
.month-grid .row-weekend td:first-child { color: #8A96A5; }
.month-grid tfoot td { padding: 12px 14px; font-size: 13px; }
.month-nav {
display: inline-block;
padding: 2px 10px;
border: 1px solid #E5DFD0;
border-radius: 6px;
color: #5A6B7B;
text-decoration: none;
font-weight: 700;
font-size: 13px;
margin: 0 4px;
}
.month-nav:hover {
background: #FBF8F2;
color: #0F2C4C;
border-color: #B8935A;
text-decoration: none;
}
@media print {
.daily-kpis { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
.daily-kpi { padding: 10px 12px !important; box-shadow: none !important; }
.daily-kpi .val { font-size: 15px !important; }
.daily-kpi .lbl { font-size: 9px !important; }
.daily-kpi .sub { font-size: 9px !important; }
.day-summary { padding: 12px 20px !important; margin-bottom: 20px !important; }
.day-summary .summary-value { font-size: 20px !important; }
.daily-section { margin-bottom: 20px !important; page-break-inside: avoid; }
.month-grid { font-size: 10px !important; }
.month-grid th, .month-grid td { padding: 5px 8px !important; }
.month-nav { display: none; }
}
/* ============================================================ */
/* ACCOUNTING */
/* ============================================================ */
.pill-gold { background: #F5EFE2; color: #8B6F37; }
.row-muted { opacity: .55; font-style: italic; }
/* ============================================================ */
/* LEFT SIDEBAR LAYOUT */
/* ============================================================ */
:root {
--sidebar-w: 260px;
}
body { padding: 0; margin: 0; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: var(--sidebar-w);
background: linear-gradient(180deg, #08192E 0%, #0B2338 100%);
border-right: 3px solid #B8935A;
display: flex;
flex-direction: column;
overflow-y: auto;
z-index: 1000;
transition: transform .25s ease;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb {
background: rgba(184,147,90,.3); border-radius: 3px;
}
.sidebar-brand {
padding: 22px 20px 20px;
border-bottom: 1px solid rgba(184,147,90,.2);
display: flex; align-items: center; gap: 12px;
}
.sidebar-crest {
width: 44px; height: 44px;
background: linear-gradient(135deg, #B8935A 0%, #D4B37F 100%);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: #08192E; font-weight: 800; font-size: 17px;
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(184,147,90,.3);
}
.sidebar-logo {
max-height: 44px; max-width: 60px;
object-fit: contain; flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}
.sidebar-brand-text { min-width: 0; }
.sidebar-brand-name {
color: white; font-weight: 700; font-size: 13px; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-brand-tagline {
color: #B8935A; font-size: 9px;
letter-spacing: 1.2px; text-transform: uppercase;
font-weight: 600; margin-top: 3px;
}
.sidebar-nav {
flex: 1; padding: 14px 0;
display: flex; flex-direction: column;
}
.sidebar-link {
display: flex; align-items: center; gap: 12px;
padding: 11px 20px;
color: #C9D6E4; text-decoration: none;
font-size: 13px; font-weight: 500;
border-left: 3px solid transparent;
transition: all .12s;
}
.sidebar-link:hover {
background: rgba(184,147,90,.08);
color: white;
border-left-color: rgba(184,147,90,.5);
text-decoration: none;
}
.sidebar-link.active {
background: rgba(184,147,90,.15);
color: #D4B37F;
border-left-color: #B8935A;
font-weight: 700;
}
.sidebar-icon {
font-size: 15px; width: 20px; text-align: center;
flex-shrink: 0; opacity: .85;
}
.sidebar-link.active .sidebar-icon { opacity: 1; }
.sidebar-group { margin: 0; }
.sidebar-group-header {
display: flex; align-items: center; gap: 12px;
padding: 11px 20px;
color: #C9D6E4;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .6px;
cursor: pointer;
border-left: 3px solid transparent;
list-style: none;
transition: all .12s;
user-select: none;
}
.sidebar-group-header::-webkit-details-marker { display: none; }
.sidebar-group-header:hover {
background: rgba(184,147,90,.08);
color: white;
border-left-color: rgba(184,147,90,.5);
}
.sidebar-group-header.group-active {
color: #D4B37F;
border-left-color: #B8935A;
background: rgba(184,147,90,.08);
}
.sidebar-caret {
margin-left: auto; font-size: 9px;
opacity: .6; transition: transform .15s;
}
.sidebar-group:not([open]) .sidebar-caret {
transform: rotate(-90deg);
}
.sidebar-submenu {
padding: 4px 0;
display: flex; flex-direction: column;
}
.sidebar-sublink {
display: block;
padding: 8px 20px 8px 52px;
color: #A8B5C5; text-decoration: none;
font-size: 12.5px; font-weight: 500;
border-left: 3px solid transparent;
transition: all .12s;
}
.sidebar-sublink:hover {
background: rgba(184,147,90,.08);
color: white;
border-left-color: rgba(184,147,90,.4);
text-decoration: none;
}
.sidebar-sublink.active {
background: rgba(184,147,90,.15);
color: #D4B37F;
border-left-color: #B8935A;
font-weight: 700;
}
.sidebar-footer {
border-top: 1px solid rgba(184,147,90,.2);
padding: 16px 20px 18px;
}
.sidebar-user {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.sidebar-avatar {
width: 38px; height: 38px;
background: linear-gradient(135deg, #B8935A 0%, #D4B37F 100%);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #08192E; font-weight: 800; font-size: 15px;
flex-shrink: 0;
}
.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-name {
color: white; font-size: 12.5px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-role { margin-top: 3px; }
.sidebar-user-actions {
display: flex; flex-direction: column; gap: 6px;
}
.sidebar-user-actions a {
display: block;
padding: 7px 12px;
color: #A8B5C5; font-size: 11.5px; font-weight: 600;
text-decoration: none;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.08);
transition: all .12s;
text-align: center;
}
.sidebar-user-actions a:hover {
background: rgba(184,147,90,.15);
color: #D4B37F;
border-color: rgba(184,147,90,.4);
text-decoration: none;
}
main.with-sidebar {
margin-left: var(--sidebar-w);
max-width: none;
padding: 28px 32px 60px;
}
.sidebar-toggle {
display: none;
position: fixed; top: 14px; left: 14px;
z-index: 1100;
background: #0F2C4C;
color: #B8935A;
border: 1px solid rgba(184,147,90,.4);
border-radius: 8px;
width: 44px; height: 44px;
font-size: 20px; cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.3);
align-items: center; justify-content: center;
}
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
z-index: 999;
opacity: 0; transition: opacity .2s;
}
@media (max-width: 900px) {
.sidebar {
transform: translateX(-100%);
width: 280px;
}
body.sidebar-open .sidebar {
transform: translateX(0);
}
body.sidebar-open .sidebar-overlay {
display: block; opacity: 1;
}
.sidebar-toggle { display: flex; }
main.with-sidebar {
margin-left: 0;
padding: 72px 16px 24px;
}
}
@media print {
.sidebar,
.sidebar-toggle,
.sidebar-overlay { display: none !important; }
main.with-sidebar {
margin-left: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
}
/* ===================================================================
HRM + Aging
=================================================================== */
.hrm-title { font-size: 22px; margin: 0 0 4px; color: #1a2332; }
.hrm-sub { color: #6b7280; margin-bottom: 16px; font-size: 13px; }
.hrm-sub a { color: inherit; }
.hrm-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.hrm-kpi {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
padding: 12px 14px;
}
.hrm-kpi .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.hrm-kpi .v { font-size: 20px; font-weight: 600; margin-top: 4px; color: #1a2332; }
.hrm-kpi.kpi-good .v { color: #059669; }
.hrm-kpi.kpi-warn .v { color: #d97706; }
.hrm-kpi.kpi-bad .v { color: #dc2626; }
.hrm-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px; margin-bottom: 16px;
}
.hrm-tile {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px; background: #fff;
border: 1px solid #e5e7eb; border-radius: 8px;
text-decoration: none; color: #1a2332;
transition: border-color .15s, box-shadow .15s;
}
.hrm-tile:hover { border-color: #1a2332; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.hrm-tile .t { font-weight: 600; }
.hrm-tile .d { font-size: 12px; color: #6b7280; }
.hrm-toolbar {
display: flex; gap: 8px; flex-wrap: wrap; align-items: end;
background: #fff; padding: 12px; border: 1px solid #e5e7eb;
border-radius: 8px; margin-bottom: 16px;
}
.hrm-toolbar label {
display: flex; flex-direction: column; font-size: 12px;
color: #6b7280; gap: 4px;
}
.hrm-toolbar input, .hrm-toolbar select {
padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px;
font-size: 14px; min-width: 150px; font-family: inherit;
}
.hrm-card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
padding: 16px; margin-bottom: 16px;
}
.hrm-card h3 {
margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
letter-spacing: .04em; color: #6b7280; font-weight: 600;
}
.hrm-table {
width: 100%; border-collapse: collapse; background: #fff;
border: 1px solid #e5e7eb; border-radius: 8px;
overflow: hidden; margin-bottom: 16px;
}
.hrm-table th, .hrm-table td {
padding: 8px 10px; text-align: left; border-bottom: 1px solid #e5e7eb;
font-size: 13px;
}
.hrm-table th {
background: #f1f5f9; font-size: 11px; text-transform: uppercase;
letter-spacing: .03em; color: #6b7280;
}
.hrm-table td.num, .hrm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hrm-table tr:hover td { background: #fafbfc; }
.hrm-table tr.total-row td {
font-weight: 700; background: #f1f5f9;
border-top: 2px solid #1a2332;
}
.hrm-table a { color: inherit; }
.hrm-pill {
display: inline-block; padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600; line-height: 1.6;
}
.hrm-pill.ACTIVE,
.hrm-pill.APPROVED,
.hrm-pill.PAID,
.hrm-pill.CLEARED { background: #d1fae5; color: #065f46; }
.hrm-pill.ON_LEAVE,
.hrm-pill.PENDING,
.hrm-pill.DRAFT { background: #fef3c7; color: #854d0e; }
.hrm-pill.RESIGNED,
.hrm-pill.CANCELLED,
.hrm-pill.REJECTED { background: #e5e7eb; color: #374151; }
.hrm-pill.TERMINATED,
.hrm-pill.BOUNCED { background: #fee2e2; color: #991b1b; }
.hrm-pill.APPROVED { background: #dbeafe; color: #1e40af; }
.hrm-empty {
padding: 40px; text-align: center; color: #6b7280;
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
}
.hrm-btn {
display: inline-block; padding: 7px 14px; border-radius: 6px;
border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
text-decoration: none; color: #1a2332; font-size: 13px;
font-family: inherit; line-height: 1.4; white-space: nowrap;
}
.hrm-btn:hover { background: #f8fafc; }
.hrm-btn-primary { background: #1a2332; color: #fff; border-color: #1a2332; }
.hrm-btn-primary:hover { background: #2a3547; }
.hrm-btn-sm { padding: 4px 10px; font-size: 12px; }
.hrm-btn-danger { color: #991b1b; border-color: #fecaca; }
.hrm-btn-danger:hover { background: #fef2f2; }
.hrm-tabs {
display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb;
margin-bottom: 16px; flex-wrap: wrap;
}
.hrm-tab {
padding: 8px 16px; text-decoration: none; color: #6b7280;
font-weight: 500; border-radius: 6px 6px 0 0; font-size: 13px;
}
.hrm-tab.active {
background: #fff; color: #1a2332;
border: 1px solid #e5e7eb; border-bottom: 2px solid #fff;
margin-bottom: -2px;
}
.hrm-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.hrm-grid label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: #6b7280;
}
.hrm-grid label.full { grid-column: 1 / -1; }
.hrm-grid input, .hrm-grid select, .hrm-grid textarea {
padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 6px;
font-size: 14px; font-family: inherit;
}
.hrm-grid textarea { min-height: 60px; resize: vertical; }
@media (max-width: 900px) { .hrm-grid { grid-template-columns: 1fr; } }
.att-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.att-hdr {
padding: 6px; text-align: center; font-size: 11px;
color: #6b7280; text-transform: uppercase; letter-spacing: .04em;
}
.att-day {
aspect-ratio: 1; border: 1px solid #e5e7eb; border-radius: 4px;
padding: 4px; font-size: 11px; position: relative; background: #fff;
}
.att-day.empty { background: #f8fafc; border-color: transparent; }
.att-day .n { font-weight: 600; }
.att-day .st {
font-size: 9px; font-weight: 700; color: #fff;
padding: 1px 3px; border-radius: 3px;
position: absolute; bottom: 2px; right: 2px;
}
.att-day .st.PRESENT, .att-chip.PRESENT { background: #059669; }
.att-day .st.ABSENT, .att-chip.ABSENT { background: #dc2626; }
.att-day .st.LEAVE, .att-chip.LEAVE { background: #2563eb; }
.att-day .st.SICK, .att-chip.SICK { background: #d97706; }
.att-day .st.HALF_DAY, .att-chip.HALF_DAY { background: #7c3aed; }
.att-day .st.WEEKLY_OFF, .att-chip.WEEKLY_OFF { background: #6b7280; }
.att-day .st.HOLIDAY, .att-chip.HOLIDAY { background: #0891b2; }
.att-day .st.UNPAID, .att-chip.UNPAID { background: #991b1b; }
.att-day .st.REMOTE, .att-chip.REMOTE { background: #0ea5e9; }
.att-grid-wrap {
overflow-x: auto; background: #fff;
border: 1px solid #e5e7eb; border-radius: 8px;
}
.att-grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.att-grid th, .att-grid td {
padding: 4px 6px; border-bottom: 1px solid #e5e7eb;
white-space: nowrap; font-size: 12px; text-align: center;
}
.att-grid th.emp, .att-grid td.emp {
text-align: left; position: sticky; left: 0; background: #fff;
z-index: 2; border-right: 2px solid #e5e7eb; min-width: 180px;
}
.att-grid th { background: #f1f5f9; position: sticky; top: 0; z-index: 1; }
.att-grid th.emp { z-index: 3; }
.att-grid td.weekend, .att-grid th.weekend {
background: #f8fafc; color: #6b7280;
}
.att-chip {
width: 22px; height: 22px; border-radius: 4px;
font-weight: 700; font-size: 9px; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.aging-cards {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 10px; margin-bottom: 16px;
}
.aging-card {
background: #fff; border: 1px solid #e5e7eb;
border-radius: 8px; padding: 12px;
}
.aging-card .k {
font-size: 11px; text-transform: uppercase;
letter-spacing: .04em; color: #6b7280;
}
.aging-card .v { font-size: 18px; font-weight: 600; margin-top: 4px; }
.aging-card.cur .v { color: #0ea5e9; }
.aging-card.b1 .v { color: #eab308; }
.aging-card.b2 .v { color: #f97316; }
.aging-card.b3 .v { color: #dc2626; }
.aging-card.b4 .v { color: #7f1d1d; }
@media (max-width: 900px) { .aging-cards { grid-template-columns: repeat(2, 1fr); } }
.days-badge {
display: inline-block; padding: 1px 7px; border-radius: 999px;
font-size: 11px; font-weight: 600;
}
.days-badge.b4 { background: #fee2e2; color: #7f1d1d; }
.days-badge.b3 { background: #fee2e2; color: #991b1b; }
.days-badge.b2 { background: #ffedd5; color: #9a3412; }
.days-badge.b1 { background: #fef3c7; color: #854d0e; }
.days-badge.cur { background: #e0f2fe; color: #075985; }
/* ============================================================ */
/* DASHBOARD ENHANCEMENTS */
/* ============================================================ */
.kpi-link {
text-decoration: none;
color: inherit;
display: block;
}
.kpi-link .kpi {
cursor: pointer;
position: relative;
transition: transform .15s, box-shadow .2s, border-color .15s;
}
.kpi-link:hover .kpi {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15,44,76,.12);
border-color: var(--gold);
}
.kpi-link:hover .kpi .value {
color: var(--gold);
}
.kpi-link .kpi .value {
transition: color .15s;
}
.kpi-link .kpi::after {
content: "\2192";
position: absolute;
top: 14px;
right: 16px;
color: var(--slate-light);
opacity: 0;
transform: translateX(-4px);
transition: opacity .15s, transform .15s;
font-size: 15px;
font-weight: 700;
}
.kpi-link:hover .kpi::after {
opacity: 1;
transform: translateX(0);
}
.alarm-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
position: relative;
}
.alarm-dot.red { background: var(--red); }
.alarm-dot.amber { background: var(--amber); }
.alarm-dot.red::after,
.alarm-dot.amber::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid currentColor;
opacity: 0;
animation: alarm-pulse 1.8s ease-out infinite;
}
.alarm-dot.red::after { color: var(--red); }
.alarm-dot.amber::after { color: var(--amber); }
@keyframes alarm-pulse {
0% { transform: scale(.8); opacity: .7; }
70% { transform: scale(1.8); opacity: 0; }
100% { transform: scale(1.8); opacity: 0; }
}
tr.alarm-row-danger { background: #FDF2F0 !important; }
tr.alarm-row-danger td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.alarm-row-warn { background: #FEFAF0 !important; }
tr.alarm-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.days-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .2px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.days-pill.red { background: var(--red-soft); color: var(--red); }
.days-pill.amber { background: var(--amber-soft); color: var(--amber); }
.days-pill.green { background: var(--green-soft); color: var(--green); }
.days-pill.slate { background: #EEF2F6; color: var(--slate); }
.section-head-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin: 36px 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--gold-pale);
}
.section-head-row h2 {
margin: 0;
padding: 0;
border: 0;
font-size: 15px;
color: var(--navy);
font-weight: 700;
letter-spacing: .2px;
}
.alarm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .2px;
white-space: nowrap;
}
.alarm-chip.red { background: var(--red-soft); color: var(--red); }
.alarm-chip.amber { background: var(--amber-soft); color: var(--amber); }
.alarm-chip.green { background: var(--green-soft); color: var(--green); }
.alarm-chip.slate { background: #EEF2F6; color: var(--slate); }
.due-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.due-pill.now { background: var(--red-soft); color: var(--red); }
.due-pill.soon { background: var(--amber-soft); color: var(--amber); }
.due-pill.later { background: #EEF2F6; color: var(--slate); }
.owner-range-select {
padding: 8px 34px 8px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--paper);
color: var(--navy);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
min-width: 150px;
transition: border-color .15s, box-shadow .15s;
}
.owner-range-select:hover {
border-color: var(--gold);
}
.owner-range-select:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
/* ============================================================ */
/* HRM — header quick actions */
/* ============================================================ */
.hrm-quick {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.hrm-quick-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--navy);
text-decoration: none;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
transition: background .15s, border-color .15s, color .15s, transform .1s;
line-height: 1;
}
.hrm-quick-btn:hover {
background: #F5EFE2;
border-color: #B8935A;
color: var(--navy);
text-decoration: none;
transform: translateY(-1px);
}
.hrm-quick-icon {
font-size: 14px;
line-height: 1;
display: inline-block;
}
.hrm-quick-primary {
background: linear-gradient(135deg, #0F2C4C 0%, #17395C 100%);
color: #fff;
border-color: #08192E;
}
.hrm-quick-primary .hrm-quick-icon {
color: #D4B37F;
font-weight: 700;
}
.hrm-quick-primary:hover {
background: #08192E;
color: #fff;
border-color: #B8935A;
}
.hrm-quick-primary:hover .hrm-quick-icon {
color: #fff;
}
@media (max-width: 900px) {
.hrm-quick {
width: 100%;
margin-top: 12px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.hrm-quick::-webkit-scrollbar { height: 4px; }
.hrm-quick::-webkit-scrollbar-thumb {
background: rgba(15,44,76,.2);
border-radius: 2px;
}
}
/* ============================================================ */
/* ROLE BADGES (OWNER, FINANCE, ACCOUNTS) */
/* ============================================================ */
.role-owner { background: var(--teal-soft); color: var(--teal); }
.role-finance { background: var(--green-soft); color: var(--green); }
.role-accounts { background: var(--amber-soft); color: var(--amber); }
/* ============================================================ */
/* DELETE FORMS (With Reason Input) */
/* ============================================================ */
.delete-form {
display: inline-flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
margin: 0;
}
.reason-input {
width: 140px;
font-size: 11px;
padding: 4px 8px;
height: auto;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--paper);
color: var(--slate);
transition: border-color .15s, box-shadow .15s;
font-family: inherit;
}
.reason-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(184,147,90,.15);
}
.reason-input::placeholder {
color: var(--slate-light);
}
/* ============================================================ */
/* PROFESSIONAL ADMIN FORM LAYOUT */
/* ============================================================ */
.form-section {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-cool);
}
.form-section:last-of-type {
border-bottom: none;
margin-bottom: 0;
}
.form-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--gold);
font-weight: 800;
margin: 0 0 16px 0;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 16px;
}
.form-row:last-child {
margin-bottom: 0;
}
.form-row label {
display: flex;
flex-direction: column;
font-size: 12px;
color: var(--slate);
font-weight: 600;
gap: 6px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
background: var(--paper);
color: var(--navy);
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
.form-row input[readonly] {
background: var(--row-alt);
color: var(--slate);
cursor: not-allowed;
}
.form-help {
font-size: 11px;
color: var(--slate);
line-height: 1.6;
background: var(--row-alt);
padding: 12px 16px;
border-radius: 8px;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
justify-content: center;
}
.form-help strong {
color: var(--navy);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
/* ============================================================ */
/* OVERDUE PAYMENT TOAST NOTIFICATION */
/* ============================================================ */
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
max-width: 400px;
width: calc(100% - 48px);
animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes slideInRight {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.toast-alert {
background: var(--navy);
color: white;
border-left: 5px solid var(--red);
border-radius: 10px;
padding: 18px 20px;
display: flex;
align-items: flex-start;
gap: 14px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.toast-alert::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 100%;
background: linear-gradient(135deg, rgba(192, 57, 43, 0.15) 0%, transparent 60%);
pointer-events: none;
}
.toast-icon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.toast-body {
flex: 1;
min-width: 0;
}
.toast-title {
font-weight: 700;
font-size: 14px;
letter-spacing: .3px;
margin-bottom: 4px;
color: #FFFFFF;
}
.toast-text {
font-size: 12.5px;
color: #C9D6E4;
line-height: 1.5;
}
.toast-text a {
color: var(--gold-light);
font-weight: 600;
text-decoration: underline;
}
.toast-text a:hover {
color: #FFFFFF;
}
.toast-close {
background: transparent;
border: 0;
color: #8A96A5;
font-size: 16px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
transition: all .15s;
flex-shrink: 0;
}
.toast-close:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
@media (max-width: 640px) {
.toast-container {
bottom: 16px;
right: 16px;
left: 16px;
max-width: none;
width: auto;
}
}
/* ============================================================ */
/* FLOATING PRINT BUTTON (embossed, bottom-right) */
/* ============================================================ */
.print-page-btn {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 900;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
/* Navy gradient with gold accents — matches your brand */
background: linear-gradient(135deg, #17395C 0%, #0F2C4C 100%);
color: #FFFFFF;
border: 1px solid #B8935A;
border-radius: 999px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
cursor: pointer;
user-select: none;
/* Embossed 3D look: outer shadow + inner highlight */
box-shadow:
0 8px 20px rgba(15, 44, 76, 0.35),
0 2px 4px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.20);
transition: transform .12s ease, box-shadow .18s ease,
background .18s ease, color .18s ease;
}
.print-page-btn .print-icon {
font-size: 16px;
line-height: 1;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
}
.print-page-btn:hover {
background: linear-gradient(135deg, #B8935A 0%, #D4B37F 100%);
color: #0F2C4C;
border-color: #D4B37F;
transform: translateY(-3px);
box-shadow:
0 12px 28px rgba(184, 147, 90, 0.45),
0 4px 8px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.print-page-btn:hover .print-icon {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
.print-page-btn:active {
transform: translateY(-1px);
box-shadow:
0 3px 8px rgba(15, 44, 76, 0.30),
inset 0 2px 6px rgba(0, 0, 0, 0.25),
inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}
.print-page-btn:focus-visible {
outline: 2px solid #D4B37F;
outline-offset: 3px;
}
/* Move to a safe spot on smaller screens (above the mobile sidebar toggle) */
@media (max-width: 900px) {
.print-page-btn {
bottom: 16px;
right: 16px;
padding: 10px 16px;
font-size: 11px;
}
.print-page-btn .print-icon {
font-size: 14px;
}
}
/* Hide entirely when printing */
@media print {
.print-page-btn,
.no-print {
display: none !important;
}
}
/* ============================================================ */
/* LATE ENTRY HIGHLIGHTING */
/* ============================================================ */
tr.row-late-entry {
background: #FFFBEB !important;
box-shadow: inset 4px 0 0 #B7791F;
}
tr.row-late-entry:hover {
background: #FEF3C7 !important;
}
.pill-late {
background: #FEF3C7;
color: #92400E;
border: 1px solid #FDE68A;
font-weight: 700;
font-size: 10px;
padding: 2px 7px;
cursor: help;
}
.late-entries-summary {
background: #FFFBEB;
border-left: 4px solid #B7791F;
padding: 12px 18px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 13px;
color: #92400E;
}
.late-entries-summary strong {
color: #78350F;
}
/* ============================================================ */
/* PRINT LAYOUT FIXES (Headers & Page Breaks) */
/* ============================================================ */
@media print {
/* 1. Keep headers attached to the content below them */
h1, h2, h3, .section-head-row {
page-break-after: avoid !important;
break-after: avoid !important;
}
/* 2. Allow tables to break across pages cleanly,
but keep individual rows intact */
table {
page-break-inside: auto !important;
break-inside: auto !important;
}
tr {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
/* 3. Repeat the table header on every new page */
thead {
display: table-header-group !important;
}
/* 4. Reduce excessive margins on print */
h2 {
margin-top: 15px !important;
margin-bottom: 10px !important;
}
/* 5. Override the strict block rule so it doesn't cause huge gaps */
.report-block {
page-break-inside: auto !important;
break-inside: auto !important;
margin-bottom: 15px !important;
}
/* Ensure the block header stays with its table */
.report-block-head {
page-break-after: avoid !important;
break-after: avoid !important;
}
}