:root {
    --primary: #2388f2;
    --secondary: #14243a;
    --accent: #eb1877;
    --surface: #ffffff;
    --background: #f5f7f9;
    --border: #e4e9ef;
    --text: #18283c;
    --muted: #718096;
    --success: #1f9d6a;
    --warning: #e9a21b;
    --error: #d94b5b;
    --information: #2388f2;
    --button-colour: #2388f2;
    --button-text-colour: #ffffff;
    --sidebar-colour: #ffffff;
    --topbar-colour: #ffffff;
    --topbar-text-colour: #26384d;
    --navigation-text-colour: #314257;
    --nav-muted-colour: #4b5d72;
    --nav-border-colour: #e4e9ef;
    --nav-hover-colour: #edf6ff;
    --nav-active-colour: #e5f2ff;
    --nav-active-text-colour: #1475d1;
    --topbar-height: 72px;
    --sidebar-width: 274px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(21, 35, 52, .08);
    --shadow-md: 0 14px 40px rgba(21, 35, 52, .18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    min-width: 320px;
    color: var(--text);
    background: var(--background);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.42;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.drawer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke-width: 1.75;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) minmax(0, calc(100vh - var(--topbar-height)));
    min-height: 100vh;
    overflow: hidden;
    background: var(--sidebar-colour);
}
.topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    z-index: 1000;
    top: 0;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
    height: var(--topbar-height);
    color: var(--topbar-text-colour);
    background: var(--topbar-colour);
}
.topbar-brand {
    display: flex;
    align-items: center;
    padding: 0 16px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.brand-logo {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background: rgba(255,255,255,.9);
    color: #fff;
    font-weight: 700;
}
.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.brand-text { display: grid; min-width: 0; }
.brand-text strong,
.profile-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-text strong { font-size: 14px; font-weight: 650; }
.topbar-page {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
}
.topbar-page strong { font-size: 13px; font-weight: 650; }
.topbar-page span,
.profile-copy small {
    color: color-mix(in srgb, var(--topbar-text-colour) 65%, transparent);
    font-size: 12px;
}
.topbar-page span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}
.icon-button {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: color-mix(in srgb, var(--topbar-text-colour) 72%, transparent);
    background: transparent;
    cursor: pointer;
}
.icon-button:hover,
.icon-button:focus-visible {
    color: var(--topbar-text-colour);
    border-color: color-mix(in srgb, var(--topbar-text-colour) 16%, transparent);
    background: color-mix(in srgb, var(--topbar-text-colour) 8%, transparent);
    outline: none;
}
.mobile-menu-button { display: none; }
.profile-menu { position: relative; }
.profile-trigger {
    display: flex;
    min-width: 220px;
    height: 52px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--topbar-text-colour);
    background: transparent;
    cursor: pointer;
}
.profile-trigger:hover,
.profile-trigger:focus-visible {
    background: color-mix(in srgb, var(--topbar-text-colour) 8%, transparent);
    outline: none;
}
.avatar {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: var(--secondary);
    font-size: 12px;
    font-weight: 700;
}
.profile-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    text-align: left;
}
.profile-trigger > .icon { width: 16px; height: 16px; flex-basis: 16px; }
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    width: 220px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.profile-dropdown a {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    font-weight: 600;
}
.profile-dropdown a:hover,
.profile-dropdown a:focus-visible { background: #edf6ff; outline: none; }

.sidebar {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    z-index: 40;
    top: var(--topbar-height);
    width: var(--sidebar-width);
    height: calc(100vh - var(--topbar-height));
    overflow: hidden;
    color: var(--navigation-text-colour);
    background: var(--sidebar-colour);
}
.sidebar-nav {
    display: grid;
    align-content: start;
    gap: 12px;
    height: 100%;
    padding: 16px 40px 32px 12px;
    overflow-y: auto;
    overflow-x: hidden;
}
.nav-section { display: grid; gap: 4px; }
.nav-section + .nav-section {
    padding-top: 12px;
    border-top: 1px solid var(--nav-border-colour);
}
.nav-section h2 {
    margin: 0;
    padding: 8px 10px 4px;
    color: var(--nav-muted-colour);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.nav-link {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    color: var(--navigation-text-colour);
    font-weight: 600;
}
.nav-link:hover,
.nav-link:focus-visible {
    background: var(--nav-hover-colour);
    outline: none;
}
.nav-link.is-active {
    color: var(--nav-active-text-colour);
    background: var(--nav-active-colour);
}
.nav-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--primary);
}
.nav-icon .icon { width: 17px; height: 17px; flex-basis: 17px; }
.nav-icon--users-pay-rates { background: #7c5ce7; }
.nav-icon--clockin { background: #29b899; }
.nav-icon--timesheets { background: #3c7fe8; }
.nav-icon--summary { background: #c140a8; }
.nav-icon--wages { background: #f0a915; }
.nav-icon--cash-summary { background: #1f9d6a; }
.nav-icon--settings { background: #64748b; }
.nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 45;
    min-width: 0;
    height: calc(100vh - var(--topbar-height));
    margin-left: -28px;
    padding-left: 28px;
    border-top-left-radius: 28px;
    overflow: auto;
    background: var(--background);
}
.page {
    width: min(100%, 1600px);
    min-height: calc(100vh - var(--topbar-height));
    margin: 0 auto;
    padding: 24px;
    background: var(--background);
}
.page-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.page-heading {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
}
.page-heading-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page-heading-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: #edf6ff;
}
.page-heading h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.page-heading p { margin: 4px 0 0; color: var(--muted); }

.button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}
.button:disabled { opacity: .48; cursor: not-allowed; }
.button-primary { color: var(--button-text-colour); background: var(--button-colour); }
.button-primary:hover { filter: brightness(.95); }
.button-secondary { color: var(--text); border-color: var(--border); background: var(--surface); }
.button-secondary:hover { background: #f8fafc; }
.button-danger { color: #fff; background: var(--error); }
.button-small { min-height: 34px; padding: 0 13px; font-size: 12px; }
.icon-only { width: 36px; padding: 0; border-radius: 50%; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.metric-card { padding: 22px; }
.metric-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-card__icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: #edf6ff;
}
.metric-card__value { display: block; margin-top: 18px; font-size: 30px; font-weight: 750; line-height: 1; }
.metric-card__label { display: block; margin-top: 8px; color: var(--muted); font-weight: 600; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; margin-top: 18px; }
.content-card { padding: 24px; }
.content-card h2 { margin: 0; font-size: 18px; }
.content-card p { color: var(--muted); }
.quick-actions { display: grid; gap: 10px; margin-top: 18px; }
.quick-action {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}
.quick-action:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: #f8fbff; }
.quick-action span:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--primary); background: #edf6ff; }
.quick-action strong { display: block; }
.quick-action small { color: var(--muted); }
.status-list { display: grid; gap: 12px; margin-top: 18px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.status-row:last-child { padding-bottom: 0; border-bottom: 0; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.status-copy { display: flex; align-items: center; gap: 9px; }

.settings-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 620px;
    margin-top: 20px;
    overflow: hidden;
}
.settings-nav { padding: 16px; border-right: 1px solid var(--border); background: #fbfcfd; }
.settings-nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: #405267;
    font-weight: 600;
}
.settings-nav a:hover,
.settings-nav a:focus-visible,
.settings-nav a.is-active { color: #1475d1; background: #e5f2ff; outline: none; }
.settings-content { padding: 28px 32px; }
.settings-content h2 { margin: 0 0 4px; font-size: 22px; }
.settings-intro { margin: 0 0 28px; color: var(--muted); }
.settings-content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.settings-content-header .settings-intro { margin-bottom: 0; }
.settings-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.settings-metric {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fbfcfd;
}
.settings-metric__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    color: var(--primary);
    background: #e8f4ff;
}
.settings-metric strong,
.settings-metric small { display: block; }
.settings-metric strong { font-size: 22px; line-height: 1; }
.settings-metric small { margin-top: 5px; color: var(--muted); font-weight: 650; }
.settings-management-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.settings-management-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.settings-section { padding: 24px 0; border-top: 1px solid var(--border); }
.settings-section:first-of-type { padding-top: 0; border-top: 0; }
.settings-section h3 { margin: 0 0 8px; font-size: 16px; }
.settings-section > p { margin: 0 0 18px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; }
.field small { color: var(--muted); }
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #ccd5df;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface);
}
.field textarea { min-height: 100px; padding: 12px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(35,136,242,.14); outline: none; }
.field input[readonly] { color: var(--muted); background: #f8fafc; }
.field-error { color: var(--error); font-size: 12px; }
.colour-control { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.colour-control input[type="color"] { width: 52px; padding: 4px; }
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 24px; }
.branding-preview {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-md);
    background: #fbfcfd;
}
.logo-preview {
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.upload-control { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.upload-button { position: relative; overflow: hidden; }
.upload-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.brand-colour-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.brand-colour-swatch { min-height: 82px; padding: 16px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.brand-colour-swatch strong, .brand-colour-swatch span { display: block; }
.brand-colour-swatch span { margin-top: 4px; opacity: .72; }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
}
.toolbar-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.search-control { position: relative; width: min(360px, 45vw); }
.search-control .icon { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--muted); }
.search-control input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 42px;
    border: 1px solid #ccd5df;
    border-radius: 999px;
    background: #fff;
}
.search-control input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(35,136,242,.14); outline: none; }
.segmented-control { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: #f8fafc; }
.segmented-control button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 700; cursor: pointer; }
.segmented-control button.is-active { color: var(--text); background: #fff; box-shadow: var(--shadow-sm); }
.table-card { margin-top: 18px; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th,
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.data-table th { color: #526378; background: #fbfcfd; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.data-table tbody tr:hover { background: #fbfdff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.person-cell { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.person-cell .avatar { width: 34px; height: 34px; flex-basis: 34px; background: #3c7fe8; }
.person-cell strong, .person-cell small { display: block; }
.person-cell small { color: var(--muted); }
.money-value { font-variant-numeric: tabular-nums; font-weight: 650; }
.badge { display: inline-flex; min-height: 26px; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.badge--active { color: #08784e; background: #def8ed; }
.badge--inactive { color: #7a3540; background: #fde8eb; }
.badge--admin { color: #5b3ec1; background: #eee9ff; }
.badge--staff { color: #35627d; background: #e8f4fb; }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; }
.empty-state { padding: 50px 24px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-size: 16px; }

.drawer-backdrop {
    position: fixed;
    z-index: 1300;
    inset: var(--topbar-height) 0 0;
    background: rgba(15,26,40,.46);
    backdrop-filter: blur(2px);
}
.drawer {
    position: fixed;
    z-index: 1400;
    top: calc(var(--topbar-height) + 12px);
    right: 12px;
    bottom: 12px;
    width: min(620px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--topbar-height) - 24px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 24px 80px rgba(15,26,40,.28);
    transform: translateX(calc(100% + 24px));
    transition: transform 220ms ease;
}
.drawer.is-open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.drawer-header h2 { margin: 0; font-size: 20px; }
.drawer-body { padding: 22px; overflow-y: auto; }
.drawer-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.form-section { padding: 0 0 24px; }
.form-section + .form-section { padding-top: 24px; border-top: 1px solid var(--border); }
.form-section h3 { margin: 0 0 4px; font-size: 15px; }
.form-section > p { margin: 0 0 16px; color: var(--muted); }
.check-control { display: flex; align-items: flex-start; gap: 10px; }
.check-control input { width: 18px; height: 18px; margin-top: 1px; }
.check-control strong, .check-control small { display: block; }
.check-control small { color: var(--muted); }
.danger-zone { padding: 16px; border: 1px solid #f0b8bf; border-radius: var(--radius-md); background: #fff8f9; }

.notification-centre { position: fixed; z-index: 2000; top: 88px; right: 18px; display: grid; width: min(390px, calc(100vw - 36px)); gap: 10px; }
.notification { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.notification--success { border-left-color: var(--success); }
.notification--warning { border-left-color: var(--warning); }
.notification--error { border-left-color: var(--error); }
.notification--info { border-left-color: var(--information); }
.notification button { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.notification button:hover { background: #f1f5f9; }
.notification.is-leaving { opacity: 0; transform: translateX(24px); transition: opacity 160ms ease, transform 160ms ease; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #edf6ff, transparent 38%), #f5f7f9; }
.login-card { width: min(440px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgba(21,35,52,.13); }
.login-brand { text-align: center; }
.login-brand img { width: 112px; height: 112px; object-fit: contain; }
.login-brand h1 { margin: 14px 0 4px; font-size: 24px; }
.login-brand p { margin: 0 0 26px; color: var(--muted); }
.login-card .field + .field { margin-top: 16px; }
.login-card .button { width: 100%; margin-top: 22px; }
.login-error { margin-bottom: 18px; padding: 12px 14px; border: 1px solid #f0b8bf; border-radius: var(--radius-md); color: #8f2e3a; background: #fff1f3; }
.remember-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); }
.remember-row input { width: 17px; height: 17px; }

.sidebar-backdrop { position: fixed; z-index: 850; inset: var(--topbar-height) 0 0; background: rgba(15,26,40,.44); }

@media (max-width: 1180px) {
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topbar-height) minmax(0, calc(100vh - var(--topbar-height))); }
    .topbar { grid-template-columns: minmax(0, 1fr) auto; }
    .topbar-page { display: none; }
    .mobile-menu-button { display: grid; margin-right: 8px; }
    .sidebar { position: fixed; top: var(--topbar-height); left: 0; width: var(--sidebar-width); max-width: calc(100vw - 24px); transform: translateX(-100%); transition: transform 220ms ease; box-shadow: 12px 0 32px rgba(15,26,40,.18); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .main { grid-column: 1; margin-left: 0; padding-left: 0; border-top-left-radius: 0; }
}
@media (max-width: 760px) {
    .page { padding: 16px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading-actions, .page-heading-actions .button { width: 100%; }
    .settings-shell { grid-template-columns: 1fr; }
    .settings-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .settings-content-header,
    .settings-management-toolbar { align-items: stretch; flex-direction: column; }
    .settings-content-header .button { width: 100%; }
    .settings-metrics { grid-template-columns: 1fr; }
    .settings-management-toolbar .search-control { width: 100%; }
    .settings-nav a { flex: 0 0 auto; }
    .settings-content { padding: 22px 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .field--wide { grid-column: auto; }
    .branding-preview { grid-template-columns: 1fr; }
    .brand-colour-preview { grid-template-columns: 1fr; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar-group { width: 100%; }
    .search-control { width: 100%; }
    .segmented-control { overflow-x: auto; }
    .users-table th:nth-child(4), .users-table td:nth-child(4),
    .users-table th:nth-child(5), .users-table td:nth-child(5) { display: none; }
}
@media (max-width: 620px) {
    .profile-trigger { min-width: 48px; width: 48px; padding: 0 6px; }
    .profile-copy, .profile-trigger > .icon { display: none; }
    .brand-text { display: none; }
    .topbar-actions { padding-left: 4px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .drawer { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
    .drawer-footer { display: grid; grid-template-columns: 1fr 1fr; }
    .drawer-footer .button { width: 100%; }
    .users-table th:nth-child(3), .users-table td:nth-child(3) { display: none; }
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* Backend operations: filters, reporting, permissions and shared drawers */
.inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--surface);
}
.inline-alert strong,
.inline-alert span { display: block; }
.inline-alert--error { border-left-color: var(--error); background: #fff8f9; }
.filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
    align-items: end;
    gap: 14px;
    margin-top: 18px;
    padding: 18px;
}
.filter-actions { display: flex; align-items: center; gap: 9px; padding-bottom: 1px; }
.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.stats-strip--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-stat { display: grid; gap: 5px; padding: 18px 20px; }
.compact-stat span { color: var(--muted); font-weight: 650; }
.compact-stat strong { font-size: 24px; line-height: 1.1; }
.table-subtext { display: block; margin-top: 3px; color: var(--muted); }
.clickable-table tbody tr[data-shift-edit] { cursor: pointer; }
.clickable-table tbody tr[data-shift-edit]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.row-chevron { width: 42px; color: var(--muted); }
.row-chevron .icon { margin-left: auto; }
.drawer form { display: contents; }
.drawer-header p { margin: 4px 0 0; color: var(--muted); }
.report-section { margin-top: 18px; }
.report-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.report-section-heading h2 { margin: 0; font-size: 18px; }
.report-section-heading p { margin: 4px 0 0; color: var(--muted); }
.report-table { min-width: 900px; font-variant-numeric: tabular-nums; }
.report-table tfoot td,
.cash-table tfoot td { font-weight: 750; background: #fbfcfd; }
.report-highlight { color: #08784e; background: #f0fbf6; font-weight: 750; }
.download-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 18px;
    padding: 22px;
}
.download-card h2 { margin: 0; font-size: 18px; }
.download-card p { margin: 4px 0 0; color: var(--muted); }
.download-form { display: flex; align-items: center; gap: 18px; }
.permission-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #bfdcff;
    border-radius: var(--radius-md);
    color: #1a568f;
    background: #eff7ff;
}
.permission-note > .icon { margin-top: 2px; }
.permission-note strong,
.permission-note span { display: block; }
.permission-note span { margin-top: 3px; color: #4d6e8e; }
.permission-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); }
.permission-table { min-width: 720px; }
.permission-table th:not(:first-child),
.permission-table td:not(:first-child) { width: 150px; text-align: center; }
.permission-table th span { display: inline-block; }
.permission-check { display: inline-grid; cursor: pointer; }
.permission-check input { position: absolute; opacity: 0; pointer-events: none; }
.permission-check span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #cbd5df;
    border-radius: 10px;
    color: transparent;
    background: #fff;
    transition: 150ms ease;
}
.permission-check input:checked + span { color: #fff; border-color: var(--primary); background: var(--primary); }
.permission-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(35,136,242,.18); }
.cash-toolbar {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 12px 16px;
}
.segmented-links { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: #f8fafc; }
.segmented-links a { display: inline-flex; min-height: 34px; align-items: center; padding: 0 16px; border-radius: 999px; color: var(--muted); font-weight: 700; }
.segmented-links a.is-active { color: var(--text); background: #fff; box-shadow: var(--shadow-sm); }
.month-switcher { display: flex; align-items: center; gap: 9px; }
.month-switcher strong { min-width: 110px; text-align: center; }
.settings-disclosure { margin-top: 18px; overflow: hidden; }
.settings-disclosure summary { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; }
.settings-disclosure summary::-webkit-details-marker { display: none; }
.settings-disclosure summary > span { display: flex; align-items: center; gap: 10px; }
.settings-disclosure summary small { color: var(--muted); }
.cash-visibility-form { display: flex; align-items: center; gap: 24px; padding: 18px; border-top: 1px solid var(--border); background: #fbfcfd; }
.cash-table { min-width: 920px; }
.evidence-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.inline-form { display: inline; }
.file-drop {
    position: relative;
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 8px;
    overflow: hidden;
    padding: 24px;
    border: 2px dashed #c8d4e0;
    border-radius: var(--radius-lg);
    background: #fbfcfd;
    text-align: center;
    cursor: pointer;
}
.file-drop:hover { border-color: var(--primary); background: #f5faff; }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: var(--primary); background: #e7f3ff; }
.file-drop small { color: var(--muted); }
.file-drop img { position: relative; z-index: 1; width: min(100%, 420px); max-height: 320px; object-fit: contain; border-radius: var(--radius-md); }
@media print {
    .topbar,.sidebar,.sidebar-backdrop,.page-heading-actions,.filter-bar,.download-card,.settings-disclosure,.notification-centre { display: none !important; }
    .app-shell,.main,.page { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
    .page-card { box-shadow: none !important; break-inside: avoid; }
    .table-scroll { overflow: visible !important; }
    .report-table { min-width: 0 !important; font-size: 9px; }
}
@media (max-width: 1080px) {
    .filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .filter-actions { grid-column: 1 / -1; }
    .stats-strip--four { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .download-card,.download-form { align-items: flex-start; flex-direction: column; }
    .cash-visibility-form { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
    .filter-bar,.stats-strip,.stats-strip--four { grid-template-columns: 1fr; }
    .filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .cash-toolbar { align-items: stretch; flex-direction: column; }
    .segmented-links { width: 100%; overflow-x: auto; }
    .segmented-links a { flex: 1 0 auto; justify-content: center; }
    .month-switcher { justify-content: center; }
    .download-form { width: 100%; }
    .settings-disclosure summary { align-items: flex-start; flex-direction: column; }
}

.toolbar-note{color:var(--muted-text);font-size:12px;font-weight:700;white-space:nowrap}

/* Communications / Chat */
.topbar-chat-button{position:relative;text-decoration:none}.topbar-badge,.nav-badge{display:inline-grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:999px;color:#fff;background:#e24555;font-size:10px;font-weight:800}.topbar-badge{position:absolute;top:-5px;right:-5px;border:2px solid var(--topbar-colour)}.nav-badge{margin-left:auto}.chat-page{height:calc(100vh - 118px);min-height:620px;min-width:0;display:grid;grid-template-columns:360px minmax(0,1fr);background:#fff;border:1px solid #dfe7f0;border-radius:22px;overflow:hidden;box-shadow:0 12px 32px rgba(20,36,58,.08)}.chat-list-panel{display:flex;min-width:0;min-height:0;height:100%;flex-direction:column;border-right:1px solid #dfe7f0;background:#fff}.chat-list-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px}.chat-list-toolbar h1{margin:2px 0 0;font-size:24px}.chat-list-toolbar .eyebrow{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.chat-round-button{width:42px;height:42px;border:1px solid #d7e1ec;background:#fff;border-radius:50%;font-weight:800;color:#51647d;cursor:pointer}.chat-round-button:disabled{opacity:.45;cursor:not-allowed}.chat-search{height:45px;margin:0 18px 12px;border:1px solid #d8e1eb;border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 13px;color:#60758f}.chat-search .icon{width:19px}.chat-search input{width:100%;border:0;outline:0;background:transparent;font:inherit;color:#14243a}.chat-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:0 18px;border-bottom:1px solid #e6ebf1}.chat-tabs button{border:0;background:transparent;padding:10px 4px 12px;color:#52647b;font-weight:700;cursor:pointer;border-bottom:2px solid transparent}.chat-tabs button.is-active{color:var(--primary);border-color:var(--primary)}.chat-conversations{min-height:0;overflow:auto;flex:1;padding:10px}.chat-conversation{width:100%;border:0;background:#fff;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:11px;align-items:center;text-align:left;padding:12px;border-radius:16px;cursor:pointer;color:#14243a}.chat-conversation:hover,.chat-conversation.is-active{background:#eaf5ff}.chat-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,var(--primary),#25b6dc);color:#fff;font-size:16px;font-weight:800;overflow:hidden}.chat-presence{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#a9b3c0}.chat-presence.online{background:#23ba77}.chat-presence.away{background:#f3a62a}.chat-conversation-copy{min-width:0}.chat-conversation-copy strong,.chat-conversation-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-conversation-copy strong{font-size:14px}.chat-conversation-copy small{margin-top:4px;color:#8290a4}.chat-conversation-meta{align-self:start;text-align:right;color:#8995a5;font-size:11px}.chat-unread{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;margin-top:7px;padding:0 6px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:800}.chat-loading,.chat-empty-list{padding:36px 18px;text-align:center;color:#7b899c}.chat-thread-panel{min-width:0;min-height:0;height:100%;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:#eaf5ff}.chat-thread-header{min-height:74px;padding:12px 18px;background:#fff;border-bottom:1px solid #dfe7f0;display:flex;align-items:center;justify-content:space-between}.chat-thread-person{display:flex;align-items:center;gap:12px;min-width:0}.chat-thread-person>div{min-width:0}.chat-thread-person strong,.chat-thread-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-thread-person small{margin-top:3px;color:#8895a6}.chat-mobile-back{display:none;width:38px;height:38px;border:0;background:transparent;color:#14243a}.chat-messages{min-height:0;overflow:auto;padding:24px;scroll-behavior:smooth}.chat-empty-thread{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#6f8095}.chat-empty-thread h2{margin:12px 0 4px;color:#14243a}.chat-empty-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:18px;color:var(--primary);background:#fff}.chat-empty-icon .icon{width:30px;height:30px}.chat-day{display:flex;justify-content:center;margin:14px 0}.chat-day span{background:#8b9aaa;color:#fff;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800}.chat-message-row{display:flex;margin:7px 0}.chat-message-row.is-mine{justify-content:flex-end}.chat-bubble{max-width:min(72%,680px);padding:11px 13px 7px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(20,36,58,.08);color:#14243a}.chat-message-row.is-mine .chat-bubble{background:var(--primary);color:#fff}.chat-message-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.42}.chat-message-time{display:flex;justify-content:flex-end;gap:5px;margin-top:5px;font-size:10px;opacity:.7}.chat-receipt{font-size:11px}.chat-attachment{display:flex;align-items:center;gap:10px;min-width:220px;padding:10px;margin-bottom:5px;border-radius:10px;background:rgba(255,255,255,.9);color:#14243a;text-decoration:none}.chat-file-icon{display:flex;align-items:center;justify-content:center;width:38px;height:44px;border-radius:6px;background:#ef4b55;color:#fff;font-size:11px;font-weight:800}.chat-attachment-copy{min-width:0;flex:1}.chat-attachment-copy strong,.chat-attachment-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-attachment-copy small{margin-top:3px;color:#6d7c8e}.chat-image{display:block;max-width:360px;max-height:320px;border-radius:10px;margin-bottom:5px}.chat-typing{padding:3px 20px 8px;background:#eaf5ff;color:#66788f;font-size:12px}.chat-composer{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px;padding:12px 16px;background:#fff;border-top:1px solid #dfe7f0}.chat-composer textarea{width:100%;min-height:44px;max-height:130px;resize:none;border:1px solid #d8e1eb;border-radius:14px;padding:11px 13px;outline:0;font:inherit}.chat-composer textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,136,242,.12)}.chat-compose-icon,.chat-send-button{width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:#60738a;cursor:pointer}.chat-send-button{display:grid;place-items:center;background:var(--primary);color:#fff}.chat-compose-icon:disabled,.chat-send-button:disabled{opacity:.4;cursor:not-allowed}.chat-file-preview{position:absolute;left:16px;right:16px;bottom:100%;padding:9px 12px;border:1px solid #dfe7f0;border-radius:12px 12px 0 0;background:#fff;color:#44576e;font-size:12px}.chat-file-preview button{float:right;border:0;background:transparent;cursor:pointer}.chat-toast{position:fixed;top:86px;right:22px;z-index:10000;max-width:360px;padding:13px 16px;border-radius:12px;background:#14243a;color:#fff;box-shadow:0 16px 35px rgba(20,36,58,.24);animation:chatToastIn .2s ease}.chat-toast.is-error{background:#c83e50}.push-prompt{position:fixed;right:24px;bottom:24px;z-index:900;display:flex;align-items:center;gap:18px;max-width:430px;padding:14px 16px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-lg)}.push-prompt>div{display:flex;align-items:center;gap:11px}.push-prompt>div>.icon{color:var(--primary)}.push-prompt strong,.push-prompt small{display:block}.push-prompt small{margin-top:2px;color:var(--muted)}.button-small{min-height:36px;padding:0 14px}@keyframes chatToastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:900px){.page{padding:0!important}.chat-page{height:calc(100dvh - 72px);min-height:0;border:0;border-radius:0;box-shadow:none;grid-template-columns:1fr}.chat-list-panel{border:0}.chat-thread-panel{position:fixed;inset:72px 0 0;z-index:120;background:#eaf5ff;transform:translateX(100%);transition:transform .22s ease}.chat-page.has-open-thread .chat-thread-panel{transform:translateX(0)}.chat-mobile-back{display:grid;place-items:center}.chat-thread-header{padding-left:7px}.chat-thread-person{margin-right:auto}.chat-message-row .chat-bubble{max-width:84%}.chat-messages{padding:16px 12px}.chat-image{max-width:260px}.chat-composer{padding-left:10px;padding-right:10px}.push-prompt{left:14px;right:14px;bottom:14px;max-width:none}}

/* Operations: Rota & Tasks */
.segmented-control a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 700;
}
.segmented-control a.is-active { color: var(--text); background: #fff; box-shadow: var(--shadow-sm); }
.compact-stat small { color: var(--muted); }
.page-heading-icon--small { width: 38px; height: 38px; flex-basis: 38px; }
.rota-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 16px 18px;
}
.rota-date-navigation,
.rota-toolbar-controls,
.rota-staff-filter,
.rota-reminder-card > div,
.rota-reminder-form,
.form-section-heading,
.rota-colour-control,
.rota-pay-preview,
.rota-day-shift,
.rota-task-row { display: flex; align-items: center; }
.rota-date-navigation { gap: 8px; min-width: 0; }
.rota-range-title { display: grid; min-width: 180px; margin-left: 6px; }
.rota-range-title strong { font-size: 15px; }
.rota-range-title span { color: var(--muted); font-size: 12px; }
.rota-toolbar-controls { justify-content: flex-end; gap: 14px; }
.rota-staff-filter { gap: 8px; }
.rota-staff-filter label { color: var(--muted); font-weight: 700; }
.rota-staff-filter select { min-width: 190px; height: 40px; padding: 0 34px 0 12px; border: 1px solid #ccd5df; border-radius: 999px; background: #fff; }
.rota-reminder-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    padding: 18px 20px;
}
.rota-reminder-card > div { gap: 13px; }
.rota-reminder-card h2 { margin: 0; font-size: 17px; }
.rota-reminder-card p { margin: 3px 0 0; color: var(--muted); }
.rota-reminder-form { gap: 12px; }
.rota-reminder-form .field { min-width: 180px; }
.rota-reminder-form input { max-width: 180px; }
.rota-calendar-card { margin-top: 18px; overflow: hidden; }
.rota-week-scroll { overflow-x: auto; }
.rota-week-grid {
    display: grid;
    min-width: 1420px;
    grid-template-columns: 210px repeat(7, minmax(165px, 1fr));
}
.rota-week-corner,
.rota-week-day,
.rota-staff-cell,
.rota-week-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rota-week-corner { display: grid; align-content: center; padding: 14px 16px; background: #fbfcfd; }
.rota-week-corner span { color: var(--muted); font-size: 11px; }
.rota-week-day { display: flex; min-height: 68px; align-items: baseline; justify-content: center; gap: 6px; padding: 15px 10px; background: #fbfcfd; }
.rota-week-day span { color: var(--muted); font-weight: 750; text-transform: uppercase; }
.rota-week-day strong { font-size: 21px; }
.rota-week-day small { color: var(--muted); }
.rota-week-day.is-today { color: #126fc7; background: #edf6ff; }
.rota-staff-cell { display: flex; min-height: 126px; align-items: flex-start; gap: 11px; padding: 16px; background: #fff; }
.rota-staff-cell .avatar { width: 36px; height: 36px; flex-basis: 36px; }
.rota-staff-cell strong,
.rota-staff-cell small { display: block; }
.rota-staff-cell small { margin-top: 3px; color: var(--muted); }
.rota-week-cell { position: relative; min-height: 126px; padding: 9px; background: #fff; }
.rota-week-cell.is-today { background: #f8fcff; }
.rota-shift-card {
    position: relative;
    width: 100%;
    margin-bottom: 7px;
    padding: 10px 10px 9px 13px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rota-colour) 34%, var(--border));
    border-radius: 11px;
    color: var(--text);
    background: color-mix(in srgb, var(--rota-colour) 12%, #fff);
    text-align: left;
    cursor: pointer;
}
.rota-shift-card::before { position: absolute; inset: 0 auto 0 0; width: 5px; content: ""; background: var(--rota-colour); }
.rota-shift-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rota-shift-card strong,
.rota-shift-card small,
.rota-shift-time { display: block; }
.rota-shift-card strong { margin-top: 3px; font-size: 12px; }
.rota-shift-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.rota-shift-time { color: color-mix(in srgb, var(--rota-colour) 72%, #17263a); font-size: 11px; font-weight: 800; }
.rota-cell-add {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 3px auto 0;
    place-items: center;
    border: 1px dashed #c9d5e2;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    opacity: .45;
}
.rota-week-cell:hover .rota-cell-add,
.rota-cell-add:focus-visible { opacity: 1; }
.rota-grid-empty { grid-column: 1 / -1; }
.rota-day-view { padding-bottom: 8px; }
.rota-day-list { display: grid; gap: 9px; padding: 16px; }
.rota-day-shift {
    position: relative;
    width: 100%;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}
.rota-day-shift:hover { border-color: color-mix(in srgb, var(--rota-colour) 45%, var(--border)); background: #fbfdff; }
.rota-day-time { display: grid; width: 64px; flex: 0 0 64px; }
.rota-day-time strong { font-size: 15px; }
.rota-day-time small { color: var(--muted); }
.rota-day-copy { display: grid; min-width: 0; flex: 1; }
.rota-day-copy > span { color: #42556b; }
.rota-day-copy small { color: var(--muted); }
.rota-colour-dot { width: 10px; height: 36px; border-radius: 999px; background: var(--rota-colour); }
.rota-month-weekdays { border-bottom: 1px solid var(--border); background: #fbfcfd; }
.rota-month-weekdays > div { padding: 11px; color: var(--muted); text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.rota-month-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); }
.rota-month-day { min-height: 142px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.rota-month-day.is-outside { color: #a7b0bc; background: #fafbfc; }
.rota-month-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.rota-month-date { display: flex; justify-content: flex-end; }
.rota-month-date button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: transparent; font-weight: 800; cursor: pointer; }
.rota-month-day.is-today .rota-month-date button { color: #fff; background: var(--primary); }
.rota-month-events { display: grid; gap: 4px; margin-top: 3px; }
.rota-month-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    width: 100%;
    padding: 5px 7px;
    overflow: hidden;
    border: 0;
    border-left: 4px solid var(--rota-colour);
    border-radius: 6px;
    color: #23354b;
    background: color-mix(in srgb, var(--rota-colour) 15%, #fff);
    text-align: left;
    cursor: pointer;
    font-size: 10px;
}
.rota-month-event strong,
.rota-month-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rota-more { color: var(--muted); font-size: 10px; font-weight: 700; }
.rota-drawer { width: min(700px, calc(100vw - 24px)); }
.rota-datetime-field { min-width: 0; }
.rota-datetime-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 8px;
}
.rota-date-input { position: relative; min-width: 0; }
.rota-date-input > input[data-rota-date-display] { width: 100%; padding-right: 42px; }
.rota-date-picker-button {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #52667d;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
}
.rota-date-picker-button:hover { color: var(--primary); background: var(--nav-hover-colour); }
.rota-date-picker-button .icon { width: 17px; height: 17px; }
.rota-native-date {
    position: absolute;
    width: 1px;
    height: 1px;
    right: 18px;
    bottom: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.field-help { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.form-section-heading { justify-content: space-between; gap: 16px; }
.form-section-heading h3 { margin: 0; }
.form-section-heading p { margin: 4px 0 0; color: var(--muted); }
.rota-colour-control { gap: 10px; min-height: 42px; padding: 4px 10px 4px 5px; border: 1px solid #ccd5df; border-radius: var(--radius-sm); }
.rota-colour-control input { width: 44px; min-height: 32px; padding: 0; border: 0; }
.rota-colour-control span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rota-pay-preview { gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid #cce4ff; border-radius: var(--radius-md); color: #185d9c; background: #eff7ff; }
.rota-pay-preview > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #fff; }
.rota-pay-preview strong,
.rota-pay-preview small { display: block; }
.rota-pay-preview small { margin-top: 3px; color: #557899; }
.rota-task-list { display: grid; gap: 12px; margin-top: 16px; }
.rota-task-row { align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fbfcfd; }
.rota-task-index { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; color: var(--primary); background: #e7f3ff; font-weight: 800; }
.rota-task-fields { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 140px; gap: 10px; }
.rota-task-fields textarea { min-height: 72px; }
.rota-task-time-field { min-width: 0; }
.rota-task-time-field input[data-rota-task-time-display] { width: 100%; }
.rota-task-remove { width: 34px; height: 34px; flex: 0 0 34px; }
.rota-drawer-footer { grid-template-columns: auto 1fr auto auto; }
.drawer-footer-spacer { flex: 1; }
.table-subcopy { display: block; max-width: 420px; margin-top: 3px; color: var(--muted); white-space: normal; }

@media (max-width: 1100px) {
    .rota-toolbar { align-items: stretch; flex-direction: column; }
    .rota-toolbar-controls { justify-content: space-between; }
    .rota-reminder-card { align-items: stretch; flex-direction: column; }
    .rota-reminder-form { justify-content: flex-end; }
}
@media (max-width: 760px) {
    .rota-date-navigation { flex-wrap: wrap; }
    .rota-range-title { width: 100%; margin: 5px 0 0; }
    .rota-toolbar-controls { align-items: stretch; flex-direction: column; }
    .rota-view-switch { width: 100%; }
    .rota-view-switch a { flex: 1; }
    .rota-staff-filter { align-items: stretch; flex-direction: column; }
    .rota-staff-filter select { width: 100%; }
    .rota-reminder-form { align-items: stretch; flex-direction: column; }
    .rota-reminder-form .field,
    .rota-reminder-form input,
    .rota-reminder-form .button { width: 100%; max-width: none; }
    .rota-month-grid { min-width: 860px; }
    .rota-calendar-card:has(.rota-month-grid) { overflow-x: auto; }
    .rota-task-fields { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .drawer { top: calc(var(--topbar-height) + 8px); right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - var(--topbar-height) - 16px); }
    .rota-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rota-datetime-control { grid-template-columns: 1fr; }
    .rota-drawer-footer { display: grid; grid-template-columns: 1fr 1fr; }
    .rota-drawer-footer .drawer-footer-spacer { display: none; }
    .rota-drawer-footer .button-danger { grid-column: 1 / -1; }
}

/* Rota week copy and optional feature controls */
.feature-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}
.feature-toggle-card:hover { border-color: #b9d8f6; background: #fbfdff; }
.feature-toggle-copy { min-width: 0; }
.feature-toggle-copy strong,
.feature-toggle-copy small { display: block; }
.feature-toggle-copy strong { font-size: 15px; }
.feature-toggle-copy small { margin-top: 4px; color: var(--muted); }
.switch-control { position: relative; flex: 0 0 auto; width: 48px; height: 28px; }
.switch-control input { position: absolute; opacity: 0; pointer-events: none; }
.switch-control > span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cfd8e3;
    transition: background .18s ease, box-shadow .18s ease;
}
.switch-control > span::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(26,43,64,.22);
    transition: transform .18s ease;
}
.switch-control input:checked + span { background: var(--button-colour); }
.switch-control input:checked + span::after { transform: translateX(20px); }
.switch-control input:focus-visible + span { box-shadow: 0 0 0 4px rgba(35,136,242,.18); }
.copy-week-drawer { width: min(620px, calc(100vw - 24px)); }
.copy-week-route {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #f8fbfe;
}
.copy-week-route > div span,
.copy-week-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.copy-week-route > div strong { display: block; margin-top: 5px; font-size: 14px; }
.copy-week-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e5f2ff; color: #1475d1; }
.copy-week-summary { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(90px,.5fr)); gap: 12px; margin-top: 14px; }
.copy-week-summary > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.copy-week-summary strong { display: block; margin-top: 4px; font-size: 16px; }
.copy-week-confirm { margin-top: 18px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
@media(max-width:640px) {
    .feature-toggle-card { align-items: flex-start; }
    .copy-week-route { grid-template-columns: 1fr; }
    .copy-week-arrow { transform: rotate(90deg); justify-self: center; }
    .copy-week-summary { grid-template-columns: 1fr 1fr; }
    .copy-week-summary > div:first-child { grid-column: 1 / -1; }
}

/* Staff payslips and forms */
.document-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
}
.document-toolbar .search-control { width: min(420px, 100%); }
.documents-table .clickable-row { cursor: pointer; }
.documents-table .clickable-row:focus { outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent); outline-offset: -3px; }
.document-drawer { width: min(680px, calc(100vw - 24px)); }
.document-file-drop { margin-top: 16px; }
.document-history { display: grid; gap: 10px; }
.document-history-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fbfcfd;
}
.document-history-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: #e8f4ff;
}
.document-history-copy { min-width: 0; }
.document-history-copy strong,
.document-history-copy span,
.document-history-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-history-copy span { margin-top: 3px; color: #526378; font-size: 13px; }
.document-history-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.document-history-actions { display: flex; gap: 7px; }
.document-history-actions a { text-decoration: none; }

@media (max-width: 760px) {
    .document-toolbar { align-items: stretch; flex-direction: column; }
    .document-toolbar .search-control { width: 100%; }
    .documents-table th:nth-child(2), .documents-table td:nth-child(2),
    .documents-table th:nth-child(4), .documents-table td:nth-child(4) { display: none; }
}
@media (max-width: 620px) {
    .document-drawer { top: calc(var(--topbar-height) + 8px); right: 8px; bottom: 8px; width: calc(100vw - 16px); border-radius: var(--radius-xl); }
    .document-history-item { grid-template-columns: 38px minmax(0, 1fr); }
    .document-history-actions { grid-column: 2; }
}

/* Canonical global date picker */
.date-picker-control { position: relative; min-width: 0; }
.date-picker-control > input[data-date-picker-display] { width: 100%; padding-right: 44px; }
.date-picker-trigger {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #52667d;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
}
.date-picker-trigger:hover,
.date-picker-trigger:focus-visible { color: var(--primary); background: var(--nav-hover-colour); outline: none; }
.date-picker-trigger .icon { width: 17px; height: 17px; }
.date-picker-native {
    position: absolute;
    right: 16px;
    bottom: 0;
    width: 1px !important;
    min-height: 1px !important;
    height: 1px;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}


/* Summary payroll reconciliation tabs */
.report-section-heading--tabs {
    align-items: flex-end;
    flex-wrap: wrap;
}
.report-section-heading--sub {
    padding-top: 0;
}
.summary-payroll-tabs {
    flex: 0 0 auto;
}
[data-summary-payroll-panel][hidden] {
    display: none !important;
}
.reconciliation-table th,
.reconciliation-table td {
    white-space: nowrap;
}
.balance-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.balance-chip--to-staff {
    color: #08744b;
    background: #ddf7eb;
}
.balance-chip--from-staff {
    color: #9d3040;
    background: #fde6e9;
}
.balance-chip--balanced {
    color: #4b5d72;
    background: #edf1f5;
}
@media (max-width: 760px) {
    .report-section-heading--tabs { align-items: stretch; }
    .summary-payroll-tabs { width: 100%; overflow-x: auto; }
    .summary-payroll-tabs button { flex: 0 0 auto; }
}

/* v2.12 user identity, permissions and rota publishing */
.avatar--image,
.chat-avatar.avatar--image {
    overflow: hidden;
    padding: 0;
}
.avatar--image img,
.chat-avatar.avatar--image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.avatar--large {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    font-size: 24px;
}
.profile-upload-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.upload-button input { display: none; }
.dual-permission {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(84px, auto));
    gap: 10px;
    align-items: center;
}
.dual-permission + .dual-permission {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 10px;
}
.dual-permission__heading {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.rota-publish-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.rota-task-fields {
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) minmax(140px, .7fr) minmax(150px, .75fr);
}
.rota-shift-card::after,
.rota-month-event::after {
    content: attr(data-status);
    display: inline-flex;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    color: #52647a;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .dual-permission { grid-template-columns: minmax(130px, 1fr) repeat(2, 76px); }
    .rota-task-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .dual-permission { grid-template-columns: 1fr 76px 76px; }
    .rota-task-fields { grid-template-columns: 1fr; }
    .profile-upload-control { align-items: flex-start; }
}

/* v2.13.11 canonical backend Notification Centre */
.notification-centre-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 22px;padding:5px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.notification-centre-tabs a{position:relative;display:flex;min-height:48px;align-items:center;justify-content:center;gap:9px;padding:0 16px;border-radius:13px;color:var(--muted);font-weight:800;text-decoration:none;transition:background .16s ease,color .16s ease,transform .16s ease}
.notification-centre-tabs a:hover{background:#f4f8fc}.notification-centre-tabs a.is-active{color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,#fff)}
.notification-centre-tabs .icon{width:19px;height:19px}.notification-centre-tabs b{display:inline-grid;min-width:22px;height:22px;place-items:center;padding:0 6px;border-radius:999px;color:#fff;background:#e24555;font-size:10px}
.notification-timeline-section{min-width:0}.notification-timeline{position:relative;display:grid;gap:10px}.notification-timeline::before{position:absolute;content:"";top:22px;bottom:22px;left:24px;width:2px;background:#e6edf4}
.notification-timeline-item{position:relative;z-index:1;margin:0;border:1px solid var(--border);border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(28,51,79,.05);overflow:hidden}
.notification-timeline-item.is-unread{border-color:color-mix(in srgb,var(--primary) 34%,var(--border));background:color-mix(in srgb,var(--primary) 4%,#fff)}
.notification-timeline-button{display:grid;width:100%;grid-template-columns:48px minmax(0,1fr) 30px;gap:13px;align-items:center;padding:15px;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}
.notification-timeline-button:hover{background:rgba(35,136,242,.035)}
.notification-timeline-static{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px}
.notification-timeline-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,#fff)}
.notification-timeline-icon .icon{width:22px;height:22px}.notification-timeline-copy{display:block;min-width:0}.notification-timeline-copy>span,.notification-timeline-copy>small{display:block}
.notification-timeline-heading{display:flex!important;align-items:center;justify-content:space-between;gap:10px}.notification-timeline-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.notification-timeline-heading em{display:inline-flex;min-height:23px;align-items:center;padding:0 8px;border-radius:999px;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,#fff);font-size:9px;font-style:normal;font-weight:900;text-transform:uppercase}
.notification-timeline-copy>span:not(.notification-timeline-heading){margin-top:4px;color:#52657c;font-size:12px;line-height:1.45}.notification-timeline-copy>small{margin-top:5px;color:#8794a4;font-size:10px;line-height:1.4}
.notification-timeline-copy>small.is-error{color:#b83246}.notification-timeline-arrow{display:grid;place-items:center;color:#91a0b0}.notification-timeline-arrow .icon{width:18px;height:18px}
.button-with-badge{position:relative;gap:8px}.button-badge{display:inline-grid;min-width:21px;height:21px;place-items:center;padding:0 6px;border-radius:999px;color:#fff;background:#e24555;font-size:10px;font-weight:900}
@media(max-width:700px){.notification-centre-tabs{grid-template-columns:1fr}.notification-timeline-button,.notification-timeline-static{grid-template-columns:42px minmax(0,1fr);padding:13px}.notification-timeline-icon{width:42px;height:42px}.notification-timeline-arrow{display:none}.notification-timeline-static>form{grid-column:2}.notification-timeline::before{left:21px}}

/* v2.13.14 Notification Centre scheduling and backend chat alignment */
.chat-avatar-wrap {
    position: relative;
    display: inline-grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    overflow: visible;
}
.chat-avatar-wrap > .chat-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
}
.chat-avatar-wrap > .chat-presence {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(20,36,58,.16);
}
.chat-conversation-meta {
    align-self: center;
    display: grid;
    min-width: 48px;
    justify-items: end;
    gap: 7px;
    text-align: right;
    line-height: 1;
}
.chat-conversation-time {
    display: block;
    color: #8995a5;
    font-size: 11px;
    white-space: nowrap;
}
.chat-conversation-meta .chat-unread {
    margin: 0;
}
.chat-thread-person .chat-avatar-wrap {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
}
@media (max-width: 900px) {
    .chat-conversation-meta { min-width: 44px; }
}


/* v2.13.17 Notification Centre deletion controls */
.notification-delete-note{margin:0 0 14px}
.notification-timeline-actions{align-items:center;flex-wrap:wrap}
.notification-timeline-actions form{margin:0}
@media(max-width:700px){
  .notification-timeline-static>.notification-timeline-actions{grid-column:2;justify-content:flex-start}
}