@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font-family: "Noto Sans", sans-serif;
    --primary: #2563eb;
    --primary-hover: #f6f7f7;
    --primary-soft: #eff6ff;
    --bg: #f6f7f7;
    --card: #ffffff;
    --border: #e4e9f0;
    --border-strong: #d5dde8;
    --text: #203040;
    --muted: #5f6368;
    --muted-light: #80868b;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .04);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, .08);
    --control-height: 36px;
    --control-height-lg: 40px;
    --sidebar-width: 248px;
    --sidebar-collapsed-width: 76px;
}

* { box-sizing: border-box; }
html { font-size: 14px; }
body {
    margin: 0;
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea, table { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; }
input::placeholder, textarea::placeholder { color: #a3adbb; }

/* Buttons */
.btn {
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { height: 32px; min-height: 32px; padding: 0 10px; border-radius: 7px; font-size: 12px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #1d55ce; border-color: #1d55ce; }
.btn-outline, .btn-soft { background: #fff; border-color: var(--border-strong); color: #445066; }
.btn-outline:hover, .btn-soft:hover { background: #f8fafc; border-color: #bbc7d6; color: var(--text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Login */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #eef4ff, #f8fafc); }
.login-card { width: 100%; max-width: 420px; background: #fff; padding: 30px; border-radius: 18px; box-shadow: 0 18px 44px rgba(15, 23, 42, .08); }
.login-logo { text-align: center; margin-bottom: 18px; }
.login-logo img { max-width: 84px; }
.login-card h2 { margin: 0 0 6px; text-align: center; font-size: 26px; }
.login-card p { margin: 0 0 22px; text-align: center; color: var(--muted); }
.input-group { margin-bottom: 14px; }
.input-group label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 13px; }
.input-group input { width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 12px; font-size: 14px; outline: none; }
.input-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.login-error { background: #fee2e2; color: #991b1b; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.login-btn { width: 100%; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.login-btn:hover { background: #1654da; }

/* App layout */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: #fff; border-right: 1px solid var(--border); padding: 16px 14px; overflow-y: auto; z-index: 20; transition: .2s ease; }
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px 14px; margin-bottom: 14px; border-bottom: 1px solid #eef2f7; }
.sidebar-brand img { width: 34px; height: 34px; object-fit: contain; }
.brand-text h4 { margin: 0; font-size: 14px; font-weight: 600; }
.brand-text span { color: var(--muted); font-size: 12px; }
.sidebar-toggle { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f1f5f9; cursor: pointer; }
.menu-section { margin-bottom: 16px; }
.menu-title { margin: 0 0 6px 10px; font-size: 11px; font-weight: 600; color: #94a3b8; letter-spacing: .08em; }
.nav-item { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: color: var(--text); font-size: 13px; font-weight: 400; margin-bottom: 3px; }
.nav-item:hover { background: #f1f5f9; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-icon { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 17px; height: 17px; stroke: currentColor; }
.sidebar-user { margin-top: 14px; background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; display: flex; align-items: center; gap: 9px; }
.user-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sidebar-user .user-avatar { width: 32px; height: 32px; font-size: 12px; }
.sidebar-user strong { display: block; font-size: 12px; }
.sidebar-user small { color: var(--muted); font-size: 11px; }
.sidebar.collapsed .brand-text, .sidebar.collapsed .menu-title, .sidebar.collapsed .menu-text, .sidebar.collapsed .sidebar-user div { display: none; }
.sidebar.collapsed .sidebar-brand { flex-direction: column; gap: 8px; padding: 0 0 14px; }
.sidebar.collapsed .sidebar-toggle { margin-left: 0; }
.sidebar.collapsed .nav-item, .sidebar.collapsed .sidebar-user { justify-content: center; }
.main-content { margin-left: var(--sidebar-width); padding: 16px; min-height: 100vh; transition: .2s ease; }
.main-content.expanded { margin-left: var(--sidebar-collapsed-width); }
.main-content.guard-shell { margin-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* Guard bottom-tab shell (Connecteam-style mobile home) */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .06);
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    border: none;
    background: none;
    font: inherit;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.bottom-nav-icon-wrap { position: relative; display: inline-flex; }
.bottom-nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
.bottom-nav-item span { font-size: 11px; font-weight: 600; }
.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-item:active { background: #f1f5f9; }

.guard-hero { margin-bottom: 16px; }
.guard-hero-greeting { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text, #203040); }
.guard-clock-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 18px;
}
.guard-clock-card.is-clocked-in { background: #16a34a; }
.guard-clock-card.is-empty { background: #f1f5f9; color: var(--muted); justify-content: center; padding: 22px; font-size: 13px; }
.guard-clock-card-copy { display: flex; flex-direction: column; gap: 2px; }
.guard-clock-card-copy strong { font-size: 15px; }
.guard-clock-card-copy span { font-size: 12px; opacity: .9; }
.guard-clock-card-time { font-weight: 600; }
.guard-clock-btn { white-space: nowrap; background: #fff; color: var(--primary); border: none; font-weight: 700; }
.guard-clock-card.is-clocked-in .guard-clock-btn { color: #b91c1c; }

.guard-quick-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.guard-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 8px;
    text-decoration: none;
    color: var(--text, #203040);
    font-size: 12px;
    font-weight: 600;
}
.guard-quick-tile svg { width: 22px; height: 22px; color: var(--primary); }

.guard-week-chart { display: flex; justify-content: space-between; gap: 6px; padding: 12px 4px 6px; }
.guard-week-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.guard-week-chart-bar-track { height: 70px; display: flex; align-items: flex-end; }
.guard-week-chart-bar { width: 18px; min-width: 18px; background: var(--primary); border-radius: 5px; position: relative; }
.guard-week-chart-bar.has-issue { background: #fca5a5; }
.guard-week-chart-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}
.guard-week-chart-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.guard-week-chart-label.is-today { color: var(--primary); }
.guard-week-chart-value { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.guard-week-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 6px; font-size: 13px; }
.guard-week-total strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.guard-progress-track { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin: 0 4px; }
.guard-progress-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.guard-status-row { padding: 4px; }

/* Topbar and dropdown */
.topbar { min-height: 58px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; margin-bottom: 14px; }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-left > div { min-width: 0; }
.topbar h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar small { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.topbar-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.header-icon { position: relative; width: 34px; height: 34px; border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s ease; }
.header-icon.mobile-menu-btn { display: none; }
.header-icon:hover { background: #f8fafc; border-color: #dbe3ee; }
.header-icon svg { width: 17px; height: 17px; color: #475569; }
.icon-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dropdown { position: relative; }
.profile-button { border: 0; background: transparent; cursor: pointer; padding: 0; }
.dropdown-menu { position: absolute; top: 44px; right: 0; min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 7px 0; display: none; z-index: 1200; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-header, .dropdown-footer { padding: 11px 14px; }
.dropdown-header { border-bottom: 1px solid #eef2f7; }
.dropdown-footer { border-top: 1px solid #eef2f7; }
.dropdown-header small { display: block; color: var(--muted); margin-top: 3px; }
.dropdown-item { display: block; width: 100%; padding: 9px 14px; text-decoration: none; color: #334155; font-size: 13px; background: none; border: none; text-align: left; font-family: inherit; cursor: pointer; }
.dropdown-item:hover { background: #f8fafc; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-form { display: block; }
.dropdown-footer a { text-decoration: none; font-size: 13px; color: var(--primary); }
.dropdown hr { border: 0; border-top: 1px solid #eef2f7; margin: 6px 0; }

/* Page shell */
.page-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px; }
/* Standalone now (render_page_header() no longer wraps this in a
   .page-header title block — the top bar is the single source of the
   page title/subtitle), so it needs to carry its own spacing/alignment
   instead of inheriting them from that parent. */
.page-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.page-actions .btn { min-width: auto; height: 36px; font-size: 14px; flex-shrink: 0;border-radius:200px;flex-direction: row-reverse;font-weight:400; }
/* flex-direction defaults to row, so without it the heading, copy, and
   action button (all direct children) all sat on one horizontal line,
   squeezed together instead of stacked — this is the single shared
   empty-state used everywhere in the app ("No schedules found", "No
   users found", etc.), so fixing the direction here fixes all of them. */
.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); border: 1px dashed #cbd5e1; border-radius: var(--radius-lg); background: #f8fafc; padding: 28px 20px; }
.empty-state h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.empty-state p { margin: 0 0 6px; max-width: 360px; font-size: 12.5px; line-height: 1.5; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.card-header h3 { margin: 0 0 4px; font-size: 16px; }
.card-header p { margin: 0; color: var(--muted); font-size: 12px; }

/* Tables */
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { text-align: left; font-size: 12px; color: #64748b; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; font-size: 13px; }
.table-user { display: flex; align-items: center; gap: 8px; }
.table-user strong {font-weight: 400;}
.user-avatar.small { width: 30px; height: 30px; font-size: 12px; }
.status-badge { display: inline-flex; align-items: center; line-height: 1.3; white-space: nowrap; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-badge.success { background: #dcfce7; color: #15803d; }
.status-badge.muted { background: #f1f5f9; color: #64748b; }
.status-badge.danger { background: #fee2e2; color: #b91c1c; }
.status-badge.warning { background: #fef3c7; color: #92400e; }
.status-badge.info { background: #dbeafe; color: #1d4ed8; }

/* Shared utilities (used to replace one-off inline styles across modules) */
.text-muted { color: var(--muted); }
.text-sm { font-size: 12.5px; }

.alert-box { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; }
.alert-box.success { background: #dcfce7; color: #15803d; }
.alert-box.danger { background: #fee2e2; color: #b91c1c; }
.alert-box.info { background: #eff6ff; color: #1d4ed8; display: flex; align-items: center; gap: 8px; }

/* Compact filter-bar controls (search/select/date inputs used above data tables).
   Matches the existing .custom-table-controls select sizing (31px / 7px radius)
   already established by the Reports and Activity Log filter bars. */
.filter-input, .filter-select {
    height: 31px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0 9px;
    font-size: 12.5px;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: .15s ease;
}
.filter-input:focus, .filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }

.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.picker-empty-state { padding: 14px; font-size: 12px; color: var(--muted); }
.token-display { user-select: all; word-break: break-all; }
.form-section-spaced { margin-bottom: 24px; }
.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; }
.btn-outline-danger { color: var(--danger); border-color: #fecaca; background: #fff; }
.btn-outline-danger:hover { background: #fef2f2; }
.action-cell { display: flex; gap: 6px; flex-wrap: wrap; }

/* Standalone pages outside the sidebar layout (Super Admin panel) */
.standalone-page { max-width: 700px; margin: 0 auto; padding: 32px 20px; }
.standalone-page.wide { max-width: 900px; }
.standalone-page.wider { max-width: 1100px; }

.superadmin-nav { background: #101728; border-bottom: 1px solid #1f2a40; }
.superadmin-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; }
.superadmin-nav-link { padding: 14px 14px; color: #94a3b8; text-decoration: none; font-size: 13px; font-weight: 650; border-bottom: 2px solid transparent; white-space: nowrap; }
.superadmin-nav-link:hover { color: #fff; }
.superadmin-nav-link.is-active { color: #fff; border-bottom-color: var(--primary); }

.superadmin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.superadmin-stat-card { text-align: center; padding: 18px 12px; }
.superadmin-stat-card strong { display: block; font-size: 26px; font-weight: 600; color: var(--text); }
.superadmin-stat-card span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.superadmin-stat-card.is-warning strong { color: var(--danger); }

/* Reports tabs */
/* Wrapping pushed a tab onto its own second row, which ate more vertical
   space than the tab bar should ever need — scrolling horizontally within
   the bar itself keeps it to one line regardless of how many tabs or how
   narrow the screen is. */
.reports-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; }
.reports-tab { flex-shrink: 0; white-space: nowrap; padding: 10px 16px; border: none; background: none; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reports-tab:hover { color: var(--text); }
.reports-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.reports-panel { display: none; }
.reports-panel.is-active { display: block; }
.table-action { color: var(--primary); text-decoration: none; font-weight: 700; }
.table-action:hover { text-decoration: underline; }
.table-actions, .icon-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inline-delete-form { margin: 0; }
.icon-action { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; padding: 0; transition: .15s ease; }
.icon-action svg { width: 15px; height: 15px; }
.icon-action:hover { background: #eff6ff; color: var(--primary); border-color: #bfdbfe; }
.icon-action.danger:hover { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.custom-table-wrapper { width: 100%; }
.custom-table-top, .custom-table-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.custom-table-top { margin: 13px 0; }
.custom-table-top.wrap { flex-wrap: wrap; }
.custom-table-bottom { margin-top: 10px; color: #64748b; font-size: 12px; }
.table-export-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.export-btn { min-width: 76px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); color: #334155; font-size: 14px; font-weight: 400; cursor: pointer; }
.export-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.export-btn svg { width: 15px; height: 15px; }
.export-btn.csv:hover { color: #15803d; border-color: #15803d; }
.export-btn.xlsx:hover { color: #166534; border-color: #166534; }
.export-btn.pdf:hover { color: #dc2626; border-color: #dc2626; }
.table-search input { width: 240px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 11px; outline: none; font-size: 12px; }
.table-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.custom-table-controls { margin-bottom: 10px; color: #64748b; font-size: 12px; }
.custom-table-controls select { height: 31px; border: 1px solid var(--border); border-radius: 7px; padding: 0 7px; background: #fff; }
.custom-table-controls.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
/* The search-select enhancer turns each <select> into a block-level
   .search-select-picker, which pushed its own label text ("Show") onto a
   line above it inside a plain <label> — row + fixed picker width keeps
   the label and its control on one line, matching every other filter here. */
.custom-table-controls.filters > label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.custom-table-controls.filters > label .search-select-picker { width: 90px; }
.custom-table { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;border-left: none;border-right: none;border-top:none; }
.custom-table th { text-align: left; background: #f6f7f7; color: var(--text); font-size: 14px; font-weight: 400; padding: 13px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.custom-table th[data-sort] { cursor: pointer; }
.custom-table thead tr{border-radius: 15px;}
.custom-table th[data-sort]::after { content: '↕'; font-size: 11px; color: #94a3b8; margin-left: 6px; }
.custom-table td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; font-size: 14px; vertical-align: middle;font-weight:400; }
.custom-table tr:last-child td { border-bottom: 0; }
.custom-table tbody tr:hover { background: #f8fafc; }
.table-loading, .table-empty { text-align: center; color: #64748b; padding: 28px !important; }
.custom-pagination { display: flex; gap: 5px; flex-wrap: wrap; }
.custom-pagination button { min-width: 32px; height: 31px; border: 1px solid var(--border); background: #fff; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 12px; }
.custom-pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.custom-pagination button:disabled { opacity: .5; cursor: not-allowed; }
.custom-table-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 31px; color: var(--muted-light); font-size: 12px; font-weight: 600; }

/* Forms */
.app-form { margin-top: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; max-width: 900px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 700; color: #48556a; }
.form-group input, .form-group select, .form-group textarea { width: 100%; min-height: var(--control-height-lg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 11px; font-size: 13px; color: var(--text); background: #fff; outline: none; transition: .15s ease; }
.form-group textarea { padding: 10px 11px; min-height: 82px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.form-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef2f7; }
.form-section h3 { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-width: 900px; }
.checkbox-card { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: #334155; transition: .15s ease; }
.checkbox-card:hover { border-color: var(--primary); background: #f8fbff; }
.checkbox-card input { width: 15px; height: 15px; accent-color: var(--primary); }
.checkbox-card small { display: block; color: var(--muted); margin-top: 3px; font-weight: 500; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eef2f7; }
.form-actions .btn { min-width: 100px; height: 36px; }
.form-errors { margin: 14px 0; padding: 11px 13px; border-radius: var(--radius-sm); background: #fee2e2; color: #991b1b; font-size: 13px; font-weight: 600; }
.form-errors div + div { margin-top: 5px; }

.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 16px; }
.settings-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; }
.settings-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); color: #48556a; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: .15s ease; }
.settings-nav a svg { flex-shrink: 0; color: #94a3b8; transition: .15s ease; }
.settings-nav a:hover { background: #f8fafc; color: var(--text); }
.settings-nav a.active { background: var(--primary-soft, #dbeafe); color: var(--primary); }
.settings-nav a.active svg { color: var(--primary); }
.settings-content { min-width: 0; }
.settings-content .page-card { scroll-margin-top: 16px; }
.settings-content .form-actions { margin-bottom: 24px; }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-section-head h3 { margin: 0; }

@media (max-width: 960px) {
    .settings-layout { display: block; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; margin-bottom: 14px; }
    .settings-nav a { flex-shrink: 0; white-space: nowrap; }
}
.permission-group { margin-bottom: 16px; }
.permission-group-header { margin-bottom: 9px; padding: 8px 11px; border-radius: var(--radius-sm); background: #f8fafc; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: #334155; }

/* Toasts and modal */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 13px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: toastSlideIn .2s ease; }
.toast-message { font-size: 12px; font-weight: 600; line-height: 1.4; color: #334155; }
.toast-success { border-left-color: #22c55e; }
.toast-error { border-left-color: #ef4444; }
.toast-warning { border-left-color: #f59e0b; }
.toast-close { border: 0; background: none; cursor: pointer; font-size: 18px; color: #64748b; line-height: 1; }
.toast.hide { opacity: 0; transform: translateX(16px); transition: .2s; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.modal-backdrop.show { display: flex; }
.confirm-modal { width: 100%; max-width: 430px; max-height: 88vh; background: #fff; border-radius: var(--radius-lg); overflow: hidden; animation: modalIn .18s ease; display: flex; flex-direction: column; }
.confirm-modal-header, .confirm-modal-footer { padding: 15px 18px; flex-shrink: 0; }
.confirm-modal-body { padding: 0 18px 18px; flex: 1; overflow-y: auto; min-height: 0; }
/* Every .confirm-modal-body/.confirm-modal-footer pair is wrapped in a
   <form>, which sits between them and .confirm-modal in the DOM. Without
   making that form a flex column too, the body's flex:1 has no flex parent
   to size against, so it silently ignores its own overflow rule and the
   footer gets pushed past the bottom of the modal. */
.confirm-modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.confirm-modal-body .modal-field {
    width: 100%;
    min-height: var(--control-height-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 11px;
    font-size: 13px;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: .15s ease;
}
.confirm-modal-body textarea.modal-field { min-height: 80px; padding: 9px 11px; }
.confirm-modal-body .modal-field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.confirm-modal-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e2e8f0; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Dashboard */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }

.dashboard-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #bfdbfe; }

.dashboard-stat-card .stat-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard-stat-card .stat-icon svg { width: 20px; height: 20px; stroke: currentColor; }

.stat-body { flex: 1; min-width: 0; }
.stat-body > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.stat-body > strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 26px; font-weight: 600; line-height: 1; }
.stat-body > small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.35; }

.dashboard-stat-card.accent-blue .stat-icon { background: #eff6ff; color: #2563eb; }
.dashboard-stat-card.accent-indigo .stat-icon { background: #eef2ff; color: #4f46e5; }
.dashboard-stat-card.accent-teal .stat-icon { background: #ecfeff; color: #0891b2; }
.dashboard-stat-card.accent-amber .stat-icon { background: #fffbeb; color: #b45309; }
.dashboard-stat-card.accent-green .stat-icon { background: #f0fdf4; color: #15803d; }
.dashboard-stat-card.accent-purple .stat-icon { background: #faf5ff; color: #7e22ce; }

/* Dashboard: section headings */
.dashboard-section-title { display: flex; align-items: center; gap: 9px; margin: 26px 0 14px; }
.dashboard-section-title h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.dashboard-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); }

/* Dashboard: attention / approvals row */
.dashboard-attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 8px; }
.dashboard-attention-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dashboard-attention-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #fde68a; }
.dashboard-attention-card.is-zero:hover { border-color: #bbf7d0; }
.dashboard-attention-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: #fef3c7; color: #b45309; display: flex; align-items: center; justify-content: center; }
.dashboard-attention-card.is-zero .dashboard-attention-icon { background: #f0fdf4; color: #15803d; }
.dashboard-attention-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.dashboard-attention-copy { min-width: 0; }
.dashboard-attention-copy strong { display: block; font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--text); }
.dashboard-attention-icon { margin-top: 2px; }
.dashboard-attention-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.dashboard-attention-copy span b { color: #92400e; font-weight: 700; }
.dashboard-attention-card.is-zero .dashboard-attention-copy span b { color: #166534; }

/* Dashboard: two-column widgets */
.dashboard-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
.dashboard-widget-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px 20px 10px; box-shadow: var(--shadow-sm); }
.dashboard-widget-card-header { display: flex; align-items: center; gap: 9px; padding: 14px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dashboard-widget-card-header .widget-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.dashboard-widget-card-header .widget-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.dashboard-widget-card-header h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.dashboard-widget-empty { padding: 30px 4px; text-align: center; color: var(--muted-light); font-size: 12px; }

.dashboard-shift-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f1f5f9; }
.dashboard-shift-row:last-child { border-bottom: 0; padding-bottom: 6px; }
.dashboard-shift-row strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.dashboard-shift-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.dashboard-shift-time { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; white-space: nowrap; }

.dashboard-activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.dashboard-activity-row:last-child { border-bottom: 0; padding-bottom: 6px; }
.dashboard-activity-icon { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #64748b; }
.dashboard-activity-icon svg { width: 15px; height: 15px; stroke: currentColor; }
.dashboard-activity-icon.mod-timesheets { background: #eff6ff; color: #2563eb; }
.dashboard-activity-icon.mod-schedules { background: #faf5ff; color: #7e22ce; }
.dashboard-activity-icon.mod-users { background: #ecfeff; color: #0891b2; }
.dashboard-activity-copy { min-width: 0; padding-top: 1px; }
.dashboard-activity-copy p { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.4; }
.dashboard-activity-copy p strong { font-weight: 700; }
.dashboard-activity-copy small { display: block; margin-top: 3px; color: var(--muted-light); font-size: 11px; }

.dashboard-monitoring-widget { max-width: none; }
.dashboard-monitoring-widget .dashboard-widget-card-header { flex-wrap: wrap; }
.dashboard-monitoring-site-filter {
    margin-left: auto;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    min-width: 160px;
}
.dashboard-monitoring-link { font-size: 11.5px; font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; }
.dashboard-monitoring-link:hover { text-decoration: underline; }
.dashboard-monitoring-stats { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; margin-bottom: 10px; }

/* Map + guard list side by side, like the full /monitoring page, so the
   widget actually uses the width a dashboard column gives it instead of
   stretching one narrow map with empty space beside the card. Height is
   deliberately kept compact (unlike the full page's 560px) so the widget
   doesn't dominate the dashboard's scroll. */
.dashboard-monitoring-layout { display: grid; grid-template-columns: 1fr 280px; gap: 12px; align-items: start; }
.dashboard-monitoring-map { height: 220px; min-height: 220px; border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; background: #eef2f7; }
/* .monitoring-guard-item (from the full /monitoring page, reused here once
   live-monitoring.js takes over rendering) hovers with a negative left/right
   margin so its highlight bleeds past the row's own padding — on the real
   page that's absorbed by .monitoring-sidebar's 16px side padding, but this
   list had none, so the hover highlight itself pushed past the card edge
   and forced a horizontal scrollbar. Matching padding here absorbs it. */
.dashboard-monitoring-list { max-height: 220px; overflow-y: auto; overflow-x: hidden; padding: 0 8px; }
.dashboard-monitoring-list .dashboard-shift-row { padding: 9px 0; }
@media (max-width: 760px) {
    .dashboard-monitoring-layout { grid-template-columns: 1fr; }
    .dashboard-monitoring-map { height: 180px; min-height: 180px; }
    .dashboard-monitoring-list { max-height: 180px; }
}
.dashboard-monitoring-stat { flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); background: #f8fafc; text-align: center; }
.dashboard-monitoring-stat strong { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.dashboard-monitoring-stat span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted-light); text-transform: uppercase; letter-spacing: .03em; }
.dashboard-monitoring-stat.has-alerts { background: #fef2f2; }
.dashboard-monitoring-stat.has-alerts strong { color: var(--danger); }
.dashboard-monitoring-status { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.dashboard-monitoring-status.is-inside { background: #ecfdf5; color: #16a34a; }
.dashboard-monitoring-status.is-outside { background: #fff7ed; color: #c2410c; }
.dashboard-monitoring-status.is-alert { background: #fef2f2; color: #dc2626; }
.dashboard-monitoring-status.is-unknown { background: #f1f5f9; color: #64748b; }

@media (max-width: 960px) {
    .dashboard-columns { grid-template-columns: 1fr; }
}
.module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.module-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; color: var(--text); text-decoration: none; transition: .15s ease; }
.module-item:hover { background: #f8fafc; border-color: #bfdbfe; }
.module-item strong { display: block; margin-bottom: 4px; font-size: 14px; }
.module-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Schedule list */
.schedule-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.schedule-search-form { display: flex; align-items: center; gap: 7px; width: 330px; }
.schedule-search-form input, .schedule-user-search { width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--text); font-size: 12px; outline: none; }
.schedule-search-form input:focus, .schedule-user-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.schedule-tabs { display: flex; gap: 5px; }
.schedule-tabs a { display: inline-flex; align-items: center; justify-content: center; padding: 7px 13px; border-radius: var(--radius-sm); text-decoration: none; color: #475569; background: #f8fafc; border: 1px solid var(--border); font-size: 12px; font-weight: 700; }
.schedule-tabs a:hover { background: #eff6ff; }
.schedule-tabs a.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.schedule-card-grid, .schedule-card-grid.premium { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.schedule-group-card.premium-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: .15s ease; display: flex; flex-direction: column; }
.schedule-group-card.premium-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-md); }
.premium-card-body { padding: 16px 16px 12px; }
.premium-card-header { display: flex; align-items: flex-start; gap: 12px; }
.premium-card-icon-badge {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-color, #2563eb) 14%, white);
    color: var(--card-color, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.premium-card-title-col { flex: 1; min-width: 0; padding-top: 1px; }
.premium-card-header h3 { margin: 0; color: #203040; font-size: 18px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.premium-card-code-badge { display: inline-block; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 10.5px; color: #64748b; font-weight: 600; }
.premium-card-header-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.premium-card-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.premium-card-status-pill.success { border-color: #bbf7d0; }
.premium-card-status-pill.muted { border-color: #e2e8f0; }
.premium-card-status-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.premium-card-description { margin: 12px 0 0; color: #64748b; font-size: 12.5px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-stack { display: flex; align-items: center; justify-content: center; }
.avatar-stack b { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: color-mix(in srgb, var(--card-color, #2563eb) 16%, white); color: var(--card-color, #2563eb); border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-left: -6px; }
.avatar-stack b:first-child { margin-left: 0; }
.avatar-stack b.is-empty { background: #f1f5f9; color: #94a3b8; }
.avatar-stack small { color: #94a3b8; font-size: 11px; }
.premium-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.premium-stat-col { padding: 12px 4px; text-align: center; border-right: 1px solid var(--border); }
.premium-stat-col:last-child { border-right: 0; }
.premium-stat-col strong { display: block; color: #203040; font-size: 14px; font-weight: 400; line-height: 1.2; }
.premium-stat-label { display: block; margin-top: 4px; color: #94a3b8; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.premium-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #f8fafc; }
.premium-card-access-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; font-size: 13px; text-decoration: none; }
.schedule-group-card  .premium-card-access-link {
    font-weight: 400;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid #dbdee0;
    padding: 10px;
    border-radius: 200px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}
.schedule-group-card  .premium-card-access-link svg{
    display: none;
}
.schedule-group-card .premium-card-footer{
    justify-content: center;
    background-color: #fff;
}
.schedule-group-card.premium-card{
    overflow: visible;
}
.schedule-group-card .premium-card-footer{
    padding-right: 68px;
    border-radius: 0 0 14px 14px;
}
.schedule-group-card .premium-card-arrow-btn{
    display: none;
}
.schedule-group-card .premium-card-access-link:hover{
    text-decoration: none;
    background: #f6f7f7;
}
/* the header ⋮ menu is shown as the round ••• button at the bottom-right of the card */
.schedule-group-card .schedule-card-menu{
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 5;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.schedule-group-card .schedule-menu-btn{
    width: 40px;
    height: 40px;
    border: 1px solid #dbdee0;
    border-radius: 999px;
    background: #fff;
    color: #3b9cf5;
}
.schedule-group-card .schedule-menu-btn:hover{
    background: #f6f7f7;
    color: #3b9cf5;
}
.schedule-group-card .schedule-menu-btn svg{
    transform: rotate(90deg);
}
.schedule-group-card .schedule-menu{
    top: auto;
    bottom: 46px;
    right: 0;
    width: 190px;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.schedule-group-card .schedule-menu a,
.schedule-group-card .schedule-menu button{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #203040;
}
.schedule-group-card .schedule-menu svg{
    flex-shrink: 0;
    color: #475569;
}
.premium-card-access-link:hover { text-decoration: underline; }
.premium-card-arrow-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: #334155; display: inline-flex; align-items: center; justify-content: center; }
.premium-card-arrow-btn:hover { background: #eef2f7; color: #203040; }
.schedule-card-menu { position: relative; }
.schedule-menu-btn { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; }
.schedule-menu-btn:hover { background: #f1f5f9; color: #334155; }
.schedule-menu { position: absolute; top: 36px; right: 0; width: 170px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); display: none; z-index: 1200; overflow: hidden; }
.schedule-menu.open { display: block; }
.schedule-menu a, .schedule-menu button { width: 100%; display: block; text-align: left; background: none; border: 0; padding: 9px 11px; cursor: pointer; text-decoration: none; color: #334155; font-size: 12px; }
.schedule-menu a:hover, .schedule-menu button:hover { background: #f8fafc; }
.schedule-menu form { margin: 0; }

/* Schedule group drawer/wizard */
.schedule-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: .2s ease; z-index: 9998; }
.schedule-drawer-backdrop.show { opacity: 1; visibility: visible; }
.schedule-drawer { position: fixed; top: 0; right: -620px; width: 600px; max-width: 100%; height: 100%; background: #fff; z-index: 9999; transition: .25s ease; display: flex; flex-direction: column; box-shadow: -12px 0 36px rgba(15, 23, 42, .16); }
.schedule-drawer.open { right: 0; }
.schedule-drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.schedule-drawer-header h3 { margin: 0; color: #203040; font-size: 16px; }
.schedule-drawer-header p { margin: 4px 0 0; color: #64748b; font-size: 12px; }
.schedule-drawer-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; border: 0; border-radius: 999px; cursor: pointer; font-size: 18px; background: #f1f5f9; color: #334155; }
.schedule-drawer-form { flex: 1; overflow: auto; padding: 15px 18px; }
.schedule-wizard-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; background: #f8fafc; padding: 5px; border-radius: var(--radius-sm); margin-bottom: 15px; }
.schedule-wizard-steps button { border: 0; background: transparent; color: #64748b; border-radius: 6px; height: 32px; font-size: 12px; font-weight: 600; cursor: pointer; }
.schedule-wizard-steps button.active { background: var(--primary); color: #fff; }
.schedule-wizard-panel { display: none; }
.schedule-wizard-panel.active { display: block; }
.schedule-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 330px; overflow: auto; padding-right: 3px; }
.schedule-user-search { margin-bottom: 10px; }
.schedule-summary-card { border: 1px solid var(--border); background: #f8fafc; border-radius: var(--radius-md); padding: 14px; }
.schedule-summary-card h3 { margin: 0 0 6px; color: #203040; font-size: 14px; }
.schedule-summary-card p { margin: 0 0 12px; color: #64748b; font-size: 12px; }
.schedule-drawer-actions { position: sticky; bottom: -15px; margin: 18px -18px -15px; padding: 10px 18px; background: #fff; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* Schedule board */
.schedule-board-page { width: 100%; /*background: #fff; border: 1px solid var(--border);*/ border-radius: var(--radius-lg); overflow: visible; }
.schedule-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 18px;
}
.schedule-board-heading, .schedule-board-name-line, .schedule-board-header-actions, .schedule-board-admins, .schedule-board-admin-stack { display: flex; align-items: center; }
.schedule-board-heading { gap: 16px; min-width: 0; }
.schedule-board-back, .schedule-board-mark, .schedule-toolbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.schedule-board-back { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; color: #475569; }
.schedule-board-back svg { width: 15px; height: 15px; }
.schedule-board-mark {
    /* width: 35px; */
    /* height: 34px; */
    border-radius: 9px;
    color: var(--schedule-color);
    background: transparent;
}
.schedule-board-mark svg {
    width: 30px;
    height: 30px;
}
.schedule-board-heading-text { min-width: 0; }
.schedule-board-name-line { gap: 8px; }
.schedule-board-name-line h1 { margin: 0; font-size: 15px; color: #203040; }
.schedule-board-code { padding: 3px 6px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 600; }
.schedule-board-heading-text p { margin: 2px 0 0; color: #64748b; font-size: 11px; }
.schedule-board-header-actions { gap: 7px; }
.schedule-board-admins { gap: 7px; padding-right: 8px; border-right: 1px solid var(--border); }
.schedule-board-admin-stack { padding-left: 5px; }
.schedule-board-admin-avatar { width: 25px; height: 25px; flex-shrink: 0; margin-left: -5px; border: 2px solid #fff; border-radius: 50%; background: #dbeafe; color: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.schedule-board-admin-avatar.more { background: #f1f5f9; color: #475569; }
.schedule-board-admins strong, .schedule-board-admins small { display: block; }
.schedule-board-admins strong { font-size: 12px; }
.schedule-board-admins small { color: #94a3b8; font-size: 11px; }
.schedule-board-toolbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    border-radius: 18px 18px 0 0;
}
.schedule-board-toolbar-left, .schedule-board-toolbar-right, .schedule-view-switcher, .schedule-week-navigation { display: flex; align-items: center; gap: 5px; }
.schedule-board-toolbar-right { justify-content: flex-end; flex-wrap: wrap; }
.schedule-view-switcher { padding: 3px; background: #eef2f7; border-radius: 7px; }
.schedule-view-switcher button { border: 0; background: transparent; padding: 5px 8px; border-radius: 5px; color: #64748b; font-size: 11px; font-weight: 700; cursor: pointer; }
.schedule-view-switcher button.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.schedule-toolbar-icon-btn, .schedule-today-btn, .schedule-period-label, .schedule-filter-control { height: 31px; border: 1px solid var(--border-strong); background: #fff; border-radius: 7px; color: #475569; cursor: pointer; }
.schedule-toolbar-icon-btn { width: 31px; }
.schedule-toolbar-icon-btn svg, .schedule-period-label svg, .schedule-filter-control svg { width: 14px; height: 14px; }
.schedule-today-btn { padding: 0 9px; font-size: 11px; font-weight: 700; }
.schedule-period-label { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; font-size: 11px; font-weight: 700; }
.schedule-filter-control { min-width: 105px; max-width: 135px; display: flex; align-items: center; gap: 4px; padding: 0 7px; color: #64748b; }
.schedule-export-dropdown { position: relative; }
.schedule-export-dropdown-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 1200; min-width: 100px; padding: 5px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-md, 0 8px 20px rgba(15,23,42,.12)); display: flex; flex-direction: column; }
.schedule-export-dropdown-menu a { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #334155; text-decoration: none; }
.schedule-export-dropdown-menu a:hover { background: #f1f5f9; color: var(--primary); }
.schedule-filter-control select { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: #334155; font-size: 11px; }
.schedule-period-picker, .schedule-add-menu, .schedule-board-actions-menu { position: absolute; display: none; z-index: 1200; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.schedule-period-picker.open, .schedule-add-menu.open, .schedule-board-actions-menu.open { display: block; }
.schedule-period-picker { top: 48px; left: 190px; padding: 10px; border-radius: var(--radius-sm); }
.schedule-period-field { margin-bottom: 8px; }
.schedule-period-field label { display: block; margin-bottom: 4px; color: #64748b; font-size: 11px; font-weight: 600; }
.schedule-period-field input { height: 32px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 8px; font-size: 12px; }
.schedule-add-menu-wrap, .schedule-board-actions-menu-wrap { position: relative; }
.schedule-add-menu, .schedule-board-actions-menu { top: 37px; right: 0; border-radius: var(--radius-sm); }

/* ==========================================================
   Schedule Board toolbar — matched to the reference design
   (Connecteam's shift scheduler toolbar): plain blue text-link
   dropdowns for menu-style actions, a bordered white "Week ▾"
   select-style button for the view switcher, a connected pill
   for the prev/range/next date navigator, and a muted disabled-
   look Publish button.
========================================================== */

.schedule-toolbar-dropdown { position: relative; }

.schedule-toolbar-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.schedule-toolbar-link:hover { background: var(--primary-soft); }
.schedule-toolbar-link svg { flex-shrink: 0; width: 14px; height: 14px; }
.schedule-toolbar-link[aria-expanded="true"] { background: var(--primary-soft); }
.schedule-today-link { color: var(--muted); border-color: transparent; }
.schedule-today-link:hover { color: var(--primary); background: var(--primary-soft); }
.schedule-toolbar-dropdown button {
    border: 1px solid #dbdee0;
    border-radius: 200px;
    font-size: 14px;
    padding: 10px;
    height: 40px;
}
.schedule-add-menu-wrap button.schedule-toolbar-link,.new-add-publish-btn button {
    border: 1px solid #dbdee0;
    border-radius: 200px;
    font-size: 14px;
    padding: 10px;
    height: 40px;
}
.schedule-toolbar-dropdown button.schedule-toolbar-icon-btn {
    width: 40px;
}
.schedule-toolbar-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.schedule-toolbar-select-btn:hover { border-color: var(--primary); }
.schedule-toolbar-select-btn svg { flex-shrink: 0; width: 14px; height: 14px; color: #94a3b8; }

.schedule-toolbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    display: none;
    min-width: 210px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
}
.schedule-toolbar-dropdown-menu.open { display: block; }
.schedule-toolbar-dropdown-menu button,
.schedule-toolbar-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1f2937;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.schedule-toolbar-dropdown-menu button + button,
.schedule-toolbar-dropdown-menu button + a,
.schedule-toolbar-dropdown-menu a + a { margin-top: 1px; }
.schedule-toolbar-dropdown-menu button:hover,
.schedule-toolbar-dropdown-menu a:hover { background: #f1f5f9; }
/* Same icon-box treatment as .schedule-add-menu-icon, so every dropdown
   in the toolbar (Add, Actions, View options) reads as one consistent
   design language instead of the Add menu looking richer than the rest. */
.schedule-toolbar-dropdown-menu button svg,
.schedule-toolbar-dropdown-menu button svg, .schedule-toolbar-dropdown-menu a svg {
    flex-shrink: 0;
    /* width: 30px; */
    /* height: 30px; */
    /* padding: 7px; */
    /* box-sizing: border-box; */
    /* border-radius: 8px; */
    /* background: var(--primary-soft); */
    color: var(--text);
}
.schedule-toolbar-dropdown-menu button.active { color: var(--primary); background: var(--primary-soft); }
.schedule-toolbar-dropdown-menu button.active svg { background: var(--primary); color: #fff; }

.schedule-board-filter-menu { min-width: 220px; padding: 10px; }
.schedule-toolbar-filter-field { margin-bottom: 10px; }
.schedule-toolbar-filter-field:last-child { margin-bottom: 0; }
.schedule-toolbar-filter-field label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.schedule-toolbar-filter-field select { width: 100%; height: 33px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 8px; background: #fff; color: var(--text); font-size: 12.5px; }

.schedule-date-nav-pill {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}
.schedule-date-nav-pill button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.schedule-date-nav-pill button:hover { color: var(--primary); }
.schedule-date-nav-pill button svg { width: 15px; height: 15px; }
.schedule-date-nav-pill span {
    padding: 0 2px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

/* The shared date-range-picker component still drives the calendar
   popover here (same markup/JS as Reports, Time Off, etc.) — only its
   visible label is hidden so the trigger reads as a bare calendar icon,
   matching the reference design's separate icon-only calendar button
   next to the pill instead of duplicating the range text a second time. */
.schedule-board-period-picker-icon-only .date-range-trigger {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 7px;
}
.schedule-board-period-picker-icon-only .date-range-trigger span { display: none; }
.schedule-board-period-picker-icon-only .date-range-trigger svg { width: 15px; height: 15px; }

/* Unlike the reference design (which keeps a muted/disabled "Publish"
   visible at all times), this button is only ever rendered at all when
   there's something to publish (see updatePublishRangeButton() — it stays
   `hidden` otherwise) — so whenever it's actually on screen there's a real
   action to take, and it's styled as an active primary button rather than
   copying the reference's disabled-look, which would misrepresent that. */
.schedule-toolbar-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 13px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .28);
}
.schedule-toolbar-publish-btn:hover { background: #1d55ce; border-color: #1d55ce; }
.schedule-toolbar-publish-btn svg { flex-shrink: 0; width: 14px; height: 14px; }
/* The draft count as its own pill instead of tiny "(3)" text tacked onto
   the label — same idea as a notification badge, sized to stay legible
   on its own rather than shrinking to match the surrounding label. */
.schedule-toolbar-publish-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.schedule-add-menu {
    width: max-content;
    padding: 8px;
    border-radius: 18px;
    max-width: 240px;
}
.schedule-add-menu button {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-weight: 400 !important;
}
.schedule-toolbar-link[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.schedule-add-menu button + button { margin-top: 1px; }
.schedule-add-menu button:hover, .schedule-board-actions-menu button:hover { background: #f1f5f9; }
.schedule-add-menu-icon { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); }
.schedule-add-menu strong, .schedule-add-menu small { display: block; }
.schedule-add-menu strong { font-size: 13px; color: #1f2937; }
.schedule-add-menu small { margin-top: 1px; color: #94a3b8; font-size: 11.5px; font-weight: 500; }
.schedule-board-actions-menu { width: 175px; padding: 5px; }
.schedule-board-actions-menu button { width: 100%; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; font-size: 11px; }
.schedule-board-actions-menu button.danger { color: var(--danger); }
/* min-height alone let this box grow to fit however many rows/shifts it
   held, with the whole PAGE scrolling around it — so the day-header's
   position:sticky (scoped to .schedule-calendar-scroll below, which
   never actually overflowed as a result) never had anything to stick
   against. Capping the height here makes the grid its own scrollable
   region instead, matching the reference scheduler where the toolbar
   and day-header stay put while only the shift rows scroll underneath. */
.schedule-calendar-shell { position: relative; width: 100%; height: calc(100vh - 260px); min-height: 430px; overflow: hidden; }
.schedule-agenda-shell { display: none; }
.schedule-calendar-scroll { width: 100%; max-width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }
.schedule-calendar-grid { --schedule-day-count: 7; width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(140px, 180px) repeat(var(--schedule-day-count), minmax(0, 1fr)); }
.schedule-calendar-corner, .schedule-calendar-date-header, .schedule-calendar-row-label, .schedule-calendar-cell { border-right: 1px solid #e8edf3; border-bottom: 1px solid #e8edf3; }
.schedule-calendar-corner { position: sticky; top: 0; left: 0; z-index: 8; min-height: 62px; padding: 8px; background: #fff;display:flex;align-items:center; }
.schedule-calendar-user-search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    color: #94a3b8;
    transition: border-color .15s ease;
}}
.schedule-calendar-user-search svg { flex-shrink: 0; width: 14px; height: 14px; }
.schedule-calendar-user-search input { width: 100%; min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12.5px; }
.schedule-calendar-user-search input::placeholder { color: #94a3b8; }
.schedule-calendar-date-header { position: sticky; top: 0; z-index: 7; min-height: 62px; padding: 8px 9px; background: #fff; }
.schedule-calendar-date-header.today { background: #fff; }
.schedule-calendar-date-name { display: flex; align-items: center; gap: 5px;justify-content:center; }
.schedule-calendar-date-name strong { color: var(--text); font-size: 12.5px; font-weight: 500; }
.schedule-calendar-date-name span { width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Today gets both the weekday and the date pulled into one pill together
   (not just the number circled) so the active column reads as a single
   highlighted unit at a glance, matching the reference scheduler. */
.schedule-calendar-date-header.today .schedule-calendar-date-name {
    padding: unset;
    border-radius: unset;
    background: unset;
}
.schedule-calendar-date-header.today .schedule-calendar-date-name strong { color: var(--text); }
.schedule-calendar-date-header.today .schedule-calendar-date-name span { background: rgba(255,255,255,.25); color: var(--text); }
.schedule-calendar-date-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px;justify-content:center; }
.schedule-calendar-date-meta small { color: #64748b; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.schedule-calendar-date-meta .open-count { color: var(--warning); }
.schedule-calendar-date-header.today .schedule-calendar-date-meta small { color: #8b939c; font-weight: 500; }
.schedule-calendar-date-header.today .schedule-calendar-date-meta small svg { opacity: 1; color: #8b939c; }
.schedule-coverage-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 6px; background: #e2e8f0; }
.schedule-coverage-bar .seg { display: block; }
.schedule-coverage-bar .seg.confirmed { background: #22c55e; }
.schedule-coverage-bar .seg.pending { background: #f59e0b; }
.schedule-coverage-bar .seg.declined { background: #ef4444; }
.schedule-coverage-bar .seg {
    display: block;
    background: #dbdee0  !important;
}
.today .schedule-coverage-bar .seg {
    background: #ff9500  !important;
}
.schedule-calendar-row-label { position: sticky; left: 0; z-index: 5; min-height: 78px; padding: 7px 8px; background: #fff; display: flex; align-items: center; gap: 7px; }
.schedule-calendar-row-label.info-row { background: #fff; }
/*.schedule-calendar-row-label.unassigned-row { background: #fff7ed; }*/
.schedule-row-icon, .schedule-row-avatar { width: 27px; height: 27px; flex: 0 0 27px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: #eef2ff; color: #4f46e5; font-size: 11px; }
span.schedule-row-icon {
    background-color: transparent;
    color: var(--text);
    width: unset;
    height: unset;
    font-size: 20px;
}
span.schedule-row-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.3px;
}
.schedule-row-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font-weight: 500; }
.schedule-row-icon svg, .schedule-row-menu svg { width: 13px; height: 13px; }
.schedule-calendar-row-label strong, .schedule-calendar-row-label small { display: block; }
.schedule-calendar-row-label strong { font-size: 12.5px; font-weight: 500; color: var(--text); }
.schedule-calendar-row-label small { margin-top: 2px; color: #64748b; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.schedule-row-user-text { min-width: 0; flex: 1; }
.schedule-row-user-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-row-menu { border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.schedule-calendar-cell { position: relative; min-height: 64px; padding: 4px; background: #fff; }
.schedule-calendar-cell.info-cell { background: #fff; }
.schedule-cell-hover { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 22px; }
.schedule-cell-add { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; border-radius: 50%; color: transparent; cursor: pointer; transition: .15s ease; }
.schedule-cell-add svg { width: 12px; height: 12px; }
.schedule-calendar-cell:hover .schedule-cell-add { border-color: #bfdbfe; background: #eff6ff; color: var(--primary); }
.schedule-cell-quick { position: relative; flex: 0 0 auto; }
.schedule-cell-quick-toggle { width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; border-radius: 50%; color: transparent; cursor: pointer; transition: .15s ease; }
.schedule-calendar-cell:hover .schedule-cell-quick-toggle { border-color: #bfdbfe; background: #eff6ff; color: var(--primary); }
.schedule-cell-quick-toggle[aria-expanded="true"] { border-color: var(--primary); background: #eff6ff; color: var(--primary); }
.schedule-cell-quick-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 190px; padding: 4px; background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.schedule-cell-quick-menu[hidden] { display: none; }
.schedule-cell-quick-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: 6px; font-size: 12px; font-weight: 500; color: #1f2937; text-align: left; cursor: pointer; }
.schedule-cell-quick-menu button:hover { background: #f1f5f9; }
.schedule-cell-quick-menu svg { flex: 0 0 auto; color: #64748b; }
.schedule-grid-shift-wrap { position: relative; width: 100%; margin-bottom: 3px; }
.schedule-grid-shift-wrap[draggable="true"] { cursor: grab; }
.schedule-grid-shift-wrap.is-dragging { opacity: .4; }
.schedule-grid-shift {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px;
    border: 0;
    border-left: 3px solid var(--shift-color);
    border-radius: 10px;
    background: var(--shift-color);
    text-align: left;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .12s ease, transform .12s ease;
}
.schedule-shift-card-top strong{
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.schedule-grid-shift {
    position: relative;
    overflow: hidden;
}

.schedule-grid-shift::after {
    content: "";
    position: absolute;
    inset: auto 0 0 auto;

    width: 18px;
    height: 18px;

    border-start-start-radius: 18px;

    background-image: linear-gradient(
        to top left,
        #fff 50%,
        rgba(0, 0, 0, 0.18) 50%
    );

    opacity: 0;
    pointer-events: none;
    z-index: 10;

    transition: opacity 0.15s ease;
}

.schedule-grid-shift:hover::after {
    opacity: 1;
}
.schedule-grid-shift:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .12); transform: translateY(-1px); }
.schedule-grid-shift.draft { border-style: dashed; opacity: .76; }
.schedule-grid-shift.status-cancelled { border-left-color: #cbd5e1; background: #f8fafc; opacity: .7; }
.schedule-grid-shift.status-cancelled .schedule-shift-card-top strong { text-decoration: line-through; color: #94a3b8; }
.schedule-shift-duplicate-btn { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; display: none; align-items: center; justify-content: center; border: none; border-radius: 4px; background: rgba(255,255,255,.9); color: #475569; box-shadow: 0 1px 2px rgba(15,23,42,.15); cursor: pointer; padding: 0; }
.schedule-grid-shift-wrap:hover .schedule-shift-duplicate-btn { display: inline-flex; }
.schedule-shift-duplicate-btn:hover { color: var(--primary); }
.schedule-calendar-cell.is-drop-target { background: var(--primary-soft, #dbeafe) !important; outline: 2px dashed var(--primary); outline-offset: -2px; }

/* Floating numbered badge in the card's top-left corner — mirrors the
   reference scheduler's small circle showing how many people the card
   represents. Sits on .schedule-grid-shift-wrap (already position:
   relative) rather than inside the button, so it can overlap the card's
   edge instead of eating into its padding. */
.schedule-shift-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: var(--shift-color, var(--primary));
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(15,23,42,.2);
}

/* Lands on the badge once at least one guard has confirmed — a status
   dot layered on top, not a replacement for the remaining-spots number. */
.schedule-shift-badge-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    border: 1.5px solid #fff;
}

/* Sits on a guard's own copy of a shift card (never the Unassigned-shifts
   row's copy, which isn't about any one guard) — shows whether that guard
   has responded yet to being assigned this shift. */
.schedule-shift-response-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.schedule-shift-response-dot.confirmed { background: #22c55e;display:none; }
.schedule-shift-response-dot.declined { background: #ef4444;display:none; }

.schedule-shift-card-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #fff;text-shadow:0 2px 4px rgba(0,0,0,.35); }
.schedule-shift-card-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.schedule-shift-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 500; color: #203040; font-variant-numeric: tabular-nums; }
.schedule-grid-shift.status-cancelled .schedule-shift-time { text-decoration: line-through; color: #94a3b8; }
.schedule-shift-card-menu { color: #64748b; }
.schedule-shift-card-menu svg { width: 10px; height: 10px; }
.schedule-shift-meta { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 400; color: #fff; }
.schedule-shift-meta svg { flex-shrink: 0; width: 10px; height: 10px; opacity: .65; }
.schedule-shift-meta-dot { flex-shrink: 0; margin: 0 1px; }
.schedule-shift-meta-site { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-shift-meta-status { flex-shrink: 0; font-weight: 500; color: color-mix(in srgb, var(--shift-color) 70%, #203040); }
.schedule-grid-shift.status-cancelled .schedule-shift-meta-status { color: #94a3b8; }
.schedule-unavailable-card { margin-bottom: 4px; padding: 5px; border-radius: 5px; background: #fee2e2; color: #991b1b; }
.schedule-unavailable-card strong, .schedule-unavailable-card span, .schedule-unavailable-card small { display: block; font-size: 10px; }
.schedule-info-line { padding: 4px 5px; border-radius: 5px; background: #fff; margin-bottom: 3px; }
.schedule-info-line span, .schedule-info-line small { display: block; }
.schedule-info-line span { font-size: 11px; font-weight: 700; }
.schedule-info-line small, .schedule-cell-muted { color: #94a3b8; font-size: 10px; }
.schedule-calendar-loading, .schedule-calendar-error { position: absolute; inset: 0; z-index: 20; background: rgba(255,255,255,.86); display: flex; align-items: center; justify-content: center; gap: 8px; }
.schedule-calendar-loading[hidden], .schedule-calendar-error[hidden] { display: none; }
.schedule-loading-spinner { width: 20px; height: 20px; border: 3px solid #dbeafe; border-top-color: var(--primary); border-radius: 50%; animation: scheduleSpin .7s linear infinite; }
@keyframes scheduleSpin { to { transform: rotate(360deg); } }
.schedule-board-page.sidebar-collapsed .schedule-calendar-grid { grid-template-columns: 48px repeat(var(--schedule-day-count), minmax(0, 1fr)); }
.schedule-board-page.sidebar-collapsed .schedule-calendar-user-search input, .schedule-board-page.sidebar-collapsed .schedule-calendar-row-label > div, .schedule-board-page.sidebar-collapsed .schedule-row-menu { display: none; }

/* Today's column gets a colored underline beneath the whole header, not
   just the tinted date badge, so the active day reads at a glance across
   the row (matches the reference scheduler's orange/blue day marker). */
.schedule-calendar-date-bar { height: 3px; border-radius: 3px; margin-top: 7px; background: #edf1f6; }
.schedule-calendar-date-header.today .schedule-calendar-date-bar { background: #fff; }
/* When a real confirmed/pending/declined coverage bar is rendered for a
   day, it already carries that meaning — skip the plain placeholder bar
   underneath so the header doesn't show two stacked bars. */
.schedule-coverage-bar + .schedule-calendar-date-bar { display: none; }

/* Compact icon+value meta pairs (day headers, row labels) replace the old
   run-on text ("3 shifts · 8.0 hrs") with small inline icons. */
.schedule-calendar-date-meta small, .schedule-row-meta-item { display: inline-flex; align-items: center; gap: 3px; }
.schedule-calendar-date-meta small svg, .schedule-row-meta-item svg {
    flex-shrink: 0;
    opacity: .7;
    width: 14px;
    height: 14px;
}
.schedule-row-meta-item { margin-right: 8px; }
.schedule-calendar-row-label small { display: flex; align-items: center; }

/* Weekly summary footer bar */
.schedule-weekly-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: #fff;
    font-size: 12px;
    border-radius: 0 0 18px 18px;
    padding-bottom: 20px;
}
.schedule-weekly-summary[hidden] { display: none; }
.schedule-weekly-summary > strong { color: var(--text); font-size: 13px; font-weight: 700; }
.schedule-weekly-summary-stats { display: flex; gap: 10px; /*flex-wrap: wrap;*/ width: 85%;}
.schedule-weekly-summary-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 8px;
    border-radius: 999px;
    background: #f6f7f7  !important;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
}
.schedule-weekly-summary .schedule-weekly-summary-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 8px;
    border-radius: 999px;
    background: #f6f7f7  !important;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    width: 100%;
    justify-content: center;
}
.schedule-weekly-summary-stat svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #8b939c;
    opacity: .85;
}
.schedule-weekly-summary-stat b { color: var(--text); font-weight: 400; }
.schedule-weekly-summary-stat { font-variant-numeric: tabular-nums; }

/* Month view — a true Mon–Sun calendar grid rather than the per-guard
   row grid used by Week/Day, since a month of per-guard rows is illegibly
   cramped. Each cell carries up to 3 shift chips (+ an overflow toggle)
   and an "Unavailable" pill; chips show a hover/focus popover with full
   detail and still open the real edit drawer on click for touch devices. */
.schedule-month-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 430px; }
.schedule-month-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid #e8edf3; background: #f8fafc; }
.schedule-month-weekday-row div { padding: 9px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; text-align: center; }
.schedule-month-scroll { flex: 1; overflow: auto; }
.schedule-month-grid { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); }
.schedule-month-cell { position: relative; z-index: 1; min-height: 108px; padding: 6px; border-right: 1px solid #e8edf3; border-bottom: 1px solid #e8edf3; background: #fff; }
/* Grid cells paint in source order, so a hovered chip's popover — which
   is wider than one cell and spills into the next — would otherwise be
   painted over by that next cell's own opaque background. Lifting the
   whole cell above its siblings while one of its chips is hovered/focused
   lets the popover actually show. */
.schedule-month-cell:has(.schedule-month-chip:hover),
.schedule-month-cell:has(.schedule-month-chip:focus-visible) { z-index: 40; }
.schedule-month-cell.is-outside { background: #fafbfc; }
.schedule-month-cell.is-outside .schedule-month-cell-date { color: #cbd5e1; }
.schedule-month-cell.is-today { background: #eff6ff; }
.schedule-month-cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.schedule-month-cell-date { font-size: 12px; font-weight: 600; color: #334155; }
.schedule-month-cell.is-today .schedule-month-cell-date {
    display: inline-flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: #fff;
}
.schedule-cell-add-month { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: transparent; color: transparent; cursor: pointer; }
.schedule-month-cell:hover .schedule-cell-add-month { background: #eff6ff; color: var(--primary); }
.schedule-month-cell-items { display: flex; flex-direction: column; gap: 3px; }
.schedule-month-chip {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: 100%;
    padding: 3px 6px;
    border: 0;
    border-left: 3px solid var(--chip-color, var(--primary));
    border-radius: 5px;
    background: color-mix(in srgb, var(--chip-color, var(--primary)) 10%, white);
    font-size: 10.5px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.schedule-month-chip-time { flex-shrink: 0; font-weight: 700; color: #334155; }
.schedule-month-chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
.schedule-month-unavail-pill { padding: 3px 7px; border-radius: 5px; background: #fee2e2; color: #991b1b; font-size: 10.5px; font-weight: 600; }
.schedule-month-more { align-self: flex-start; padding: 2px 4px; border: 0; background: transparent; color: var(--primary); font-size: 10.5px; font-weight: 600; cursor: pointer; }
.schedule-month-cell-extra { display: flex; flex-direction: column; gap: 3px; }
.schedule-month-cell-extra[hidden] { display: none; }

/* Hover/focus popover on a month chip — CSS-only so it works without
   extra positioning JS; a real click still opens the full edit drawer,
   which is what touch devices without hover fall back to. */
.schedule-month-chip-pop {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 30;
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    white-space: normal;
    text-align: left;
}
.schedule-month-chip:hover .schedule-month-chip-pop,
.schedule-month-chip:focus-visible .schedule-month-chip-pop { display: flex; }
.schedule-month-chip-pop strong { font-size: 12px; color: var(--text); }
.schedule-month-chip-pop span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #475569; }
.schedule-month-chip-pop svg { flex-shrink: 0; opacity: .6; }

@media (max-width: 768px) {
    /* No real hover on touch — chips fall back to tap-to-open-drawer,
       so the popover never needs to render (and would mis-position). */
    .schedule-month-chip-pop { display: none !important; }
    .schedule-month-grid { grid-template-columns: repeat(7, minmax(90px, 1fr)); }
}

/* =========================================================
   Mobile agenda view — phones get a Connecteam-style day-by-day
   scrollable list instead of the Week/Day/Month/Timeline grids, which
   need more horizontal room than a phone has to be usable. Desktop is
   completely untouched; this only takes over below the phone breakpoint.
========================================================= */
@media (max-width: 768px) {
    .schedule-view-switcher { display: none; }
    .schedule-calendar-scroll,
    .schedule-timeline-shell,
    .schedule-month-shell,
    .schedule-weekly-summary { display: none !important; }
    .schedule-agenda-shell { display: block; width: 100%; }
}

.schedule-agenda-list { display: flex; flex-direction: column; }
.schedule-agenda-day { border-bottom: 1px solid var(--border); }
.schedule-agenda-day:last-child { border-bottom: 0; }
.schedule-agenda-day-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}
.schedule-agenda-day.is-today .schedule-agenda-day-header { background: var(--primary-soft); }
.schedule-agenda-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}
.schedule-agenda-day.is-today .schedule-agenda-day-num { background: var(--primary); color: #fff; }
.schedule-agenda-day-copy { flex: 1; min-width: 0; }
.schedule-agenda-day-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.schedule-agenda-day-meta { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
.schedule-agenda-day-add {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
}
.schedule-agenda-day-body { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.schedule-agenda-empty { padding: 14px 4px 4px; color: var(--muted-light); font-size: 12.5px; }

.schedule-agenda-card {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--shift-color, var(--primary));
    border-radius: var(--radius-md);
    background: #fff;
    text-align: left;
    cursor: pointer;
    min-height: 56px;
}
.schedule-agenda-card.status-cancelled { opacity: .65; }
.schedule-agenda-card.status-cancelled .schedule-agenda-card-title { text-decoration: line-through; }
.schedule-agenda-card.draft { border-style: dashed; }
.schedule-agenda-card-time {
    flex: 0 0 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}
.schedule-agenda-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.schedule-agenda-card-title { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-agenda-card-site { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-agenda-card-users { display: flex; align-items: center; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.schedule-agenda-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
}
.schedule-agenda-user-chip span.avatar {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}
.schedule-agenda-card-badge {
    align-self: flex-start;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.schedule-agenda-card-badge.open { background: #fef3c7; color: #92400e; }
.schedule-agenda-card-badge.unfilled { background: rgba(220, 38, 38, .1); color: #b91c1c; }

/* Timeline (Gantt-style) view */
.schedule-timeline-shell { width: 100%; height: 100%; min-height: 430px; overflow: auto; }
.schedule-timeline-grid { --timeline-hour-width: 90px; --timeline-label-width: 200px; min-width: calc(var(--timeline-label-width) + var(--timeline-hour-width) * 24); }
.schedule-timeline-header { display: flex; position: sticky; top: 0; z-index: 6; background: #f8fafc; border-bottom: 1px solid #e8edf3; }
.schedule-timeline-header-corner { flex: 0 0 var(--timeline-label-width); position: sticky; left: 0; z-index: 7; padding: 10px 12px; background: #f8fafc; border-right: 1px solid #e8edf3; font-size: 11.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; }
.schedule-timeline-hour { flex: 0 0 var(--timeline-hour-width); padding: 10px 0; text-align: center; font-size: 11px; font-weight: 700; color: #94a3b8; border-right: 1px solid #f1f5f9; }
.schedule-timeline-row { display: flex; border-bottom: 1px solid #e8edf3; }
.schedule-timeline-row-label { flex: 0 0 var(--timeline-label-width); position: sticky; left: 0; z-index: 4; padding: 10px 12px; background: #fff; border-right: 1px solid #e8edf3; display: flex; align-items: center; gap: 9px; }
.schedule-timeline-row-label.unassigned-row { background: #fff7ed; }
.schedule-timeline-row-label strong, .schedule-timeline-row-label small { display: block; }
.schedule-timeline-row-label strong { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-timeline-row-label small { margin-top: 1px; color: #94a3b8; font-size: 10px; }
.schedule-timeline-track {
    position: relative;
    flex: 0 0 calc(var(--timeline-hour-width) * 24);
    height: 68px;
    background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px);
    background-size: var(--timeline-hour-width) 100%;
    cursor: copy;
}
.schedule-timeline-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; z-index: 2; pointer-events: none; }
.schedule-timeline-now-line::before { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.schedule-timeline-bar {
    position: absolute;
    top: 9px;
    bottom: 9px;
    min-width: 26px;
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bar-color, #2563eb) 88%, black 0%);
    color: #fff;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: transform .12s ease, box-shadow .12s ease;
}
.schedule-timeline-bar:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, .24); z-index: 3; }
.schedule-timeline-bar.status-draft { opacity: .7; background: repeating-linear-gradient(45deg, var(--bar-color, #2563eb), var(--bar-color, #2563eb) 8px, color-mix(in srgb, var(--bar-color, #2563eb) 70%, black 0%) 8px, color-mix(in srgb, var(--bar-color, #2563eb) 70%, black 0%) 16px); }
.schedule-timeline-bar strong { display: block; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-timeline-bar small { display: block; margin-top: 1px; font-size: 10px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-board-page.sidebar-collapsed .schedule-calendar-row-label { justify-content: center; }

/* The "Sidebar" button collapses the name column on Week/Day (above) — the
   Timeline view uses an entirely separate label column (a flex sidebar
   sized off --timeline-label-width, not a grid column) so it needs its own
   matching collapse rule to behave the same way. */
.schedule-board-page.sidebar-collapsed .schedule-timeline-grid { --timeline-label-width: 48px; }
.schedule-board-page.sidebar-collapsed .schedule-timeline-header-corner { justify-content: center; padding: 10px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.schedule-board-page.sidebar-collapsed .schedule-timeline-row-label { justify-content: center; padding: 10px 4px; }
.schedule-board-page.sidebar-collapsed .schedule-timeline-row-label > div { display: none; }

/* Schedule work drawers */
body.schedule-drawer-open { overflow: hidden; }
.schedule-work-drawer { position: fixed; top: 0; right: -530px; width: 510px; max-width: 100%; height: 100vh; z-index: 9999; display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 32px rgba(15, 23, 42, .16); transition: .22s ease; border-radius: 16px 0 16px 0; }
.schedule-work-drawer.wide { width: 610px; right: -630px; }
.schedule-work-drawer.open { right: 0; }
.schedule-work-drawer-header {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.schedule-drawer-eyebrow { display: block; margin-bottom: 2px; color: var(--primary); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.schedule-work-drawer-header h2 { margin: 0; font-size: 15px; }
.schedule-work-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #8b939c;
    cursor: pointer;
    background-color: transparent;
}
.schedule-work-drawer-close svg { width: 16px; height: 16px; }
.schedule-drawer-tabs { display: flex; gap: 32px; padding: 16px; border-bottom: 1px solid var(--border); }
.schedule-drawer-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 10px 0; background: transparent; color: #64748b; font-size: 14px; font-weight: 400; cursor: pointer; }
.schedule-drawer-tabs button.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}
.schedule-current-date span {
    font-size: 14px;
    color: #8b939c;
}
.schedule-shift-form, .schedule-manage-form { flex: 1; overflow-y: auto; min-height: 0; }
.schedule-shift-tab-panel, .schedule-manage-panel { display: none; }
.schedule-shift-tab-panel.active, .schedule-manage-panel.active { display: block; }
.schedule-form-section { padding: 13px 15px; border-bottom: 1px solid #eef2f7; }
.schedule-form-section-heading { margin-bottom: 10px; }
.schedule-form-section-heading.with-action { display: flex; justify-content: space-between; gap: 10px; }
.schedule-form-section-heading h3 { margin: 0; font-size: 13px; }
.schedule-repeat-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.schedule-repeat-row .schedule-form-group { flex: 1; min-width: 120px; margin-bottom: 0; }
.schedule-form-section-heading p { margin: 2px 0 0; color: #94a3b8; font-size: 11px; }
.schedule-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.schedule-form-group { min-width: 0; }
.schedule-form-group.full { grid-column: 1 / -1; }
.schedule-form-group label { display: block; margin-bottom: 4px; color: #48556a; font-size: 11px; font-weight: 700; }
.schedule-form-group input, .schedule-form-group select, .schedule-form-group textarea, .schedule-manage-search input, .schedule-template-search input { width: 100%; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; outline: none; }
.schedule-form-group input, .schedule-form-group select { height: 35px; padding: 0 9px; font-size: 12px; }
.schedule-form-group textarea { min-height: 66px; padding: 8px 9px; font-size: 12px; }

/* Search-select enhancement: keep the native <select> for form submission
   and validation, but visually replace it with a searchable picker. */
select.search-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.search-select-picker { width: 100%; }
.search-select-picker.is-disabled .schedule-search-picker-trigger { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.schedule-form-group .search-select-picker .schedule-search-picker-trigger { min-height: 35px; height: 35px; font-size: 12px; }
.schedule-input-suffix { display: flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; }
.schedule-input-suffix input { border: 0; border-radius: 0; }
.schedule-input-suffix span { display: inline-flex; align-items: center; padding: 0 8px; background: #f8fafc; color: #64748b; font-size: 11px; }
.schedule-switch-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 9px; border-radius: 8px; background: #f8fafc; }
.schedule-switch-row strong, .schedule-switch-row small { display: block; }
.schedule-switch-row strong { font-size: 12px; }
.schedule-switch-row small { margin-top: 2px; color: #94a3b8; font-size: 11px; }
.schedule-switch input { display: none; }
.schedule-switch span { width: 35px; height: 20px; display: block; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; }
.schedule-shift-builder-drawer .shift-details-date-section .schedule-switch span{
    width: 40px;
    height: 24px;
}
.schedule-shift-builder-drawer .shift-details-date-section .schedule-switch span::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    transition: .15s ease;
}
.schedule-switch span::after { content: ''; position: absolute; width: 14px; height: 14px; top: 3px; left: 3px; border-radius: 50%; background: #fff; transition: .15s ease; }
.schedule-switch input:checked + span { background: var(--primary); }
.schedule-switch input:checked + span::after { left: 18px; }
.schedule-duration-summary { display: flex; justify-content: space-between; padding: 8px 9px; border-radius: 7px; background: #eff6ff; color: #1d4ed8; font-size: 11px; }
.schedule-color-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.schedule-color-option { width: 20px; height: 20px; border: 2px solid transparent; border-radius: 50%; background: var(--option-color); cursor: pointer; }
.schedule-color-option.active { border-color: #203040; }
.schedule-assignment-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }
.schedule-radio-card { display: flex; gap: 6px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 7px; cursor: pointer; }
.schedule-radio-card.active { border-color: var(--primary); background: #eff6ff; }
.schedule-radio-card strong, .schedule-radio-card small { display: block; }
.schedule-radio-card strong { font-size: 11px; }
.schedule-radio-card small { margin-top: 2px; color: #94a3b8; font-size: 10px; }
.schedule-user-selector { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.schedule-user-selector-search, .schedule-manage-search, .schedule-template-search { display: flex; align-items: center; gap: 7px; padding: 7px; color: #94a3b8; }
.schedule-user-selector-search { border-bottom: 1px solid var(--border); }
.schedule-user-selector-search input, .schedule-manage-search input, .schedule-template-search input { height: 31px; padding: 0 8px; font-size: 11px; }
.schedule-user-selector-list { max-height: 210px; overflow-y: auto; }
.schedule-user-option { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.schedule-user-option:hover { background: #f8fafc; }
.schedule-user-option-avatar, .schedule-manage-avatar { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.schedule-user-option-avatar.open { background: #f1f5f9; color: #64748b; }
.schedule-user-option-content { flex: 1; min-width: 0; }
.schedule-user-option-content strong, .schedule-user-option-content small { display: block; }
.schedule-user-option-content strong { font-size: 11px; }
.schedule-user-option-content small { color: #94a3b8; font-size: 10px; }
.schedule-user-availability { padding: 2px 5px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 10px; }
.schedule-user-availability.open { background: #fef3c7; color: #92400e; }
.schedule-assignment-warning, .schedule-inline-notice, .schedule-manage-notice { display: flex; gap: 7px; margin-top: 9px; padding: 9px; border-radius: 7px; background: #fef3c7; color: #92400e; font-size: 11px; }
.schedule-task-row, .schedule-multiple-date-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.schedule-task-row input, .schedule-multiple-date-row input { flex: 1; height: 34px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 8px; font-size: 11px; }
.schedule-task-remove, .schedule-date-remove { width: 31px; height: 31px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 7px; background: #fee2e2; color: var(--danger); cursor: pointer; }
.schedule-template-card { width: 100%; display: flex; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.schedule-template-card:hover { border-color: #93c5fd; background: #eff6ff; }
.schedule-template-color { width: 6px; align-self: stretch; border-radius: 999px; flex-shrink: 0; }
.schedule-template-card strong, .schedule-template-card small { display: block; }
.schedule-template-card strong { font-size: 11px; }
.schedule-template-card small { margin-top: 2px; color: #94a3b8; font-size: 10px; }
/* Delete sits beside the card (not inside it) so removing a template is a
   separate, deliberate click from applying it. */
.schedule-template-card-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 7px; }
.schedule-template-card-row .schedule-template-card { margin-bottom: 0; }
.schedule-template-delete { flex-shrink: 0; width: 34px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.schedule-template-delete:hover { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.schedule-template-delete svg { width: 14px; height: 14px; }
.schedule-work-drawer-footer { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: space-between; gap: 8px; padding: 9px 15px; border-top: 1px solid var(--border); background: #fff; }
.schedule-work-drawer-footer-right, .schedule-manage-footer-summary { display: flex; gap: 7px; align-items: center; }
.schedule-manage-toolbar { display: flex; justify-content: space-between; gap: 9px; padding: 11px 15px 8px; }
.schedule-manage-search { flex: 1; padding: 0; }
.schedule-manage-count { text-align: right; }
.schedule-manage-count strong, .schedule-manage-count span { display: block; }
.schedule-manage-count span { color: #94a3b8; font-size: 11px; }
.schedule-manage-actions { display: flex; gap: 6px; padding: 0 15px 8px; }
.schedule-manage-list { padding: 0 15px 15px; }
.schedule-manage-option { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.schedule-manage-option:has(input:checked) { border-color: #60a5fa; background: #eff6ff; }
.schedule-manage-option-content { flex: 1; min-width: 0; }
.schedule-manage-option-content strong, .schedule-manage-option-content small { display: block; }
.schedule-manage-option-content strong { font-size: 11px; }
.schedule-manage-option-content small { margin-top: 2px; color: #94a3b8; font-size: 10px; }
.schedule-selection-mark { opacity: 0; color: var(--primary); }
.schedule-manage-option:has(input:checked) .schedule-selection-mark { opacity: 1; }
.schedule-manage-site-mark { width: 29px; height: 29px; flex: 0 0 29px; border-radius: 7px; background: color-mix(in srgb, var(--site-color) 14%, white); color: var(--site-color); display: inline-flex; align-items: center; justify-content: center; }
.schedule-manage-footer-summary span { color: #64748b; font-size: 11px; }
.schedule-inline-empty { padding: 20px; text-align: center; color: #94a3b8; font-size: 12px; }

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .schedule-board-toolbar { align-items: stretch; flex-direction: column; }
    .schedule-board-toolbar-left, .schedule-board-toolbar-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .schedule-filter-control { max-width: none; flex: 1; }
    .schedule-calendar-grid { grid-template-columns: minmax(125px, 155px) repeat(var(--schedule-day-count), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); width: var(--sidebar-width); }
    .sidebar.open { transform: translateX(0); z-index: 1300; }
    .sidebar.collapsed { width: var(--sidebar-width); }
    .sidebar.collapsed .brand-text, .sidebar.collapsed .menu-title, .sidebar.collapsed .menu-text, .sidebar.collapsed .sidebar-user div { display: block; }
    .sidebar.collapsed .nav-item { justify-content: flex-start; }
    .main-content, .main-content.expanded { margin-left: 0; padding: 10px; }
    .header-icon.mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .sidebar-toggle { display: none; }
    .page-card { padding: 12px; }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .module-list { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .checkbox-grid { grid-template-columns: 1fr 1fr; }
    .schedule-board-header { align-items: flex-start; flex-direction: column; padding: 10px; }
    .schedule-board-header-actions { width: 100%; flex-wrap: wrap; }
    .schedule-calendar-scroll { overflow-x: auto; }
    .schedule-calendar-grid { min-width: 850px; grid-template-columns: 135px repeat(var(--schedule-day-count), minmax(95px, 1fr)); }
}
@media (max-width: 768px) {
    .custom-table-top, .custom-table-bottom { flex-direction: column; align-items: stretch; }
    .page-actions, .page-actions .btn { width: 100%; }
    .table-search input { width: 100%; }
    .schedule-list-toolbar { flex-direction: column; align-items: stretch; }
    .schedule-search-form, .schedule-tabs { width: 100%; }
    .schedule-tabs a { flex: 1; }
    .schedule-card-grid, .schedule-card-grid.premium { grid-template-columns: 1fr; }
    .schedule-picker-list { grid-template-columns: 1fr; }
    /* Status pill + kebab crowd the title into a too-narrow column on a
       phone-width card — let them wrap onto their own row underneath the
       icon+title instead of forcing the title to squeeze/truncate. */
    .premium-card-header { flex-wrap: wrap; }
    .premium-card-header-right { flex-basis: 100%; justify-content: flex-end; margin-top: 8px; }
    .premium-card-header h3 { -webkit-line-clamp: 3; }
    .schedule-drawer { width: 100%; right: -100%; }
    .schedule-wizard-steps { grid-template-columns: repeat(2, 1fr); }
    .schedule-work-drawer, .schedule-work-drawer.wide { width: 100%; right: -100%; }
    /* The rule above sets right:-100% unconditionally — without this, a
       drawer that's both .wide and .open (e.g. "Manage People") stayed
       pushed off-screen at this width because this later, equal-specificity
       rule always won over ".open { right: 0 }" defined earlier in the file. */
    .schedule-work-drawer.open, .schedule-work-drawer.wide.open { right: 0 !important; }
    .schedule-form-grid, .schedule-assignment-mode { grid-template-columns: 1fr; }
    .schedule-form-group.full { grid-column: auto; }
    .schedule-work-drawer-footer { align-items: stretch; flex-direction: column; }
    .schedule-work-drawer-footer-right { width: 100%; }
    .schedule-work-drawer-footer-right .btn { flex: 1; }
    .schedule-manage-footer-summary { justify-content: center; }

    /* Date-range popover: anchoring to the trigger's own left edge (the
       default, desktop-fine behaviour) runs the popover off the right
       edge of a phone-width screen whenever the trigger itself isn't
       flush against the left margin. Center it in the viewport instead
       of anchoring to the trigger at all. */
    .date-range-popover {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        box-shadow: 0 20px 45px rgba(15, 23, 42, .28) !important;
    }

    /* Same clipping bug, same fix: any menu/dropdown that anchors itself to
       its trigger's own position (right:0 relative to a small button
       instead of the viewport) can run off either edge on a phone-width
       screen depending on where that trigger happens to sit — the
       notification/profile dropdown, the schedule board's "+ Add" menu,
       its "..." actions menu, and the CSV/Excel/PDF export menu. Pin all
       of them to the viewport instead of the trigger. */
    .dropdown-menu,
    .schedule-add-menu,
    .schedule-board-actions-menu,
    .schedule-export-dropdown-menu {
        position: fixed !important;
        top: 62px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
    }
}
@media (max-width: 600px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .btn { width: 100%; }
    .schedule-board-admins { display: none; }
    .schedule-board-heading-text p { display: none; }
}

/* ========================================================================
   SCHEDULE BOARD TYPOGRAPHY CORRECTION
   Keeps the board compact, but improves readability and visual weight.
======================================================================== */

.schedule-board-page,
.schedule-board-page button,
.schedule-board-page input,
.schedule-board-page select,
.schedule-board-page textarea {
    font-weight: 400;
}
.schedule-board-heading-text button.schedule-toolbar-icon-btn {
    border-radius: 200px;
    width: 24px;
    height: 24px;
}
.schedule-toolbar-dropdown button.schedule-toolbar-select-btn {
    border-radius: 10px;
    padding: 8px 16px;
}

.schedule-toolbar-dropdown .schedule-toolbar-icon-btn {
    color: var(--primary);
}

.schedule-board-name-line h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.schedule-board-heading-text p {
    font-size: 12px;
    font-weight: 500;
}

.schedule-view-switcher button,
.schedule-today-btn,
.schedule-period-label,
.schedule-board-period-picker .date-range-trigger,
.schedule-filter-control select,
.schedule-board-actions-menu button,
.schedule-add-menu strong {
    font-weight: 700;
}

.schedule-view-switcher button,
.schedule-today-btn,
.schedule-period-label,
.schedule-board-period-picker .date-range-trigger,
.schedule-filter-control select {
    font-size: 12px;
}

.schedule-board-period-picker {
    position: relative;
    display: inline-flex;
}

.schedule-board-period-picker .date-range-trigger {
    color: #475569;
}

.schedule-calendar-user-search input {
    font-size: 12px;
    font-weight: 500;
}

.schedule-calendar-date-name strong {
    font-size: 15px;
    font-weight: 400;
}

.schedule-calendar-date-name span {
    font-size: 13px;
    font-weight: 500;
}

.schedule-calendar-date-meta small {
    font-size: 12px;
    font-weight: 400;
}

.schedule-calendar-row-label strong {
    font-size: 13.5px;
    font-weight: 500;
    color: #273449;
}

.schedule-calendar-row-label small {
    font-size: 11.5px;
    font-weight: 400;
    color: #7b8799;
}

.schedule-row-avatar {
    font-size: 13px;
    font-weight: 500;
}

.schedule-shift-card-top strong {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.schedule-shift-meta {
    font-size: 12px;
    font-weight: 400;
}
.schedule-shift-meta svg {
    display: none;
}
.schedule-shift-meta-site {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.schedule-info-line span {
    font-size: 11px;
    font-weight: 700;
}

.schedule-info-line small,
.schedule-cell-muted,
.schedule-unavailable-card strong,
.schedule-unavailable-card span,
.schedule-unavailable-card small {
    font-size: 11px;
    font-weight: 600;
}

.schedule-cell-add {
    font-weight: 700;
}

/* A previous pass shrank all of these specifically on wide screens
   (>=1280px) — e.g. date-meta down to 8.5px — backwards, since more
   screen width means more room, not less. That's exactly the "font chota
   hai" complaint on a normal desktop monitor. Removed rather than kept
   at a smaller size: the base rules above are already sized correctly
   for every width, wide included. */


/* ==========================================================================
   FRONTLINE SCHEDULER — SINGLE SHIFT BUILDER
   Paste at the absolute end of public/assets/css/app.css
   ========================================================================== */

/* Drawer sizing */
.schedule-shift-builder-drawer{
    width:min(504px,100vw);
    right:min(-504px,-100vw);
}

.schedule-shift-builder-drawer.open{
    right:0;
}

.schedule-shift-builder-drawer .schedule-shift-form{
    background:#fbfcfe;
}

/* Sections */
.schedule-shift-builder-drawer .schedule-form-section{
    padding:16px 18px;
    background:#fff;
    border-bottom:1px solid #edf1f6;
}

.schedule-shift-builder-drawer .schedule-form-section + .schedule-form-section{
    margin-top:8px;
}

.schedule-shift-builder-drawer .schedule-form-section-heading{
    margin-bottom:12px;
}

.schedule-shift-builder-drawer .schedule-form-section-heading h3{
    margin:0;
    font-size: 14px;
    line-height:1.3;
    font-weight:800;
    color:#172033;
}

.schedule-shift-builder-drawer .schedule-form-section-heading p{
    margin:3px 0 0;
    font-size: 12px;
    line-height:1.45;
    color:#7b8799;
}

.schedule-shift-builder-drawer .schedule-form-section-heading.with-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/* Form controls */
.schedule-shift-builder-drawer .schedule-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.shift-form-time-and-date-extra-buttons-container button {
    padding: 0;
    border: none;
}

.shift-form-time-and-date-extra-buttons-container .shifts-break-button-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.schedule-shift-builder-drawer .schedule-form-grid.shift-start-end {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shift-form-time-and-date-extra-buttons-container button {
    color: var(--primary);
    font-weight: 400;
    font-size: 14px;
}

.schedule-shift-builder-drawer .schedule-form-grid.shift-start-end .schedule-form-group {
    display: flex;
    align-items: center;
}

.schedule-shift-builder-drawer .shift-details-date-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.schedule-shift-builder-drawer .shift-details-date-section .schedule-form-group {
    display: flex;
    align-items: center;
}

.schedule-shift-builder-drawer .shift-details-date-section .schedule-form-group label{
    margin-bottom: 0;
}

.schedule-shift-builder-drawer .schedule-form-group.full{
    grid-column:1/-1;
}

.schedule-form-group.shift-title, .schedule-form-group.job-site,.user-assignment {
    display: flex;
    align-items: center;
    gap: 16px;
}

.schedule-shift-builder-drawer .schedule-form-group label, .user-assignment label {
    display: block;
   /* margin: 0 0 5px;*/
    font-size: 14px;
    font-weight: 400;
    color: #203040;
    display: flex;
    align-items: center;
    min-width: 64px;
}

.user-assignment{
    padding: 0 !important;
}

.schedule-form-group.shift-title label,.schedule-form-group.job-site label,.user-assignment label{
    min-width: 80px;
}

.schedule-form-group.job-site .schedule-search-picker {
    position: relative;
    width: 100%;
}

.schedule-shift-builder-drawer .schedule-form-group input,
.schedule-shift-builder-drawer .schedule-form-group select,
.schedule-shift-builder-drawer .schedule-form-group textarea{
    width:100%;
    border:1px solid #dfe5ed;
    border-radius:8px;
    background:#fff;
    color:#172033;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.schedule-shift-builder-drawer .schedule-form-group input, .schedule-shift-builder-drawer .schedule-form-group select {
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
}

.schedule-shift-builder-drawer .schedule-form-group textarea{
    min-height:94px;
    padding:9px 10px;
    resize:vertical;
    font-size: 12px;
    line-height:1.5;
}

.schedule-shift-builder-drawer .schedule-form-group input:focus,
.schedule-shift-builder-drawer .schedule-form-group select:focus,
.schedule-shift-builder-drawer .schedule-form-group textarea:focus{
    border-color:#7aa7ff;
    box-shadow:0 0 0 3px rgba(37,99,235,.08);
}

.schedule-shift-builder-drawer .schedule-form-group input:disabled,
.schedule-shift-builder-drawer .schedule-form-group select:disabled{
    background:#f3f5f8;
    color:#9aa5b4;
    cursor:not-allowed;
}

/* Compact all-day row */
.schedule-switch-row.compact {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
}

.schedule-switch-row.compact strong{
    font-size: 14px;
    font-weight: 400;
}

.schedule-switch-row.compact small{
    font-size: 11px;
}

/* Duration */
.schedule-shift-builder-drawer .schedule-duration-summary{
    margin-top:10px;
    padding:8px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:1px solid #dbeafe;
    border-radius:8px;
    background:#f5f9ff;
    color:#1d4ed8;
    font-size: 12px;
}

.schedule-shift-builder-drawer .schedule-duration-summary strong{
    font-size: 12px;
    font-weight:800;
}

/* Search picker */
.schedule-search-picker{
    position:relative;
}

.schedule-search-picker-trigger{
    width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border:1px solid #dfe5ed;
    border-radius:10px;
    background:#fff;
    color:#39465a;
    cursor:pointer;
    text-align:left;
}

.job-site button.schedule-selected-color-button {
    min-height: 40px;
    border-radius: 10px;
}

.schedule-search-picker-trigger:hover{
    border-color:#c7d2e2;
    background:#fcfdff;
}

.schedule-picker-trigger-icon{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#eff6ff;
    color:#2563eb;
}

.schedule-picker-trigger-text,
.schedule-search-picker-trigger > span:nth-child(2){
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size: 12px;
    font-weight:400;
}

.schedule-search-picker-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    z-index:1200;
    display:none;
    max-height:300px;
    border:1px solid #e0e6ee;
    border-radius:10px;
    background:#fff;
    box-shadow:0 18px 45px rgba(15,23,42,.14);
    overflow:hidden;
}

.schedule-search-picker.open .schedule-search-picker-menu{
    display:block;
}

.schedule-search-picker-search{
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px;
    border-bottom:1px solid #edf1f5;
    color:#94a0b1;
    background:#fbfcfe;
}

.schedule-search-picker-search input{
    width:100%;
    height:32px;
    border:1px solid #dfe5ed;
    border-radius:7px;
    padding:0 9px;
    outline:none;
    font-size: 12px;
    background:#fff;
}

.schedule-search-picker-options{
    max-height:240px;
    overflow:auto;
    padding:5px;
}

.schedule-search-picker-option{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px;
    border:0;
    border-radius:8px;
    background:transparent;
    text-align:left;
    cursor:pointer;
}

.schedule-search-picker-option:hover{
    background:#f4f7fb;
}

.schedule-search-picker-option.selected{
    background:#eef5ff;
}

.schedule-search-picker-option[disabled],
.schedule-search-picker-option.is-unavailable{
    opacity:.55;
    cursor:not-allowed;
}

.schedule-picker-option-copy{
    flex:1;
    min-width:0;
}

.schedule-picker-option-copy strong,
.schedule-picker-option-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.schedule-picker-option-copy strong{
    font-size: 12px;
    color:#1d2738;
    font-weight: 400;
}

.schedule-picker-option-copy small{
    margin-top:2px;
    font-size: 11px;
    color:#8994a5;
}

.schedule-picker-check{
    opacity:0;
    color:#2563eb;
}

.schedule-search-picker-option.selected .schedule-picker-check{
    opacity:1;
}

.schedule-site-color-dot{
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:50%;
    background:var(--site-color,#64748b);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--site-color,#64748b) 14%,white);
}

/* Selected site meta */
.schedule-selected-site-meta{
    margin-top:7px;
    padding:8px 9px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #e7ecf2;
    border-radius:8px;
    background:#f8fafc;
}

.schedule-selected-site-meta strong,
.schedule-selected-site-meta small{
    display:block;
}

.schedule-selected-site-meta strong{
    font-size: 11px;
    color:#2c3749;
}

.schedule-selected-site-meta small{
    margin-top:2px;
    font-size: 11px;
    color:#8792a3;
}

/* Color dropdown */
.schedule-color-control{
    position:relative;
}

.schedule-selected-color-button{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border:1px solid #dfe5ed;
    border-radius:8px;
    background:#fff;
    color:#465267;
    cursor:pointer;
    font-size: 12px;
}

.schedule-selected-color-preview{
    width:16px;
    height:16px;
    border-radius:5px;
    background:var(--selected-color,#2563eb);
}

.schedule-color-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: -33px;
    z-index: 1200;
    display: none;
    width: 112px;
    padding: 16px;
    border: 1px solid #e2e7ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15,23,42,.14);
}

.schedule-color-control.open .schedule-color-dropdown{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* Pills */
.schedule-pill-list,
.schedule-selected-user-pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.schedule-tag-builder{
    border:1px solid #dfe5ed;
    border-radius:8px;
    padding:7px;
    background:#fff;
}

.schedule-tag-input-row{
    display:flex;
    align-items:center;
    gap:7px;
    color:#8f9aaa;
}

.schedule-tag-input-row input{
    flex:1;
    height:30px;
    border:0;
    outline:none;
    font-size: 12px;
}

.schedule-pill,
.schedule-user-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:26px;
    padding:3px 7px;
    border-radius:999px;
    background:#eef4ff;
    color:#1e4fa8;
    font-size: 11px;
    font-weight:700;
}

.schedule-pill svg,
.schedule-user-pill svg{
    width:12px;
    height:12px;
}

.schedule-pill button,
.schedule-user-pill button{
    width:16px;
    height:16px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:inherit;
    cursor:pointer;
    padding:0;
}

.schedule-pill button:hover,
.schedule-user-pill button:hover{
    background:rgba(37,99,235,.12);
}

.schedule-selected-user-pills:empty{
    display:none;
}

/* Tags — schedule-tag-pill had no rules at all (unstyled browser-default
   span/button), matching the "tags look rough" report. Reuses the same
   pill language as .schedule-pill/.schedule-user-pill above. */
.schedule-tag-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:26px;
    padding:3px 7px;
    border-radius:999px;
    background:#eef4ff;
    color:#1e4fa8;
    font-size:11px;
    font-weight:700;
}
.schedule-tag-pill svg{
    width:12px;
    height:12px;
    flex-shrink:0;
}
.schedule-tag-pill button{
    width:16px;
    height:16px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:inherit;
    cursor:pointer;
    padding:0;
    font-size:13px;
    line-height:1;
}
.schedule-tag-pill button:hover{
    background:rgba(37,99,235,.12);
}
.schedule-tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}
.schedule-tag-list:empty{
    display:none;
}

/* Breaks — same problem, .schedule-break-card had no rules at all. */
.schedule-break-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 11px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:#f8fafc;
    margin-bottom:6px;
}
.schedule-break-card strong{
    display:block;
    font-size:12.5px;
    color:var(--text);
}
.schedule-break-card small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
}
.schedule-break-card-actions{
    display:flex;
    flex-shrink:0;
    gap:6px;
}
.schedule-break-card-actions button{
    height:26px;
    padding:0 10px;
    border:1px solid var(--border-strong);
    border-radius:7px;
    background:#fff;
    color:#475569;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
}
.schedule-break-card-actions button:hover{
    background:#eff6ff;
    color:var(--primary);
    border-color:#bfdbfe;
}
.schedule-break-card-actions button[data-remove-break]:hover{
    background:#fef2f2;
    color:var(--danger);
    border-color:#fecaca;
}

/* User picker */
.schedule-user-picker-option .schedule-user-option-avatar{
    width:28px;
    height:28px;
    flex:0 0 28px;
    font-size: 11px;
}

.schedule-user-availability{
    min-width:62px;
    padding:3px 6px;
    border-radius:999px;
    text-align:center;
    font-size: 10px;
    font-weight:800;
}

.schedule-user-availability.pending{
    background:#f1f5f9;
    color:#64748b;
}

.schedule-user-availability.available{
    background:#dcfce7;
    color:#166534;
}

.schedule-user-availability.conflict{
    background:#fef3c7;
    color:#92400e;
}

.schedule-user-availability.unavailable{
    background:#fee2e2;
    color:#991b1b;
}

.schedule-user-picker-status{
    padding:7px 9px;
    border-bottom:1px solid #edf1f5;
    background:#f8fafc;
    color:#6b778a;
    font-size: 11px;
}

/* Break list */
.schedule-break-list{
    display:grid;
    gap:7px;
}

.schedule-break-item{
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 9px;
    border:1px solid #e6ebf1;
    border-radius:8px;
    background:#fbfcfe;
}

.schedule-break-item-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#f1f5f9;
    color:#64748b;
}

.schedule-break-item-copy{
    flex:1;
    min-width:0;
}

.schedule-break-item-copy strong,
.schedule-break-item-copy small{
    display:block;
}

.schedule-break-item-copy strong{
    font-size: 12px;
    color:#253044;
}

.schedule-break-item-copy small{
    margin-top:2px;
    font-size: 11px;
    color:#8893a3;
}

.schedule-break-item-actions{
    display:flex;
    gap:4px;
}

.schedule-break-item-actions button{
    width:27px;
    height:27px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:7px;
    background:#fff;
    color:#64748b;
    cursor:pointer;
}

.schedule-break-item-actions button:hover{
    background:#eef2f7;
    color:#263246;
}

.schedule-inline-empty.compact{
    padding:12px;
    font-size: 11px;
}

/* Claim settings */
.schedule-checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:10px;
    border:1px solid #e5eaf0;
    border-radius:9px;
    background:#fbfcfe;
    cursor:pointer;
}

.schedule-checkbox-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.schedule-checkbox-indicator{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top:1px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #cfd7e2;
    border-radius:5px;
    background:#fff;
    color:transparent;
}

.schedule-checkbox-row input:checked + .schedule-checkbox-indicator{
    border-color:#2563eb;
    background:#2563eb;
    color:#fff;
}

.schedule-checkbox-row strong,
.schedule-checkbox-row small{
    display:block;
}

.schedule-checkbox-row strong{
    font-size: 12px;
    color:#263246;
}

.schedule-checkbox-row small{
    margin-top:2px;
    font-size: 11px;
    color:#8691a2;
}

.schedule-claim-options{
    display:grid;
    gap:9px;
    margin-top:9px;
    padding-left:27px;
}

/* Shift claims list */
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #128a3e; border-color: #128a3e; }

.schedule-claims-list{
    display:grid;
    gap:8px;
}

.schedule-claim-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border:1px solid var(--border-strong, #e2e8f0);
    border-radius:8px;
    background:#f8fafc;
    font-size: 13px;
}

.schedule-claim-row.schedule-claim-self{
    background:#eff6ff;
    border-color:#bfdbfe;
}

.schedule-claim-user{
    font-weight:600;
    color:#1f2937;
}

.schedule-claim-status{
    text-transform:capitalize;
    color:#6b7280;
}

.schedule-claim-row.claim-status-approved .schedule-claim-status{ color:var(--success); }
.schedule-claim-row.claim-status-rejected .schedule-claim-status{ color:var(--danger); }
.schedule-claim-row.claim-status-withdrawn .schedule-claim-status{ color:#9ca3af; }

.schedule-claim-actions{
    display:flex;
    gap:6px;
}

/* File uploader */
.schedule-file-dropzone{
    min-height:118px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:16px;
    border:1.5px dashed #cfd8e5;
    border-radius:10px;
    background:#fbfcfe;
    color:#6e7b8f;
    text-align:center;
    cursor:pointer;
}

.schedule-file-dropzone:hover,
.schedule-file-dropzone.is-dragover{
    border-color:#7aa7ff;
    background:#f3f8ff;
}

.schedule-file-dropzone input{
    display:none;
}

.schedule-file-dropzone-icon{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eef5ff;
    color:#2563eb;
}

.schedule-file-dropzone strong{
    font-size: 12px;
    color:#334155;
}

.schedule-file-dropzone small{
    font-size: 11px;
    color:#8b96a6;
}

.schedule-file-list,
.schedule-existing-file-list{
    display:grid;
    gap:7px;
    margin-top:9px;
}

.schedule-file-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px;
    border:1px solid #e5eaf0;
    border-radius:8px;
    background:#fff;
}

.schedule-file-item-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#f1f5f9;
    color:#64748b;
}

.schedule-file-item-copy{
    flex:1;
    min-width:0;
}

.schedule-file-item-copy strong,
.schedule-file-item-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.schedule-file-item-copy strong{
    font-size: 11px;
    color:#2d394c;
}

.schedule-file-item-copy small{
    margin-top:2px;
    font-size: 10px;
    color:#8c97a7;
}

.schedule-file-item-remove{
    width:28px;
    height:28px;
    border:0;
    border-radius:7px;
    background:#fff1f2;
    color:#dc2626;
    cursor:pointer;
}

/* Break modal */
.schedule-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:10010;
    background:rgba(15,23,42,.48);
}

.schedule-break-modal{
    position:fixed;
    left:50%;
    top:50%;
    z-index:10011;
    width:min(440px,calc(100vw - 28px));
    max-height:calc(100vh - 40px);
    display:none;
    transform:translate(-50%,-50%);
    border:1px solid #e3e8ef;
    border-radius:14px;
    background:#fff;
    box-shadow:0 24px 70px rgba(15,23,42,.24);
    overflow:auto;
}

.schedule-break-modal.open{
    display:block;
}

.schedule-break-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #edf1f5;
}

.schedule-break-modal-header h3{
    margin:0;
    font-size: 14px;
    color:#1d2738;
}

.schedule-break-modal-header p{
    margin:3px 0 0;
    font-size: 11px;
    color:#8490a1;
}

.schedule-break-modal-body{
    padding:16px;
}

.schedule-break-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:11px 16px;
    border-top:1px solid #edf1f5;
    background:#fbfcfe;
}

.schedule-field-help{
    display:block;
    margin-top:4px;
    font-size: 11px;
    color:#929dab;
}

/* Task rows */
.schedule-shift-builder-drawer .schedule-task-row{
    padding:7px;
    border:1px solid #e5eaf0;
    border-radius:8px;
    background:#fff;
}

.schedule-shift-builder-drawer .schedule-task-row input{
    height:34px;
    font-size: 12px;
}

/* Footer */
.schedule-shift-builder-drawer .schedule-work-drawer-footer{
    padding:10px 14px;
    background:#fff;
    border-top:1px solid #e5eaf0;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer-right{
    gap:7px;
}

/* Utility */
[hidden]{
    display:none !important;
}

/* Responsive */
@media (max-width:760px){
    .schedule-shift-builder-drawer{
        width:100%;
        right:-100%;
        overflow-x:hidden;
    }

    .schedule-shift-builder-drawer .schedule-form-grid{
        grid-template-columns:1fr;
    }

    .schedule-shift-builder-drawer .schedule-form-group.full{
        grid-column:auto;
    }

    /* Actual left/top/width/max-height are computed and set inline by
       positionMenu() in search-select.js, which measures the real trigger
       position on every open — a fixed CSS position can't know where an
       arbitrary trigger sits on the page (a filter bar, a form field
       halfway down a drawer, etc.), so this only sets the visual chrome. */
    .schedule-search-picker-menu{
        border-radius:14px;
    }

    .schedule-color-dropdown{
        width:100%;
    }

    .schedule-claim-options{
        padding-left:0;
    }

    .schedule-shift-builder-drawer .schedule-work-drawer-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .schedule-shift-builder-drawer .schedule-work-drawer-footer-right{
        width:100%;
    }

    .schedule-shift-builder-drawer .schedule-work-drawer-footer-right .btn{
        flex:1;
    }
}


/* Live Monitoring */
.monitoring-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.monitoring-map-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); height: 560px; }
.monitoring-map { width: 100%; height: 100%; min-height: 560px; background: #eef2f7; }
.monitoring-sidebar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 6px 16px 12px; max-height: 560px; overflow-y: auto; }
.monitoring-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.monitoring-sidebar-header h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.monitoring-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.monitoring-guard-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f1f5f9; }
.monitoring-guard-item:last-child { border-bottom: 0; }
.monitoring-guard-dot { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.monitoring-guard-copy { min-width: 0; }
.monitoring-guard-copy strong { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-guard-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.monitoring-guard-time { color: var(--muted-light) !important; }

@media (max-width: 960px) {
    .monitoring-layout { grid-template-columns: 1fr; }
    .monitoring-map-wrap { height: 380px; }
    .monitoring-map { min-height: 380px; }
}

/* Guard tracking status badge */
.guard-tracking-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; margin-bottom: 14px; }
.guard-tracking-badge.tracking-inside { background: #f0fdf4; color: #15803d; }
.guard-tracking-badge.tracking-outside { background: #fef3c7; color: #92400e; }
.guard-tracking-badge.tracking-off { background: #f1f5f9; color: #64748b; }
.guard-tracking-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Notification dropdown items with unread state */
.dropdown-item.notification-item { display: block; padding: 10px 14px; white-space: normal; }
.dropdown-item.notification-item strong { display: block; font-size: 12px; }
.dropdown-item.notification-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

/* Live Monitoring filter bar */
/* Only the bar itself needs to sit above the map below it. Giving each
   filter-group its OWN position:relative + z-index:1200 (as before) traps
   that picker's fixed-position open menu inside the group's own stacking
   context — so when Zone's menu is open, Site's group (later in DOM, same
   z-index) wins the paint-order tie and renders on top of it, garbling the
   two together. One shared stacking context on the bar is enough; each
   picker's own menu (z-index:1200, position:fixed) then paints correctly
   above every group's static content, Zone or Site, regardless of order. */
.monitoring-filter-bar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; position: relative; z-index: 1200; }
.monitoring-filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.monitoring-filter-group label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.monitoring-filter-group .search-select-picker .schedule-search-picker-trigger { min-height: 36px; height: 36px; font-size: 12.5px; }
.timesheets-filter-picker { width: 220px; }
.timesheets-filter-picker .schedule-search-picker-trigger { min-height: 31px; height: 31px; font-size: 12.5px; padding: 0 9px; }
.monitoring-guard-item { cursor: pointer; border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; transition: background-color .12s ease; }
.monitoring-guard-item:hover { background: #f8fafc; }
.monitoring-guard-item.is-active { background: var(--primary-soft); }

/* My Schedule (guard self-service) */
.my-schedule-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.my-schedule-list { display: flex; flex-direction: column; gap: 4px; }
.my-schedule-day { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.my-schedule-day:last-child { border-bottom: none; }
.my-schedule-day-heading { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.my-schedule-day-heading.is-today { color: var(--primary); }
.my-schedule-day-empty { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.my-schedule-day-empty a { color: var(--primary); text-decoration: none; font-weight: 600; }
.my-schedule-absence-banner { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.my-schedule-absence-banner.is-timeoff { background: #fee2e2; color: #b91c1c; }
.my-schedule-absence-banner.is-unavailable { background: #fef3c7; color: #92400e; }
.my-shift-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.my-shift-card-main { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.my-shift-card-date { display: flex; flex-direction: column; min-width: 96px; }
.my-shift-card-date strong { font-size: 13px; color: #203040; }
.my-shift-card-date span { font-size: 12px; color: #64748b; margin-top: 2px; }
.my-shift-card-body { flex: 1; min-width: 200px; }
.my-shift-card-body h3 { margin: 0 0 2px; font-size: 14.5px; }
.my-shift-card-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.my-shift-card-actions { display: flex; gap: 8px; align-items: center; }
.my-shift-card-actions form { display: inline-flex; }
.my-shift-card-tasks { border-top: 1px solid var(--border); background: #fafbfd; padding: 10px 16px 12px; }
.my-shift-tasks-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 6px; }
.my-shift-task-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.my-shift-task-check { width: 19px; height: 19px; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
.my-shift-task-check.is-done { background: var(--success, #16a34a); border-color: var(--success, #16a34a); }
.my-shift-task-check svg { width: 12px; height: 12px; }
.my-shift-task-title { font-size: 13px; color: #334155; }
.my-shift-task-title.is-done { color: #94a3b8; text-decoration: line-through; }
.my-shift-task-title em { font-style: normal; margin-left: 6px; font-size: 10px; text-transform: uppercase; color: #b45309; background: #fef3c7; padding: 1px 5px; border-radius: 4px; }

/* Super Admin: tenant logo preview */
.tenant-logo-preview { margin-bottom: 8px; }
.tenant-logo-preview img { max-height: 48px; max-width: 180px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff; }

/* Timesheets — weekly grid (ConnectTeam-style) */
.ts-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.ts-tab { background: none; border: none; padding: 8px 2px 12px; font-size: 13.5px; font-weight: 400; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ts-tab.is-active { color: var(--primary); border-bottom-color: var(--primary);font-weight:700; }

.ts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ts-toolbar-left, .ts-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-toolbar-left {flex-wrap: nowrap;}
.ts-week-nav { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 4px; height: 31px; }
.ts-week-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; color: #64748b; }
.ts-week-nav-btn:hover { background: #f1f5f9; }
.ts-week-label { font-size: 12px; font-weight: 700; color: #334155; padding: 0 4px; white-space: nowrap; }

.week-jump-picker { position: relative; display: inline-flex; }
.week-jump-picker .week-jump-trigger { background: none; border: none; cursor: pointer; border-radius: 5px; }
.week-jump-picker .week-jump-trigger:hover { background: #f1f5f9; }
.week-jump-picker [data-week-jump-popover] { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 280px; z-index: 1200; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 10px; display: none; }
.week-jump-picker [data-week-jump-popover].show { display: block; }
.ts-summary-strip { display: flex; gap: 28px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; background: #fafbfd; border: 1px solid var(--border); border-radius: 10px; }
.ts-summary-item { display: flex; flex-direction: column; }
.ts-summary-item strong { font-size: 12px; color: #203040; font-variant-numeric: tabular-nums;font-weight:700;color:#8b939c; }
.ts-summary-item span { font-size: 12px; color: #64748b; margin-top: 2px;color:#8b939c; }
.ts-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.ts-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ts-grid th, .ts-grid td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ts-grid thead th { background: #fafbfd; color: #64748b; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.ts-grid thead th small { display: block; font-weight: 500; text-transform: none; font-size: 10px; color: #94a3b8; margin-top: 1px; }
/* display:flex on the shared class made the header cell size itself
   differently from its plain table-cell sibling <th>s (a shorter row) —
   the avatar+name flex layout is only actually needed in the body rows,
   so it's scoped there now and the header stays a normal table cell. */
.ts-grid-user-col { text-align: left !important; position: sticky; left: 0; background: #fff; z-index: 1; font-weight: 400; color: #203040; }
.ts-grid tbody .ts-grid-user-col { display: flex; align-items: center; gap: 16px; }
.ts-grid thead .ts-grid-user-col { background: #fafbfd; }
.ts-grid tbody tr { cursor: pointer; }
.ts-grid tbody tr:hover td { background: #f8fafc; }
.ts-grid tbody tr:hover .ts-grid-user-col { background: #f8fafc; }
[data-ts-user-row] { cursor: pointer; }
[data-ts-user-row]:hover td { background: #f8fafc; }
.ts-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.ts-pending-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
@media (max-width: 720px) {
    .ts-toolbar { flex-direction: column; align-items: stretch; }
    .ts-toolbar-left, .ts-toolbar-right { justify-content: flex-start; }
}

/* Time Off — type chip */
/* Matches .status-badge's box model (inline-flex + centered, same padding
   scale) so the two pill styles that land in the same table row — Type
   here, Status elsewhere in the same row — read as one consistent system
   instead of two components with slightly different height/alignment. */
.to-type-chip { display: inline-flex; align-items: center; line-height: 1.3; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 11.5px; font-weight: 700; }
.to-attachment-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.to-attachment-list a { font-size: 11px; color: var(--primary); text-decoration: none; }
.to-attachment-list a:hover { text-decoration: underline; }

/* My Schedule — open-to-claim section */
.my-schedule-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 0 0 10px; }
.my-schedule-open-section { margin-bottom: 24px; }
.my-shift-card.is-open { border-color: #93c5fd; background: #f8fbff; }

/* Date range picker */
.date-range-picker { position: relative; display: inline-block; }
.date-range-trigger { height: 31px; border: 1px solid var(--border); border-radius: 7px; padding: 0 10px; background: #fff; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; color: #475569; font-size: 12.5px; transition: .15s ease; }
.date-range-trigger:hover { border-color: var(--border-strong); }
.date-range-trigger svg { flex-shrink: 0; width: 14px; height: 14px; color: #94a3b8; }
.date-range-picker.has-value .date-range-trigger { color: var(--text); border-color: #dbdee0;border-radius:200px }
.date-range-picker.has-value .date-range-trigger svg { color: var(--primary); }
.date-range-popover { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1200; width: 280px; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px; }
.date-range-popover.show { display: block; }
.drp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drp-header strong { font-size: 12.5px; color: var(--text); }
.drp-nav { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #64748b; cursor: pointer; }
.drp-nav:hover { background: #f1f5f9; }
.drp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 2px; }
.drp-weekdays span { font-size: 10px; font-weight: 600; color: #94a3b8; padding: 4px 0; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.drp-day { height: 28px; border: 0; background: transparent; border-radius: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.drp-day:hover { background: #f1f5f9; }
.drp-day.is-muted { color: #cbd5e1; }
.drp-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-strong); }
.drp-day.is-in-range { background: var(--primary-soft); border-radius: 0; }
.drp-day.is-selected { background: var(--primary); color: #fff; }
.drp-day.is-range-start { border-radius: 6px 0 0 6px; }
.drp-day.is-range-end { border-radius: 0 6px 6px 0; }
.drp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.drp-quick button { border: 1px solid var(--border-strong); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 11px; color: #475569; cursor: pointer; }
.drp-quick button:hover { border-color: var(--primary); color: var(--primary); }
.drp-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ========================================================================
   SCHEDULE BOARD HEADER ACTIONS (Connecteam-style)
   Permissions + admin avatars, then pill buttons: Requests, Conflicts,
   Job list, Settings.
======================================================================== */

.schedule-board-header-actions {
    gap: 10px;
    flex-wrap: wrap;
    margin-inline-start: auto;
}

.schedule-board-admins {
    gap: 10px;
    padding-right: 0;
    margin-inline-end: 4px;
    border-right: 0;
    font-size: 14px;
    color: #203040;
}

.schedule-board-admin-stack { padding-left: 8px; }

.schedule-board-admin-avatar {
    width: 30px;
    height: 30px;
    margin-left: -8px;
    background: #42a5f5;
    color: #fff;
    text-transform: uppercase;
}
.schedule-board-admin-avatar.more { background: #f1f5f9; color: #475569; }

.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.sb-btn:hover { background: var(--primary-soft); border-color: #bfdbfe; }
.sb-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sb-btn svg { flex-shrink: 0; width: 18px; height: 18px; }

.sb-btn--icon { width: 38px; padding: 0; }
.sb-btn--alert { color: #dc2626; }
.sb-btn--alert:hover { background: #fef2f2; border-color: #fecaca; }

/* Shift color picker: dot + chevron only (label kept for scripts/screen readers) */
.schedule-selected-color-button {
    gap: 12px;
    min-height: 50px;
    padding: 0 16px 0 18px;
    border-color: var(--border);
    border-radius: 14px;
    color: #94a3b8;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.schedule-selected-color-button:hover { border-color: var(--border-strong); }
.schedule-selected-color-button:focus-visible,
.schedule-color-control.open .schedule-selected-color-button {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    outline: 0;
}
.schedule-selected-color-preview { width: 20px; height: 20px; border-radius: 50%; }
.schedule-selected-color-button [data-selected-color-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.schedule-selected-color-button svg { width: 14px; height: 14px; }

/* ========================================================================
   Shift drawer: Tags + Notes rows (label on the left, field on the right)
   New classes: .shift-tags, .shift-notes
======================================================================== */

/* ----- Tags ----- */
.schedule-shift-builder-drawer .schedule-form-group.shift-tags {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
}

.schedule-shift-builder-drawer .schedule-form-group.shift-tags label {
    min-width: 0;
    min-height: 40px;
}

.schedule-shift-builder-drawer .shift-tags .schedule-tag-builder {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.schedule-shift-builder-drawer .shift-tags .schedule-pill-list:not(:empty) {
    margin-bottom: 8px;
}

.schedule-shift-builder-drawer .shift-tags .schedule-tag-input-row {
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.schedule-shift-builder-drawer .shift-tags .schedule-tag-input-row:focus-within {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.schedule-shift-builder-drawer .schedule-form-group.shift-tags .schedule-tag-input-row input,
.schedule-shift-builder-drawer .schedule-form-group.shift-tags .schedule-tag-input-row input:focus {
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
}

.schedule-shift-builder-drawer .shift-tags [data-shift-tag-inputs] {
    grid-column: 2;
}

/* ----- Notes ----- */
.schedule-shift-builder-drawer .schedule-form-section.shift-notes {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.schedule-shift-builder-drawer .shift-notes .schedule-form-section-heading {
    margin: 0;
    padding-top: 10px;
}

.schedule-shift-builder-drawer .shift-notes .schedule-form-section-heading h3 {
    font-size: 14px;
    font-weight: 400;
    color: #203040;
}

.schedule-shift-builder-drawer .shift-notes .schedule-form-section-heading p {
    display: none;
}

.schedule-shift-builder-drawer .shift-notes .schedule-form-group textarea {
    min-height: 120px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* Stack label above field on narrow screens */
@media (max-width: 480px) {
    .schedule-shift-builder-drawer .schedule-form-group.shift-tags,
    .schedule-shift-builder-drawer .schedule-form-section.shift-notes {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }

    .schedule-shift-builder-drawer .schedule-form-group.shift-tags label,
    .schedule-shift-builder-drawer .shift-notes .schedule-form-section-heading {
        min-height: 0;
        padding-top: 0;
    }

    .schedule-shift-builder-drawer .shift-tags [data-shift-tag-inputs] {
        grid-column: 1;
    }
}

/* ----- Address ----- */
.schedule-shift-builder-drawer .schedule-form-group.shift-address {
    display: flex;
    align-items: center;
    gap: 16px;
}

.schedule-shift-builder-drawer .schedule-form-group.shift-address label {
    min-width: 80px;
}

.schedule-shift-builder-drawer .schedule-form-group.shift-address input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
}

.schedule-shift-builder-drawer .schedule-form-group.shift-address input::placeholder {
    color: #94a3b8;
}

@media (max-width: 480px) {
    .schedule-shift-builder-drawer .schedule-form-group.shift-address {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
}

/* ----- Shift tags: "Select"-style field (leading icon hidden, chevron on the right) ----- */
.schedule-shift-builder-drawer .shift-tags .schedule-tag-input-row > svg:first-child {
    display: none;
}

.schedule-shift-builder-drawer .shift-tags .schedule-tag-input-row {
    padding: 0 14px;
}

.schedule-shift-builder-drawer .shift-tags .shift-tags-chevron {
    flex-shrink: 0;
    color: #94a3b8;
    pointer-events: none;
}

.schedule-shift-builder-drawer .shift-tags .schedule-tag-input-row:focus-within .shift-tags-chevron {
    color: var(--primary);
}

/* ----- Shift tags dropdown (Add item + checkbox list) ----- */
.schedule-shift-builder-drawer .shift-tags .schedule-tag-input-row {
    position: relative;
}

.schedule-shift-builder-drawer .shift-tags .shift-tags-chevron {
    pointer-events: auto;
    cursor: pointer;
    transition: transform .15s ease;
}

.schedule-shift-builder-drawer .shift-tags.is-open .shift-tags-chevron {
    transform: rotate(180deg);
}

.shift-tags-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    overflow: hidden;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

.shift-tags-menu[hidden],
.shift-tags-menu [hidden] {
    display: none;
}

.shift-tags-add {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
    color: #203040;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.shift-tags-add:hover { background: #f8fafc; }

.shift-tags-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 6px 0;
}

.shift-tags-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #203040;
    font-size: 14px;
    cursor: pointer;
}
.shift-tags-option:hover { background: #f8fafc; }
.shift-tags-option svg { flex-shrink: 0; color: #475569; }

.schedule-shift-builder-drawer .shift-tags-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    accent-color: var(--primary);
    cursor: pointer;
}

.shift-tags-empty {
    padding: 14px 16px;
    color: #94a3b8;
    font-size: 13px;
}

/* ----- Notes: textarea + "Attach" link inside one bordered box ----- */
.schedule-shift-builder-drawer .schedule-form-group.shift-notes-field {
    display: flex;
    flex-direction: column;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.schedule-shift-builder-drawer .schedule-form-group.shift-notes-field:focus-within {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.schedule-shift-builder-drawer .shift-notes .schedule-form-group.shift-notes-field textarea,
.schedule-shift-builder-drawer .shift-notes .schedule-form-group.shift-notes-field textarea:focus {
    min-height: 96px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: transparent;
    box-shadow: none;
    resize: none;
}

.shift-notes-attach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 4px 0 10px 12px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.shift-notes-attach:hover { background: var(--primary-soft); }
.shift-notes-attach svg { flex-shrink: 0; }

/* ----- Add field link + menu ----- */
.schedule-shift-builder-drawer .schedule-form-group.shift-add-field {
    position: relative;
    display: block;
}

.shift-add-field-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.shift-add-field-toggle:hover { text-decoration: underline; }
.shift-add-field-toggle svg { flex-shrink: 0; transition: transform .15s ease; }
.shift-add-field.is-open .shift-add-field-toggle svg { transform: rotate(180deg); }

.shift-add-field-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    padding: 6px 0;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
.shift-add-field-menu[hidden] { display: none; }

.shift-add-field-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: #203040;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.shift-add-field-item:hover { background: #f8fafc; }

.shift-add-field-empty {
    padding: 10px 16px;
    color: #94a3b8;
    font-size: 13px;
}

/* Notes now sits inside the Shift information grid (right after Address) */
.schedule-shift-builder-drawer .schedule-form-grid > .schedule-form-section.shift-notes {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

/* ----- Row layout for the remaining shift drawer fields ----- */

/* Address: icon inside the input, on the right */
.schedule-shift-builder-drawer .schedule-form-group.shift-address {
    position: relative;
}
.schedule-shift-builder-drawer .schedule-form-group.shift-address input {
    padding-right: 44px;
}
.schedule-shift-builder-drawer .shift-address .shift-address-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* Open shift claiming: checkbox row aligned with the fields (right column) */
.schedule-shift-builder-drawer .schedule-form-section.shift-claim,
.schedule-shift-builder-drawer .schedule-form-section.shift-attachments {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.schedule-shift-builder-drawer .shift-claim .schedule-form-section-heading {
    display: none;
}

.schedule-shift-builder-drawer .shift-claim > :not(.schedule-form-section-heading) {
    grid-column: 2;
}

.schedule-shift-builder-drawer .shift-claim .schedule-checkbox-row {
    padding: 0;
    border: 0;
    background: transparent;
}

/* Attachments: title on the left, dropzone + file lists on the right */
.schedule-shift-builder-drawer .shift-attachments .schedule-form-section-heading {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 10px;
}
.schedule-shift-builder-drawer .shift-attachments .schedule-form-section-heading h3 {
    font-size: 14px;
    font-weight: 400;
    color: #203040;
    white-space: nowrap;
}
.schedule-shift-builder-drawer .shift-attachments .schedule-form-section-heading p {
    display: none;
}
.schedule-shift-builder-drawer .shift-attachments > :not(.schedule-form-section-heading) {
    grid-column: 2;
}

@media (max-width: 480px) {
    .schedule-shift-builder-drawer .schedule-form-section.shift-claim,
    .schedule-shift-builder-drawer .schedule-form-section.shift-attachments {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }
    .schedule-shift-builder-drawer .shift-claim > :not(.schedule-form-section-heading),
    .schedule-shift-builder-drawer .shift-attachments > :not(.schedule-form-section-heading) {
        grid-column: 1;
    }
    .schedule-shift-builder-drawer .shift-attachments .schedule-form-section-heading {
        grid-row: auto;
        padding-top: 0;
    }
}

/* Notes: keep the box in the right column (the generic .schedule-form-group.full rule spans all columns) */
.schedule-shift-builder-drawer .shift-notes .schedule-form-section-heading {
    grid-column: 1;
    grid-row: 1;
}
.schedule-shift-builder-drawer .shift-notes .schedule-form-group.shift-notes-field {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 480px) {
    .schedule-shift-builder-drawer .shift-notes .schedule-form-section-heading {
        grid-column: 1;
        grid-row: 1;
    }
    .schedule-shift-builder-drawer .shift-notes .schedule-form-group.shift-notes-field {
        grid-column: 1;
        grid-row: 2;
    }
}

/* ----- Users block: title on the left, full-width picker on the right ----- */
.schedule-shift-builder-drawer .schedule-form-section.user-assignment {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.schedule-shift-builder-drawer .user-assignment > label {
    min-width: 0;
    min-height: 40px;
}

.schedule-shift-builder-drawer .user-assignment > .schedule-search-picker,
.schedule-shift-builder-drawer .user-assignment > [data-selected-user-inputs],
.schedule-shift-builder-drawer .user-assignment > .schedule-selected-user-pills,
.schedule-shift-builder-drawer .user-assignment > .schedule-assignment-warning {
    grid-column: 2;
    min-width: 0;
}

.schedule-shift-builder-drawer .user-assignment .schedule-search-picker-trigger {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-size: 14px;
}

.schedule-shift-builder-drawer .user-assignment [data-user-picker-label] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .schedule-shift-builder-drawer .schedule-form-section.user-assignment {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }
    .schedule-shift-builder-drawer .user-assignment > label { min-height: 0; }
    .schedule-shift-builder-drawer .user-assignment > .schedule-search-picker,
    .schedule-shift-builder-drawer .user-assignment > [data-selected-user-inputs],
    .schedule-shift-builder-drawer .user-assignment > .schedule-selected-user-pills,
    .schedule-shift-builder-drawer .user-assignment > .schedule-assignment-warning {
        grid-column: 1;
    }
}

/* Users section must span the whole form grid (it was only taking one column) */
.schedule-shift-builder-drawer .schedule-form-grid > .schedule-form-section.user-assignment {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    border-bottom: 0;
    background: transparent;
}

/* ========================================================================
   Shift drawer footer (Connecteam style):
   [Save & publish] [Save as draft] [delete icon] ............ [Cancel]
   Uses display:contents on the right-hand group so the existing buttons can
   be re-ordered without changing the markup.
======================================================================== */
.schedule-shift-builder-drawer .schedule-work-drawer-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 18px;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer-right {
    display: contents;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer .btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
}

/* Save & publish: filled primary */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift-publish] {
    order: 1;
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift-publish]:hover {
    border-color: #1d55ce;
    background: #1d55ce;
    color: #fff;
}

/* Save as draft: outline pill, blue text */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift] {
    order: 2;
    border-color: var(--border-strong);
    background: #fff;
    color: var(--primary);
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift]:hover {
    border-color: #bfdbfe;
    background: var(--primary-soft);
    color: var(--primary);
}

/* Delete: red outline circle, icon only (text kept for screen readers) */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift] {
    order: 3;
    width: 44px;
    padding: 0;
    justify-content: center;
    border-color: #fecaca;
    background: #fff;
    color: var(--danger);
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift]:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: var(--danger);
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift] span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift] svg {
    width: 18px;
    height: 18px;
}

/* Cancel: quiet text button pushed to the right */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-close-schedule-drawer] {
    order: 4;
    margin-left: auto;
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    color: #64748b;
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-close-schedule-drawer]:hover {
    background: #f1f5f9;
    color: var(--text);
}

/* ----- Footer v2: Publish + bell (split), Save draft, delete, Save as template ----- */
.schedule-shift-builder-drawer .schedule-work-drawer-footer {
    gap: 8px;
    padding: 14px 18px;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer .btn {
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
}

/* Split button: [Save & publish][bell] */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift-publish] {
    order: 1;
    border-radius: 999px 8px 8px 999px;
    padding: 0 20px 0 22px;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-notify {
    order: 2;
    width: 46px;
    margin-left: -5px;
    padding: 0;
    justify-content: center;
    border-color: var(--primary);
    border-radius: 8px 999px 999px 8px;
    background: var(--primary);
    color: #fff;
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-notify:hover {
    border-color: #1d55ce;
    background: #1d55ce;
    color: #fff;
}
/* pressed = notifications on: darker with a light ring */
.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-notify[aria-pressed="true"] {
    border-color: #1e3a8a;
    background: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-notify[aria-pressed="true"] svg {
    fill: currentColor;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift] { order: 3; }
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift] { order: 4; width: 42px; }

.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-template {
    order: 5;
    gap: 8px;
    border-color: var(--border-strong);
    background: #fff;
    color: var(--primary);
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-template:hover {
    border-color: #bfdbfe;
    background: var(--primary-soft);
    color: var(--primary);
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-template svg { flex-shrink: 0; }

/* The header X already closes the drawer, so the footer Cancel is hidden (still in the markup) */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-close-schedule-drawer] {
    display: none;
}

/* ----- Footer v3: everything on one line + Delete always visible ----- */
.schedule-shift-builder-drawer .schedule-work-drawer-footer {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 12px 14px;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer .btn {
    flex: 0 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-save-shift-publish] {
    padding: 0 14px 0 16px;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-notify {
    flex: 0 0 40px;
    width: 40px;
    margin-left: -3px;
    padding: 0;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift] {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
}

.schedule-shift-builder-drawer .schedule-work-drawer-footer .shift-footer-template {
    gap: 6px;
}

/* Delete stays visible; it is disabled until an existing shift is open
   (the script below mirrors the [hidden] state that schedule-board.js sets). */
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift][hidden] {
    display: inline-flex !important;
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift]:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.schedule-shift-builder-drawer .schedule-work-drawer-footer [data-delete-shift]:disabled:hover {
    border-color: #fecaca;
    background: #fff;
}

@media (max-width: 520px) {
    .schedule-shift-builder-drawer .schedule-work-drawer-footer { flex-wrap: wrap; }
}

/* ========================================================================
   Add unavailability drawer (Connecteam style)
   Scoped to .unavailability-drawer; new classes: unavail-*
======================================================================== */

/* ----- Header: [X] Add unavailability ----- */
.unavailability-drawer .schedule-work-drawer-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 14px;
    padding: 20px 24px;
}
.unavailability-drawer .schedule-drawer-eyebrow { display: none; }
.unavailability-drawer .schedule-work-drawer-header h2 {
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
}
.unavailability-drawer .schedule-work-drawer-close svg { width: 20px; height: 20px; }

/* ----- Body ----- */
.unavailability-drawer .schedule-form-section.unavail-section {
    display: grid;
    grid-template-columns: 96px 180px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 18px;
    align-items: center;
    padding: 24px;
    border-bottom: 0;
}

/* the original 2-col grid + field groups become transparent so their
   label / input can be placed on the section grid */
.unavailability-drawer .unavail-grid,
.unavailability-drawer .unavail-from,
.unavailability-drawer .unavail-to {
    display: contents;
}

.unavailability-drawer .unavail-section label {
    margin: 0;
    color: #203040;
    font-size: 14px;
    font-weight: 400;
}

.unavailability-drawer .unavail-section input:not([type="checkbox"]):not([type="hidden"]),
.unavailability-drawer .unavail-section select,
.unavailability-drawer .unavail-section textarea {
    width: 100%;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.unavailability-drawer .unavail-section input:not([type="checkbox"]):not([type="hidden"]),
.unavailability-drawer .unavail-section select {
    height: 44px;
    padding: 0 14px;
}
.unavailability-drawer .unavail-section textarea {
    min-height: 110px;
    padding: 12px 14px;
    resize: none;
}
.unavailability-drawer .unavail-section input:focus,
.unavailability-drawer .unavail-section select:focus,
.unavailability-drawer .unavail-section textarea:focus {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

/* Row 1: Date + input ........ All day toggle */
.unavailability-drawer .unavail-from > label { grid-column: 1; grid-row: 1; }
.unavailability-drawer .unavail-from > input { grid-column: 2; grid-row: 1; }

.unavailability-drawer .unavail-allday {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    background: transparent;
}
.unavailability-drawer .unavail-allday strong { font-size: 14px; font-weight: 400; color: #203040; }
.unavailability-drawer .unavail-allday small { display: none; }

/* Row 2: To date */
.unavailability-drawer .unavail-to > label { grid-column: 1; grid-row: 2; }
.unavailability-drawer .unavail-to > input { grid-column: 2; grid-row: 2; }

/* Row 3: Start ....... End (visible when All day is off) */
.unavailability-drawer .unavail-times {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 96px 180px auto 180px;
    column-gap: 16px;
    align-items: center;
}
.unavailability-drawer .unavail-times .schedule-form-group { display: contents; }

/* Users, Reason, Notes: label above a full-width field */
.unavailability-drawer .unavail-user,
.unavailability-drawer .unavail-reason,
.unavailability-drawer .unavail-notes {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.unavailability-drawer .unavail-user {
    order: 4;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid #edf1f6;
}
.unavailability-drawer .unavail-reason { order: 5; }
.unavailability-drawer .unavail-notes { order: 6; }

/* Repeat */
.unavailability-drawer .unavail-repeat {
    grid-column: 1 / -1;
    order: 7;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid #edf1f6;
    cursor: pointer;
}
.unavailability-drawer .unavail-repeat input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

/* ----- Footer: only the Save button, left aligned ----- */
.unavailability-drawer .schedule-work-drawer-footer {
    justify-content: flex-start;
    padding: 16px 24px;
}
.unavailability-drawer .schedule-work-drawer-footer > div:empty { display: none; }
.unavailability-drawer .schedule-work-drawer-footer-right { display: contents; }
.unavailability-drawer .schedule-work-drawer-footer [data-close-schedule-drawer] { display: none; }
.unavailability-drawer .schedule-work-drawer-footer .btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
}

/* ----- Small screens: stack everything ----- */
@media (max-width: 520px) {
    .unavailability-drawer .schedule-form-section.unavail-section {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10px;
    }
    .unavailability-drawer .unavail-from > label,
    .unavailability-drawer .unavail-from > input,
    .unavailability-drawer .unavail-to > label,
    .unavailability-drawer .unavail-to > input,
    .unavailability-drawer .unavail-allday {
        grid-column: 1;
        grid-row: auto;
    }
    .unavailability-drawer .unavail-times {
        grid-template-columns: minmax(0, 1fr);
        grid-row: auto;
    }
}

/* ----- Unavailability: Start / End row fits the drawer width ----- */
.unavailability-drawer .schedule-form-section.unavail-section {
    grid-template-columns: 96px 150px minmax(0, 1fr);
}

.unavailability-drawer .unavail-times {
    grid-template-columns: 96px 150px auto minmax(0, 1fr);
}

.unavailability-drawer .unavail-times label {
    white-space: nowrap;
}

.unavailability-drawer .unavail-times input {
    min-width: 0;
    padding: 0 12px;
}

.unavailability-drawer .unavail-from > input,
.unavailability-drawer .unavail-to > input {
    min-width: 0;
    padding: 0 12px;
}

@media (max-width: 520px) {
    .unavailability-drawer .schedule-form-section.unavail-section {
        grid-template-columns: minmax(0, 1fr);
    }
    .unavailability-drawer .unavail-times {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Never show a horizontal scrollbar inside the unavailability drawer */
.unavailability-drawer .schedule-shift-form {
    overflow-x: hidden;
}
.unavailability-drawer .unavail-section > * {
    min-width: 0;
}

/* ----- Unavailability: + Add hours ----- */
.unavailability-drawer .unavail-add-hours {
    grid-column: 2 / -1;
    justify-self: start;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.unavailability-drawer .unavail-add-hours:hover { text-decoration: underline; }

.unavailability-drawer .unavail-extra-hours {
    grid-column: 1 / -1;
    display: grid;
    row-gap: 12px;
}
.unavailability-drawer .unavail-extra-hours:not(:empty) { margin-top: 2px; }

.unavailability-drawer .unavail-hours-row {
    display: grid;
    grid-template-columns: 96px 150px auto minmax(0, 1fr) 32px;
    column-gap: 16px;
    align-items: center;
}
.unavailability-drawer .unavail-hours-end {
    color: #203040;
    font-size: 14px;
    white-space: nowrap;
}
.unavailability-drawer .unavail-hours-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.unavailability-drawer .unavail-hours-remove:hover { background: #fef2f2; color: var(--danger); }

@media (max-width: 520px) {
    .unavailability-drawer .unavail-add-hours { grid-column: 1; }
    .unavailability-drawer .unavail-hours-row {
        grid-template-columns: minmax(0, 1fr) 32px;
        row-gap: 8px;
    }
    .unavailability-drawer .unavail-hours-row > span:first-child { display: none; }
}

/* ----- Unavailability: Start  [ ]  End  [ ]  + Add hours, all on one line ----- */
.unavailability-drawer .unavail-times {
    grid-template-columns: 96px minmax(0, 1fr) auto minmax(0, 1fr) auto;
    column-gap: 12px;
}

.unavailability-drawer .unavail-times .unavail-add-hours {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    padding: 4px 0 4px 4px;
    white-space: nowrap;
}

.unavailability-drawer .unavail-times .unavail-extra-hours {
    grid-column: 1 / -1;
    grid-row: 2;
}

.unavailability-drawer .unavail-hours-row {
    grid-template-columns: 96px minmax(0, 1fr) auto minmax(0, 1fr) 32px;
    column-gap: 12px;
}

/* Time inputs: drop the clock icon so "--:-- --" fits the narrower fields */
.unavailability-drawer .unavail-times input[type="time"],
.unavailability-drawer .unavail-hours-row input[type="time"] {
    padding: 0 8px;
}
.unavailability-drawer input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

@media (max-width: 520px) {
    .unavailability-drawer .unavail-times {
        grid-template-columns: minmax(0, 1fr);
    }
    .unavailability-drawer .unavail-times .unavail-add-hours,
    .unavailability-drawer .unavail-times .unavail-extra-hours {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
    .unavailability-drawer .unavail-hours-row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }
}

/* ========================================================================
   Add time off drawer (Connecteam style)
   Scoped to .timeoff-drawer; new class: timeoff-notes
   Rows: bold label on the left, field on the right, divider between rows.
======================================================================== */

/* ----- Header: [X] Add time off ----- */
.timeoff-drawer .schedule-work-drawer-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 14px;
    padding: 20px 24px;
}
.timeoff-drawer .schedule-drawer-eyebrow { display: none; }
.timeoff-drawer .schedule-work-drawer-header h2 {
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
}
.timeoff-drawer .schedule-work-drawer-close svg { width: 20px; height: 20px; }

/* ----- Body ----- */
.timeoff-drawer .schedule-form-section {
    display: flex;
    flex-direction: column;
    padding: 4px 24px 24px;
    border-bottom: 0;
}

/* flatten the original grids so every group is a row of the section */
.timeoff-drawer .schedule-form-grid { display: contents; }

.timeoff-drawer .schedule-form-group {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #edf1f6;
}

.timeoff-drawer .schedule-form-group label {
    margin: 0;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
}

.timeoff-drawer .schedule-form-group input:not([type="hidden"]),
.timeoff-drawer .schedule-form-group select,
.timeoff-drawer .schedule-form-group textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.timeoff-drawer .schedule-form-group input:not([type="hidden"]),
.timeoff-drawer .schedule-form-group select {
    height: 44px;
    padding: 0 14px;
}
.timeoff-drawer .schedule-form-group input:focus,
.timeoff-drawer .schedule-form-group select:focus,
.timeoff-drawer .schedule-form-group textarea:focus {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

/* All day: bold label on the left, toggle on the right */
.timeoff-drawer .schedule-switch-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: transparent;
}
.timeoff-drawer .schedule-switch-row strong { font-size: 14px; font-weight: 600; color: #172033; }
.timeoff-drawer .schedule-switch-row small { grid-column: 2; margin: 0; }
.timeoff-drawer .schedule-switch-row > div { display: contents; }
.timeoff-drawer .schedule-switch-row strong { grid-column: 1; grid-row: 1; }
.timeoff-drawer .schedule-switch-row small { grid-row: 1; }
.timeoff-drawer .schedule-switch-row .schedule-switch { grid-column: 3; grid-row: 1; }

/* Notes: full-width box, no label (placeholder says it) */
.timeoff-drawer .schedule-form-group.timeoff-notes {
    display: block;
    padding: 24px 0 0;
    border-bottom: 0;
}
.timeoff-drawer .timeoff-notes label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.timeoff-drawer .timeoff-notes textarea {
    min-height: 120px;
    padding: 14px 16px;
    resize: none;
}

/* ----- Footer: [Save time off] Cancel ----- */
.timeoff-drawer .schedule-work-drawer-footer {
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
}
.timeoff-drawer .schedule-work-drawer-footer > div:empty { display: none; }
.timeoff-drawer .schedule-work-drawer-footer-right { display: contents; }
.timeoff-drawer .schedule-work-drawer-footer .btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
}
.timeoff-drawer .schedule-work-drawer-footer .btn-primary { order: 1; }
.timeoff-drawer .schedule-work-drawer-footer [data-close-schedule-drawer] {
    order: 2;
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    color: #475569;
}
.timeoff-drawer .schedule-work-drawer-footer [data-close-schedule-drawer]:hover {
    background: #f1f5f9;
    color: var(--text);
}

/* ----- Small screens: label above field ----- */
@media (max-width: 520px) {
    .timeoff-drawer .schedule-form-group {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }
    .timeoff-drawer .schedule-switch-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .timeoff-drawer .schedule-switch-row strong,
    .timeoff-drawer .schedule-switch-row small { grid-column: 1; }
    .timeoff-drawer .schedule-switch-row small { grid-row: 2; }
    .timeoff-drawer .schedule-switch-row .schedule-switch { grid-column: 2; }
}

/* ----- User dropdown with avatars (Time off + Unavailability) ----- */

/* the real <select> stays in the form, just invisible (keeps validation + submit) */
select.user-avatar-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden;
}

.user-avatar-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.user-avatar-select-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.user-avatar-select-trigger:hover:not(:disabled) { border-color: #c7d2e2; }
.user-avatar-select-trigger:focus-visible,
.user-avatar-select.is-open .user-avatar-select-trigger {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    outline: 0;
}
.user-avatar-select-trigger:disabled { background: #f3f5f8; cursor: not-allowed; }
.user-avatar-select-trigger.is-placeholder { color: #94a3b8; }

.user-avatar-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar-select-chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: #94a3b8;
    transition: transform .15s ease;
}
.user-avatar-select.is-open .user-avatar-select-chevron { transform: rotate(180deg); }

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #42a5f5;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.user-avatar-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
.user-avatar-select-menu[hidden] { display: none; }

.user-avatar-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #203040;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.user-avatar-option:hover,
.user-avatar-option:focus-visible { background: #f8fafc; outline: 0; }
.user-avatar-option[aria-selected="true"] { background: #eff6ff; }

/* grid placement inside the Time off rows (label | field) */
.timeoff-drawer .schedule-form-group > .user-avatar-select {
    grid-column: 2;
    grid-row: 1;
}

/* ----- Time off: From date | To date | All day on one line ----- */
.timeoff-drawer .schedule-form-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: 16px;
}

/* every row spans the full width unless placed below */
.timeoff-drawer .schedule-form-section > .schedule-form-group,
.timeoff-drawer .schedule-form-section > .schedule-switch-row,
.timeoff-drawer .schedule-form-section > .schedule-form-grid > .schedule-form-group {
    grid-column: 1 / -1;
}

.timeoff-drawer .schedule-form-group.timeoff-from,
.timeoff-drawer .schedule-form-group.timeoff-to,
.timeoff-drawer .schedule-switch-row.timeoff-allday {
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 44px;
    row-gap: 8px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 0;
}

.timeoff-drawer .schedule-form-group.timeoff-from { grid-column: 1; }
.timeoff-drawer .schedule-form-group.timeoff-to   { grid-column: 2; }
.timeoff-drawer .schedule-switch-row.timeoff-allday {
    grid-column: 3;
    justify-items: start;
}

.timeoff-drawer .timeoff-allday > div { display: contents; }
.timeoff-drawer .timeoff-allday strong { grid-column: 1; grid-row: 1; }
.timeoff-drawer .timeoff-allday small { display: none; }
.timeoff-drawer .timeoff-allday .schedule-switch {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
}

/* date fields have to fit half a row: no picker icon padding */
.timeoff-drawer .timeoff-from input,
.timeoff-drawer .timeoff-to input {
    padding: 0 10px;
}

/* divider under the row */
.timeoff-drawer .schedule-form-section > .schedule-form-grid > .schedule-form-group:not(.timeoff-from):not(.timeoff-to):not(:first-child) {
    border-top: 1px solid #edf1f6;
}

@media (max-width: 520px) {
    .timeoff-drawer .schedule-form-section { grid-template-columns: minmax(0, 1fr); }
    .timeoff-drawer .schedule-form-group.timeoff-from,
    .timeoff-drawer .schedule-form-group.timeoff-to,
    .timeoff-drawer .schedule-switch-row.timeoff-allday {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ----- Time off: Add files ----- */
.timeoff-drawer .timeoff-files {
    grid-column: 1 / -1;
    padding-top: 20px;
}

.timeoff-drawer .timeoff-files-input { display: none; }

.timeoff-drawer .timeoff-add-files {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.timeoff-drawer .timeoff-add-files:hover { background: var(--primary-soft); border-color: #bfdbfe; }
.timeoff-drawer .timeoff-add-files:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.timeoff-drawer .timeoff-add-files svg { flex-shrink: 0; }

.timeoff-drawer .timeoff-file-list:not(:empty) {
    display: grid;
    row-gap: 8px;
    margin-top: 12px;
}

.timeoff-drawer .timeoff-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border: 1px solid #edf1f6;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    color: #203040;
}
.timeoff-drawer .timeoff-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeoff-drawer .timeoff-file-row small { color: #94a3b8; font-size: 12px; }
.timeoff-drawer .timeoff-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.timeoff-drawer .timeoff-file-remove:hover { background: #fef2f2; color: var(--danger); }

/* ----- Fixes: duplicate user picker + From/To/All day placement ----- */

/* search-select.js also builds its own picker for these <select>s; the avatar picker replaces it */
.timeoff-drawer .search-select-picker,
.unavailability-drawer .search-select-picker {
    display: none !important;
}

/* From / To sit side by side (this beats the generic "full width" row rule) */
.timeoff-drawer .schedule-form-section > .schedule-form-grid > .schedule-form-group.timeoff-from {
    grid-column: 1;
    grid-row: 2;
}
.timeoff-drawer .schedule-form-section > .schedule-form-grid > .schedule-form-group.timeoff-to {
    grid-column: 2;
    grid-row: 2;
}
.timeoff-drawer .schedule-form-section > .schedule-switch-row.timeoff-allday {
    grid-column: 3;
    grid-row: 2;
}

@media (max-width: 520px) {
    .timeoff-drawer .schedule-form-section > .schedule-form-grid > .schedule-form-group.timeoff-from,
    .timeoff-drawer .schedule-form-section > .schedule-form-grid > .schedule-form-group.timeoff-to,
    .timeoff-drawer .schedule-form-section > .schedule-switch-row.timeoff-allday {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ========================================================================
   Add from template drawer (same style as the Time off / Unavailability drawers)
   Scoped to .template-drawer; new class: template-drawer
======================================================================== */

/* ----- Header: [X] Add from template ----- */
.template-drawer .schedule-work-drawer-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 14px;
    padding: 20px 24px;
}
.template-drawer .schedule-drawer-eyebrow { display: none; }
.template-drawer .schedule-work-drawer-header h2 {
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
}
.template-drawer .schedule-work-drawer-close svg { width: 20px; height: 20px; }

/* ----- Sections ----- */
.template-drawer .schedule-form-section {
    padding: 24px;
    border-bottom: 0;
}
.template-drawer .schedule-form-section + .schedule-form-section {
    margin-top: 0;
    border-top: 1px solid #edf1f6;
}

/* ----- Search ----- */
.template-drawer .schedule-template-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #94a3b8;
}
.template-drawer .schedule-template-search svg { flex-shrink: 0; }
.template-drawer .schedule-template-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.template-drawer .schedule-template-search input:focus {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

/* ----- Template list (cards are rendered by schedule-board.js) ----- */
.template-drawer [data-global-template-list] > * {
    border-radius: 12px;
}

/* ----- New template ----- */
.template-drawer .schedule-form-section-heading { margin-bottom: 8px; }
.template-drawer .schedule-form-section-heading h3 {
    font-size: 16px;
    font-weight: 600;
    color: #172033;
}
.template-drawer .schedule-form-section-heading p {
    margin-top: 4px;
    font-size: 13px;
    color: #94a3b8;
}

/* rows: bold label on the left, field on the right, divider between rows */
.template-drawer .schedule-form-grid { display: block; }

.template-drawer .schedule-form-grid > .schedule-form-group {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f6;
}
.template-drawer .schedule-form-group label {
    margin: 0;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
}
.template-drawer .schedule-form-group input:not([type="color"]) {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.template-drawer .schedule-form-group input:focus {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.template-drawer .schedule-form-group input[type="color"] {
    width: 96px;
    height: 44px;
    padding: 4px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

/* Save template: pill button, no divider */
.template-drawer .schedule-form-grid > .schedule-form-group:has(> [data-save-new-template]) {
    display: block;
    padding: 20px 0 0;
    border-bottom: 0;
}
.template-drawer [data-save-new-template] {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
}

/* ----- Footer: only Close, left aligned ----- */
.template-drawer .schedule-work-drawer-footer {
    justify-content: flex-start;
    padding: 16px 24px;
}
.template-drawer .schedule-work-drawer-footer > div:empty { display: none; }
.template-drawer .schedule-work-drawer-footer-right { display: contents; }
.template-drawer .schedule-work-drawer-footer .btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 520px) {
    .template-drawer .schedule-form-grid > .schedule-form-group {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }
}

/* ========================================================================
   Shift card hover icons (Connecteam style)
   - "⋯" menu icon top-right, only while hovering the card
   - "+" (duplicate) in the folded bottom-right corner, only while hovering
======================================================================== */

/* top-right "⋯": hidden until the card is hovered */
.schedule-grid-shift-wrap .schedule-shift-card-menu {
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
}
.schedule-grid-shift-wrap:hover .schedule-shift-card-menu,
.schedule-grid-shift-wrap:focus-within .schedule-shift-card-menu {
    opacity: 1;
}
.schedule-grid-shift-wrap .schedule-shift-card-menu svg {
    width: 16px;
    height: 16px;
}

/* the duplicate button moves from the top-right to the bottom-right corner and shows a "+" */
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn {
    top: auto;
    right: 0;
    bottom: 0;
    z-index: 11;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--primary);
    font-size: 0;
}
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn svg {
    display: none;
}
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn::before {
    content: "+";
    display: block;
    margin: 0 1px 1px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--primary);
}
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn:hover::before {
    color: #1d55ce;
}

/* ----- Shift card menus: "⋯" actions + "+" add (floating, built by schedule-board.js) ----- */
.schedule-shift-card-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
    margin: -2px -2px -2px 0;
    border-radius: 6px;
    cursor: pointer;
}
.schedule-shift-card-menu:hover { background: rgba(255, 255, 255, .22); }

.schedule-card-menu {
    position: fixed;
    z-index: 10000;
    min-width: 240px;
    padding: 8px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.schedule-card-menu[hidden] { display: none; }

.schedule-card-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #203040;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.schedule-card-menu-item:hover,
.schedule-card-menu-item:focus-visible { background: #f1f5f9; outline: 0; }
.schedule-card-menu-item svg { flex-shrink: 0; color: #475569; }
.schedule-card-menu-item[data-card-action="delete"] { color: #b91c1c; }
.schedule-card-menu-item[data-card-action="delete"] svg { color: #dc2626; }

/* ----- Shift card: "+" colour and "⋯" position ----- */
.schedule-grid-shift-wrap {
    --shift-card-plus-color: #1e88f5;   /* change this one value to recolour the "+" */
}
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn,
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn::before {
    color: var(--shift-card-plus-color);
}
.schedule-grid-shift-wrap .schedule-shift-duplicate-btn:hover::before {
    color: #0b6fd6;
}

/* "⋯" pinned to the card's top-right corner (independent of the time text) */
.schedule-grid-shift-wrap .schedule-shift-card-menu {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 5;
    margin: 0;
    padding: 0 2px;
    line-height: 1;
}
.schedule-grid-shift-wrap .schedule-shift-card-menu svg {
    width: 18px;
    height: 18px;
}

/* ----- Keep the folded corner + hover state while the mouse is on the "+" or "⋯" too ----- */
.schedule-grid-shift-wrap:hover .schedule-grid-shift::after,
.schedule-grid-shift-wrap:focus-within .schedule-grid-shift::after {
    opacity: 1;
}

/* the card no longer lifts on hover (the lift moved the card away from its own "+" and "⋯") */
.schedule-grid-shift:hover {
    transform: none;
}
.schedule-grid-shift-wrap:hover .schedule-grid-shift {
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}

/* "⋯" stays visible while its menu is open for this card */
.schedule-grid-shift-wrap:hover .schedule-shift-card-menu,
.schedule-grid-shift-wrap:focus-within .schedule-shift-card-menu {
    opacity: 1;
}

/* ========================================================================
   Sidebar icons as coloured rounded tiles (Connecteam "Workspace" style)
   Each tile colour comes from --nav-tile, set per link below by its address.
======================================================================== */
.sidebar .menu-section--operations .nav-item {
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
}

.sidebar .menu-section--operations .nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--nav-tile, #64748b);
    color: #fff;
    transition: transform .15s ease;
}
.sidebar .menu-section--operations .nav-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
}
.sidebar .menu-section--operations .nav-item:hover .nav-icon { transform: scale(1.06); }

/* keep the tile readable on the solid-blue active row */
.sidebar .menu-section--operations .nav-item.active .nav-icon {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

/* tile colours by destination (edit the hex values to taste) */
.sidebar .menu-section--operations .nav-item[href*="/users"]     { --nav-tile: #8b5cf6; }
.sidebar .menu-section--operations .nav-item[href*="/roles"]     { --nav-tile: #ec4899; }
.sidebar .menu-section--operations .nav-item[href*="/zones"]     { --nav-tile: #14b8a6; }
.sidebar .menu-section--operations .nav-item[href*="/sites"]     { --nav-tile: #0ea5e9; }
.sidebar .menu-section--operations .nav-item[href*="/schedules"] { --nav-tile: #f26b3a; }
.sidebar .menu-section--operations .nav-item[href*="my-schedule"],
.sidebar .menu-section--operations .nav-item[href*="my_schedule"],
.sidebar .menu-section--operations .nav-item[href*="myschedule"] { --nav-tile: #f59e0b; }
.sidebar .menu-section--operations .nav-item[href*="time-clock"],
.sidebar .menu-section--operations .nav-item[href*="timeclock"],
.sidebar .menu-section--operations .nav-item[href*="time_clock"] { --nav-tile: #5b6cff; }
.sidebar .menu-section--operations .nav-item[href*="time-off"],
.sidebar .menu-section--operations .nav-item[href*="timeoff"],
.sidebar .menu-section--operations .nav-item[href*="time_off"]   { --nav-tile: #22c39a; }

/* collapsed sidebar: the tile is the whole item */
.sidebar.collapsed .menu-section--operations .nav-item { padding: 6px; }

/* ----- Sidebar tile colours by exact link (class comes from sidebar.php: nav-item--<url slug>) ----- */
.sidebar .menu-section--operations .nav-item.nav-item--users         { --nav-tile: #8b5cf6; }
.sidebar .menu-section--operations .nav-item.nav-item--roles         { --nav-tile: #ec4899; }
.sidebar .menu-section--operations .nav-item.nav-item--zones         { --nav-tile: #14b8a6; }
.sidebar .menu-section--operations .nav-item.nav-item--sites         { --nav-tile: #0ea5e9; }
.sidebar .menu-section--operations .nav-item.nav-item--schedules     { --nav-tile: #f26b3a; }
.sidebar .menu-section--operations .nav-item.nav-item--my-schedule   { --nav-tile: #f59e0b; }
.sidebar .menu-section--operations .nav-item.nav-item--timesheets    { --nav-tile: #5b6cff; }   /* Time Clock */
.sidebar .menu-section--operations .nav-item.nav-item--unavailability { --nav-tile: #22c39a; } /* Time Off   */

/* ========================================================================
   Operations menu: drag handle (left) + "⋮" menu (right), shown on hover
   Markup/JS live in sidebar.php (.nav-row wraps each Operations link)
======================================================================== */
.sidebar .nav-row {
    position: relative;
}
.sidebar .nav-row.is-hidden { display: none; }
.sidebar .nav-row.is-dragging { opacity: .45; }
.sidebar .nav-row .nav-item { padding-right: 36px; }

.sidebar .nav-row-handle {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 24px;
    transform: translateY(-50%);
    color: #94a3b8;
    cursor: grab;
    opacity: 0;
    transition: opacity .15s ease;
}
.sidebar .nav-row-handle svg { width: 12px; height: 16px; }
.sidebar .nav-row-handle:active { cursor: grabbing; }

.sidebar .nav-row-more {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .15s ease, background-color .15s ease;
}
.sidebar .nav-row-more svg { width: 16px; height: 16px; }
.sidebar .nav-row-more:hover,
.sidebar .nav-row-more[aria-expanded="true"] { background: rgba(15, 23, 42, .08); }

.sidebar .nav-row:hover .nav-row-handle,
.sidebar .nav-row:hover .nav-row-more,
.sidebar .nav-row:focus-within .nav-row-handle,
.sidebar .nav-row:focus-within .nav-row-more,
.sidebar .nav-row-more[aria-expanded="true"] {
    opacity: 1;
}

/* on the solid-blue active row */
.sidebar .nav-row:has(.nav-item.active) .nav-row-handle,
.sidebar .nav-row:has(.nav-item.active) .nav-row-more { color: #fff; }
.sidebar .nav-row:has(.nav-item.active) .nav-row-more:hover,
.sidebar .nav-row:has(.nav-item.active) .nav-row-more[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }

/* collapsed sidebar: icons only */
.sidebar.collapsed .nav-row-handle,
.sidebar.collapsed .nav-row-more { display: none; }
.sidebar.collapsed .nav-row .nav-item { padding-right: 6px; }

/* the floating menu (same look as the shift card menus) */
.nav-row-menu {
    position: fixed;
    z-index: 10000;
    min-width: 230px;
    padding: 8px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.nav-row-menu[hidden] { display: none; }

.nav-row-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #203040;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.nav-row-menu-item:hover:not(:disabled),
.nav-row-menu-item:focus-visible { background: #f1f5f9; outline: 0; }
.nav-row-menu-item svg { flex-shrink: 0; color: #475569; }
.nav-row-menu-item:disabled { opacity: .4; cursor: not-allowed; }

/* ----- Operations rows v2: handle moved into the sidebar gutter (no overlap), rename field, menu divider ----- */
.sidebar .nav-row-handle {
    left: -12px;
    color: #94a3b8;
}
/* the handle now sits on the white gutter, so it stays grey even on the active (blue) row */
.sidebar .nav-row:has(.nav-item.active) .nav-row-handle { color: #94a3b8; }

.sidebar .nav-row-rename {
    position: absolute;
    top: 50%;
    z-index: 3;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 13px;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    transform: translateY(-50%);
}
.sidebar .nav-row.is-editing .nav-row-more,
.sidebar .nav-row.is-editing .nav-row-handle { opacity: 0; pointer-events: none; }

.nav-row-menu-sep {
    height: 1px;
    margin: 6px 6px;
    background: #edf1f6;
}

/* ----- Operations rows v3: like Connecteam - the grip sits INSIDE the highlighted row and the
         icon + label slide right on hover to make room for it ----- */
.sidebar .nav-row .nav-item {
    transition: padding-left .15s ease, background-color .15s ease;
}

.sidebar .nav-row:hover .nav-item,
.sidebar .nav-row:focus-within .nav-item,
.sidebar .nav-row.is-dragging .nav-item {
    padding-left: 26px;
}

.sidebar .nav-row-handle {
    left: 8px;
    color: #94a3b8;
}

/* on the solid-blue active row the grip is white again (it is inside the row now) */
.sidebar .nav-row:has(.nav-item.active) .nav-row-handle {
    color: rgba(255, 255, 255, .85);
}

.sidebar.collapsed .nav-row:hover .nav-item,
.sidebar.collapsed .nav-row:focus-within .nav-item {
    padding-left: 6px;
}

/* ----- Operations heading: small "Reset" link (only when the menu was customised) ----- */
.sidebar .menu-section--operations .menu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
}
.sidebar .nav-section-restore {
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.sidebar .nav-section-restore:hover { background: var(--primary-soft); }
.sidebar .nav-section-restore[hidden] { display: none; }

/* ========================================================================
   Status-based shift colours  (new classes only)
   - .schedule-board-mark--blue        : header calendar icon is always the app blue
   - .schedule-board-status-colors     : on the board page; shift boxes take their colour from
                                         their status instead of the schedule / site / shift colour
   Change a colour by editing its variable below.
======================================================================== */
.schedule-board-mark.schedule-board-mark--blue {
    --schedule-color: var(--primary, #2563eb) !important;
}

.schedule-board-status-colors {
    --status-open: #d97706;       /* unfilled / open shift */
    --status-assigned: #2563eb;   /* assigned to a guard   */
    --status-confirmed: #16a34a;  /* guard confirmed       */
    --status-completed: #64748b;  /* finished              */
}

/* default: assigned blue (also used for any status not listed) */
.schedule-board-status-colors .schedule-grid-shift,
.schedule-board-status-colors .schedule-agenda-card { --shift-color: var(--status-assigned) !important; }
.schedule-board-status-colors .schedule-month-chip  { --chip-color: var(--status-assigned) !important; }
.schedule-board-status-colors .schedule-timeline-bar { --bar-color: var(--status-assigned) !important; }

/* open */
.schedule-board-status-colors .schedule-grid-shift.status-open,
.schedule-board-status-colors .schedule-agenda-card.status-open { --shift-color: var(--status-open) !important; }
.schedule-board-status-colors .schedule-month-chip.status-open  { --chip-color: var(--status-open) !important; }
.schedule-board-status-colors .schedule-timeline-bar.status-open { --bar-color: var(--status-open) !important; }

/* assigned */
.schedule-board-status-colors .schedule-grid-shift.status-assigned,
.schedule-board-status-colors .schedule-agenda-card.status-assigned { --shift-color: var(--status-assigned) !important; }
.schedule-board-status-colors .schedule-month-chip.status-assigned  { --chip-color: var(--status-assigned) !important; }
.schedule-board-status-colors .schedule-timeline-bar.status-assigned { --bar-color: var(--status-assigned) !important; }

/* confirmed */
.schedule-board-status-colors .schedule-grid-shift.status-confirmed,
.schedule-board-status-colors .schedule-agenda-card.status-confirmed { --shift-color: var(--status-confirmed) !important; }
.schedule-board-status-colors .schedule-month-chip.status-confirmed  { --chip-color: var(--status-confirmed) !important; }
.schedule-board-status-colors .schedule-timeline-bar.status-confirmed { --bar-color: var(--status-confirmed) !important; }

/* completed */
.schedule-board-status-colors .schedule-grid-shift.status-completed,
.schedule-board-status-colors .schedule-agenda-card.status-completed { --shift-color: var(--status-completed) !important; }
.schedule-board-status-colors .schedule-month-chip.status-completed  { --chip-color: var(--status-completed) !important; }
.schedule-board-status-colors .schedule-timeline-bar.status-completed { --bar-color: var(--status-completed) !important; }

/* cancelled keeps its existing grey style (it sets its own background) */

/* ========================================================================
   Shift drawer: Job row  ->  [Job] [picker][colour]
                                     [ selected job details, full width ]
   New class: .shift-job-row (on the existing .job-site group)
======================================================================== */
.schedule-shift-builder-drawer .schedule-form-group.job-site.shift-job-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
}

.schedule-shift-builder-drawer .shift-job-row > label {
    grid-column: 1;
    grid-row: 1;
}

.schedule-shift-builder-drawer .shift-job-row > .schedule-search-picker {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.schedule-shift-builder-drawer .shift-job-row > .schedule-color-control {
    grid-column: 3;
    grid-row: 1;
}

/* the selected job's details sit on their own line under the picker */
.schedule-shift-builder-drawer .shift-job-row > .schedule-selected-site-meta {
    grid-column: 2 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    padding: 12px 16px;
    gap: 12px;
    align-items: flex-start;
    border: 0;
    border-radius: 12px;
    background: #f3f6fa;
}

.schedule-shift-builder-drawer .shift-job-row .schedule-selected-site-meta .schedule-site-color-dot {
    margin-top: 5px;
}

.schedule-shift-builder-drawer .shift-job-row .schedule-selected-site-meta > div {
    min-width: 0;
}

.schedule-shift-builder-drawer .shift-job-row .schedule-selected-site-meta strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #203040;
}

.schedule-shift-builder-drawer .shift-job-row .schedule-selected-site-meta small {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: #64748b;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .schedule-shift-builder-drawer .schedule-form-group.job-site.shift-job-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .schedule-shift-builder-drawer .shift-job-row > label { grid-column: 1 / -1; }
    .schedule-shift-builder-drawer .shift-job-row > .schedule-search-picker { grid-column: 1; grid-row: 2; }
    .schedule-shift-builder-drawer .shift-job-row > .schedule-color-control { grid-column: 2; grid-row: 2; }
    .schedule-shift-builder-drawer .shift-job-row > .schedule-selected-site-meta { grid-column: 1 / -1; grid-row: 3; }
}

/* ----- Pencil in the selected-job box (new class: shift-job-edit) ----- */
.schedule-shift-builder-drawer .shift-job-row .shift-job-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: -4px -6px -4px auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.schedule-shift-builder-drawer .shift-job-row .shift-job-edit:hover {
    background: rgba(15, 23, 42, .07);
    color: var(--primary);
}

/* ----- "Unsaved changes" dialog (new classes: unsaved-modal*) ----- */
.unsaved-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .5);
}
.unsaved-modal[hidden] { display: none; }

.unsaved-modal-box {
    position: relative;
    width: min(600px, 100%);
    padding: 44px 40px 36px;
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
}

.unsaved-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.unsaved-modal-close:hover { background: #f1f5f9; }

.unsaved-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #fff4e5;
    color: #f59e0b;
}

.unsaved-modal-box h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    color: #172033;
}
.unsaved-modal-box p {
    margin: 0 auto 28px;
    max-width: 440px;
    font-size: 16px;
    line-height: 1.5;
    color: #203040;
}

.unsaved-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.unsaved-modal-actions button {
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.unsaved-modal-discard {
    border: 1px solid #f3c4c4;
    background: #fff;
    color: #dc2626;
}
.unsaved-modal-discard:hover { background: #fef2f2; border-color: #ea9a9a; }
.unsaved-modal-save {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}
.unsaved-modal-save:hover { background: #1d55ce; border-color: #1d55ce; }

@media (max-width: 520px) {
    .unsaved-modal-box { padding: 40px 20px 28px; }
    .unsaved-modal-actions button { flex: 1 1 100%; }
}

/* ========================================================================
   "Add field" menu — empty state (Connecteam style: illustration + "All
   additional fields were added" + Add / gear buttons)
   New classes only: .shift-add-field-added*
======================================================================== */
.shift-add-field-menu .shift-add-field-added {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 20px 18px;
    text-align: center;
}

.shift-add-field-added-art {
    display: inline-flex;
}

.shift-add-field-added p {
    margin: 0;
    color: #7b8799;
    font-size: 13px;
    font-weight: 500;
}

.shift-add-field-added-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shift-add-field-added-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--primary, #2563eb);
    border-radius: 999px;
    background: #fff;
    color: var(--primary, #2563eb);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.shift-add-field-added-add:hover { background: var(--primary-soft, #eff6ff); }

.shift-add-field-added-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #dfe5ed;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}
.shift-add-field-added-settings:hover { background: #f8fafc; color: var(--primary, #2563eb); }

/* ========================================================================
   Custom field rows added to the shift (via "Add field")
   New classes: .shift-custom-field, .shift-custom-field-remove, .shift-custom-field-yesno
======================================================================== */
.schedule-shift-builder-drawer .schedule-form-group.shift-custom-field {
    position: relative;
    padding-right: 34px;
}

.schedule-shift-builder-drawer .shift-custom-field-remove {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}
.schedule-shift-builder-drawer .shift-custom-field-remove:hover {
    background: #fef2f2;
    color: var(--danger, #dc2626);
}

.schedule-shift-builder-drawer .shift-custom-field-yesno.schedule-checkbox-row {
    margin-top: 2px;
}

/* ========================================================================
   "Create new field" modal
   New classes only: .create-field-modal*
======================================================================== */
.create-field-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .5);
}
.create-field-modal[hidden] { display: none; }

.create-field-modal-box {
    width: min(520px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
}

.create-field-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #edf1f6;
}
.create-field-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #172033;
}
.create-field-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.create-field-modal-close:hover { background: #f1f5f9; }

.create-field-modal-body {
    padding: 20px 22px 4px;
}
.create-field-modal-body p {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.create-field-modal-label {
    display: block;
    margin: 0 0 8px;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
}

.create-field-modal-select,
.create-field-modal-input {
    width: 100%;
    height: 44px;
    margin-bottom: 20px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.create-field-modal-select:focus,
.create-field-modal-input:focus {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.create-field-modal-input.has-error {
    border-color: var(--danger, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}

.create-field-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 22px 22px;
}
.create-field-modal-save {
    height: 42px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--primary, #2563eb);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.create-field-modal-save:hover { background: #1d55ce; }

/* ========================================================================
   "Add multiple shifts" drawer — table-style layout (Connecteam look)
   New classes only: .multiple-shift-drawer, .shift-fields-table, .multi-dates-*
   The underlying fields (ids/names), the date-row/template markup the JS
   clones, and every data-* hook are unchanged — this is CSS + a couple of
   purely additive wrapper classes, nothing renamed or removed.
======================================================================== */

/* wider drawer so the table has room before it needs to scroll */
.schedule-work-drawer.wide.multiple-shift-drawer {
    width: min(1180px, 94vw);
    right: -1400px;
}

/* ----- Shift details: one row, laid out like a table ----- */
.multiple-shift-drawer .shift-fields-table {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    background: #fff;
}

.multiple-shift-drawer .shift-fields-table .schedule-form-group {
    flex: 0 0 160px;
    min-width: 160px;
    margin: 0;
    padding: 10px 14px;
    border-right: 1px solid #eef2f7;
}
.multiple-shift-drawer .shift-fields-table .schedule-form-group.full {
    flex-basis: 220px;
    min-width: 220px;
}
.multiple-shift-drawer .shift-fields-table .schedule-form-group:last-of-type {
    border-right: 0;
}

.multiple-shift-drawer .shift-fields-table .schedule-form-group label {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f7;
    color: #7b8799;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.multiple-shift-drawer .shift-fields-table .schedule-form-group input,
.multiple-shift-drawer .shift-fields-table .schedule-form-group select,
.multiple-shift-drawer .shift-fields-table .schedule-form-group textarea {
    height: 32px;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
}
.multiple-shift-drawer .shift-fields-table .schedule-form-group input:focus,
.multiple-shift-drawer .shift-fields-table .schedule-form-group select:focus,
.multiple-shift-drawer .shift-fields-table .schedule-form-group textarea:focus {
    outline: none;
    box-shadow: none;
}
.multiple-shift-drawer .shift-fields-table .schedule-form-group textarea {
    height: auto;
    min-height: 32px;
    resize: vertical;
}

.multiple-shift-drawer .shift-fields-table .schedule-input-suffix {
    height: 32px;
    border: 0;
    border-radius: 0;
}
.multiple-shift-drawer .shift-fields-table .schedule-input-suffix span {
    padding: 0;
    background: transparent;
}

/* the search-select.js picker that replaces each <select> */
.multiple-shift-drawer .shift-fields-table .search-select-picker .schedule-search-picker-trigger {
    height: 32px;
    min-height: 32px;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
}

/* ----- Select dates: compact table (Date | remove) ----- */
.multiple-shift-drawer .multi-dates-table-head {
    display: flex;
    padding: 0 12px 6px;
    color: #7b8799;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.multiple-shift-drawer .multi-dates-table-head span:first-child {
    flex: 1;
}
.multiple-shift-drawer .multi-dates-table-head span:last-child {
    flex: 0 0 32px;
}

.multiple-shift-drawer .multi-dates-table {
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.multiple-shift-drawer .multi-dates-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
}
.multiple-shift-drawer .multi-dates-row + .multi-dates-row {
    border-top: 1px solid #eef2f7;
}

.multiple-shift-drawer .multi-dates-row input[type="date"] {
    flex: 1;
    height: 34px;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
}
.multiple-shift-drawer .multi-dates-row input[type="date"]:focus {
    outline: none;
}

.multiple-shift-drawer .multi-dates-row .schedule-date-remove {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
}
.multiple-shift-drawer .multi-dates-row .schedule-date-remove:hover {
    background: #fef2f2;
    color: var(--danger, #dc2626);
}

@media (max-width: 760px) {
    .schedule-work-drawer.wide.multiple-shift-drawer {
        width: 100%;
        right: -100%;
    }
}

/* Fix: .schedule-work-drawer.wide.multiple-shift-drawer (3 classes) was beating the
   base .schedule-work-drawer.open rule (2 classes) on specificity, so the drawer never
   slid on screen when opened — only the dark backdrop showed. This restores it. */
.schedule-work-drawer.wide.multiple-shift-drawer.open {
    right: 0;
}

/* ========================================================================
   "Add multiple shifts": full-screen sheet that slides down from the top
   (Connecteam style), replacing the right-side-drawer look for this one
   drawer only. Supersedes the width/right rules added just above.
   New classes only: .multiple-shift-drawer (already on the <aside>)
======================================================================== */
.schedule-work-drawer.wide.multiple-shift-drawer {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    transform: translateY(-100%);
    transition: transform .22s ease;
}

.schedule-work-drawer.wide.multiple-shift-drawer.open {
    right: 0;
    transform: translateY(0);
}

/* Header: a grey bar with a centered "Close" pill, and the title on its own
   line underneath — the header's existing markup (title block + close
   button) is unchanged, only reflowed and relabelled with CSS. */
.multiple-shift-drawer .schedule-work-drawer-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #eef1f5;
    border-bottom: 1px solid #e2e7ee;
}

.multiple-shift-drawer .schedule-work-drawer-header > div:first-child {
    order: 2;
    text-align: center;
}
.multiple-shift-drawer .schedule-drawer-eyebrow {
    display: none;
}
.multiple-shift-drawer .schedule-work-drawer-header h2 {
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
}

.multiple-shift-drawer .schedule-work-drawer-close {
    order: 1;
    width: auto;
    height: 34px;
    padding: 0 20px;
    border-radius: 999px;
    background: #6b7684;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.multiple-shift-drawer .schedule-work-drawer-close:hover {
    background: #5a6472;
}
.multiple-shift-drawer .schedule-work-drawer-close svg {
    display: none;
}
.multiple-shift-drawer .schedule-work-drawer-close::after {
    content: "Close";
}

@media (max-width: 760px) {
    .schedule-work-drawer.wide.multiple-shift-drawer {
        width: 100%;
        right: 0;
    }
}

/* ========================================================================
   "Add multiple shifts" — per-row sheet (Connecteam look)
   Each row is its own shift: Date | Start | End | Timezone | Breaks | Shift
   title | Job | Users | Address | Note | Shift tags | Claim options | Tasks |
   copy / delete. Overrides the earlier multiple-shift rules.
======================================================================== */
.schedule-work-drawer.wide.multiple-shift-drawer {
    top: 64px;
    height: calc(100vh - 64px);
    border-radius: 18px 18px 0 0;
    transform: translateY(calc(-100% - 70px));
}
.schedule-work-drawer.wide.multiple-shift-drawer.open {
    transform: translateY(0);
}
.multiple-shift-drawer .schedule-work-drawer-header {
    position: static;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #e8ecf0;
    border-radius: 18px 18px 0 0;
}
.multiple-shift-drawer .schedule-work-drawer-close {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    padding: 0 20px;
    background: #5b6470;
}
.multiple-shift-drawer .schedule-work-drawer-header h2 {
    font-size: 14px;
    color: #64748b;
}
.multiple-shift-drawer .schedule-shift-form {
    padding: 0 30px;
}

.multi-shifts-toolbar {
    display: flex;
    align-items: center;
    padding: 30px 0 20px;
}
.multi-shifts-count {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4b5563;
    font-size: 14px;
}
.multi-shifts-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef1f4;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.multi-shifts-sheet {
    min-height: 380px;
    overflow-x: auto;
    padding-bottom: 12px;
}
.multi-shifts-table {
    min-width: 2070px;
}

.multi-shift-head,
.multi-shift-row {
    display: grid;
    grid-template-columns: 200px 90px 90px 130px 160px 240px 200px 170px 170px 140px 110px 190px 70px;
    column-gap: 12px;
    align-items: center;
    padding: 0 8px;
}
.multi-shift-head {
    height: 48px;
    border-radius: 10px;
    background: #f6f7f7;
    color: #374151;
    font-size: 14px;
}
.multi-shift-row {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf0f3;
}
.multi-shift-row .multi-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.multi-shift-row input[type="date"],
.multi-shift-row input[type="time"],
.multi-shift-row input[type="number"],
.multi-shift-row input[type="text"],
.multi-shift-row select,
.multi-users summary {
    width: 100%;
    height: 36px;
    border: 1px solid #dbdee0;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.multi-shift-row input:focus,
.multi-shift-row select:focus {
    outline: none;
    border-color: #3b9cf5;
}
.multi-shift-row input::placeholder {
    color: #9aa3ad;
}

.multi-add-break {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #3b9cf5;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.multi-break-input {
    display: flex;
    align-items: center;
    gap: 6px;
}
.multi-break-input[hidden] { display: none; }
.multi-break-input em {
    color: #6b7280;
    font-size: 13px;
    font-style: normal;
}

.multi-color {
    flex: 0 0 52px;
    width: 52px;
    height: 36px;
    border: 1px solid #dbdee0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
}
.multi-color input {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.multi-color input::-webkit-color-swatch-wrapper { padding: 0; }
.multi-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }

.multi-users {
    position: relative;
    width: 100%;
}
.multi-users summary {
    display: flex;
    align-items: center;
    color: #9aa3ad;
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.multi-users summary::-webkit-details-marker { display: none; }
.multi-users[open] summary { border-color: #3b9cf5; }
.multi-users-menu {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 30;
    min-width: 220px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.multi-users-menu label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.multi-users-menu label:hover { background: #f6f7f7; }
.multi-users-menu em { padding: 8px 10px; color: #9aa3ad; font-size: 13px; font-style: normal; }

.multi-cell-claim input[type="number"] {
    width: 56px;
    padding: 0 8px;
    text-align: center;
}
.multi-cell-claim input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.multi-cell-actions { justify-content: flex-end; }
.multi-icon-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.multi-icon-btn:hover { background: #f6f7f7; color: #1f2937; }

.multi-add-shift {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #dbdee0;
    border-radius: 999px;
    background: #fff;
    color: #3b9cf5;
    font-size: 14px;
    cursor: pointer;
    position: sticky;
    left: 0;
}
.multi-add-shift:hover { background: #f6f7f7; }

.multiple-shift-drawer .schedule-work-drawer-footer {
    margin: 0 -30px;
    padding: 14px 30px;
}
.multiple-shift-drawer .schedule-work-drawer-footer .btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
}
.multiple-shift-drawer .schedule-work-drawer-footer .btn-outline {
    color: #3b9cf5;
    border-color: #dbdee0;
    background: #fff;
}
.multiple-shift-drawer .schedule-work-drawer-footer .btn-outline:hover { background: #f6f7f7; }
.multiple-shift-drawer .schedule-work-drawer-footer .btn-primary {
    background: #3b9cf5;
    border-color: #3b9cf5;
    color: #fff;
}

/* multi-shift sheet: round colour picker (dot + chevron), like the reference */
.multi-color {
    gap: 8px;
    flex-basis: 68px;
    width: 68px;
    border-radius: 999px;
    padding: 0 12px;
    box-sizing: border-box;
}
.multi-color input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
}
.multi-color::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;
    transform: rotate(45deg);
}

/* multi-shift sheet: Users picker looks like the other selects (text + chevron) */
.multi-users summary {
    justify-content: space-between;
    gap: 8px;
    padding-right: 12px;
}
.multi-users summary::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;
    transform: rotate(45deg);
}
.multi-users[open] summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

/* multi-shift sheet: Users dropdown (search, select all, avatar rows) */
.multi-users-menu {
    width: 300px;
    max-height: none;
    padding: 10px;
    overflow: visible;
    border-radius: 16px;
}
.multi-users-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #3b9cf5;
    border-radius: 10px;
    color: #6b7280;
}
.multi-users-search input[type="text"] {
    flex: 1;
    width: auto;
    height: 100%;
    border: 0;
    padding: 0;
    outline: none;
    font-size: 14px;
    background: transparent;
}
.multi-users-meta {
    display: flex;
    justify-content: space-between;
    padding: 12px 4px 6px;
    color: #6b7280;
    font-size: 12px;
}
.multi-users-list {
    max-height: 220px;
    overflow-y: auto;
}
.multi-users-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.multi-users-option[hidden] { display: none; }
.multi-users-option:hover { background: #f6f7f7; }
.multi-users-all { background: #f3f5f6; margin-bottom: 4px; }
.multi-users-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
}
.multi-users-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b9cf5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* multi-shift sheet: thin rounded grey horizontal scrollbar */
.multi-shifts-sheet {
    scrollbar-width: thin;
    scrollbar-color: #c0c2c7 transparent;
}
.multi-shifts-sheet::-webkit-scrollbar {
    height: 6px;
}
.multi-shifts-sheet::-webkit-scrollbar-track {
    background: transparent;
}
.multi-shifts-sheet::-webkit-scrollbar-thumb {
    background: #c0c2c7;
    border-radius: 999px;
}
.multi-shifts-sheet::-webkit-scrollbar-thumb:hover {
    background: #a9acb2;
}

/* multi-shift sheet: fixed table head + vertical scroll for the rows */
.multi-shifts-sheet {
    min-height: 260px;
    max-height: calc(100vh - 340px);
    overflow: auto;
    padding-bottom: 12px;
}
.multi-shift-head {
    position: sticky;
    top: 0;
    z-index: 5;
}
.multi-shifts-sheet::-webkit-scrollbar {
    width: 6px;
}

/* multi-shift sheet: slides down when closed (and up from the bottom when opened) */
.schedule-work-drawer.wide.multiple-shift-drawer {
    transform: translateY(calc(100% + 70px));
}
.schedule-work-drawer.wide.multiple-shift-drawer.open {
    transform: translateY(0);
}

/* multi-shift sheet: 1.5s slide */
.schedule-work-drawer.wide.multiple-shift-drawer {
    transition: transform 1.5s ease;
}

/* multi-shift sheet: search box at the right of the toolbar */
.multi-shifts-toolbar {
    justify-content: space-between;
}
.multi-shifts-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 250px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #dbdee0;
    border-radius: 12px;
    background: #fff;
    color: #6b7280;
    box-sizing: border-box;
}
.multi-shifts-search:focus-within { border-color: #3b9cf5; }
.multi-shifts-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    outline: none;
    background: transparent;
    color: #1f2937;
    font-size: 14px;
    font-family: inherit;
}
.multi-shifts-search input::placeholder { color: #6b7280; }
.multi-shift-row[hidden] { display: none; }

/* Time off page: extras rendered inside the existing top bar */
.topbar-page-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    color: #3b9cf5;
}
.topbar-permissions {
    color: #1f2937;
    font-size: 14px;
}
.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b9cf5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.topbar-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #3b9cf5;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.topbar-add-btn:hover { background: #2b8ce6; }

/* ========================================================================
   Time off page: "Add time off" opens as a right-side drawer (slides in from
   the right). Look only — the form, field names and JS are unchanged.
======================================================================== */
#addTimeOffModal.modal-backdrop {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
}
#addTimeOffModal .confirm-modal {
    width: 520px;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    border-radius: 18px 0 0 18px;
    animation: toDrawerIn .3s ease;
}
@keyframes toDrawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

#addTimeOffModal .confirm-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    border-bottom: 1px solid #e8ecf0;
}
#addTimeOffModal .confirm-modal-header h3 {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
    font-weight: 400;
}
#addTimeOffModal .to-drawer-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#addTimeOffModal .to-drawer-close:hover { background: #f6f7f7; }

#addTimeOffModal .confirm-modal-body {
    display: block !important;
    padding: 12px 28px 24px;
}
#addTimeOffModal .confirm-modal-body > .schedule-form-group {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 22px 0;
    border-bottom: 1px solid #e8ecf0;
}
#addTimeOffModal .confirm-modal-body > .schedule-form-group > label:not(.checkbox-label) {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
}
#addTimeOffModal .confirm-modal-body .modal-field {
    min-height: 42px;
    border: 1px solid #dbdee0;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    color: #1f2937;
    box-sizing: border-box;
}
#addTimeOffModal .confirm-modal-body .modal-field:focus {
    border-color: #3b9cf5;
    box-shadow: none;
}
#addTimeOffModal .confirm-modal-body > .schedule-form-group small,
#addTimeOffModal .confirm-modal-body > .schedule-form-group .checkbox-label {
    grid-column: 1 / -1;
}

/* note: full-width box, no side label */
#addTimeOffModal .confirm-modal-body > .schedule-form-group:has(#toNotes) {
    display: block;
    padding: 24px 0 0;
    border-bottom: 0;
}
#addTimeOffModal label[for="toNotes"] { display: none; }
#addTimeOffModal textarea.modal-field {
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

/* attachments: full-width "add files" button */
#addTimeOffModal .confirm-modal-body > .schedule-form-group:has(#toAttachments) {
    display: block;
    padding: 20px 0 0;
    border-bottom: 0;
}
#addTimeOffModal label[for="toAttachments"] { display: none; }
#addTimeOffModal input[type="file"].modal-field {
    min-height: 42px;
    padding: 5px;
    color: #6b7280;
    font-size: 13px;
}
#addTimeOffModal input[type="file"]::file-selector-button {
    height: 30px;
    margin-right: 10px;
    padding: 0 14px;
    border: 1px solid #dbdee0;
    border-radius: 999px;
    background: #fff;
    color: #3b9cf5;
    font-size: 13px;
    cursor: pointer;
}

#addTimeOffModal .confirm-modal-footer {
    justify-content: flex-start;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-top: 1px solid #e8ecf0;
}
#addTimeOffModal .confirm-modal-footer .btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 14px;
}
#addTimeOffModal .confirm-modal-footer .btn-primary {
    background: #3b9cf5;
    border-color: #3b9cf5;
    color: #fff;
}
#addTimeOffModal .confirm-modal-footer .btn-outline {
    border: 0;
    background: transparent;
    color: #4b5563;
}

/* "Add time off" drawer: smooth slide + fade on both open and close.
   The backdrop stays rendered (hidden) so CSS can animate the close too. */
#addTimeOffModal.modal-backdrop {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .35s ease, visibility 0s linear .35s;
}
#addTimeOffModal.modal-backdrop.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s;
}
#addTimeOffModal .confirm-modal {
    animation: none;
    transform: translateX(100%);
    box-shadow: -18px 0 48px rgba(15, 23, 42, .18);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
#addTimeOffModal.show .confirm-modal {
    transform: translateX(0);
}

/* softer fields and controls */
#addTimeOffModal .confirm-modal-body .modal-field,
#addTimeOffModal .confirm-modal-footer .btn,
#addTimeOffModal .to-drawer-close {
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
#addTimeOffModal .confirm-modal-body .modal-field:hover {
    border-color: #c4c9cf;
}
#addTimeOffModal .confirm-modal-body .modal-field:focus {
    border-color: #3b9cf5;
    box-shadow: 0 0 0 3px rgba(59, 156, 245, .12);
}
#addTimeOffModal .confirm-modal-footer .btn-primary:hover {
    background: #2b8ce6;
    border-color: #2b8ce6;
    box-shadow: 0 4px 12px rgba(59, 156, 245, .3);
}
#addTimeOffModal .confirm-modal-footer .btn-outline:hover {
    color: #1f2937;
    background: #f3f4f6;
}
@media (prefers-reduced-motion: reduce) {
    #addTimeOffModal.modal-backdrop,
    #addTimeOffModal .confirm-modal { transition-duration: .01s; }
}

/* ========================================================================
   Timesheets — "Today" tab only (Connecteam-style polish)
   New classes only: .ts-today-*, .ts-summary-item--highlight
   Everything else on this page (Timesheets tab, export table, tabs) and
   every other page using .custom-table / .ts-summary-strip is untouched.
======================================================================== */

/* summary strip: Connecteam's equation row(s), plus our real "Clocked in now" stat */
.ts-today-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 16px;
    background: #fff;
}

.ts-summary-eq {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.ts-summary-eq-item {
    display: flex;
    flex-direction: column;
}
.ts-summary-eq-item strong {
    font-size: 13px;
    font-weight: 700;
    color: #203040;
    font-variant-numeric: tabular-nums;
}
.ts-summary-eq-item span {
    margin-top: 1px;
    color: #8b939c;
    font-size: 12px;
}
.ts-summary-eq-op {
    align-self: center;
    color: #94a3b8;
    font-size: 13px;
}

.ts-summary-eq-secondary {
    padding-left: 18px;
    border-left: 1px solid #eef2f7;
}

@media (max-width: 900px) {
    .ts-summary-eq-secondary {
        padding-left: 0;
        border-left: 0;
    }
}

.ts-summary-item.ts-summary-item--highlight {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
}

.ts-summary-item--highlight .ts-summary-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--primary);
}

.ts-summary-item--highlight .ts-summary-item-text {
    display: flex;
    flex-direction: column;
}
.ts-summary-item--highlight strong {
    font-size: 20px;
    font-weight: 700;
    color: #172033;
}
.ts-summary-item--highlight span {
    font-size: 12px;
    color: #64748b;
    margin-top: 1px;
}

/* table: rounder card, avatar + live dot in the Guard column */
.ts-today-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ts-today-table-wrap .ts-today-table {
    border: 0;
    border-radius: 0;
}

.ts-today-table tbody tr {
    cursor: pointer;
}

.ts-today-guard {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #172033;
}

.ts-user-avatar.ts-today-avatar {
    position: relative;
    width: 30px;
    height: 30px;
    font-size: 12px;
    font-weight: 700;
}

.ts-today-avatar-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
}

/* ========================================================================
   Timesheets — "Today" tab, full Connecteam-style chrome
   New classes only: .ts-today-*
======================================================================== */

/* module-chrome row: Permissions avatar + disabled Settings/More */
.ts-today-chrome {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}
.ts-today-chrome-label {
    color: #64748b;
    font-size: 13px;
}
.ts-user-avatar.ts-today-chrome-avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
}
.ts-today-chrome-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: .6;
    cursor: not-allowed;
}

/* toolbar: search + filter + static date pill + Requests */
.ts-today-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.ts-today-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ts-today-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #94a3b8;
    min-width: 220px;
}
.ts-today-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
}

.ts-today-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
.ts-today-filter:hover {
    background: #f8fafc;
}

.ts-today-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #172033;
    font-size: 13.5px;
    font-weight: 500;
}
.ts-today-date-pill button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: not-allowed;
}

.ts-today-requests {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px 0 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.ts-today-requests:hover {
    background: #ffedd5;
}
.ts-today-requests-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* "Add more users" */
.ts-today-add-users {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--primary);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.ts-today-add-users:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .ts-today-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .ts-today-toolbar-right {
        display: flex;
        justify-content: flex-end;
    }
}

/* ========================================================================
   Timesheets — "Today" tab, remaining chrome: checkboxes, pin icons,
   sticky Guard column, per-row lock/chat, columns-selector button.
   New classes only: .ts-today-col-*, .ts-today-pin, .ts-today-row-actions,
   .ts-today-columns-btn — the shared .icon-action class is reused as-is.
======================================================================== */

.ts-today-col-check {
    width: 38px;
    text-align: center;
}
.ts-today-col-check input,
.ts-today-col-check td input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}

.ts-today-col-pin {
    width: 26px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ts-today-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Guard column stays visible while the wide table scrolls (also a real usability win, not just decoration) */
.ts-today-table-wrap {
    overflow-x: auto;
}
.ts-today-table .ts-today-col-check,
.ts-today-table .ts-today-col-pin,
.ts-today-table .ts-today-col-name {
    position: sticky;
    background: #fff;
    z-index: 2;
}
.ts-today-table .ts-today-col-check { left: 0; }
.ts-today-table .ts-today-col-pin { left: 38px; }
.ts-today-table .ts-today-col-name { left: 0; }
.ts-today-table thead .ts-today-col-check,
.ts-today-table thead .ts-today-col-pin,
.ts-today-table thead .ts-today-col-name {
    z-index: 3;
    background: #f6f7f7;
}
.ts-today-table tbody tr:hover .ts-today-col-check,
.ts-today-table tbody tr:hover .ts-today-col-pin,
.ts-today-table tbody tr:hover .ts-today-col-name {
    background: #f8fafc;
}

.ts-today-col-columns {
    text-align: right;
}
.ts-today-columns-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: #64748b;
    cursor: not-allowed;
    opacity: .7;
}

.ts-today-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}
.ts-today-row-actions .icon-action {
    opacity: .55;
    cursor: not-allowed;
}

/* ----- Today tab, follow-up polish: sort-arrow header, seam on the frozen columns ----- */
.ts-today-table th.ts-today-col-sort {
    display: table-cell;
}
.ts-today-table .ts-today-col-sort svg {
    vertical-align: middle;
    margin-left: 4px;
    color: #94a3b8;
}

.ts-today-table .ts-today-col-name {
    box-shadow: 1px 0 0 #eef2f7;
}

/* ========================================================================
   Timesheets — page icon + Permissions/Settings/More/badge, sitting in the
   REAL shared topbar (topbar.php's own $topbarIcon / $topbarActions hooks —
   that file is not edited). Everything here is scoped to /timesheets via
   the data-current-path attribute master.php already sets on <body>, so no
   other page that uses topbar.php is affected. The title itself is still
   topbar.php's own <h1>$pageTitle</h1> ("Timesheets", unchanged text) —
   only its icon and the row of pills next to the bell/avatar are ours.
======================================================================== */
body[data-current-path="/timesheets"] .topbar-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.ts-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ts-topbar-label {
    color: #172033;
    font-size: 14px;
}
/* Matches the 36px pills already used in the Today-tab toolbar (.ts-today-search /
   .ts-today-date-pill / .ts-today-requests) so both rows read at the same scale. */
.ts-user-avatar.ts-topbar-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
    background: var(--primary);
    color: #fff;
}

.ts-topbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-size: 13.5px;
    font-weight: 500;
    opacity: .75;
    cursor: not-allowed;
}
/* Pills that ARE wired to a real action (e.g. Settings) opt back into a normal
   pointer + full opacity, without touching the inert default every other
   topbar pill still relies on. */
.ts-topbar-pill.ts-topbar-pill-active {
    opacity: 1;
    cursor: pointer;
}
.ts-topbar-pill.ts-topbar-pill-active:hover {
    background: #f8fafc;
    border-color: var(--border-strong);
}

/* Real link (View requests / pending count), styled as Connecteam's orange "Pending requests" pill */
.ts-topbar-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 13px 0 5px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.ts-topbar-pending:hover {
    background: #ffedd5;
}
.ts-topbar-pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Real button (opens the Add Timesheet drawer), styled as Connecteam's filled "+ Add time off" */
.ts-topbar-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ts-topbar-primary:hover {
    background: #1d55ce;
}

/* Chevron after the title removed: the correct reference (Connecteam's "Time off" page)
   doesn't have one next to its title, only next to "Time Clock" on a different page. */

/* Restored: the "2 / 10" style badge next to Settings/More, matching the reference */
.ts-topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #c9ede0;
    border-radius: 999px;
    background: #fff;
    color: #0f9d78;
    font-size: 13.5px;
    font-weight: 600;
}

/* ========================================================================
   Timesheets only: match Connecteam's real header bar height (measured on
   their own site via devtools: ~74-78px, vs. this app's default 58px
   .topbar). Scoped to /timesheets via data-current-path, same as the
   title/chevron rules above — topbar.php's own min-height rule, and every
   other page using it, are untouched.
======================================================================== */
body[data-current-path="/timesheets"] .topbar {
    min-height: 76px;
    padding: 14px 18px;
}
body[data-current-path="/timesheets"] .topbar h1 {
    font-size: 28px;
}

/* Scale the header pills/avatar/badge up to fill more of that taller bar */
.ts-user-avatar.ts-topbar-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}
.ts-topbar-pill,
.ts-topbar-badge {
    height: 40px;
}
.ts-topbar-label {
    font-size: 15px;
}

/* Unify the Today-tab toolbar row (search/filter/date/requests) with the header
   pills above it, both at 40px, so the whole page reads at one consistent scale. */
.ts-today-search,
.ts-today-filter,
.ts-today-date-pill,
.ts-today-requests {
    height: 40px;
}

/* the real "Clocked in now" stat sits after the equation rows, separated the same way */
.ts-today-summary .ts-summary-item--highlight {
    margin-left: auto;
    padding-left: 18px;
    border-left: 1px solid #eef2f7;
}
@media (max-width: 900px) {
    .ts-today-summary .ts-summary-item--highlight {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* Site, folded into the Schedule cell as a subtext line */
.ts-today-site {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
}

/* ========================================================================
   Timesheets — Today tab: compact rows + map promo + Activity card
   New classes only: .ts-today-compact, .ts-today-map*, .ts-today-activity*
   ======================================================================== */
.ts-today-table.ts-today-compact th,
.ts-today-table.ts-today-compact td {
    white-space: nowrap;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
}
.ts-today-table.ts-today-compact td.ts-today-col-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-today-compact .ts-today-site {
    display: inline;
    margin: 0 0 0 6px;
}

.ts-today-map {
    position: relative;
    margin-top: 28px;
    padding: 56px 20px;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: linear-gradient(120deg, #6fd3ea 0%, #a9e0ee 45%, #e6ebef 70%, #9fdbe9 100%);
}
.ts-today-map-card {
    width: 100%;
    max-width: 640px;
    padding: 16px 16px 24px;
    background: #fff;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .12);
}
.ts-today-map-art {
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}
.ts-today-map-card h3 {
    margin: 16px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #172033;
}
.ts-today-map-card p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #334155;
}
.ts-today-map-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #2f80ed;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.ts-today-map-btn:hover {
    background: #1f6fdc;
}

.ts-today-activity {
    margin-top: 24px;
    padding: 20px;
    min-height: 220px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
}
.ts-today-activity-title {
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
    font-size: 15px;
    font-weight: 700;
    color: #172033;
}

/* Today-tab toolbar, matched to Connecteam: squarer search/date boxes, blue lines filter circle */
.ts-today-search.ts-today-search-cx {
    height: 40px;
    min-width: 300px;
    padding: 0 14px;
    gap: 10px;
    border-radius: 10px;
    color: #6b7280;
}
.ts-today-search-cx input {
    font-size: 15px;
}
.ts-today-search-cx input::placeholder {
    color: #9ca3af;
}
.ts-today-filter.ts-today-filter-cx {
    width: 48px;
    height: 40px;
    border-radius: 999px;
    color: #2f80ed;
}
.ts-today-date-pill.ts-today-date-pill-cx {
    height: 40px;
    min-width: 200px;
    padding: 0 14px;
    justify-content: space-between;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
}
.ts-today-date-pill-cx button {
    color: #6b7280;
}

/* Today tab: right-hand columns button + lock/chat actions stay pinned while scrolling sideways */
.ts-today-table .ts-today-col-columns,
.ts-today-table td.ts-today-row-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    display: table-cell;
    min-width: 88px;
    text-align: right;
    white-space: nowrap;
    background: #fff;
    box-shadow: -1px 0 0 #eef2f7;
}
.ts-today-table thead .ts-today-col-columns {
    z-index: 3;
    background: #f6f7f7;
}
.ts-today-table tbody tr:hover td.ts-today-row-actions {
    background: #f8fafc;
}
.ts-today-table td.ts-today-row-actions .icon-action {
    display: inline-flex;
    vertical-align: middle;
}

/* Today tab: summary row sits directly on the page (no card), like Connecteam; Clock In arrow stays inline */
.ts-today-summary.ts-today-summary-flat {
    padding: 4px 2px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.ts-today-table.ts-today-compact .ts-today-col-sort svg {
    display: inline-block;
}

/* "Add more users" as Connecteam's outlined pill button: no leading icon, chevron kept */
.ts-today-add-users.ts-today-add-users-cx {
    margin-top: 24px;
    padding: 10px 16px;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    font-weight: 400;
}
.ts-today-add-users-cx > svg:first-child {
    display: none;
}
.ts-today-add-users.ts-today-add-users-cx:hover {
    background: #f8fafc;
    text-decoration: none;
}

/* ========================================================================
   Today tab — typography / radius / spacing pass to match Connecteam
   ======================================================================== */
/* summary row: light, small, regular-weight values */
.ts-today-summary-flat .ts-summary-eq-item strong {
    font-size: 13px;
    font-weight: 400;
    color: #5b6472;
}
.ts-today-summary-flat .ts-summary-eq-item span {
    font-size: 13px;
    color: #7b8490;
}
.ts-today-summary-flat .ts-summary-eq-op {
    font-size: 14px;
    color: #9aa3ae;
}
.ts-summary-caret {
    font-style: normal;
    font-size: 10px;
    margin-left: 2px;
}
.ts-today-summary-flat .ts-summary-eq {
    gap: 14px;
}
.ts-today-summary-flat .ts-summary-eq-secondary {
    gap: 22px;
    padding-left: 22px;
}

/* table: no outer frame, soft grey header with rounded ends, hairline row dividers */
.ts-today-table-wrap.ts-today-table-wrap {
    border: 0;
    border-radius: 0;
}
.ts-today-table.ts-today-compact {
    color: #2b3440;
}
.ts-today-table.ts-today-compact thead th {
    height: 60px;
    background: #f4f5f6;
    color: #2b3440;
    font-size: 15px;
    font-weight: 400;
}
.ts-today-table.ts-today-compact thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.ts-today-table.ts-today-compact thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.ts-today-table.ts-today-compact tbody td {
    height: 51px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 15px;
    border-bottom: 1px solid #eceff2;
}
.ts-today-compact .ts-user-avatar.ts-today-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}
.ts-today-compact .ts-today-guard {
    font-weight: 400;
    color: #2b3440;
}
.ts-today-compact .ts-today-site {
    font-size: 12px;
    color: #9aa3ae;
}

/* cards: same corner radius as Connecteam's panels */
.ts-today-activity {
    border-radius: 16px;
}
.ts-today-requests.ts-today-requests {
    border-radius: 999px;
    box-shadow: 0 0 0 1px #fde7c7 inset;
}

/* Pin icons in the Today header: solid, tilted push-pin like Connecteam's */
.ts-today-pin .ts-today-pin-fill {
    transform: rotate(45deg);
    color: #6b7280;
}
.ts-today-table thead .ts-today-pin {
    opacity: 1;
    color: #6b7280;
}

/* ========================================================================
   Timesheets tab — Connecteam look (font sizes, radii, spacing)
   New classes only: .ts-tsx-*  (all data-* hooks / JS untouched)
   ======================================================================== */
.ts-tsx-toolbar {
    margin-bottom: 14px;
}
.ts-tsx-toolbar .ts-toolbar-left,
.ts-tsx-toolbar .ts-toolbar-right {
    gap: 10px;
}
.ts-tsx-toolbar .ts-toolbar-left {
    flex-wrap: wrap;
}

/* guard picker, status select and date range: 40px pill-rect controls */
.ts-tsx-picker.timesheets-filter-picker {
    width: 300px;
}
.ts-tsx-picker.timesheets-filter-picker .schedule-search-picker-trigger,
.ts-tsx-status.filter-select,
.ts-tsx-range .date-range-trigger {
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #6b7280;
    font-size: 15px;
    font-weight: 400;
}
.ts-tsx-status.filter-select {
    min-width: 170px;
}
.ts-tsx-range .date-range-picker.has-value .date-range-trigger,
.ts-tsx-range .date-range-trigger {
    border-radius: 10px;
    min-width: 200px;
    justify-content: center;
    color: #172033;
}

/* right side: Requests pill, Export + Add outlined pills */
.ts-tsx-requests.ts-today-requests {
    height: 40px;
    box-shadow: 0 0 0 1px #fde7c7 inset;
}
.ts-tsx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #2f80ed;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}
.ts-tsx-pill:hover {
    background: #f8fafc;
}
.ts-tsx-pill.ts-tsx-pill-primary {
    background: #2f80ed;
    border-color: #2f80ed;
    color: #fff;
    font-weight: 600;
}
.ts-tsx-pill.ts-tsx-pill-primary:hover {
    background: #1f6fdc;
}

/* summary strip: plain, no card, small light figures */
.ts-summary-strip.ts-tsx-summary {
    gap: 26px;
    padding: 4px 2px 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.ts-tsx-summary .ts-summary-item strong {
    font-size: 13px;
    font-weight: 400;
    color: #5b6472;
}
.ts-tsx-summary .ts-summary-item span {
    font-size: 13px;
    color: #7b8490;
}

/* grid: unframed, soft grey rounded header, 15px text, hairline row dividers */
.ts-grid-wrap.ts-tsx-grid-wrap {
    border: 0;
    border-radius: 0;
}
.ts-tsx-grid {
    font-size: 15px;
    color: #2b3440;
}
.ts-tsx-grid thead th {
    height: 60px;
    background: #f4f5f6;
    color: #2b3440;
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.ts-tsx-grid thead th small {
    display: inline;
    margin-left: 4px;
    font-size: 15px;
    color: #2b3440;
}
.ts-tsx-grid thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.ts-tsx-grid thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.ts-tsx-grid tbody td {
    height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eceff2;
}
.ts-tsx-grid .ts-grid-user-col {
    min-width: 230px;
    box-shadow: 1px 0 0 #eef2f7;
}
.ts-tsx-grid thead .ts-grid-user-col {
    background: #f4f5f6;
}
.ts-tsx-grid tbody .ts-user-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

/* ---- Timesheets tab, layout pass 2: single-row toolbar in Connecteam's order ---- */
.ts-tsx-toolbar .ts-toolbar-left {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.ts-tsx-toolbar .ts-toolbar-right {
    flex-wrap: nowrap;
    flex: 0 0 auto;
}
.ts-tsx-toolbar .ts-tsx-picker { order: 1; flex: 0 0 300px; }
.ts-tsx-toolbar .ts-tsx-filter { order: 2; flex: 0 0 auto; }
.ts-tsx-toolbar .ts-tsx-datepill { order: 3; }
.ts-tsx-toolbar .ts-tsx-lock { order: 4; }
.ts-tsx-toolbar .ts-tsx-status { order: 5; flex: 0 0 auto; }

/* guard picker reads as a search box: magnifier on the left, chevron hidden */
.ts-tsx-picker .schedule-search-picker-trigger {
    position: relative;
    padding-left: 46px !important;
    justify-content: flex-start;
}
.ts-tsx-picker .schedule-search-picker-trigger::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='7.5'/><path d='m21 21-4.6-4.6'/></svg>");
}
.ts-tsx-picker .schedule-search-picker-trigger > svg {
    display: none;
}

.ts-tsx-status.filter-select {
    width: 170px;
    min-width: 0;
    appearance: auto;
}

/* date pill: arrows + label in one 10px-radius box, lock circle beside it */
.ts-tsx-datepill {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}
.ts-tsx-datepill-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    color: #6b7280;
    text-decoration: none;
}
.ts-tsx-datepill .ts-tsx-range .date-range-trigger,
.ts-tsx-datepill .ts-tsx-range .date-range-picker.has-value .date-range-trigger {
    min-width: 150px;
    height: 38px;
    min-height: 38px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: #172033;
}
.ts-tsx-datepill .ts-tsx-range .date-range-trigger svg {
    display: none;
}
.ts-tsx-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f4f5f6;
    color: #6b7280;
    cursor: not-allowed;
}

.ts-tsx-pill svg {
    margin-left: 6px;
}

/* grid: check + pin columns, sticky trio on the left like the Today tab */
.ts-tsx-grid .ts-tsx-col-check,
.ts-tsx-grid .ts-tsx-col-pin,
.ts-tsx-grid .ts-grid-user-col {
    position: sticky;
    z-index: 2;
    background: #fff;
}
.ts-tsx-grid thead .ts-tsx-col-check,
.ts-tsx-grid thead .ts-tsx-col-pin,
.ts-tsx-grid thead .ts-grid-user-col {
    z-index: 3;
    background: #f4f5f6;
}
.ts-tsx-grid .ts-tsx-col-check { left: 0; width: 44px; min-width: 44px; }
.ts-tsx-grid .ts-tsx-col-pin { left: 44px; width: 26px; min-width: 26px; padding-left: 0; padding-right: 0; }
.ts-tsx-grid .ts-grid-user-col { left: 0; }
.ts-tsx-col-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}
.ts-tsx-grid .ts-today-pin-fill {
    transform: rotate(45deg);
    color: #6b7280;
    vertical-align: middle;
    margin-left: 6px;
}
.ts-tsx-grid tbody .ts-grid-user-col {
    display: table-cell;
    text-align: left;
}
.ts-tsx-grid tbody .ts-grid-user-col .ts-user-avatar {
    vertical-align: middle;
    margin-right: 14px;
}
.ts-tsx-grid tbody tr:hover .ts-tsx-col-check,
.ts-tsx-grid tbody tr:hover .ts-tsx-col-pin {
    background: #f8fafc;
}

/* ---- Timesheets tab toolbar: plain search box, lock attached to date pill, divider before Export ---- */
.ts-tsx-toolbar .ts-today-search.ts-tsx-picker {
    height: 40px;
}
.ts-tsx-toolbar .ts-tsx-datepill {
    position: relative;
    z-index: 1;
}
.ts-tsx-toolbar .ts-tsx-lock {
    margin-left: -18px;
    width: 58px;
    padding-left: 16px;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: #f4f5f6;
}
.ts-tsx-toolbar .ts-toolbar-right a.ts-tsx-pill {
    position: relative;
    margin-left: 22px;
    border-radius: 999px;
}
.ts-tsx-toolbar .ts-toolbar-right a.ts-tsx-pill::before {
    content: "";
    position: absolute;
    left: -20px;
    top: -4px;
    height: 48px;
    border-left: 1px solid #e5e7eb;
}
.ts-tsx-toolbar .ts-tsx-status.filter-select {
    color: #6b7280;
    border-radius: 10px;
}

/* Timesheets tab Requests pill: orange label + larger count badge, as in Connecteam */
.ts-tsx-requests.ts-today-requests {
    height: 52px;
    padding: 0 20px 0 9px;
    gap: 10px;
    color: #f59e0b;
    font-size: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px #f3e3c8 inset, 0 2px 6px rgba(245, 158, 11, .12);
}
.ts-tsx-requests .ts-today-requests-count {
    min-width: 36px;
    height: 36px;
    font-size: 18px;
}

/* DOM order now equals visual order; drop the CSS re-ordering so both always agree */
.ts-tsx-toolbar .ts-tsx-picker,
.ts-tsx-toolbar .ts-tsx-filter,
.ts-tsx-toolbar .ts-tsx-datepill,
.ts-tsx-toolbar .ts-tsx-lock,
.ts-tsx-toolbar .ts-tsx-status {
    order: 0;
}

/* ---- Timesheets tab toolbar: exact-size pass against Connecteam ---- */
.ts-tsx-toolbar .ts-toolbar-left {
    gap: 10px;
}
.ts-tsx-toolbar .ts-today-search.ts-tsx-picker {
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: 48px;
}
.ts-tsx-toolbar .ts-today-search.ts-tsx-picker input {
    font-size: 16px;
}
.ts-tsx-toolbar .ts-today-filter.ts-tsx-filter {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.ts-tsx-toolbar .ts-tsx-datepill {
    height: 48px;
    flex: 0 0 auto;
}
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-trigger,
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-picker.has-value .date-range-trigger {
    min-width: 0;
    width: 112px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    justify-content: center;
    font-size: 16px;
}
.ts-tsx-toolbar .ts-tsx-lock {
    height: 48px;
    width: 56px;
}
.ts-tsx-toolbar select.ts-tsx-status.filter-select {
    flex: 0 0 160px;
    width: 160px;
    height: 48px;
    padding: 0 38px 0 18px;
    border-radius: 10px;
    font-size: 16px;
    color: #6b7280;
    appearance: none;
    -webkit-appearance: none;
    background: #fff no-repeat right 14px center / 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.ts-tsx-toolbar .ts-tsx-requests.ts-today-requests {
    height: 50px;
    padding: 0 18px 0 8px;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
}
.ts-tsx-toolbar .ts-tsx-requests .ts-today-requests-count {
    min-width: 34px;
    height: 34px;
    font-size: 17px;
}
.ts-tsx-toolbar .ts-tsx-pill {
    height: 48px;
    font-size: 17px;
}

/* ---- final measured sizes (Connecteam at 1:1: search 302x52, filter 50, date 202x52, status 159x50, requests 163x52, export 114x50) ---- */
.ts-tsx-toolbar .ts-today-search.ts-tsx-picker {
    flex: 0 0 302px;
    width: 302px;
    min-width: 302px;
    max-width: 302px;
    height: 52px;
}
.ts-tsx-toolbar .ts-today-filter.ts-tsx-filter {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
}
.ts-tsx-toolbar .ts-tsx-datepill {
    height: 52px;
}
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-trigger,
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-picker.has-value .date-range-trigger {
    width: 136px;
    height: 50px;
    min-height: 50px;
}
.ts-tsx-toolbar .ts-tsx-lock {
    width: 62px;
    height: 52px;
}
.ts-tsx-toolbar select.ts-tsx-status.filter-select {
    flex: 0 0 159px;
    width: 159px;
    height: 50px;
}
.ts-tsx-toolbar .ts-tsx-requests.ts-today-requests {
    height: 52px;
    padding: 0 20px 0 9px;
}
.ts-tsx-toolbar .ts-toolbar-right .ts-tsx-pill {
    height: 50px;
    padding: 0 20px;
}
.ts-tsx-toolbar .ts-tsx-requests.ts-today-requests {
    padding-right: 30px;
}

/* Timesheets grid header cells never wrap ("Full name" + pin stay on one line) */
.ts-tsx-grid thead th {
    white-space: nowrap;
}

/* Timesheets toolbar: force one line, nothing may stretch (status select was growing to fill the row) */
.ts-tsx-toolbar {
    flex-wrap: nowrap !important;
}
.ts-tsx-toolbar .ts-toolbar-left {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
}
.ts-tsx-toolbar .ts-toolbar-right {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin-left: auto;
}
.ts-tsx-toolbar select.ts-tsx-status.filter-select {
    flex: 0 0 159px !important;
    width: 159px !important;
    min-width: 159px !important;
    max-width: 159px !important;
    height: 50px !important;
    font-size: 16px !important;
    padding: 0 38px 0 18px !important;
}

/* ========================================================================
   FINAL CALIBRATION — Connecteam measured in real CSS px via DevTools
   (search 240.8x40, filter 40x40, date pill ~160x40 + lock ~34, status 127x40,
   all 14px text). Earlier passes used screenshot pixels (1.25x), so everything
   is scaled down here. Same selectors as before, appended last.
   ======================================================================== */

/* ---- toolbars (Today + Timesheets) ---- */
.ts-today-toolbar .ts-today-search.ts-today-search-cx,
.ts-tsx-toolbar .ts-today-search.ts-tsx-picker {
    flex: 0 0 241px !important;
    width: 241px !important;
    min-width: 241px !important;
    max-width: 241px !important;
    height: 40px !important;
    padding: 0 12px;
    gap: 8px;
    border-radius: 8px;
}
.ts-today-search-cx svg {
    width: 18px;
    height: 18px;
}
.ts-today-toolbar .ts-today-search-cx input,
.ts-tsx-toolbar .ts-today-search.ts-tsx-picker input {
    font-size: 14px;
}
.ts-today-toolbar .ts-today-filter.ts-today-filter-cx,
.ts-tsx-toolbar .ts-today-filter.ts-tsx-filter {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}
.ts-today-filter-cx svg {
    width: 16px;
    height: 16px;
}
.ts-today-toolbar .ts-today-date-pill.ts-today-date-pill-cx {
    height: 40px;
    min-width: 160px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 14px;
}
.ts-tsx-toolbar .ts-tsx-datepill {
    height: 40px !important;
    border-radius: 8px;
}
.ts-tsx-toolbar .ts-tsx-datepill-nav {
    width: 26px;
}
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-trigger,
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-picker.has-value .date-range-trigger {
    width: 108px;
    height: 38px;
    min-height: 38px;
    font-size: 14px;
}
.ts-tsx-toolbar .ts-tsx-lock {
    width: 46px !important;
    height: 40px !important;
    margin-left: -12px;
    padding-left: 12px;
    border-radius: 0 8px 8px 0;
}
.ts-tsx-toolbar select.ts-tsx-status.filter-select {
    flex: 0 0 127px !important;
    width: 127px !important;
    min-width: 127px !important;
    max-width: 127px !important;
    height: 40px !important;
    font-size: 14px !important;
    padding: 0 30px 0 14px !important;
    border-radius: 8px;
    background-position: right 10px center;
    background-size: 12px;
}
.ts-today-toolbar .ts-today-requests,
.ts-tsx-toolbar .ts-tsx-requests.ts-today-requests {
    height: 42px !important;
    padding: 0 16px 0 6px !important;
    gap: 9px;
    font-size: 15px !important;
    font-weight: 700;
}
.ts-today-toolbar .ts-today-requests-count,
.ts-tsx-toolbar .ts-tsx-requests .ts-today-requests-count {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
}
.ts-tsx-toolbar .ts-toolbar-right .ts-tsx-pill,
.ts-tsx-toolbar .ts-tsx-pill {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
}
.ts-tsx-toolbar .ts-toolbar-right a.ts-tsx-pill {
    margin-left: 18px;
}
.ts-tsx-toolbar .ts-toolbar-right a.ts-tsx-pill::before {
    left: -17px;
    top: -3px;
    height: 46px;
}
.ts-today-toolbar,
.ts-tsx-toolbar {
    gap: 8px;
}

/* ---- tables (both tabs): header 48, rows 48, 14px text, 32px avatars ---- */
.ts-today-table.ts-today-compact th,
.ts-today-table.ts-today-compact td {
    font-size: 14px;
}
.ts-today-table.ts-today-compact thead th {
    height: 48px;
    font-size: 14px;
}
.ts-today-table.ts-today-compact tbody td {
    height: 48px;
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.ts-today-table.ts-today-compact thead th:first-child { border-radius: 10px 0 0 10px; }
.ts-today-table.ts-today-compact thead th:last-child { border-radius: 0 10px 10px 0; }
.ts-today-compact .ts-user-avatar.ts-today-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.ts-today-compact .ts-today-site {
    font-size: 11px;
}
.ts-tsx-grid {
    font-size: 14px;
}
.ts-tsx-grid thead th {
    height: 48px;
    font-size: 14px;
}
.ts-tsx-grid thead th small {
    font-size: 14px;
}
.ts-tsx-grid thead th:first-child { border-radius: 10px 0 0 10px; }
.ts-tsx-grid thead th:last-child { border-radius: 0 10px 10px 0; }
.ts-tsx-grid tbody td {
    height: 48px;
}
.ts-tsx-grid tbody .ts-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.ts-tsx-grid .ts-grid-user-col {
    min-width: 190px;
}

/* ---- misc pills ---- */
.ts-today-add-users.ts-today-add-users-cx {
    padding: 9px 14px;
    font-size: 14px;
}
.ts-summary-strip.ts-tsx-summary .ts-summary-item strong,
.ts-today-summary-flat .ts-summary-eq-item strong {
    font-size: 12px;
}
.ts-tsx-summary .ts-summary-item span,
.ts-today-summary-flat .ts-summary-eq-item span {
    font-size: 12px;
}

/* ========================================================================
   Timesheets tab grid — Issues column, vertical "Daily totals" / "Week N"
   bands, sticky right-hand actions column (Connecteam layout)
   ======================================================================== */
.ts-tsx-grid .ts-tsx-col-issues {
    min-width: 110px;
    text-align: left;
}
.ts-tsx-issue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    font-size: 13px;
}
.ts-tsx-grid thead th.ts-tsx-band-head {
    width: 44px;
    min-width: 44px;
    padding: 0;
    background: #f4f5f6;
}
.ts-tsx-grid tbody td.ts-tsx-band {
    position: relative;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-bottom: 0;
    text-align: center;
    vertical-align: middle;
    background: #f4f5f6;
    color: #6b7280;
}
.ts-tsx-grid tbody tr:hover td.ts-tsx-band {
    background: #f4f5f6;
}
/* the first band (right after Issues) is the darker "Daily totals" one */
.ts-tsx-grid .ts-tsx-col-issues + .ts-tsx-band,
.ts-tsx-grid thead .ts-tsx-col-issues + .ts-tsx-band-head {
    background: #e9ebed;
}
.ts-tsx-band-label {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    white-space: nowrap;
}
.ts-tsx-band-arrows {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    font-size: 11px;
    letter-spacing: 1px;
    color: #9ca3af;
    transform: rotate(90deg);
}

/* right-hand gear / columns / chat stay pinned while scrolling sideways */
.ts-tsx-grid .ts-tsx-col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 96px;
    text-align: right;
    white-space: nowrap;
    background: #fff;
    box-shadow: -1px 0 0 #eef2f7;
}
.ts-tsx-grid thead .ts-tsx-col-actions {
    z-index: 3;
    background: #f4f5f6;
}
.ts-tsx-grid tbody tr:hover .ts-tsx-col-actions {
    background: #f8fafc;
}
.ts-tsx-col-actions .ts-today-columns-btn {
    margin-left: 4px;
    border: 0;
    background: transparent;
}
.ts-tsx-col-actions .icon-action {
    opacity: .55;
    cursor: not-allowed;
}

/* band arrows no longer overlap the label: arrows sit in flow above it */
.ts-tsx-grid tbody td.ts-tsx-band {
    vertical-align: top;
    padding-top: 8px;
}
.ts-tsx-band-arrows {
    position: static;
    display: block;
    height: 18px;
    line-height: 18px;
    margin-bottom: 8px;
    transform: none;
    writing-mode: vertical-rl;
    font-size: 11px;
    letter-spacing: 0;
    color: #9ca3af;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}
.ts-tsx-band-label {
    display: block;
    margin: 0 auto;
    padding-bottom: 8px;
}

/* "Full name" header: pin icon stays on the same line (a global svg rule was making it a block) */
.ts-tsx-grid thead .ts-grid-user-col {
    white-space: nowrap;
}
.ts-tsx-grid thead .ts-grid-user-col .ts-today-pin-fill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

/* visible vertical divider after the frozen Full name column (header + every row), both tabs */
.ts-tsx-grid .ts-grid-user-col,
.ts-tsx-grid thead .ts-grid-user-col,
.ts-today-table .ts-today-col-name,
.ts-today-table thead .ts-today-col-name {
    box-shadow: 1px 0 0 #dfe3e7;
}

/* the divider as a real border (box-shadow doesn't paint on cells in this collapsed table) */
.ts-tsx-grid th.ts-grid-user-col,
.ts-tsx-grid td.ts-grid-user-col,
.ts-today-table th.ts-today-col-name,
.ts-today-table td.ts-today-col-name {
    border-right: 1px solid #dfe3e7 !important;
    box-shadow: none;
}

/* Timesheets tab equation row: same look as the Today tab's, with "Pay per dates" pinned right */
.ts-tsx-eq .ts-summary-eq-item strong {
    font-size: 12px;
    font-weight: 700;
    color: #5b6472;
}
.ts-tsx-eq .ts-summary-eq-item span {
    font-size: 12px;
    color: #7b8490;
}
.ts-tsx-eq .ts-summary-eq {
    flex-wrap: nowrap;
    gap: 14px;
}
.ts-tsx-eq .ts-summary-eq-secondary {
    gap: 22px;
    padding-left: 22px;
    border-left: 1px solid #e5e7eb;
}
.ts-tsx-eq .ts-tsx-eq-pay {
    margin-left: auto;
    text-align: left;
}
.ts-tsx-eq {
    align-items: center;
    flex-wrap: wrap;
}

/* Timesheets tab: filter bar that the filter icon opens */
.ts-tsx-filter:not(:disabled) {
    cursor: pointer;
}
.ts-tsx-filter[aria-expanded="true"] {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.ts-tsx-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f5f6;
}
.ts-tsx-filterbar[hidden] {
    display: none;
}
.ts-tsx-filterbar-label {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}
.ts-tsx-filterbar-spacer {
    flex: 1 1 auto;
}
.ts-tsx-chip {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: not-allowed;
}
.ts-tsx-chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    background: #fff;
    color: #2f80ed;
    cursor: not-allowed;
}
.ts-tsx-chip-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: #2f80ed;
    font-size: 13px;
    text-decoration: none;
}
button.ts-tsx-chip-small:disabled {
    cursor: not-allowed;
}
a.ts-tsx-chip-small:hover {
    background: #eff6ff;
}

/* Lock icon -> "Pay period isn't over yet" dialog */
.ts-tsx-lock:not(:disabled) {
    cursor: pointer;
}
.ts-tsx-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .5);
}
.ts-tsx-modal-backdrop[hidden] {
    display: none;
}
.ts-tsx-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 32px 32px 28px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}
.ts-tsx-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}
.ts-tsx-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #fff4e0;
    color: #f59e0b;
}
.ts-tsx-modal h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #172033;
}
.ts-tsx-modal p {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: #2b3440;
}
.ts-tsx-modal-btn {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #2f80ed;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ts-tsx-modal-btn:hover {
    background: #1f6fdc;
}

/* Status filter: custom popover (the native select stays in the DOM, hidden, and still drives the reload) */
.ts-tsx-status-wrap {
    position: relative;
    flex: 0 0 auto;
}
.ts-tsx-status-native {
    display: none !important;
}
.ts-tsx-status-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 127px;
    height: 40px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
}
.ts-tsx-status-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.ts-tsx-status-pop {
    position: absolute;
    top: 46px;
    left: 0;
    z-index: 1300;
    width: 288px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .16);
}
.ts-tsx-status-pop[hidden] {
    display: none;
}
.ts-tsx-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #172033;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.ts-tsx-status-item:hover {
    background: #f4f5f6;
}
.ts-tsx-status-item.is-selected {
    background: #e8f1fd;
    color: #172033;
}
.ts-tsx-status-item.is-selected svg {
    color: #2f80ed;
}
.ts-tsx-status-item.is-inert {
    cursor: not-allowed;
    opacity: .7;
}
.ts-tsx-status-head {
    padding: 8px 12px 4px;
    font-size: 12px;
    color: #7b8490;
}
.ts-tsx-status-sep {
    height: 1px;
    margin: 6px 4px;
    background: #eceff2;
}
.ts-tsx-status-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 14px;
    color: #172033;
}
.ts-tsx-switch {
    position: relative;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: #e5e7eb;
}
.ts-tsx-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Status filter trigger: label stays on one line inside the 127px box */
.ts-tsx-toolbar .ts-tsx-status-trigger {
    box-sizing: border-box;
    width: 127px;
    height: 40px;
    padding: 0 10px 0 12px;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;
}
.ts-tsx-status-trigger span {
    white-space: nowrap;
}
.ts-tsx-status-trigger svg {
    flex: 0 0 14px;
}

/* safety net: never show an auto-enhanced picker next to the custom Status filter */
.ts-tsx-status-wrap > .search-select-picker,
.ts-tsx-status-wrap > .schedule-search-picker {
    display: none !important;
}

/* ========================================================================
   Requests review overlay (.ts-rq-*) — Connecteam "Pending / History" review screen
   ======================================================================== */
.ts-rq {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(71, 79, 90, .55);
}
.ts-rq[hidden] {
    display: none;
}
.ts-rq-close {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #5b6472;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.ts-rq-sheet {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    border-radius: 20px 20px 0 0;
    background: #fff;
    overflow: hidden;
}

/* ---- left column ---- */
.ts-rq-side {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 0;
    border-right: 1px solid #eceff2;
    min-height: 0;
}
.ts-rq-tabs {
    display: flex;
    padding: 4px;
    border-radius: 10px;
    background: #f1f2f4;
}
.ts-rq-tab {
    flex: 1;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4b5563;
    font-size: 14px;
    cursor: pointer;
}
.ts-rq-tab.is-active {
    background: #fff;
    color: #172033;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.ts-rq-searchrow {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.ts-rq-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #6b7280;
}
.ts-rq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
}
.ts-rq-filterbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #2f80ed;
    cursor: not-allowed;
}
.ts-rq-tip {
    position: relative;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #e6f7f7;
    color: #2b3440;
    font-size: 14px;
}
.ts-rq-tip[hidden] {
    display: none;
}
.ts-rq-tip p {
    margin: 12px 0 0;
}
.ts-rq-tip-x {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: transparent;
    color: #14b8c4;
    cursor: pointer;
}
.ts-rq-keys {
    display: grid;
    grid-template-columns: repeat(3, 24px);
    gap: 4px;
    width: 84px;
}
.ts-rq-keys .k {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #b8e6ea;
    color: #6bb5bd;
    font-size: 9px;
}
.ts-rq-keys .k-up { grid-column: 2; }
.ts-rq-list {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    overflow-y: auto;
}
.ts-rq-date {
    padding: 10px 4px 6px;
    font-size: 13px;
    color: #7b8490;
}
.ts-rq-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.ts-rq-item:hover {
    background: #f4f5f6;
}
.ts-rq-item.is-active {
    background: #e8f1fd;
}
.ts-rq-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4da3f7;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.ts-rq-av-lg {
    width: 50px;
    height: 50px;
    font-size: 17px;
}
.ts-rq-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ts-rq-item-text strong {
    font-size: 15px;
    font-weight: 400;
    color: #172033;
}
.ts-rq-item-text small {
    font-size: 13px;
    color: #7b8490;
}
.ts-rq-empty {
    padding: 24px 8px;
    color: #7b8490;
    font-size: 14px;
}
.ts-rq-foot {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 14px 16px;
    border-top: 1px solid #eceff2;
}
.ts-rq-all {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    cursor: pointer;
}
.ts-rq-all-decline {
    border: 1px solid #f4b8b8;
    color: #ef4444;
    cursor: not-allowed;
}
.ts-rq-all-approve {
    border: 1px solid #a7e3c9;
    color: #22a36f;
}
.ts-rq-all-approve:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- right pane ---- */
.ts-rq-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 32px 20px;
    overflow-y: auto;
}
.ts-rq-none {
    padding: 60px 0;
    text-align: center;
    color: #7b8490;
}
.ts-rq-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ts-rq-who {
    display: flex;
    flex-direction: column;
}
.ts-rq-who strong {
    font-size: 15px;
    color: #172033;
}
.ts-rq-who small {
    font-size: 13px;
    color: #7b8490;
}
.ts-rq-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.ts-rq-btn {
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.ts-rq-btn-decline {
    background: #f04343;
}
.ts-rq-btn-approve {
    background: #21b27a;
}
.ts-rq-status {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}
.ts-rq-status-approved { background: #dcfce7; color: #15803d; }
.ts-rq-status-rejected { background: #fee2e2; color: #b91c1c; }

.ts-rq-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 600px));
    justify-content: center;
    gap: 40px;
    margin-top: 24px;
}
.ts-rq-card {
    padding: 26px 40px 24px;
    border: 1px solid #eceff2;
    border-radius: 28px;
    background: #fff;
}
.ts-rq-card.ts-rq-card-orig {
    border-color: transparent;
    background: #f4f5f6;
}
.ts-rq-card h4 {
    margin: 0 0 24px;
    font-size: 16px;
    font-weight: 700;
    color: #172033;
}
.ts-rq-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #172033;
}
.ts-rq-field > span:first-child {
    flex: 0 0 130px;
}
.ts-rq-field em {
    font-style: normal;
}
.ts-rq-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 44px;
    border-radius: 10px;
    background: #ececee;
    font-size: 15px;
}
.ts-rq-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #ececee;
    font-size: 15px;
}
.ts-rq-total strong {
    font-weight: 700;
}

/* ---- day timeline ---- */
.ts-rq-timeline {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eceff2;
}
.ts-rq-tl-head strong {
    font-size: 16px;
    color: #172033;
}
.ts-rq-conflict {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fde8e8;
    color: #2b3440;
    font-size: 14px;
}
.ts-rq-ticks {
    position: relative;
    height: 44px;
    margin: 14px 140px 0 140px;
}
.ts-rq-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 13px;
    line-height: 1.3;
    color: #7b8490;
    text-align: center;
}
.ts-rq-tl-row {
    display: flex;
    align-items: center;
    gap: 0;
    height: 64px;
    border-top: 1px solid #eceff2;
}
.ts-rq-tl-label {
    flex: 0 0 140px;
    font-size: 14px;
    color: #2b3440;
}
.ts-rq-track {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    border-radius: 999px;
    background: #d9dbdf;
}
.ts-rq-seg {
    position: absolute;
    top: -4px;
    bottom: -4px;
    border-radius: 4px;
}
.ts-rq-seg.is-actual {
    background: #6b7bd6;
}
.ts-rq-seg.is-orig {
    background: #9db4e8;
}
.ts-rq-tl-total {
    flex: 0 0 140px;
    text-align: right;
    font-size: 14px;
    color: #7b8490;
}

/* ---- Requests overlay: split buttons, phone chips, timeline extras (Connecteam match) ---- */
.ts-rq-split {
    display: inline-flex;
    gap: 2px;
}
.ts-rq-split .ts-rq-btn:first-child {
    border-radius: 999px 6px 6px 999px;
}
.ts-rq-split .ts-rq-btn-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    padding: 0;
    border-radius: 6px 999px 999px 6px;
}
.ts-rq-btn-note:disabled {
    cursor: not-allowed;
    opacity: .85;
}
.ts-rq-actions {
    gap: 12px;
}
.ts-rq-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 10px;
    background: #ececee;
    color: #2b3440;
}
.ts-rq-h4-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 10px;
    color: #2b3440;
}
.ts-rq-tl-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ts-rq-collapse {
    display: inline-flex;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}
.ts-rq-eye {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #2f80ed;
}
.ts-rq-timeline.is-collapsed .ts-rq-tl-body {
    display: none;
}
.ts-rq-track-wrap {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    background:
        linear-gradient(#dfe3e7, #dfe3e7) 0 0 / 1px 100% no-repeat,
        linear-gradient(#dfe3e7, #dfe3e7) 25% 0 / 1px 100% no-repeat,
        linear-gradient(#dfe3e7, #dfe3e7) 50% 0 / 1px 100% no-repeat,
        linear-gradient(#dfe3e7, #dfe3e7) 75% 0 / 1px 100% no-repeat,
        linear-gradient(#dfe3e7, #dfe3e7) 100% 0 / 1px 100% no-repeat;
}
.ts-rq-track-wrap .ts-rq-track {
    flex: 1 1 auto;
}
.ts-rq-flag {
    position: absolute;
    top: 14px;
    bottom: 14px;
    width: 10px;
    margin-left: -3px;
    border: 1px solid #f19a9a;
    border-radius: 6px;
    background: rgba(240, 67, 67, .12);
    pointer-events: none;
}
.ts-rq-tl-total {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.ts-rq-tl-total.is-conflict {
    color: #ef4444;
}

/* Requests overlay: eye button -> "Timeline view options" popover with two switches */
.ts-rq-eyewrap {
    position: relative;
    margin-left: auto;
}
button.ts-rq-eye {
    margin-left: 0;
    background: #fff;
    cursor: pointer;
}
.ts-rq-eye-chev {
    display: inline-flex;
    transition: transform .15s ease;
}
.ts-rq-eye-chev.is-up {
    transform: rotate(180deg);
}
.ts-rq-eyepop {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 5;
    width: 260px;
    padding: 16px 20px 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .18);
}
.ts-rq-eyepop-title {
    margin-bottom: 12px;
    font-size: 14px;
    color: #7b8490;
}
.ts-rq-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    font-size: 15px;
    color: #172033;
    cursor: pointer;
}
.ts-rq-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ts-rq-sw {
    position: relative;
    width: 50px;
    height: 30px;
    border-radius: 999px;
    background: #d1d5db;
    transition: background .15s ease;
}
.ts-rq-sw::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.ts-rq-opt input:checked + .ts-rq-sw {
    background: #2f80ed;
}
.ts-rq-opt input:checked + .ts-rq-sw::after {
    transform: translateX(20px);
}

/* Requests overlay: filter icon -> "Filter" popover with Select rows, Reset and Add Filter */
.ts-rq-filterbtn:not(:disabled) {
    cursor: pointer;
}
.ts-rq-filterbtn.is-open,
.ts-rq-filterbtn.has-filter {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.ts-rq-filterbtn.is-open .ts-rq-filterchev {
    transform: rotate(180deg);
}
.ts-rq-fpop {
    position: absolute;
    z-index: 10;
    top: 96px;
    left: 226px;
    width: 600px;
    max-width: calc(100% - 250px);
    padding: 16px 18px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .18);
}
.ts-rq-fpop[hidden] {
    display: none;
}
.ts-rq-fhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ts-rq-fhead strong {
    font-size: 15px;
    color: #6b7280;
}
.ts-rq-freset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
}
.ts-rq-freset:disabled {
    color: #b6bcc4;
    cursor: not-allowed;
}
.ts-rq-fbox {
    padding: 14px;
    border-radius: 12px;
    background: #f4f5f6;
}
.ts-rq-frow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.ts-rq-sel {
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 15px;
}
.ts-rq-sel:disabled {
    color: #9ca3af;
}
.ts-rq-fadd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: #2f80ed;
    font-size: 14px;
    cursor: pointer;
}

/* Filter popover: exact Connecteam look (measured, 1.25x screenshot -> CSS px) */
.ts-rq-searchrow {
    position: relative;
}
.ts-rq-searchrow .ts-rq-fpop {
    top: calc(100% + 4px);
    left: calc(100% - 58px);
    width: 554px;
    max-width: none;
    padding: 18px 20px 20px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .16);
}
.ts-rq-fhead {
    margin-bottom: 14px;
}
.ts-rq-fhead strong {
    font-size: 15px;
    font-weight: 700;
    color: #7b8490;
}
.ts-rq-freset {
    height: 28px;
    padding: 0 10px;
    border-color: #e2e5e9;
    color: #9aa1ab;
    font-size: 13px;
}
.ts-rq-fbox {
    padding: 20px;
    border-radius: 12px;
    background: #f4f5f6;
}
.ts-rq-frow {
    gap: 8px;
    margin-bottom: 12px;
}
select.ts-rq-sel {
    height: 34px;
    padding: 0 30px 0 12px;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff no-repeat right 10px center / 12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    color: #6b7280;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
}
select.ts-rq-sel:disabled {
    background-color: #f8f9fa;
    color: #b6bcc4;
    border-color: #eceff2;
}
.ts-rq-fadd {
    height: 26px;
    padding: 0 10px;
    border-color: #cfe0f7;
    font-size: 13px;
}

/* Filter popover: first "Select" opens the four-column field menu with a search box */
.ts-rq-fpop {
    overflow: visible;
}
button.ts-rq-selbtn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0 12px;
    background-image: none;
    text-align: left;
    cursor: pointer;
}
button.ts-rq-selbtn.is-open svg {
    transform: rotate(180deg);
}
.ts-rq-fmenu {
    position: absolute;
    z-index: 12;
    top: 112px;
    left: 32px;
    width: 742px;
    padding: 8px 8px 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .2);
}
.ts-rq-fmenu-search {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #2f80ed;
    border-radius: 8px;
    color: #6b7280;
}
.ts-rq-fmenu-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
}
.ts-rq-fcols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 190px;
    margin-top: 6px;
    overflow-y: auto;
}
.ts-rq-fcol {
    padding: 4px 8px 8px;
    border-right: 1px solid #eceff2;
}
.ts-rq-fcol:last-child {
    border-right: 0;
}
.ts-rq-fcol-title {
    padding: 6px 8px 4px;
    font-size: 13px;
    color: #7b8490;
}
.ts-rq-fitem {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #172033;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.ts-rq-fitem:hover:not(:disabled) {
    background: #f4f5f6;
}
.ts-rq-fitem.is-inert {
    color: #9ca3af;
    cursor: not-allowed;
}

/* Requests overlay: hovering a time shows "Mobile" + where it was recorded */
.ts-rq-chip-tip {
    position: relative;
    cursor: default;
}
.ts-rq-tip2 {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    z-index: 20;
    display: none;
    width: 288px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .18);
    color: #172033;
    text-align: left;
    transform: translateX(-50%);
    pointer-events: none;
}
.ts-rq-tip2::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: translate(-50%, -6px) rotate(45deg);
    box-shadow: 3px 3px 6px rgba(15, 23, 42, .06);
}
.ts-rq-chip-tip:hover .ts-rq-tip2,
.ts-rq-chip-tip:focus .ts-rq-tip2 {
    display: block;
}
.ts-rq-tip2-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}
.ts-rq-tip2-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eceff2;
    font-size: 13px;
    line-height: 1.4;
}
.ts-rq-tip2-row svg {
    flex: 0 0 18px;
}

/* Timesheets grid, right-hand groups: Pay period totals / Pay breakdown / Timesheets status */
.ts-tsx-grid .ts-tsx-col-total {
    min-width: 130px;
}
.ts-tsx-pillstat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ececee;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
}
.ts-tsx-pillstat-approved {
    background: #dcfce7;
    color: #15803d;
}
.ts-tsx-pillstat-rejected {
    background: #fee2e2;
    color: #b91c1c;
}

/* Export button -> dropdown (Payroll Totals, Timesheets, Shift report, ...) */
.ts-tsx-export-wrap {
    position: relative;
    margin-left: 18px;
}
.ts-tsx-export-wrap::before {
    content: "";
    position: absolute;
    left: -17px;
    top: -3px;
    height: 46px;
    border-left: 1px solid #e5e7eb;
}
.ts-tsx-toolbar .ts-toolbar-right .ts-tsx-export-wrap .ts-tsx-pill {
    margin-left: 0;
}
.ts-tsx-export-wrap[open] .ts-tsx-export-chev,
.ts-tsx-export-wrap:has([aria-expanded="true"]) .ts-tsx-export-chev {
    transform: rotate(180deg);
}
.ts-tsx-export-pop {
    position: absolute;
    top: 46px;
    right: 0;
    z-index: 1300;
    width: 248px;
    padding: 8px 8px 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .16);
}
.ts-tsx-export-pop[hidden] {
    display: none;
}
.ts-tsx-export-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #172033;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ts-tsx-export-item svg {
    color: #9ca3af;
}
.ts-tsx-export-item:hover:not(:disabled) {
    background: #f4f5f6;
}
.ts-tsx-export-item:disabled {
    cursor: not-allowed;
}
.ts-tsx-export-item.ts-tsx-export-link {
    justify-content: flex-start;
    color: #2f80ed;
}
.ts-tsx-export-item.ts-tsx-export-link svg {
    color: inherit;
}
.ts-tsx-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ff3b6b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
.ts-tsx-export-sep {
    height: 1px;
    margin: 6px 4px;
    background: #eceff2;
}

/* Export menu: every entry (incl. "Discover integrations" + NEW) stays on one line */
.ts-tsx-export-pop {
    width: 280px;
}
.ts-tsx-export-item {
    white-space: nowrap;
}
.ts-tsx-export-item.ts-tsx-export-link span:not(.ts-tsx-badge) {
    white-space: nowrap;
}
.ts-tsx-export-item .ts-tsx-badge {
    flex: 0 0 auto;
}

/* ========================================================================
   Per-user timesheet sheet (.ts-us-*) — opens when a guard's name is clicked
   ======================================================================== */
.ts-us .ts-us-sheet {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    background: #fff;
    overflow: hidden;
}
.ts-us-next {
    position: absolute;
    top: 12px;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px 0 44px;
    border: 0;
    background: #fff;
    color: #172033;
    font-size: 15px;
    cursor: pointer;
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
    border-radius: 24px 0 0 0;
}
.ts-us-next[hidden] {
    display: none;
}
.ts-us-next .ts-rq-av {
    width: 30px;
    height: 30px;
}
.ts-us-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eceff2;
}
.ts-us-av {
    width: 38px;
    height: 38px;
    font-size: 14px;
}
.ts-us-name {
    font-size: 15px;
    font-weight: 400;
    color: #172033;
}
.ts-us-chat {
    display: inline-flex;
    color: #6b7280;
}
.ts-us-range {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 40px;
    min-width: 196px;
    margin-left: 14px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: #172033;
}
.ts-us-range-nav {
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
}
.ts-us-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #2f80ed;
}
.ts-us-spacer {
    flex: 1 1 auto;
}
.ts-us-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: #2f80ed;
    text-decoration: none;
}
.ts-us-round-alert {
    border-color: #f3b3b3;
    color: #ef4444;
}
.ts-us-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #2f80ed;
    font-size: 14px;
    cursor: pointer;
}
.ts-us-approve {
    height: 44px;
    margin-left: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #21b27a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ts-us-approve:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.ts-us-eq {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 16px;
    border-bottom: 1px solid #eceff2;
}
.ts-us-eq .ts-summary-eq {
    flex-wrap: nowrap;
    gap: 14px;
}
.ts-us-eq .ts-summary-eq-item strong {
    font-size: 12px;
    font-weight: 700;
    color: #5b6472;
}
.ts-us-eq .ts-summary-eq-item span {
    font-size: 12px;
    color: #7b8490;
}
.ts-us-eq .ts-summary-eq-secondary {
    gap: 22px;
    padding-left: 22px;
    border-left: 1px solid #e5e7eb;
}
.ts-us-pay {
    margin-left: auto;
}
.ts-us-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.ts-us-table {
    width: 100%;
    min-width: 1500px;
    border-collapse: collapse;
    font-size: 14px;
    color: #172033;
}
.ts-us-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 48px;
    padding: 0 12px;
    background: #f4f5f6;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}
.ts-us-table td {
    height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid #eceff2;
    text-align: center;
    white-space: nowrap;
}
.ts-us-table th:first-child,
.ts-us-table td:first-child {
    width: 44px;
    padding: 0 0 0 16px;
}
.ts-us-group td {
    height: 32px;
    background: #ececee;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.ts-us-group td.ts-us-band {
    height: auto;
}
.ts-us-row {
    cursor: pointer;
}
.ts-us-row:hover td:not(.ts-us-band) {
    background: #f8fafc;
}
.ts-us-date {
    font-weight: 700;
}
.ts-us-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-width: 116px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #9ca3af;
}
.ts-us-select::after {
    content: "\25BE";
    font-size: 11px;
    color: #6b7280;
}
.ts-us-type {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f4f5f6;
}
.ts-us-muted {
    color: #b6bcc4;
}
.ts-us-band,
.ts-us-table th.ts-us-bandhead {
    width: 44px;
    min-width: 44px;
    padding: 0;
    background: #e9ebed;
    color: #6b7280;
    vertical-align: top;
}
.ts-us-band {
    padding-top: 8px;
    border-bottom: 0;
}
.ts-us-weekly {
    font-weight: 700;
    color: #2b3440;
}

/* Today tab: Connecteam-style calendar popover (visual only) */
.ts-cal-pop{position:absolute;z-index:1200;width:320px;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(16,24,40,.18);padding:14px 16px 16px;font-family:inherit}
.ts-cal-pop[hidden]{display:none}
.ts-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ts-cal-title{color:#2f80ed;font-size:15px;font-weight:500;background:none;border:0;padding:0;cursor:default}
.ts-cal-navs{display:flex;gap:6px;align-items:center}
.ts-cal-nav{width:26px;height:26px;border:0;background:none;color:#667085;border-radius:6px;cursor:pointer;font-size:16px;line-height:1}
.ts-cal-nav:hover{background:#f2f4f7}
.ts-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px;text-align:center}
.ts-cal-dow{font-size:12px;color:#667085;padding-bottom:4px}
.ts-cal-day{width:34px;height:34px;margin:0 auto;border:0;background:none;border-radius:8px;font-size:14px;color:#1d2939;cursor:pointer}
.ts-cal-day:hover{background:#f2f4f7}
.ts-cal-day.is-selected{background:#2f80ed;color:#fff;font-weight:600}
.ts-cal-trigger{width:46px;height:46px;border:1px solid #d0d5dd;background:#fff;color:#2f80ed;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:10px;flex:0 0 auto}
.ts-cal-trigger:hover{background:#f2f8ff}
.ts-cal-empty-row[hidden]{display:none}

/* User timesheet sheet: Type menu + date-cell hover "+" (visual only) */
.ts-us-typepop{position:fixed;z-index:3000;min-width:280px;background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(16,24,40,.2);padding:8px}
.ts-us-typepop[hidden]{display:none}
.ts-us-typepop-item{padding:10px 12px;border-radius:8px;font-size:15px;color:#1d2939;cursor:pointer}
.ts-us-typepop-item:hover{background:#f2f4f7}
.ts-us-typepop-head{padding:8px 12px 4px;font-size:13px;color:#98a2b3}
.ts-us-typepop-break{color:#e91e63;display:flex;justify-content:space-between}
.ts-us-typepop-break span{color:#98a2b3;font-size:14px}
.ts-us-datecell{display:inline-flex;align-items:center;gap:10px}
.ts-us-dateadd{display:none;width:26px;height:26px;border:1px solid #d0d5dd;border-radius:6px;color:#2f80ed;align-items:center;justify-content:center;font-size:16px}
.ts-us-row:hover .ts-us-dateadd{display:inline-flex}
.ts-us-addpop{min-width:200px}
.ts-us-typepop-item{display:flex;align-items:center;gap:12px}
.ts-us-typepop-item svg{flex:0 0 auto}
.ts-us-typepop-break span{margin-left:auto}
.ts-us-exportpop{min-width:240px}
.ts-us-exportpop .ts-us-typepop-item{justify-content:space-between}
.ts-us-chev{color:#98a2b3}
.ts-us-newbadge{background:#e91e63;color:#fff;font-size:13px;font-weight:600;padding:3px 10px;border-radius:12px;margin-left:8px}
.ts-us-colbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#667085;cursor:pointer;margin-left:10px;padding:4px}
.ts-us-colpop{width:320px;padding:10px 0}
.ts-us-colsearch{display:flex;align-items:center;gap:8px;margin:0 10px 8px;padding:8px 12px;border:1px solid #2f80ed;border-radius:8px;color:#98a2b3}
.ts-us-colsearch input{border:0;outline:0;flex:1;font-size:15px;background:none}
.ts-us-collist{max-height:300px;overflow:auto;padding:0 10px}
.ts-us-colitem{display:flex;align-items:center;gap:12px;padding:10px 6px;font-size:15px;color:#1d2939;cursor:pointer}
.ts-us-colitem[hidden]{display:none}
.ts-us-selbar{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:3000;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;box-shadow:0 8px 32px rgba(16,24,40,.2);padding:14px 22px}
.ts-us-selbar[hidden]{display:none}
.ts-us-selbar strong{font-size:16px;margin-right:24px;color:#1d2939}
.ts-us-selclose{border:0;background:none;color:#475467;cursor:pointer;padding:4px}
.ts-us-selbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfe0fb;background:#fff;color:#2f80ed;border-radius:22px;padding:10px 16px;font-size:15px;cursor:pointer}
.ts-us-selbtn:hover:not(:disabled){background:#f2f8ff}
.ts-us-selbtn:disabled{color:#b5bcc8;border-color:#e4e7ec;cursor:default}
.ts-us-selround{border-radius:50%;padding:10px}
.ts-us-fltpop{min-width:280px}
.ts-us-fltpop .ts-us-typepop-item{justify-content:space-between}
.ts-us-flttick{display:none;color:#2f80ed}
.ts-us-fltopt.is-on{background:#eaf2fe}
.ts-us-fltopt.is-on .ts-us-flttick{display:block}
.ts-us-fltsep{height:1px;background:#e4e7ec;margin:8px 4px}
.ts-us-switch{appearance:none;-webkit-appearance:none;width:50px;height:28px;border-radius:14px;background:#e4e7ec;position:relative;cursor:pointer;transition:background .15s;flex:0 0 auto;margin:0}
.ts-us-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.ts-us-switch:checked{background:#2f80ed}
.ts-us-switch:checked::after{left:25px}

/* "Next user" tab: flush with the sheet's top edge, wider slanted tab like Connecteam */
.ts-us-next-cx{top:16px;height:48px;min-width:272px;justify-content:space-between;padding:0 22px 0 60px;font-size:16px;clip-path:polygon(34px 0,100% 0,100% 100%,0 100%);border-radius:0}
.ts-us-next-cx .ts-rq-av{position:absolute;left:36px;top:9px;width:30px;height:30px}
.ts-us-next-cx .ts-us-next-text{margin-left:auto}

/* Vertical divider between the Date column and the Type column, on every row */
.ts-us-table td.ts-us-typecell,.ts-us-table th:nth-child(3){border-left:1px solid #e4e7ec}

/* ----- Settings modal: full-screen sheet, slides up from bottom (new classes: ts-settings-*) ----- */
.ts-settings-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    transition: opacity .28s ease;
}
.ts-settings-modal-backdrop[hidden] {
    display: none;
}
.ts-settings-modal-backdrop.ts-settings-open {
    opacity: 1;
}
.ts-settings-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, .25);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.ts-settings-modal-backdrop.ts-settings-open .ts-settings-sheet {
    transform: translateY(0);
}
.ts-settings-sheet-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 16px 0;
}
.ts-settings-sheet-close-pill {
    padding: 8px 24px;
    border: 0;
    border-radius: 999px;
    background: #6b7280;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ts-settings-sheet-close-pill:hover {
    background: #52606d;
}
.ts-settings-sheet-eyebrow {
    margin: 0;
    padding-bottom: 14px;
    text-align: center;
    font-size: 13px;
    color: #9aa3b2;
    flex-shrink: 0;
}
.ts-settings-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 24px 40px;
}
.ts-settings-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 18px 36px;
    border-top: 1px solid #e5e7eb;
}
.ts-settings-steps {
    display: flex;
    align-items: center;
}
.ts-settings-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ts-settings-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #c8cfda;
}
.ts-settings-step.is-active .ts-settings-step-dot {
    background: #2563eb;
    border-color: #2563eb;
}
.ts-settings-step-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #9aa3b2;
    white-space: nowrap;
}
.ts-settings-step.is-active .ts-settings-step-label {
    color: #2563eb;
}
.ts-settings-step-line {
    width: 72px;
    height: 2px;
    margin: 0 10px 20px;
    background: #e4e9f0;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .ts-settings-step-line {
        width: 32px;
    }
    .ts-settings-step-label {
        display: none;
    }
}
.ts-settings-sheet-body h3 {
    max-width: 640px;
    margin: 0 auto 6px;
    font-size: 24px;
    font-weight: 800;
    color: #172033;
    text-align: center;
}
.ts-settings-modal-subtitle {
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: 14.5px;
    color: #5f6368;
    text-align: center;
}
.ts-settings-form {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 640px) {
    .ts-settings-sheet {
        top: auto;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }
}
.ts-settings-card {
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    overflow: hidden;
}
.ts-settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}
.ts-settings-row-bordered {
    border-top: 1px solid #e4e9f0;
}
.ts-settings-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.ts-settings-row-icon svg {
    width: 20px;
    height: 20px;
}
.ts-settings-row-icon-blue { color: #2563eb; }
.ts-settings-row-icon-green { color: #16a34a; }
.ts-settings-row-icon-pink { color: #db2777; }
.ts-settings-row-icon-indigo { color: #4f46e5; }
.ts-settings-row label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 700;
    color: #172033;
    display: inline !important;
}
.ts-settings-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.ts-settings-row-body label {
    white-space: normal;
}
.ts-settings-row > label {
    flex: 1 0 auto !important;
    width: auto !important;
    min-width: fit-content;
    white-space: nowrap;
    padding-right: 4px;
}
.ts-settings-sheet .ts-settings-form-field {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #ffffff;
    color: #172033;
    line-height: 1.4;
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 45% !important;
}
.ts-settings-row-body + .ts-settings-form-field,
.ts-settings-row-body + .ts-settings-form-row {
    flex-shrink: 0;
}
.ts-settings-sheet .ts-settings-form-field:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.ts-settings-form-helper {
    display: block;
    font-size: 12.5px;
    color: #8891a3;
}
.ts-settings-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ts-settings-sheet .ts-settings-form-field.ts-settings-form-short {
    flex: 0 0 90px !important;
    width: 90px !important;
    max-width: 90px !important;
}
.ts-settings-form-divider {
    color: #5f6368;
    font-size: 13.5px;
    white-space: nowrap;
}
.ts-settings-row-label-with-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ts-settings-form-info {
    width: 15px;
    height: 15px;
    color: #9aa3b2;
    flex-shrink: 0;
}
.ts-settings-form-link {
    color: #2563eb;
    font-size: 13.5px;
    text-decoration: none;
}
.ts-settings-form-link:hover {
    text-decoration: underline;
}
@media (max-width: 560px) {
    .ts-settings-row {
        flex-wrap: wrap;
    }
    .ts-settings-form-field {
        width: 100%;
    }
}
.ts-settings-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}
.ts-settings-form-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid #d5dde8;
    border-radius: 6px;
    background: #ffffff;
    color: #203040;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}
.ts-settings-form-btn:hover {
    background: #f3f4f6;
    border-color: #bfdbfe;
}
.ts-settings-form-btn-primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}
.ts-settings-form-btn-primary:hover {
    background: #1f6fdc;
    border-color: #1f6fdc;
}

/* ----- Today-tab filter row: Groups / Direct manager / Reset all / Advanced filters (new classes: ts-today-filter-row*) ----- */
.ts-today-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}
.ts-today-filter-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-right: 2px;
}
.ts-today-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #ffffff;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ts-today-filter-chip:hover {
    background: #f8fafc;
    border-color: var(--primary);
}
.ts-today-filter-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #ffffff;
    color: var(--muted);
    cursor: not-allowed;
}
.ts-today-filter-row-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}
.ts-today-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: .85;
    padding: 0;
}
.ts-today-filter-advanced {
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: .85;
    padding: 0;
}
@media (max-width: 720px) {
    .ts-today-filter-row-right {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

/* ----- Groups / Direct manager filter dropdown panels (new classes: ts-today-filter-dd*, ts-today-filter-panel*) ----- */
.ts-today-filter-dd {
    position: relative;
}
.ts-today-filter-chip.is-open {
    border-color: var(--primary);
    color: var(--primary);
}
.ts-today-filter-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: 290px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 12px;
}
.ts-today-filter-panel--narrow {
    width: 260px;
}
.ts-today-filter-panel[hidden] {
    display: none;
}
.ts-today-filter-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ts-today-filter-panel-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ts-today-filter-panel-link svg {
    flex-shrink: 0;
}
.ts-today-filter-panel-link:hover {
    background: #f3f4f6;
}
.ts-today-filter-panel-search {
    position: relative;
    margin-bottom: 8px;
}
.ts-today-filter-panel-search input {
    width: 100%;
    height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    font-size: 12.5px;
    outline: none;
}
.ts-today-filter-panel-search input:focus {
    border-color: var(--primary);
}
.ts-today-filter-panel-search svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-light);
    pointer-events: none;
}
.ts-today-filter-panel-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ts-today-filter-panel-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 4px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.ts-today-filter-panel-option:hover {
    background: #f3f4f6;
}
.ts-today-filter-panel-option[hidden] {
    display: none;
}
.ts-today-filter-panel-option--all {
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    padding-bottom: 9px;
    font-weight: 600;
}
.ts-today-filter-panel-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.ts-today-filter-panel-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 700;
    flex-shrink: 0;
}
.ts-today-filter-panel-note {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted-light);
}

/* ----- Settings modal: "Payroll details (Optional)" section (new classes: ts-settings-payroll-details*) ----- */
.ts-settings-payroll-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.ts-settings-payroll-details-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #172033;
}
.ts-settings-payroll-details-optional {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #9aa3b2;
}
.ts-settings-row-plain {
    justify-content: space-between;
}
.ts-settings-row-plain label {
    flex: 1 0 auto !important;
    width: auto !important;
    min-width: fit-content;
    white-space: nowrap;
}

/* ----- Topbar "More" dropdown menu (new classes: ts-topbar-more-*) ----- */
.ts-topbar-more-dd {
    position: relative;
}
.ts-topbar-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 70;
    width: 200px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.ts-topbar-more-menu[hidden] {
    display: none;
}
.ts-topbar-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: not-allowed;
    opacity: .6;
}
.ts-topbar-more-item svg {
    flex-shrink: 0;
    color: var(--muted);
}
.ts-topbar-more-item.ts-topbar-more-item-active {
    cursor: pointer;
    opacity: 1;
}
.ts-topbar-more-item.ts-topbar-more-item-active:hover {
    background: #f3f4f6;
}
.ts-topbar-more-item--danger {
    color: var(--danger);
}
.ts-topbar-more-item--danger svg {
    color: var(--danger);
}

/* ----- "Choose assignees" sheet (new classes: ts-assignees-*) ----- */
.ts-assignees-card {
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    padding: 4px 20px;
}
.ts-assignees-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
}
.ts-assignees-row-bordered {
    border-top: 1px solid #e4e9f0;
}
.ts-assignees-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #172033;
}
.ts-assignees-row-label svg {
    color: #334155;
    flex-shrink: 0;
}
.ts-assignees-row-label strong {
    font-size: 14.5px;
    font-weight: 700;
}
.ts-assignees-pick-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: #ffffff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ts-assignees-pick-link:hover {
    background: var(--primary-soft);
}
.ts-assignees-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 6px;
}
.ts-assignees-tags:empty {
    display: none;
}
.ts-assignees-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 14px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}
.ts-assignees-tag button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--primary);
    cursor: pointer;
}
.ts-assignees-tag button:hover {
    background: rgba(37, 99, 235, .15);
}
.ts-assignees-helper {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--muted-light);
}
.ts-assignees-helper[hidden] {
    display: none;
}
.ts-assignees-total {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin: 20px auto 0;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 10px;
}
.ts-assignees-total strong {
    font-size: 22px;
    font-weight: 800;
    color: #172033;
}
.ts-assignees-total span {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.ts-settings-sheet-footer--end {
    justify-content: flex-end;
}

/* ----- Today-tab bulk selection bar: "Actions" dropdown + "N selected" (new classes: ts-today-bulk-*) ----- */
.ts-today-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}
.ts-today-bulk-dd {
    position: relative;
}
.ts-today-bulk-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.ts-today-bulk-actions-btn:hover {
    background: #1f6fdc;
}
.ts-today-bulk-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 70;
    width: 260px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.ts-today-bulk-menu .ts-topbar-more-item {
    white-space: normal;
    height: auto;
    min-height: 38px;
    padding: 8px 10px;
    line-height: 1.3;
}
.ts-today-bulk-menu[hidden] {
    display: none;
}
.ts-today-bulk-count {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.ts-today-bulk-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.ts-today-bulk-clear:hover {
    background: #f3f4f6;
    color: var(--text);
}

/* ----- "Add Shift" drawer body (new classes: ts-addshift-*); the drawer shell itself
   reuses the existing .schedule-work-drawer / -header / -footer classes unchanged. ----- */
.ts-addshift-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ts-addshift-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.ts-addshift-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #172033;
}
.ts-addshift-row > label {
    flex-shrink: 0;
    width: 50px;
    font-size: 15px;
    font-weight: 500;
    color: #172033;
}
.ts-addshift-datetime {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.ts-addshift-datetime input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    background: #ffffff;
    font-size: 15px;
    font-weight: 400;
    color: #172033;
}
.ts-addshift-datetime span {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    flex-shrink: 0;
}
.ts-addshift-datetime input[type="time"] {
    width: 150px;
    flex-shrink: 0;
    height: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #172033;
    padding: 0 8px;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    background: #ffffff;
}
.ts-addshift-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--primary-soft);
    border-radius: 10px;
}
.ts-addshift-total span {
    font-size: 16px;
    font-weight: 400;
    color: #172033;
}
.ts-addshift-total strong {
    font-size: 16px;
    font-weight: 400;
    color: #172033;
}
.ts-addshift-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ts-addshift-section-head strong {
    font-size: 16px;
    font-weight: 700;
    color: #172033;
}
.ts-addshift-add-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: #ffffff;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ts-addshift-add-link:hover {
    background: var(--primary-soft);
}
.ts-addshift-breaks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ts-addshift-breaks-empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted-light);
}
.ts-addshift-break-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
}
.ts-addshift-break-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ts-addshift-break-name {
    border: 0;
    background: none;
    padding: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #172033;
    min-width: 0;
}
.ts-addshift-break-unpaid {
    font-size: 12px;
    color: var(--muted-light);
}
.ts-addshift-break-min {
    width: 48px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 12.5px;
    text-align: center;
    flex-shrink: 0;
}
.ts-addshift-break-row > span {
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}
.ts-addshift-break-time {
    width: 115px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 12.5px;
    flex-shrink: 0;
}
.ts-addshift-break-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}
.ts-addshift-break-remove:hover {
    background: #e5e7eb;
    color: var(--danger);
}
.ts-addshift-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.ts-addshift-section > strong {
    font-size: 16px;
    font-weight: 700;
    color: #172033;
}
.ts-addshift-attach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
}
.ts-addshift-attach-icon:hover {
    background: var(--primary-soft);
}
.ts-addshift-attach-title {
    font-size: 16px;
    font-weight: 500;
    color: #172033;
}
.ts-addshift-note-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #172033;
}
.ts-addshift-note-label svg {
    color: var(--primary);
    flex-shrink: 0;
}
.ts-addshift-note {
    width: 100%;
    height: 50px;
    padding: 0 12px;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    font-size: 16px;
    color: #172033;
    font-family: inherit;
    resize: none;
}
.ts-addshift-note::placeholder {
    color: #8891a3;
}
.ts-addshift-drawer > .schedule-work-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e4e9f0;
}
.ts-addshift-drawer .ts-addshift-close {
    margin-left: auto;
    border: 0;
    background: none;
    color: #475569;
    padding: 4px;
    cursor: pointer;
}
.ts-addshift-title {
    font-size: 17px;
}
.ts-addshift-drawer .ts-addshift-save {
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
}
.ts-addshift-users-label {
    margin: 0;
    font-size: 14.5px;
    color: #172033;
}
.ts-addshift-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ts-addshift-user-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
}
.ts-addshift-user-chip--muted {
    background: #f1f5f9;
    color: var(--muted);
}

/* ----- "Create a group chat" dialog (new classes: ts-groupchat-*) ----- */
.ts-groupchat-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .45);
}
.ts-groupchat-backdrop[hidden] {
    display: none;
}
.ts-groupchat-dialog {
    position: relative;
    width: 100%;
    max-width: 605px;
    padding: 44px 48px 40px;
    background: #ffffff;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .2);
}
.ts-groupchat-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    border: 0;
    background: none;
    color: #64748b;
    cursor: pointer;
}
.ts-groupchat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #e8f1fd;
    color: #2563eb;
}
.ts-groupchat-dialog h3 {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    color: #172033;
}
.ts-groupchat-dialog p {
    margin: 0 auto 26px;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.5;
    color: #2b3440;
}
.ts-groupchat-name {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: #172033;
}
.ts-groupchat-name::placeholder {
    color: #8891a3;
}
.ts-groupchat-name:focus {
    outline: none;
    border-color: #2563eb;
}
.ts-groupchat-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 48px;
    margin-top: 26px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.ts-groupchat-confirm:disabled {
    background: #e5e9f0;
    color: #8891a3;
    cursor: not-allowed;
}

/* ----- "Send chat message" dialog (new classes: ts-sendmsg-*) ----- */
.ts-sendmsg-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .45);
}
.ts-sendmsg-backdrop[hidden] {
    display: none;
}
.ts-sendmsg-dialog {
    position: relative;
    width: 611px;
    max-width: 100%;
    padding: 40px 96px 20px;
    background: #ffffff;
    border-radius: 16px;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .2);
}
.ts-sendmsg-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    border: 0;
    background: none;
    color: #64748b;
    cursor: pointer;
}
.ts-sendmsg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #e6f3ff;
    color: #2998ff;
}
.ts-sendmsg-dialog h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #203040;
}
.ts-sendmsg-dialog p {
    margin: 0 auto 16px;
    font-size: 15px;
    line-height: 1.45;
    color: #203040;
}
.ts-sendmsg-text {
    display: block;
    width: 312px;
    max-width: 100%;
    height: 52px;
    margin: 0 auto;
    padding: 6px 12px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #203040;
    resize: none;
    box-sizing: border-box;
}
.ts-sendmsg-text::placeholder {
    color: #8891a3;
}
.ts-sendmsg-text:focus {
    outline: none;
    border-color: #2998ff;
}
.ts-sendmsg-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 149px;
    height: 40px;
    margin-top: 16px;
    padding: 10px 18px;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: #2998ff;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ts-sendmsg-send:disabled {
    background: #e5e9f0;
    color: #8891a3;
    cursor: not-allowed;
}
.ts-sendmsg-discard {
    display: block;
    margin: 10px auto 0;
    border: 0;
    background: none;
    color: #2998ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ----- Add Shift drawer: measured from the Connecteam panel (overrides, new classes only) ----- */
.schedule-work-drawer.ts-addshift-drawer {
    width: 628px;
    right: -650px;
    font-family: "Noto Sans", sans-serif;
    color: #203040;
}
.schedule-work-drawer.ts-addshift-drawer.open {
    right: 0;
}
.ts-addshift-drawer .ts-addshift-body {
    padding: 24px 40px;
    gap: 16px;
}
.ts-addshift-drawer .ts-addshift-row > label,
.ts-addshift-drawer .ts-addshift-datetime span,
.ts-addshift-drawer .ts-addshift-total span,
.ts-addshift-drawer .ts-addshift-total strong,
.ts-addshift-drawer .ts-addshift-users-label,
.ts-addshift-drawer .ts-addshift-note-label,
.ts-addshift-drawer .ts-addshift-attach-title,
.ts-addshift-drawer .ts-addshift-section-head strong {
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    color: #203040;
}
.ts-addshift-drawer .ts-addshift-datetime input[type="date"],
.ts-addshift-drawer .ts-addshift-datetime input[type="time"] {
    height: 40px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    color: #203040;
}
.ts-addshift-drawer .ts-addshift-total {
    background: #f6f7f7;
    border-radius: 8px;
    padding: 16px;
}
.ts-addshift-drawer .ts-addshift-break-row {
    background: #f6f7f7;
    padding: 16px;
    border-radius: 8px;
}
.ts-addshift-drawer .ts-addshift-break-name,
.ts-addshift-drawer .ts-addshift-break-row > span,
.ts-addshift-drawer .ts-addshift-break-min,
.ts-addshift-drawer .ts-addshift-break-time {
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    color: #203040;
}
.ts-addshift-drawer .ts-addshift-title {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #203040;
}
.ts-addshift-drawer .ts-addshift-save {
    height: 40px;
    padding: 10px 20px;
    background: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* ----- Add Shift drawer width/padding corrected from the Connecteam panel (504px, 32px padding) ----- */
.schedule-work-drawer.ts-addshift-drawer {
    width: 504px;
    right: -520px;
}
.schedule-work-drawer.ts-addshift-drawer.open {
    right: 0;
}
.ts-addshift-drawer .ts-addshift-body {
    padding: 24px 32px;
}

/* ----- Add Shift: user list as avatar rows and footer divider, from the Connecteam panel ----- */
.ts-addshift-drawer .ts-addshift-users {
    flex-direction: column;
    gap: 19px;
}
.ts-addshift-drawer .ts-addshift-user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #203040;
    font-size: 14px;
    font-weight: 400;
}
.ts-addshift-drawer .ts-addshift-user-chip::before {
    content: "";
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e6f3ff;
    flex-shrink: 0;
}
.ts-addshift-drawer .ts-addshift-user-chip--muted::before {
    display: none;
}
.ts-addshift-drawer > .schedule-work-drawer-footer {
    padding: 16px 32px;
    border-top: 1px solid #e4e9f0;
}

.ts-addshift-drawer .ts-addshift-user-chip::before {
    content: attr(data-initial);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e6f3ff;
    color: #2998ff;
    font-size: 14px;
    font-weight: 600;
}

/* ----- Add Break drawer (new classes: ts-addbreak-*). Values from the Connecteam break panel. ----- */
.schedule-work-drawer.ts-addbreak-drawer {
    width: 504px;
    right: -520px;
    font-family: "Noto Sans", sans-serif;
    color: #203040;
}
.schedule-work-drawer.ts-addbreak-drawer.open {
    right: 0;
}
.ts-addbreak-drawer > .schedule-work-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid #e4e9f0;
}
.ts-addbreak-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #475569;
}
.ts-addbreak-close {
    border: 0;
    background: none;
    color: #475569;
    padding: 4px;
    cursor: pointer;
}
.ts-addbreak-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ts-addbreak-top {
    display: flex;
    gap: 21px;
    align-items: stretch;
}
.ts-addbreak-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ts-addbreak-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ts-addbreak-row > label {
    flex: 0 0 38px;
    width: 38px;
    font-size: 14px;
    color: #203040;
}
.ts-addbreak-type {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #ff3d7f;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}
.ts-addbreak-dt {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.ts-addbreak-dt input[type="date"] {
    flex: 0 0 95px;
    width: 95px;
    min-width: 95px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #203040;
    box-sizing: border-box;
}
.ts-addbreak-dt input[type="time"] {
    flex: 0 0 94px;
    width: 94px;
    min-width: 94px;
    height: 40px;
    padding: 0 6px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    text-align: center;
    color: #203040;
    box-sizing: border-box;
}
.ts-addbreak-dt > span {
    font-size: 14px;
    color: #203040;
    flex-shrink: 0;
}
.ts-addbreak-total {
    width: 139px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    background: #f4f1ff;
    padding: 16px 12px;
}
.ts-addbreak-total > span {
    font-size: 14px;
    color: #5b4fd8;
}
.ts-addbreak-total > strong {
    font-size: 36px;
    font-weight: 700;
    color: #5b4fd8;
}
.ts-addbreak-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #e4e9f0;
}
.ts-addbreak-note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2998ff;
}
.ts-addbreak-note-head > strong {
    font-size: 16px;
    font-weight: 500;
    color: #203040;
}
.ts-addbreak-note {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #203040;
    resize: none;
    box-sizing: border-box;
}
.ts-addbreak-note::placeholder {
    color: #8891a3;
}
.ts-addbreak-users-label {
    margin: 0;
    font-size: 14px;
    color: #203040;
}
.ts-addbreak-users {
    display: flex;
    flex-direction: column;
    gap: 19px;
}
.ts-addbreak-user {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #203040;
}
.ts-addbreak-user::before {
    content: attr(data-initial);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e6f3ff;
    color: #2998ff;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.ts-addbreak-user--muted::before {
    display: none;
}
.ts-addbreak-drawer > .schedule-work-drawer-footer {
    padding: 16px 32px;
    border-top: 1px solid #e4e9f0;
}
.ts-addbreak-save {
    height: 40px;
    padding: 10px 20px;
    background: #2998ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

/* ----- Add Break: text date/time boxes matching the Connecteam panel ----- */
.ts-addbreak-date {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 95px;
    width: 95px;
}
.ts-addbreak-date input {
    width: 100%;
    height: 40px;
    padding: 0 26px 0 8px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-size: 14px;
    color: #203040;
    box-sizing: border-box;
}
.ts-addbreak-date svg {
    position: absolute;
    right: 7px;
    color: #64748b;
    pointer-events: none;
}
.ts-addbreak-dt input[type="text"][data-ts-addbreak-start-time],
.ts-addbreak-dt input[type="text"][data-ts-addbreak-end-time] {
    flex: 0 0 94px;
    width: 94px;
    height: 40px;
    text-align: center;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-size: 14px;
    color: #203040;
    box-sizing: border-box;
}

/* ----- "Lock N selected days?" dialog (new classes: ts-bulklock-*) ----- */
.ts-bulklock-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .45);
}
.ts-bulklock-backdrop[hidden] {
    display: none;
}
.ts-bulklock-dialog {
    position: relative;
    width: 471px;
    max-width: 100%;
    padding: 32px 40px 28px;
    background: #ffffff;
    border-radius: 16px;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .2);
    box-sizing: border-box;
}
.ts-bulklock-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    border: 0;
    background: none;
    color: #64748b;
    cursor: pointer;
}
.ts-bulklock-icon {
    display: inline-flex;
    margin-bottom: 14px;
    color: #2998ff;
}
.ts-bulklock-dialog h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #203040;
}
.ts-bulklock-dialog p {
    margin: 0 auto;
    max-width: 440px;
    font-size: 16px;
    line-height: 1.5;
    color: #203040;
}
.ts-bulklock-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 44px;
    margin-top: 24px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #2998ff;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ----- Lock dialog: exact values from Connecteam tooltips (CSS px) ----- */
.ts-bulklock-dialog {
    width: 471px;
    padding: 36px 32px 32px;
}
.ts-bulklock-icon {
    margin-bottom: 16px;
    color: #2998ff;
}
.ts-bulklock-icon svg {
    width: 72px;
    height: 72px;
}
.ts-bulklock-dialog h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #203040;
}
.ts-bulklock-dialog p {
    max-width: 407px;
    font-size: 14px;
    line-height: 1.45;
    color: #203040;
}
.ts-bulklock-confirm {
    min-width: 58px;
    height: 40px;
    margin-top: 24px;
    padding: 10px;
    background: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* ----- Create a group chat dialog: exact values from Connecteam tooltips (CSS px) ----- */
.ts-groupchat-dialog {
    width: 484px;
    padding: 32px 32px 28px;
    font-family: "Noto Sans", sans-serif;
    box-sizing: border-box;
}
.ts-groupchat-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    padding: 16px;
    box-sizing: border-box;
    background: #eaf5ff;
    color: #2998ff;
}
.ts-groupchat-dialog h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #203040;
}
.ts-groupchat-dialog p {
    max-width: 420px;
    margin: 0 auto 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #203040;
}
.ts-groupchat-name {
    width: 320px;
    max-width: 100%;
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}
.ts-groupchat-confirm {
    min-width: 81px;
    height: 40px;
    margin-top: 20px;
    padding: 10px;
    background: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.ts-groupchat-confirm:disabled {
    background: #e5e9f0;
    color: #8891a3;
}

.ts-groupchat-name {
    display: block;
    margin: 0 auto;
}

/* ----- Today table: keep the lock / chat / column-picker columns pinned to the right edge ----- */
.ts-today-table .ts-today-col-columns,
.ts-today-table .ts-today-row-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: -1px 0 0 #e4e9f0;
}
.ts-today-table thead .ts-today-col-columns {
    background: #f6f7f9;
    z-index: 3;
}
.ts-today-table .ts-today-row-actions {
    white-space: nowrap;
}

.ts-today-table.custom-table {
    overflow: visible;
}

/* ----- "Lock days in timesheet" dialog (new classes: ts-rowlock-*). Sizes estimated from screenshot. ----- */
.ts-rowlock-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .45);
}
.ts-rowlock-backdrop[hidden] {
    display: none;
}
.ts-rowlock-dialog {
    position: relative;
    width: 730px;
    max-width: 100%;
    padding: 40px 48px 32px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    color: #203040;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .2);
}
.ts-rowlock-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    border: 0;
    background: none;
    color: #64748b;
    cursor: pointer;
}
.ts-rowlock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: #e8f5ff;
    color: #2998ff;
}
.ts-rowlock-dialog h3 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: #203040;
}
.ts-rowlock-dialog p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.5;
    color: #203040;
}
.ts-rowlock-confirm {
    min-width: 166px;
    height: 48px;
    margin-top: 8px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #2998ff;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.ts-rowlock-hide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 15px;
    color: #203040;
    cursor: pointer;
}

/* ----- Lock days in timesheet dialog: exact values from Connecteam tooltips (CSS px) ----- */
.ts-rowlock-dialog {
    width: 600px;
    padding: 32px 40px 28px;
}
.ts-rowlock-icon {
    width: 90px;
    height: 90px;
    margin-bottom: 0;
    border-radius: 16px;
}
.ts-rowlock-icon svg {
    width: 56px;
    height: 56px;
}
.ts-rowlock-dialog h3 {
    margin: 15px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #203040;
}
.ts-rowlock-dialog p {
    margin: 5px 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: #203040;
}
.ts-rowlock-confirm {
    min-width: 132px;
    height: 40px;
    margin-top: 0;
    padding: 10px;
    background: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.ts-rowlock-hide {
    margin-top: 16px;
    font-size: 14px;
}

/* ----- "Add more users" dropdown (new classes: ts-today-add-*) ----- */
.ts-today-add-dd {
    position: relative;
    display: inline-block;
}
.ts-today-add-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 200px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
}
.ts-today-add-menu[hidden] {
    display: none;
}
.ts-today-add-item {
    display: block;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 15px;
    color: #203040;
    text-decoration: none;
}
.ts-today-add-item:hover {
    background: #f3f6fb;
}

/* ----- Add users / Add admins sheets (new classes: ts-people-*) ----- */
.ts-people-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .28s ease;
}
.ts-people-backdrop[hidden] {
    display: none;
}
.ts-people-backdrop.is-open {
    opacity: 1;
}
.ts-people-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    font-family: "Noto Sans", sans-serif;
    color: #203040;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.ts-people-backdrop.is-open .ts-people-sheet {
    transform: translateY(0);
}
.ts-people-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
    border-bottom: 1px solid #e4e9f0;
    font-size: 16px;
    color: #64748b;
}
.ts-people-learn {
    font-size: 15px;
    color: #2998ff;
    text-decoration: none;
}
.ts-people-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 40px 20px;
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.ts-people-note {
    margin: 0 0 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.ts-people-head,
.ts-people-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 36px;
    gap: 14px;
    align-items: center;
}
.ts-people-head.is-admin,
.ts-people-row.is-admin {
    grid-template-columns: 1fr 1fr 1.2fr 1.1fr 1fr 36px;
}
.ts-people-head {
    padding: 14px 16px;
    background: #f6f7f9;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}
.ts-people-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}
.ts-people-row input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: #203040;
    box-sizing: border-box;
}
.ts-people-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 15px;
}
.ts-people-phone input {
    height: 36px;
    padding: 0;
    border: 0;
}
.ts-people-remove {
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
}
.ts-people-add {
    display: block;
    margin: 26px auto 0;
    height: 46px;
    padding: 0 26px;
    border: 1px solid #2998ff;
    border-radius: 999px;
    background: #ffffff;
    color: #2998ff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}
.ts-people-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 32px;
    border-top: 1px solid #e4e9f0;
}
.ts-people-invite {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.ts-people-cancel,
.ts-people-confirm {
    min-width: 120px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ts-people-cancel {
    border: 0;
    background: none;
    color: #2998ff;
}
.ts-people-confirm {
    border: 0;
    background: #2998ff;
    color: #ffffff;
}
.ts-people-confirm:disabled {
    background: #e5e9f0;
    color: #8891a3;
    cursor: not-allowed;
}

/* ----- People sheets: match Connecteam header, country code and trash icon ----- */
.ts-people-topbar {
    position: relative;
    justify-content: center;
    min-height: 64px;
}
.ts-people-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #203040;
}
.ts-people-learn {
    position: absolute;
    right: 32px;
}
.ts-people-cc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 15px;
    color: #203040;
}
.ts-people-phone {
    gap: 12px;
}
.ts-people-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}
.ts-people-remove svg {
    display: block;
}

/* ----- People sheet header: exact Connecteam tooltip values (14px, #8B939C) ----- */
.ts-people-title {
    font-size: 14px;
    font-weight: 400;
    color: #8b939c;
}

/* ----- People sheets: icon, text, and footer colors/weights matched to Connecteam ----- */
.ts-people-title svg {
    width: 20px;
    height: 20px;
    color: #8b939c;
    flex-shrink: 0;
}
.ts-people-head {
    font-size: 15px;
    font-weight: 600;
    color: #203040;
}
.ts-people-row input {
    font-size: 15px;
    color: #203040;
}
.ts-people-row input::placeholder {
    color: #8b939c;
}
.ts-people-cc,
.ts-people-phone input {
    font-size: 15px;
    color: #203040;
}
.ts-people-remove {
    color: #8b939c;
    font-size: 0;
}
.ts-people-remove svg {
    width: 18px;
    height: 18px;
    color: #8b939c;
}
.ts-people-add {
    font-size: 15px;
    font-weight: 600;
    color: #2998ff;
    border-color: #2998ff;
}
.ts-people-cancel {
    font-size: 15px;
    font-weight: 600;
    color: #2998ff;
}
.ts-people-confirm {
    font-size: 15px;
    font-weight: 600;
    background: #2998ff;
    color: #ffffff;
}
.ts-people-confirm:disabled {
    background: #e5e9f0;
    color: #8b939c;
}
.ts-people-invite {
    font-size: 15px;
    color: #203040;
}

/* ----- People sheets: shorter, full-width sheet under a Close pill (as in Connecteam) ----- */
.ts-people-backdrop {
    background: rgba(15, 23, 42, .45);
}
.ts-people-close-pill {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    height: 40px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #6b7280;
    color: #ffffff;
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    cursor: pointer;
}
.ts-people-sheet {
    top: 80px;
    border-radius: 16px 16px 0 0;
}
.ts-people-body {
    max-width: none;
    padding: 28px 44px 20px;
}

/* ----- People sheets: values taken from Connecteam tooltips (font, color, height, padding, margin) ----- */
.ts-people-note {
    margin: 0 0 24px;
    font-size: 16px;
    font-weight: 600;
    color: #203040;
}
.ts-people-head {
    font-size: 15px;
    font-weight: 600;
    color: #203040;
}
.ts-people-row input,
.ts-people-phone {
    height: 48px;
    padding: 0 14px;
    font-size: 15px;
    color: #203040;
}
.ts-people-add {
    height: 46px;
    margin: 26px auto 0;
    padding: 0 26px;
    font-size: 15px;
    color: #2998ff;
    background: #ffffff;
}

.ts-people-row .ts-people-phone input {
    flex: 1;
    width: auto;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: #203040;
    outline: none;
}

.ts-people-row .ts-people-phone {
    position: relative;
    overflow: hidden;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    box-sizing: border-box;
}
.ts-people-row .ts-people-phone input {
    min-width: 0;
    max-width: 100%;
    background: transparent !important;
    box-shadow: none;
    box-sizing: border-box;
}

.ts-people-row > input,
.ts-people-row > .ts-people-phone {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
}

.ts-people-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-width: 262px;
    margin: 26px auto 0;
    padding: 0 26px;
    border: 1px solid #2998ff;
    border-radius: 999px;
    background: #ffffff;
    color: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
}
.ts-people-add:hover {
    background: #f0f7ff;
}

.ts-people-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-width: 0;
    margin: 26px auto 0;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.ts-people-add::before {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.ts-people-add:hover {
    background: #f0f7ff;
}

.ts-people-add::before {
    content: none;
}
.ts-people-add {
    display: flex;
    margin: 26px auto 0;
}

.ts-people-add {
    height: 46px;
    padding: 0 26px;
    border: 1px solid #2998ff;
    border-radius: 999px;
    background: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.ts-people-add:hover {
    background: #f0f7ff;
}

.ts-people-add {
    border: 1px solid #d5dde8;
    background: #ffffff;
    font-weight: 400;
}
.ts-people-add:hover {
    background: #f6f9fc;
}

.ts-people-colpick {
    display: inline-flex;
    color: #64748b;
    justify-self: end;
}

.ts-people-colpick {
    position: relative;
    cursor: pointer;
}
.ts-people-colmenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    width: 300px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    font-family: "Noto Sans", sans-serif;
    text-align: left;
    text-transform: none;
    font-weight: 400;
    cursor: default;
}
.ts-people-colmenu[hidden] {
    display: none;
}
.ts-people-colsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    color: #64748b;
}
.ts-people-colsearch input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 15px;
    color: #203040;
}
.ts-people-collist {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
}
.ts-people-colitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    font-size: 15px;
    color: #203040;
}
.ts-people-colitem input {
    width: 16px;
    height: 16px;
    accent-color: #2998ff;
}

.ts-people-colmenu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.ts-people-colpick {
    position: relative;
}
.ts-people-head,
.ts-people-row {
    gap: 12px;
}

.ts-people-row > input,
.ts-people-row > .ts-people-phone,
.ts-people-row input,
.ts-people-phone {
    height: 32px;
}
.ts-people-row > .ts-people-phone {
    display: flex;
    align-items: center;
}
.ts-people-colpick.is-open svg {
    transform: none;
}

.ts-people-colpick-open {
    display: none;
    font-size: 12px;
    line-height: 1;
}
.ts-people-colpick.is-open > svg {
    display: none;
}
.ts-people-colpick.is-open .ts-people-colpick-open {
    display: inline-block;
}
.ts-people-colmenu {
    top: calc(100% + 6px);
    width: 300px;
}

.ts-people-colpick.is-open > svg {
    display: block;
}

.ts-people-colmenu:not([hidden]) {
    position: fixed;
    top: 150px;
    right: 40px;
    left: auto;
    transform: none;
    z-index: 4000;
}

.ts-people-xcol[hidden],
.ts-people-xcell[hidden] {
    display: none;
}
.ts-people-head.is-admin,
.ts-people-row.is-admin {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) 36px;
}
.ts-people-head.is-admin > span:last-child,
.ts-people-row.is-admin > button:last-child {
    grid-column: auto;
}
.ts-people-head > span:not([hidden]) { min-width: 0; }

.ts-people-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    width: 100%;
    border: 0;
    background: none;
    color: #2998ff;
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.ts-people-upload {
    flex-direction: row;
    gap: 8px;
    height: 36px;
    width: auto;
    margin: 0 auto;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #2998ff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
.ts-people-upload svg {
    flex-shrink: 0;
}
.ts-people-row.is-admin > button.ts-people-upload {
    border: 0;
}

.ts-people-head.is-admin,
.ts-people-row.is-admin {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
}
.ts-people-head.is-admin,
.ts-people-row.is-admin {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) 36px;
}

.ts-people-upload {
    height: 48px;
    width: 100%;
    margin: 0;
    padding: 0 14px;
    justify-content: center;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
}

.ts-people-row.is-admin > button.ts-people-upload,
.ts-people-row > button.ts-people-upload {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
}

.ts-people-row > .ts-people-select,
.ts-people-row.is-admin > button.ts-people-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    color: #203040;
    text-align: left;
    cursor: pointer;
}
.ts-people-select[hidden] { display: none; }
.ts-people-select.is-placeholder span { color: #8b939c; }
.ts-people-select .ts-people-chev { flex-shrink: 0; color: #5d6b7a; }
.ts-people-select-lead { display: inline-flex; align-items: center; gap: 8px; }

.ts-people-row > .ts-people-iconfield {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
}
.ts-people-iconfield[hidden] { display: none; }
.ts-people-iconfield input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 14px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    box-sizing: border-box;
}
.ts-people-iconfield svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #5d6b7a;
    pointer-events: none;
}

.ts-people-select.is-open { background: #f3f5f8; }
.ts-people-select.is-open .ts-people-chev { transform: rotate(180deg); }
.ts-people-optmenu {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(32, 48, 64, 0.18);
    padding: 10px;
    box-sizing: border-box;
    font-family: inherit;
}
.ts-people-optsearch { position: relative; }
.ts-people-optsearch input {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 12px;
    border: 1px solid #2998ff;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 15px;
    outline: 0;
}
.ts-people-optsearch svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #5d6b7a; }
.ts-people-optlist { max-height: 220px; overflow-y: auto; padding: 6px 0; }
.ts-people-opt {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    color: #203040;
    cursor: pointer;
    border-radius: 6px;
}
.ts-people-opt:hover { background: #f3f5f8; }
.ts-people-optfoot { border-top: 1px solid #e6ebf1; padding-top: 10px; }
.ts-people-optadd {
    width: 100%;
    height: 40px;
    border: 1px solid #d5dde8;
    border-radius: 20px;
    background: #fff;
    color: #2998ff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.ts-people-iconfield input[readonly] { cursor: pointer; }
.ts-people-cal {
    position: fixed;
    z-index: 100000;
    width: 352px;
    padding: 14px 16px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(32, 48, 64, 0.18);
    box-sizing: border-box;
    font-family: inherit;
}
.ts-people-calhead { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ts-people-calsel select {
    border: 0;
    background: transparent;
    color: #2998ff;
    font-family: inherit;
    font-size: 17px;
    cursor: pointer;
    outline: 0;
}
.ts-people-calnav { margin-left: auto; display: inline-flex; gap: 10px; }
.ts-people-calnav button {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #5d6b7a;
    cursor: pointer;
}
.ts-people-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; text-align: center; }
.ts-people-caldow { font-size: 14px; color: #5d6b7a; padding: 6px 0; }
.ts-people-calday {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 16px;
    color: #203040;
    cursor: pointer;
}
.ts-people-calday:hover:not(:disabled) { background: #f3f5f8; }
.ts-people-calday.is-today { border-color: #2998ff; }
.ts-people-calday.is-sel { background: #2998ff; color: #fff; }
.ts-people-calday.is-off { color: #b8c0c9; cursor: default; }

/* Admin sheet: fixed column width, horizontal scroll when more columns are added */
.ts-people-sheet { --ts-cols: 5; }
.ts-people-body { overflow-x: auto; }
.ts-people-head.is-admin,
.ts-people-row.is-admin {
    grid-template-columns: repeat(var(--ts-cols), minmax(230px, 1fr)) 36px;
    box-sizing: border-box;
}
.ts-people-row.is-admin {
    min-width: calc(var(--ts-cols) * 242px + 36px);
}
.ts-people-head.is-admin {
    min-width: calc(var(--ts-cols) * 242px + 68px);
}
.ts-people-head.is-admin > .ts-people-colpick {
    position: sticky;
    right: 0;
    background: #f6f7f9;
}

.ts-people-colclear {
    display: block;
    width: calc(100% - 16px);
    height: 40px;
    margin: 8px;
    border: 1px solid #d5dde8;
    border-radius: 20px;
    background: #fff;
    color: #2998ff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.ts-people-opt { display: flex; align-items: center; gap: 12px; }
.ts-people-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4aa3ff;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.ts-people-sheet:not(:has(input[aria-label="Email"])) { --ts-cols: 3; }

/* Default view: fixed 300px columns, centered; scrolls sideways when more columns are added */
.ts-people-head.is-admin,
.ts-people-row.is-admin {
    grid-template-columns: repeat(var(--ts-cols), 300px) 36px;
    column-gap: 30px;
    width: max-content;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
}
.ts-people-row.is-admin { padding-top: 0; padding-bottom: 0; }

/* Header spans columns + trash slot + column picker; rows sit left inside the same box */
.ts-people-head.is-admin {
    grid-template-columns: repeat(var(--ts-cols), 300px) 36px 80px;
    width: calc(var(--ts-cols) * 330px + 190px);
    margin-left: auto;
    margin-right: auto;
}
.ts-people-head.is-admin > .ts-people-colpick {
    grid-column: -2 / -1;
    justify-self: end;
}
.ts-people-rows {
    width: calc(var(--ts-cols) * 330px + 190px);
    margin-left: auto;
    margin-right: auto;
}
.ts-people-row.is-admin {
    margin-left: 0;
    margin-right: 0;
}

/* Activity card: timeline entries like Connecteam */
.ts-today-activity { padding: 28px; }
.ts-today-activity-title { padding-bottom: 20px; font-size: 18px; }
.ts-today-activity-body { padding-top: 32px; }
.ts-act-day { margin-left: 22px; }
.ts-act-chip {
    display: inline-block;
    padding: 12px 11px;
    border-radius: 8px;
    background: #f1f3f6;
    font-size: 15px;
    color: #203040;
}
.ts-act-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 22px;
    padding: 20px 0 20px 22px;
    border-left: 1px solid #e3e8ef;
    margin-left: 22px;
}
.ts-act-dot {
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #2998ff;
}
.ts-act-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.ts-act-icon-clock { background: #6c7cf0; color: #fff; }
.ts-act-icon-gear { background: #eaf3ff; color: #2998ff; }
.ts-act-text { font-size: 17px; line-height: 1.5; color: #203040; max-width: 700px; }
.ts-act-text a { color: #2998ff; text-decoration: none; }

.ts-act-text,
.ts-act-chip { font-size: 14px; }

/* Small text is 14px across the people sheets and Activity */
.ts-people-head,
.ts-people-row input,
.ts-people-row .ts-people-phone input,
.ts-people-cc,
.ts-people-select,
.ts-people-iconfield input,
.ts-people-upload,
.ts-people-add,
.ts-people-cancel,
.ts-people-confirm,
.ts-people-invite,
.ts-people-colitem,
.ts-people-colclear,
.ts-people-opt,
.ts-people-optsearch input,
.ts-people-optadd,
.ts-people-calday,
.ts-people-caldow,
.ts-people-calsel select,
.ts-act-text,
.ts-act-chip { font-size: 14px; }
.ts-people-row.is-admin > button.ts-people-select,
.ts-people-row > .ts-people-select,
.ts-people-row.is-admin > button.ts-people-upload { font-size: 14px; }

/* Activity entry metrics taken from Connecteam devtools */
.ts-act-item {
    gap: 8px;
    padding: 23px 0 0 22px;
    align-items: flex-start;
}
.ts-act-dot {
    width: 7px;
    height: 7px;
    left: -3px;
    top: 50%;
    margin-top: 10px;
    background: #2998ff;
}
.ts-act-icon {
    width: 32px;
    height: 32px;
    padding: 6px;
    box-sizing: border-box;
}
.ts-act-icon svg { width: 20px; height: 20px; }
.ts-act-icon-clock { background: #607af0; }
.ts-act-icon-gear { background: #eaf5ff; }
.ts-act-text { margin-left: 4px; }

/* "Show me the map" live view */
.ts-today-map.is-live { display: block; padding: 0; height: 600px; background: #dfeef3; }
.ts-today-map.is-live > .ts-today-map-card { display: none; }
.ts-live { position: absolute; inset: 0; }
.ts-live[hidden] { display: none; }
.ts-live-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ts-live-panel {
    position: absolute; left: 18px; top: 18px; bottom: 0; width: 370px;
    padding: 16px 12px; background: #fff; border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .12); box-sizing: border-box; font-size: 14px; color: #203040;
}
.ts-live-title { padding: 6px 10px 14px; font-size: 15px; font-weight: 700; }
.ts-live-help { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid #8b939c; border-radius: 50%; font-size: 11px; color: #8b939c; margin-left: 4px; }
.ts-live-tools { display: flex; gap: 12px; align-items: center; padding: 0 0 0 0; }
.ts-live-search { position: relative; flex: 1; }
.ts-live-search input { width: 100%; height: 40px; padding: 0 40px 0 14px; border: 1px solid #d5dde8; border-radius: 10px; box-sizing: border-box; font-size: 14px; }
.ts-live-search svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #5d6b7a; }
.ts-live-all { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: #2998ff; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.ts-live-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 70px; padding: 0 24px; text-align: center; font-size: 14px; color: #4b5666; }
.ts-live-empty strong { color: #203040; font-size: 15px; }
.ts-live-promo {
    position: absolute; right: 18px; top: 18px; display: flex; gap: 20px; width: 700px; max-width: calc(100% - 430px);
    padding: 24px; background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(15, 23, 42, .12); box-sizing: border-box; font-size: 14px;
}
.ts-live-promo[hidden] { display: none; }
.ts-live-promo-x { position: absolute; right: 14px; top: 8px; border: 0; background: none; font-size: 24px; color: #8b939c; cursor: pointer; }
.ts-live-promo-art { flex-shrink: 0; width: 140px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #cfeee4 0%, #e8f6f1 60%, transparent 70%); }
.ts-live-promo-body strong { display: block; margin-bottom: 4px; font-size: 15px; color: #203040; }
.ts-live-promo-body p { margin: 0 0 14px; color: #4b5666; }
.ts-live-promo-btn { display: inline-block; padding: 9px 16px; border: 1px solid #d5dde8; border-radius: 20px; color: #2998ff; text-decoration: none; }

.ts-tsx-requests { padding: 0 20px; font-size: 14px; color: #f59e0b; font-weight: 500; }

.ts-tsx-requests {
    color: #ff9500;
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
}
.ts-tsx-export,
.ts-tsx-export-btn {
    height: 40px;
    padding: 10px;
    background: #ffffff;
}

.ts-tsx-export-wrap > .ts-tsx-pill[data-ts-export-toggle] {
    height: 40px;
    padding: 10px;
    background: #ffffff;
}

.ts-tsx-requests,
.ts-tsx-export-wrap > .ts-tsx-pill[data-ts-export-toggle] { font-weight: 400; }

.ts-tsx-requests.ts-tsx-requests {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid #ffe3c2;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: none;
    color: #ff9500;
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
}
.ts-tsx-requests.ts-tsx-requests:hover { background: #fff8ee; }

/* View requests: final override (beats the earlier !important toolbar rules) */
.ts-today-toolbar .ts-today-requests.ts-tsx-requests.ts-tsx-requests,
.ts-tsx-toolbar .ts-tsx-requests.ts-today-requests.ts-tsx-requests,
.ts-toolbar .ts-tsx-requests.ts-today-requests.ts-tsx-requests {
    height: 40px !important;
    padding: 0 20px !important;
    gap: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #ff9500 !important;
    background: #ffffff !important;
    border: 1px solid #ffe3c2 !important;
    box-shadow: none !important;
}

/* Today tab: "+" filter picker */
.ts-today-filter-add:not(:disabled) { cursor: pointer; }
.ts-fpop {
    position: fixed; z-index: 100000; max-height: 260px; display: flex; flex-direction: column;
    padding: 10px; background: #fff; border-radius: 14px; box-shadow: 0 6px 28px rgba(15, 23, 42, .18);
    box-sizing: border-box; font-size: 15px; color: #203040;
}
.ts-fpop-search { position: relative; display: block; flex-shrink: 0; }
.ts-fpop-search input { width: 100%; height: 40px; padding: 0 44px 0 12px; border: 1px solid #2998ff; border-radius: 8px; box-sizing: border-box; font-size: 15px; outline: 0; }
.ts-fpop-search svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #5d6b7a; }
.ts-fpop-body { display: grid; grid-template-columns: 1fr 1.05fr 1.5fr 1fr; margin-top: 8px; overflow-y: auto; }
.ts-fpop-col { padding: 0 6px; border-left: 1px solid #eef1f5; }
.ts-fpop-col:first-child { border-left: 0; }
.ts-fpop-item { display: block; width: 100%; padding: 11px 8px; border: 0; border-radius: 6px; background: none; text-align: left; font-family: inherit; font-size: 15px; color: #203040; cursor: pointer; }
.ts-fpop-item:hover { background: #f3f5f8; }
.ts-fpop-chip { display: inline-flex; align-items: center; gap: 8px; }
.ts-fpop-chip button { border: 0; background: none; font-size: 18px; line-height: 1; color: #8b939c; cursor: pointer; }

.ts-tsx-chip-add:not(:disabled) { cursor: pointer; }
.ts-tsx-filterbar .ts-fpop-chip { height: 40px; padding: 0 14px; border: 1px solid #d5dde8; border-radius: 10px; background: #fff; font-size: 14px; }

.ts-today-filter-row .ts-today-filter-row-label,
.ts-tsx-filterbar .ts-tsx-filterbar-label {
    color: #8b939c !important;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.ts-today-filter-row .ts-today-filter-chip,
.ts-tsx-filterbar .ts-today-filter-chip {
    color: #8b939c !important;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.ts-today-filter-add,
.ts-tsx-chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #bcdcff;
    border-radius: 50%;
    background: #ffffff;
    color: #2998ff;
    box-shadow: none;
    box-sizing: border-box;
}
.ts-today-filter-add svg,
.ts-tsx-chip-add svg { width: 14px; height: 14px; stroke-width: 2; }
.ts-today-filter-add:hover,
.ts-tsx-chip-add:hover { background: #eef6ff; }

/* Timesheets table: Connecteam look */
.ts-tsx-grid tbody tr { height: 60px; }
.ts-tsx-grid tbody td { height: 60px; border-bottom: 1px solid #eceff3; border-top: 0; font-size: 14px; color: #203040; }
.ts-tsx-grid tbody .ts-user-avatar { width: 36px; height: 36px; margin-right: 12px; }
.ts-tsx-grid tbody .ts-grid-user-col { font-size: 14px; }
.ts-tsx-hours {
    display: inline-block;
    min-width: 104px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #e8f6f0;
    color: #203040;
    font-size: 14px;
    text-align: center;
}

/* Status pills: User submission / Admin approval */
.ts-tsx-pillstat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    background: #eceff1;
    color: #5d6b7a;
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;
}
.ts-tsx-pillstat-approved { background: #dff4e8; color: #1f8f55; }
.ts-tsx-pillstat-rejected { background: #fde5e5; color: #d64545; }
.ts-tsx-grid .ts-tsx-col-total { font-weight: 400; font-size: 14px; }

.ts-tsx-pillstat { cursor: pointer; transition: background .15s; }
.ts-tsx-pillstat:hover { background: #e1e6ea; }
.ts-tsx-pillstat-approved:hover { background: #cdeedb; }
.ts-tsx-pillstat-rejected:hover { background: #fbd5d5; }

/* Hovering a day must not move the date: + and lock are positioned outside the text */
.ts-us-datecell { position: relative; display: inline-block; gap: 0; }
.ts-us-dateadd {
    position: absolute;
    right: 100%;
    top: 50%;
    margin: -13px 10px 0 0;
    display: none;
}
.ts-us-row:hover .ts-us-dateadd { display: inline-flex; }
.ts-us-datelock {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: -7px 0 0 8px;
    display: none;
    color: #2f80ed;
}
.ts-us-row:hover .ts-us-datelock { display: inline-flex; }

/* Add Shift drawer: values from Connecteam devtools */
.ts-addshift-drawer { font-family: "Noto Sans", sans-serif; }
.ts-addshift-drawer .schedule-work-drawer-header { padding: 16px 20px; border-bottom: 1px solid #eceff3; }
.ts-addshift-drawer .ts-addshift-title { margin: 0; font-size: 14px; font-weight: 400; color: #8b939c; }
.ts-addshift-drawer .ts-addshift-close { color: #8b939c; }
.ts-addshift-drawer .ts-addshift-body { padding: 40px 20px 24px; font-size: 14px; color: #203040; }
.ts-addshift-drawer .ts-addshift-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; margin-bottom: 12px; }
.ts-addshift-drawer .ts-addshift-row label { font-size: 14px; color: #203040; font-weight: 400; }
.ts-addshift-drawer .ts-addshift-datetime { display: grid; grid-template-columns: 220px 28px 220px; align-items: center; gap: 12px; }
.ts-addshift-drawer .ts-addshift-datetime span { font-size: 14px; color: #203040; }
.ts-addshift-drawer .ts-addshift-datetime input {
    width: 100%; height: 50px; padding: 0 8px 0 16px; border: 1px solid #d5dde8; border-radius: 8px;
    background: #fff; font-family: inherit; font-size: 15px; color: #203040; box-sizing: border-box;
}
.ts-addshift-drawer .ts-addshift-datetime input[type="time"] { text-align: center; padding: 0 8px; }
.ts-addshift-drawer .ts-addshift-total {
    display: flex; justify-content: space-between; align-items: center;
    margin: 32px 0 0; padding: 16px; border-radius: 8px; background: #eaf5ff; font-size: 15px; color: #203040;
}
.ts-addshift-drawer .ts-addshift-total strong { font-weight: 400; }
.ts-addshift-drawer .ts-addshift-section-head { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 16px; }
.ts-addshift-drawer .ts-addshift-section-head strong { font-size: 15px; font-weight: 700; color: #203040; }
.ts-addshift-drawer .ts-addshift-add-link {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border: 1px solid #d5dde8; border-radius: 20px; background: #fff; color: #2998ff; font-size: 14px; cursor: pointer;
}
.ts-addshift-drawer .ts-addshift-breaks-list > * { padding: 16px; border-radius: 8px; background: #f6f7f7; }
.ts-addshift-drawer .ts-addshift-section { margin-top: 0; padding-top: 0; }
.ts-addshift-drawer .ts-addshift-attach-title { font-size: 14px; font-weight: 400; color: #203040; }
.ts-addshift-drawer .ts-addshift-note-label {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15px; color: #203040;
}
.ts-addshift-drawer .ts-addshift-note-label svg { width: 20px; height: 20px; color: #2998ff; }
.ts-addshift-drawer .ts-addshift-note {
    width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid #d5dde8; border-radius: 8px;
    font-family: inherit; font-size: 15px; color: #203040; box-sizing: border-box;
}
.ts-addshift-drawer .ts-addshift-note::placeholder { color: #8b939c; }
.ts-addshift-drawer .schedule-work-drawer-footer { padding: 16px 20px; border-top: 1px solid #eceff3; }
.ts-addshift-drawer .ts-addshift-save { height: 48px; padding: 0 20px; border-radius: 24px; font-size: 15px; font-weight: 600; }

/* Add Shift drawer: tighter spacing, !important to beat earlier drawer rules */
.ts-addshift-drawer .ts-addshift-body { padding: 40px 20px 16px !important; gap: 0 !important; }
.ts-addshift-drawer .ts-addshift-row {
    margin: 0 0 12px !important; padding: 0 !important; border: 0 !important;
    grid-template-columns: 60px 1fr !important;
}
.ts-addshift-drawer .ts-addshift-datetime { grid-template-columns: 220px 28px 1fr !important; gap: 12px !important; }
.ts-addshift-drawer .ts-addshift-datetime input { height: 50px !important; min-width: 0; }
.ts-addshift-drawer .ts-addshift-total { margin: 28px 0 0 !important; }
.ts-addshift-drawer .ts-addshift-section-head { margin: 32px 0 12px !important; }
.ts-addshift-drawer .ts-addshift-breaks-list { margin: 0 !important; }
.ts-addshift-drawer .ts-addshift-breaks-list > * { margin: 0 !important; padding: 16px !important; }
.ts-addshift-drawer .ts-addshift-section { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.ts-addshift-drawer .ts-addshift-section:first-of-type { margin-top: 24px !important; padding-top: 24px !important; border-top: 1px solid #eceff3 !important; }
.ts-addshift-drawer .ts-addshift-section .ts-addshift-section-head { margin: 0 0 16px !important; }
.ts-addshift-drawer .ts-addshift-users-label { margin: 16px 0 8px !important; }
.ts-addshift-drawer .ts-addshift-body { overflow-x: hidden !important; }

/* Add Shift drawer: close icon on the left, before the title */
.ts-addshift-drawer .schedule-work-drawer-header { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: center; gap: 12px; }
.ts-addshift-drawer .ts-addshift-close { position: static !important; margin: 0 !important; }

/* Add time off drawer */
.ts-addtimeoff-drawer { font-family: "Noto Sans", sans-serif; }
.ts-addtimeoff-drawer .schedule-work-drawer-header { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eceff3; }
.ts-addtimeoff-drawer .ts-addshift-title { margin: 0; font-size: 14px; font-weight: 400; color: #8b939c; }
.ts-addtimeoff-drawer .ts-addshift-close { position: static !important; margin: 0 !important; color: #8b939c; }
.ts-to-body { padding: 30px 20px 16px; font-size: 14px; color: #203040; }
.ts-to-row { display: grid; grid-template-columns: 188px 1fr; align-items: center; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #eceff3; }
.ts-to-row strong { font-size: 15px; font-weight: 700; }
.ts-to-select {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border: 1px solid #d5dde8;
    border-radius: 8px; background: #fff; font-family: inherit; font-size: 15px; color: #203040; box-sizing: border-box; width: 100%;
}
.ts-to-select svg { margin-left: auto; color: #8b939c; }
.ts-to-type { color: #8b939c; }
.ts-to-av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #2998ff; color: #fff; font-size: 11px; font-weight: 600; }
.ts-to-note { display: block; width: 100%; margin-top: 8px; padding: 16px 18px; border: 1px solid #d5dde8; border-radius: 8px; font-family: inherit; font-size: 15px; color: #203040; box-sizing: border-box; resize: vertical; }
.ts-to-note::placeholder { color: #203040; }
.ts-to-files { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 36px; border: 1px solid #d5dde8; border-radius: 8px; color: #2998ff; font-size: 15px; cursor: pointer; }
.ts-to-footer { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border-top: 1px solid #eceff3; }
.ts-to-submit { height: 48px; padding: 0 16px; border: 1px solid #2998ff; border-radius: 24px; background: #2998ff; color: #fff; font-size: 15px; cursor: pointer; }
.ts-to-submit:disabled { border-color: #d5dde8; background: #fff; color: #b8c0c9; cursor: not-allowed; }
.ts-to-cancel { border: 0; background: none; font-size: 15px; color: #203040; cursor: pointer; }

/* Conflicts drawer */
.ts-conf-drawer { font-family: "Noto Sans", sans-serif; }
.ts-conf-drawer .schedule-work-drawer-header { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eceff3; }
.ts-conf-drawer .ts-addshift-title { margin: 0; font-size: 14px; font-weight: 400; color: #8b939c; }
.ts-conf-drawer .ts-addshift-close { position: static !important; margin: 0 !important; color: #8b939c; }
.ts-conf-tabs { display: flex; border-bottom: 1px solid #eceff3; }
.ts-conf-tabs button { padding: 20px 26px 16px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 15px; color: #203040; cursor: pointer; }
.ts-conf-tabs button.is-active { color: #2998ff; font-weight: 700; border-bottom-color: #2998ff; }
.ts-conf-body { padding: 0 20px 24px; text-align: center; overflow-y: auto; }
.ts-conf-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 140px; font-size: 15px; color: #203040; }
.ts-conf-empty strong { margin-top: 18px; font-size: 20px; font-weight: 700; }
.ts-conf-thumb { display: inline-flex; align-items: center; justify-content: center; width: 125px; height: 125px; border-radius: 50%; background: #e3f1ff; }
.ts-conf-learn { margin: 72px 0 16px; font-size: 18px; font-weight: 700; color: #203040; }
.ts-conf-help { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1px solid #8b939c; border-radius: 50%; font-size: 11px; color: #8b939c; font-weight: 400; vertical-align: middle; }
.ts-conf-video { position: relative; height: 260px; border-radius: 8px; background: #1e2f3f; }
.ts-conf-play { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }
.ts-us-round-alert { cursor: pointer; }

/* Timesheets: column picker */
.ts-tcols { position: fixed; z-index: 100000; width: 326px; max-height: 400px; display: flex; flex-direction: column; padding: 10px; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); box-sizing: border-box; font-family: "Noto Sans", sans-serif; }
.ts-tcols-search { position: relative; display: block; flex-shrink: 0; }
.ts-tcols-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #5d6b7a; }
.ts-tcols-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid #2998ff; border-radius: 8px; box-sizing: border-box; font-size: 15px; outline: 0; }
.ts-tcols-list { margin-top: 8px; overflow-y: auto; }
.ts-tcols-item { display: flex; align-items: center; gap: 14px; padding: 11px 12px; font-size: 15px; color: #203040; cursor: pointer; border-radius: 6px; }
.ts-tcols-item:hover { background: #f3f5f8; }
.ts-tcols-item input { width: 18px; height: 18px; margin: 0; accent-color: #2998ff; }

.ts-tcols-item .ts-tcols-arr { margin-left: auto; color: #8b939c; }
.ts-tcols-item span { flex: 1; }
.ts-tcols-fly { max-height: 330px; }
.ts-tcols-list { max-height: 340px; }

/* Column picker checkboxes */
.ts-tcols-item input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0;
    width: 20px; height: 20px; margin: 0; border: 1px solid #c4ccd6; border-radius: 4px; background: #fff; cursor: pointer;
}
.ts-tcols-item input[type="checkbox"]:checked,
.ts-tcols-item input[type="checkbox"]:indeterminate { background: #2998ff; border-color: #2998ff; }
.ts-tcols-item input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ts-tcols-item input[type="checkbox"]:indeterminate::after {
    content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; background: #fff;
}
.ts-tcols-reset {
    display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 14px 12px 4px;
    border: 0; border-top: 1px solid #eceff3; background: none; font-family: inherit; font-size: 15px; color: #203040; cursor: pointer;
}

/* Job insights */
.ts-jobins { margin: 40px 0 24px; padding: 0 0 24px; border: 1px solid #eceff3; border-radius: 12px; background: #fff; min-height: 500px; font-family: "Noto Sans", sans-serif; }
.ts-jobins-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid #eceff3; }
.ts-jobins-head strong { font-size: 16px; font-weight: 700; color: #203040; }
.ts-jobins-help { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; margin-left: 6px; border: 1px solid #8b939c; border-radius: 50%; font-size: 11px; font-weight: 400; color: #8b939c; }
.ts-jobins-viewall { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid #d5dde8; border-radius: 20px; color: #2998ff; font-size: 15px; text-decoration: none; }
.ts-jobins-table { margin: 32px 24px 0; }
.ts-jobins-row { display: grid; grid-template-columns: 1fr 160px 220px; align-items: center; min-height: 62px; font-size: 15px; color: #203040; border-bottom: 1px solid #eceff3; }
.ts-jobins-row > span { text-align: center; }
.ts-jobins-th { background: #f6f7f9; border: 0; border-radius: 6px; font-size: 15px; color: #5d6b7a; }
.ts-jobins-row > .ts-jobins-name { display: flex; align-items: center; gap: 12px; text-align: left; padding-left: 8px; }
.ts-jobins-th > span:first-child { text-align: center; }
.ts-jobins-name i { width: 12px; height: 12px; border-radius: 50%; }
.ts-jobins-empty { padding: 24px; text-align: center; color: #8b939c; font-size: 14px; }

/* Activity Log page, Connecteam look */
.actlog-page { font-family: "Noto Sans", sans-serif; font-size: 14px; color: #203040; background: transparent; box-shadow: none; padding: 0; }
.actlog-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; margin-bottom: 20px; background: #fff; border: 1px solid #eceff3; border-radius: 16px; }
.actlog-head h1 { margin: 0; font-size: 28px; font-weight: 700; color: #203040; }
.actlog-tabs { display: flex; gap: 0; padding: 0 0 0; background: #fff; border: 1px solid #eceff3; border-bottom: 0; border-radius: 16px 16px 0 0; }
.actlog-tabs button { padding: 20px 20px 16px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 15px; color: #203040; cursor: pointer; }
.actlog-tabs button.is-active { color: #2998ff; font-weight: 700; border-bottom-color: #2998ff; }
.actlog-tabs button:disabled { cursor: default; }
.actlog-page .custom-table-wrapper { padding: 20px; background: #fff; border: 1px solid #eceff3; border-top: 1px solid #eceff3; border-radius: 0 0 16px 16px; box-shadow: none; }
.actlog-page .custom-table-top { margin-bottom: 14px; }
.actlog-page .export-btn { height: 36px; padding: 0 16px; border: 1px solid #d5dde8; border-radius: 18px; background: #fff; color: #2998ff; font-size: 14px; font-weight: 400; }
.actlog-page .table-search input { height: 40px; padding: 0 14px; border: 1px solid #d5dde8; border-radius: 10px; font-family: inherit; font-size: 14px; }
.actlog-page .custom-table-controls { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid #eceff3; font-size: 15px; color: #203040; }
.actlog-page .custom-table-controls select,
.actlog-page .custom-table-controls .ui-date-range,
.actlog-page .custom-table-controls button { min-height: 40px; border: 1px solid #d5dde8; border-radius: 10px; background: #fff; font-family: inherit; font-size: 15px; color: #203040; }
.actlog-page .custom-table thead th { padding: 14px 16px; background: #f6f7f9; border: 0; font-size: 14px; font-weight: 600; color: #5d6b7a; }
.actlog-page .custom-table thead th:first-child { border-radius: 10px 0 0 10px; }
.actlog-page .custom-table thead th:last-child { border-radius: 0 10px 10px 0; }
.actlog-page .custom-table tbody td { padding: 16px; border-bottom: 1px solid #eceff3; font-size: 14px; color: #203040; }
.actlog-page .custom-table tbody tr:hover { background: #f8fafc; }
.actlog-page .badge, .actlog-page .custom-table td .pill, .actlog-page .custom-table td .tag { display: inline-flex; padding: 6px 12px; border-radius: 8px; background: #f1f3f6; font-size: 13px; color: #5d6b7a; font-weight: 600; }
.actlog-page .custom-table-bottom { margin-top: 16px; font-size: 14px; color: #5d6b7a; }

/* Activity Log timeline */
.actlog-timeline-card { padding: 20px 20px 12px; background: #fff; border: 1px solid #eceff3; border-radius: 0 0 16px 16px; }
.actlog-range { display: flex; align-items: center; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid #eceff3; font-size: 15px; color: #203040; }
.actlog-tl { max-height: 760px; overflow-y: auto; padding: 22px 20px 8px; }
.actlog-tl-msg { padding: 40px 0; text-align: center; color: #8b939c; font-size: 14px; }
.actlog-day { margin: 12px 0 0; }
.actlog-day:first-child { margin-top: 0; }
.actlog-day span { display: inline-block; padding: 10px; border-radius: 8px; background: #f1f3f6; font-size: 14px; color: #203040; }
.actlog-item { position: relative; display: flex; align-items: center; gap: 8px; margin-left: 22px; padding: 20px 0 0 20px; border-left: 1px solid #e3e8ef; min-height: 56px; }
.actlog-item + .actlog-day { margin-top: 28px; }
.actlog-dot { position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: #2998ff; }
.actlog-ic, .actlog-av { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; }
.actlog-ic-clock { background: #607af0; color: #fff; }
.actlog-ic-gear { background: #eaf5ff; color: #2998ff; }
.actlog-av { background: #4aa3ff; color: #fff; font-size: 13px; font-weight: 700; }
.actlog-text { margin-left: 6px; max-width: 760px; font-size: 14px; line-height: 1.55; color: #203040; }
.actlog-text b { font-weight: 400; }
.actlog-more { display: inline-flex; align-items: center; gap: 8px; margin: 8px 20px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 15px; color: #2998ff; cursor: pointer; }
.actlog-more[hidden], .actlog-page [data-actlog-fallback][hidden] { display: none; }

.actlog-rangepill { position: relative; }
.actlog-rangebtn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border: 1px solid #d5dde8; border-radius: 10px; background: #fff; font-family: inherit; font-size: 15px; color: #203040; cursor: pointer; }
.actlog-rangebtn em { font-style: normal; color: #8b939c; }
.actlog-rangebtn svg { margin-left: 14px; color: #5d6b7a; }
.actlog-rangepop { position: absolute; left: 0; top: 58px; z-index: 50; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); font-size: 14px; }
.actlog-rangepop[hidden] { display: none; }
.actlog-rangepop label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.actlog-rangepop input { height: 40px; padding: 0 10px; border: 1px solid #d5dde8; border-radius: 8px; font-family: inherit; font-size: 14px; }
.actlog-range { padding-bottom: 20px; }

.actlog-rangepop { padding: 0; }
.actlog-rangebtn.is-open .actlog-caret { transform: rotate(180deg); }
.actlog-cal { width: 650px; max-width: calc(100vw - 40px); padding: 14px 6px 18px; font-family: "Noto Sans", sans-serif; }
.actlog-cal-head { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; padding: 0 14px 12px; border-bottom: 1px solid #eceff3; }
.actlog-cal-chip { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 12px; border-radius: 8px; background: #f1f3f6; font-size: 15px; color: #203040; }
.actlog-cal-chip svg { color: #8b939c; }
.actlog-cal-title { text-align: center; font-size: 15px; color: #203040; }
.actlog-cal-nav { display: inline-flex; gap: 14px; }
.actlog-cal-nav button { border: 0; background: none; color: #2998ff; cursor: pointer; padding: 0; line-height: 0; }
.actlog-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 0 4px; }
.actlog-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 5px; padding-top: 14px; text-align: center; }
.actlog-cal-dow { padding: 8px 0 10px; font-size: 13px; color: #8b939c; }
.actlog-cal-d { width: 100%; height: 44px; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: 15px; color: #203040; cursor: pointer; }
.actlog-cal-d:hover { background: #f3f5f8; border-radius: 22px; }
.actlog-cal-d.is-mid { background: #d3e8fb; }
.actlog-cal-d.is-edge { background: #2998ff; color: #fff; border-radius: 22px; }
.actlog-cal-d.is-edge.is-first { border-radius: 22px 0 0 22px; }
.actlog-cal-d.is-edge.is-last { border-radius: 0 22px 22px 0; }

/* Activity Analytics */
.actlog-an { padding: 8px 4px 24px; font-family: "Noto Sans", sans-serif; }
.an-hello { margin: 18px 0 4px; font-size: 18px; font-weight: 700; color: #203040; }
.an-sub { margin: 0 0 20px; font-size: 14px; color: #5d6b7a; }
.an-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.an-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 10px; background: #f6f7f9; }
.an-card span { font-size: 13px; font-weight: 700; color: #203040; }
.an-card b { font-size: 20px; font-weight: 700; color: #203040; }
.an-card em { font-style: normal; font-size: 12px; color: #8b939c; }
.an-sec { margin-top: 36px; }
.an-sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.an-sec-head strong { display: block; font-size: 14px; font-weight: 700; color: #203040; }
.an-sec-head span { font-size: 13px; color: #5d6b7a; }
.an-chart { width: 100%; overflow: hidden; }
.an-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 12px; color: #5d6b7a; }
.an-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.an-table { overflow-x: auto; }
.an-row { display: grid; grid-template-columns: 50px 2fr 1fr 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid #eceff3; font-size: 14px; color: #203040; }
.an-row > span { padding: 0 12px; display: flex; align-items: center; gap: 10px; }
.an-th { min-height: 44px; border: 0; border-radius: 8px; background: #f6f7f9; font-size: 13px; color: #5d6b7a; }
.an-uav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #4aa3ff; color: #fff; font-size: 11px; font-weight: 700; }
.an-empty { padding: 24px; text-align: center; font-size: 14px; color: #8b939c; }
.actlog-an[hidden], [data-actlog-view][hidden] { display: none; }
@media (max-width: 900px) { .an-cards { grid-template-columns: repeat(2, 1fr); } }

/* Activity Analytics: full layout */
.an-top { display: flex; justify-content: space-between; align-items: flex-start; }
.an-cards { margin-top: 4px; }
.an-card { background: #f6f7f9; }
.an-card b { display: block; font-size: 18px; }
.an-card b u { text-decoration: none; font-size: 12px; font-weight: 400; color: #8b939c; }
.an-card b small { font-size: 11px; font-weight: 400; color: #8b939c; }
.an-card.is-dim b { font-size: 11px; font-weight: 400; padding: 6px 8px; border-radius: 6px; background: #e8ebef; color: #8b939c; }
.an-dds { display: flex; align-items: center; gap: 10px; }
.an-dd { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border: 1px solid #d5dde8; border-radius: 8px; background: #fff; font-size: 13px; color: #203040; }
.an-dd svg { color: #5d6b7a; }
.an-dd-date { padding: 0 14px; }
.an-lbl { font-size: 12px; color: #5d6b7a; }
.an-grow { flex: 1; }
.an-h2 { font-size: 16px !important; }
.an-sec-bar .an-sec-head { gap: 10px; justify-content: flex-start; align-items: center; }
.an-filters { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.an-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #d5dde8; border-radius: 8px; color: #2998ff; font-size: 16px; }
.an-grid { display: grid; align-items: center; min-height: 44px; border-bottom: 1px solid #eceff3; font-size: 13px; color: #203040; }
.an-grid > span { padding: 0 12px; display: flex; align-items: center; gap: 8px; }
.an-grid.an-th { min-height: 40px; border: 0; border-radius: 6px; background: #f6f7f9; font-size: 12px; color: #5d6b7a; }
.an-star { font-style: normal; color: #34c38f; font-size: 13px; }
.an-mt { margin-top: 28px; }
.an-pager { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: #5d6b7a; }
.an-pg { display: inline-flex; gap: 4px; margin-right: auto; }
.an-pg b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #d5dde8; border-radius: 4px; font-weight: 400; }
.an-pg b.is-on { background: #2998ff; border-color: #2998ff; color: #fff; }
.an-search input { width: 220px; height: 34px; padding: 0 12px; border: 1px solid #d5dde8; border-radius: 8px; font-family: inherit; font-size: 13px; }
.an-chart svg text { font-family: "Noto Sans", sans-serif; }

/* Sales and labor */
.actlog-sl { padding: 0 0 28px; font-family: "Noto Sans", sans-serif; }
.actlog-sl[hidden] { display: none; }
.sl-bar { display: flex; align-items: center; gap: 12px; padding: 4px 0 20px; }
.sl-lbl { font-size: 16px; color: #203040; }
.sl-grow { flex: 1; }
.sl-dd { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: 50px; padding: 0 18px; border: 1px solid #d5dde8; border-radius: 10px; background: #fff; font-size: 16px; color: #203040; box-sizing: border-box; }
.sl-dd svg { color: #5d6b7a; }
.sl-dd-off { min-width: 146px; color: #b0b8c2; }
.sl-dd:not(.sl-dd-off):not(.sl-date):not(.sl-day) { min-width: 184px; }
.sl-day { min-width: 98px; }
.sl-avs { display: inline-flex; margin: 0 6px 0 10px; }
.sl-av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; box-sizing: border-box; }
.sl-avs .sl-av:first-child { margin-left: 0; }
.sl-circle { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid #d5dde8; border-radius: 50%; background: #fff; color: #2998ff; font-size: 18px; box-sizing: border-box; }
.sl-banner { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 18px 20px; border-radius: 12px; background: #eaf5ff; }
.sl-banner[hidden] { display: none; }
.sl-bicon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 10px; background: #d6ebff; }
.sl-btext { display: flex; flex-direction: column; gap: 2px; margin-right: auto; font-size: 16px; color: #203040; }
.sl-btext strong { font-weight: 700; }
.sl-upload { font-size: 16px; color: #2998ff; text-decoration: none; }
.sl-pos { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1px solid #bcdcff; border-radius: 24px; background: #fff; font-size: 16px; color: #2998ff; text-decoration: none; }
.sl-x { border: 0; background: none; font-size: 26px; color: #5d6b7a; cursor: pointer; padding: 0 6px; }
.sl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sl-card { display: flex; flex-direction: column; gap: 22px; padding: 22px 20px 20px; border-radius: 14px; background: #f6f7f7; }
.sl-card strong { font-size: 17px; font-weight: 700; color: #203040; }
.sl-card b { font-size: 24px; font-weight: 700; color: #203040; }
@media (max-width: 1100px) { .sl-bar { flex-wrap: wrap; } .sl-cards { grid-template-columns: 1fr; } }
.actlog-range[hidden] { display: none; }

/* Sales and labor: date range calendar */
.sl-date { cursor: pointer; }
.sl-date.is-open { border-color: #2998ff; }
.slc-pop { position: fixed; z-index: 100000; display: flex; width: 830px; max-width: calc(100vw - 16px); max-height: 380px; background: #fff; border-radius: 14px; box-shadow: 0 6px 28px rgba(15, 23, 42, .18); font-family: "Noto Sans", sans-serif; color: #203040; overflow: hidden; }
.slc-side { flex-shrink: 0; width: 188px; padding: 20px 10px 10px 20px; overflow-y: auto; border-right: 0; }
.slc-side button { display: block; width: 100%; padding: 11px 0; border: 0; background: none; text-align: left; font-family: inherit; font-size: 16px; color: #203040; cursor: pointer; }
.slc-side button:hover { color: #2998ff; }
.slc-main { flex: 1; padding: 20px 20px 16px 6px; }
.slc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.slc-title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: #2998ff; }
.slc-nav { display: inline-flex; align-items: center; gap: 14px; color: #5d6b7a; }
.slc-nav .slc-cal { margin-right: 14px; }
.slc-nav button { border: 0; background: none; padding: 0; line-height: 0; color: #5d6b7a; cursor: pointer; }
.slc-months { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.slc-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.slc-dow { padding: 8px 0; font-size: 13px; color: #5d6b7a; }
.slc-d { height: 38px; border: 0; background: none; font-family: inherit; font-size: 16px; color: #203040; cursor: pointer; border-radius: 0; }
.slc-d:hover { background: #f3f5f8; border-radius: 8px; }
.slc-d.is-mid { background: #e1f0ff; }
.slc-d.is-ws { border-radius: 8px 0 0 8px; }
.slc-d.is-we { border-radius: 0 8px 8px 0; }
.slc-d.is-edge { background: #2998ff; color: #fff; border-radius: 8px; }
.slc-d.is-edge.is-s { box-shadow: -10px 0 0 #2998ff00; }

/* Sales and labor: Day menu, more menu, history drawer */
.sl-day, .sl-circle { cursor: pointer; }
.sl-day svg { transition: transform .15s; }
.sl-day.is-open { border-color: #2998ff; }
.sl-day.is-open svg { transform: rotate(180deg); }
.slm-pop { position: fixed; z-index: 100000; min-width: 98px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); font-family: "Noto Sans", sans-serif; }
.slm-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 8px; background: none; text-align: left; font-family: inherit; font-size: 16px; color: #203040; cursor: pointer; white-space: nowrap; }
.slm-pop button:hover, .slm-pop button.is-on { background: #eef6ff; }
.slm-pop button svg { color: #203040; }
.slh-wrap { position: fixed; inset: 0; z-index: 100001; }
.slh-dim { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.slh-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 630px; max-width: 100%; background: #fff; border-radius: 16px 0 0 16px; font-family: "Noto Sans", sans-serif; box-shadow: -4px 0 24px rgba(15, 23, 42, .12); }
.slh-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eceff3; font-size: 14px; color: #8b939c; }
.slh-x { border: 0; background: none; color: #5d6b7a; cursor: pointer; padding: 0; line-height: 0; }
.slh-body { padding: 24px 20px; }
.slh-th { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 16px 20px; border-radius: 8px; background: #f6f7f9; font-size: 16px; color: #203040; }

/* Sales and labor: 14px text, #203040 */
.actlog-sl, .actlog-sl * { font-size: 14px; }
.sl-lbl, .sl-dd, .sl-btext, .sl-upload, .sl-pos { color: #203040; font-size: 14px; }
.sl-upload, .sl-pos { color: #2998ff; }
.sl-dd-off { color: #b0b8c2; }
.sl-dd { height: 44px; }
.sl-circle { width: 44px; height: 44px; }
.sl-card strong { font-size: 14px; }
.sl-card b { font-size: 20px; }
.sl-btext strong { font-size: 14px; }
.slm-pop button, .slh-th, .slc-side button, .slc-title, .slc-d, .slc-dow { font-size: 14px; }
.slm-pop button, .slh-th, .slc-side button, .slc-d { color: #203040; }
.slc-title { color: #2998ff; }

/* Activity page: every text 14px, titles excepted */
.actlog-page, .actlog-page *:not(h1):not(svg):not(svg *) { font-size: 14px; }
.actlog-head h1 { font-size: 28px; }
.actlog-page .an-card b, .actlog-page .sl-card b { font-size: 20px; }
.actlog-page .an-hello { font-size: 18px; }
.slm-pop, .slm-pop *, .slh-drawer, .slh-drawer *, .slc-pop, .slc-pop *, .actlog-cal, .actlog-cal *, .actlog-rangepop, .actlog-rangepop * { font-size: 14px; }

/* ===== GLOBAL: all small text is 14px (pages, modules, drawers, pop-ups). Headings keep their size. =====
   To undo, delete everything from this comment to the end of the file. */
html body, html body :where(div, span, p, a, li, label, button, input, select, textarea, th, td, small, em, strong, b, i, u, legend, option, dt, dd) {
    font-size: 14px !important;
}
html body :where(h1, h2, h3, h4, h5, h6),
html body :where(.actlog-head h1, .an-hello, .an-card b, .sl-card b, .an-h2, .page-title, .ts-people-title) {
    font-size: revert-layer;
}
html body :where(h1) { font-size: 28px !important; }
html body :where(h2) { font-size: 20px !important; }
html body :where(h3) { font-size: 18px !important; }
html body :where(h4, h5, h6) { font-size: 16px !important; }
html body .an-hello { font-size: 18px !important; }
html body .an-card b, html body .sl-card b { font-size: 20px !important; }
html body .actlog-head h1 { font-size: 28px !important; }

/* Shared Connecteam-style list page (Zones, and any page with .cx-page) */
.cx-page { background: transparent; box-shadow: none; padding: 0; }
.cx-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; margin-bottom: 20px; background: #fff; border: 1px solid #eceff3; border-radius: 16px; }
.cx-head h1 { margin: 0; margin-right: auto; font-size: 28px !important; font-weight: 700; color: #203040; }
.cx-add { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid #d5dde8; border-radius: 20px; background: #fff; color: #2998ff; text-decoration: none; }
.cx-add:hover { background: #eef6ff; }
.cx-page .custom-table-wrapper { padding: 20px; background: #fff; border: 1px solid #eceff3; border-radius: 16px; box-shadow: none; }
.cx-page .export-btn { height: 36px; padding: 0 16px; border: 1px solid #d5dde8; border-radius: 18px; background: #fff; color: #2998ff; font-weight: 400; }
.cx-search { position: relative; }
.cx-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8b939c; }
.cx-search input { height: 40px; padding: 0 14px 0 36px; border: 1px solid #d5dde8; border-radius: 10px; font-family: inherit; }
.cx-page .custom-table-controls { padding: 4px 0 16px; color: #203040; }
.cx-page .custom-table-controls select { height: 36px; padding: 0 10px; border: 1px solid #d5dde8; border-radius: 8px; background: #fff; font-family: inherit; color: #203040; }
.cx-page .custom-table thead th { padding: 14px 16px; background: #f6f7f9; border: 0; font-weight: 600; color: #5d6b7a; }
.cx-page .custom-table thead th:first-child { border-radius: 10px 0 0 10px; }
.cx-page .custom-table thead th:last-child { border-radius: 0 10px 10px 0; }
.cx-page .custom-table tbody td { padding: 16px; border-bottom: 1px solid #eceff3; color: #203040; }
.cx-page .custom-table tbody tr:hover { background: #f8fafc; }
.cx-page .custom-table tbody td strong, .cx-page .custom-table tbody td b { font-weight: 600; }
.cx-page .custom-table .badge, .cx-page .custom-table [class*="status"], .cx-page .custom-table [class*="badge"] { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 16px; background: #dff4e8; color: #1f8f55; font-weight: 600; }
.cx-page .custom-table .icon-action, .cx-page .custom-table td a.btn, .cx-page .custom-table td button { width: 36px; height: 36px; padding: 0; border: 1px solid #d5dde8; border-radius: 8px; background: #fff; color: #5d6b7a; }
.cx-page .custom-table-bottom { margin-top: 16px; color: #5d6b7a; }

/* ===== One shared header on every page (same as Time Clock): icon + large title + actions ===== */
.topbar { min-height: 76px; padding: 14px 18px; }
.topbar h1 { display: inline-flex; align-items: center; gap: 10px; font-size: 28px !important; font-weight: 700; color: #203040; margin: 0; }
.topbar-left { gap: 14px; }
.topbar-left svg { color: #2998ff; flex-shrink: 0; }
.topbar-left p, .topbar-left .page-subtitle, .topbar-left small { display: none; }
.cx-head { display: none; }
.cx-topbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid #d5dde8; border-radius: 20px; background: #fff; color: #2998ff; text-decoration: none; }
.cx-topbtn:hover { background: #eef6ff; }

/* Global topbar action row (rendered by topbar.php on every page): link/anchor variants */
a.ts-topbar-pill { text-decoration: none; }
.gl-topbar-actions { display: inline-flex; align-items: center; gap: 12px; }
.gl-more-dd { position: relative; }
.gl-more-dd .ts-topbar-more-menu[hidden] { display: none; }
a.ts-topbar-more-item { text-decoration: none; display: flex; align-items: center; gap: 10px; }

.topbar-page-icon { display: inline-flex; align-items: center; margin-right: 6px; color: #2998ff; }
.topbar-page-icon svg { width: 22px; height: 22px; }

/* Profile menu, Connecteam style */
.profile-menu { width: 260px; padding: 10px; border-radius: 14px; box-shadow: 0 6px 28px rgba(15, 23, 42, .18); }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 6px; border-radius: 10px; background: #eaf5ff; }
.pm-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #4aa3ff; color: #fff; font-weight: 700; }
.pm-who { display: flex; flex-direction: column; min-width: 0; }
.pm-who strong { color: #203040; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-who small { color: #8b939c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu .pm-item { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 8px; color: #203040; text-decoration: none; }
.profile-menu .pm-item svg { flex-shrink: 0; color: #203040; }
.profile-menu .pm-item:hover { background: #f3f5f8; }
.profile-menu .dropdown-form { margin: 0; }

/* Sidebar brand: company name on one line, small subtitle removed */
.sidebar-brand .brand-text span, .sidebar-brand .brand-text small, .sidebar-brand .brand-text p { display: none !important; }
html body .sidebar-brand .brand-text h4, html body .sidebar-brand .brand-text strong { font-size: 18px !important; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.sidebar-brand .brand-text { min-width: 0; }

.sidebar-brand { position: relative; padding-right: 48px; }
.sidebar-brand img { flex-shrink: 0; }
.sidebar-brand .brand-text { flex: 1 1 auto; min-width: 0; }
html body .sidebar-brand .brand-text h4, html body .sidebar-brand .brand-text strong { font-size: 16px !important; overflow: hidden; text-overflow: ellipsis; }
.sidebar-brand .sidebar-toggle, .sidebar-brand ~ .sidebar-toggle, .sidebar > .sidebar-toggle { position: absolute; right: 12px; top: 22px; }

html body .sidebar-brand .brand-text h4, html body .sidebar-brand .brand-text strong { font-size: 15px !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }
.sidebar-brand { gap: 8px; padding-right: 44px; }
.sidebar-brand img { width: 32px; height: 32px; }

html body .sidebar-brand .brand-text h4, html body .sidebar-brand .brand-text strong { font-size: 14px !important; }
.sidebar-brand { gap: 8px; padding-right: 34px; }
.sidebar-brand img { width: 30px; height: 30px; }
.sidebar-brand .sidebar-toggle, .sidebar > .sidebar-toggle, #sidebarToggle { width: 26px !important; height: 26px !important; min-width: 0; padding: 0; right: 6px; top: 18px; }
#sidebarToggle svg { width: 14px; height: 14px;margin: 0 auto; }

html body .sidebar-brand { align-items: center; }
html body .sidebar-brand #sidebarToggle, html body .sidebar-brand .sidebar-toggle { position: absolute !important; right: 4px !important; top: 6px !important; margin: 0 !important; transform: none !important; }

/* Sidebar: no visible scrollbars (still scrolls with wheel / touch) */
.sidebar, #sidebar { overflow-x: hidden !important; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar, #sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Sidebar scrollbar restored; the main page scrollbar is hidden instead (still scrolls) */
.sidebar, #sidebar { overflow-x: auto !important; scrollbar-width: auto; -ms-overflow-style: auto; }
.sidebar::-webkit-scrollbar, #sidebar::-webkit-scrollbar { width: auto; height: auto; display: block; }
html, body, .main-content, .app-shell { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .main-content::-webkit-scrollbar, .app-shell::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* FINAL: sidebar scrollbars hidden (vertical + horizontal), sidebar still scrolls */
html body .sidebar, html body #sidebar { overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
html body .sidebar::-webkit-scrollbar, html body #sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* Collapsed sidebar: no overlap */
html body .sidebar.collapsed .sidebar-brand { flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 14px; }
html body .sidebar.collapsed .sidebar-brand #sidebarToggle,
html body .sidebar.collapsed .sidebar-brand .sidebar-toggle { position: static !important; margin: 0 !important; width: 32px !important; height: 32px !important; }
html body .sidebar.collapsed #sidebarToggle svg { width: 16px; height: 16px; }
html body .sidebar.collapsed .sidebar-brand img { width: 34px; height: 34px; }
html body .sidebar.collapsed [class*="menu-title"], html body .sidebar.collapsed [class*="section-title"], html body .sidebar.collapsed [class*="menu-label"], html body .sidebar.collapsed .menu-section > span:first-child, html body .sidebar.collapsed .menu-section > small:first-child { display: none !important; }

/* Dashboard overview, Connecteam style */
.db-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; font-family: "Noto Sans", sans-serif; color: #203040; }
.db-main, .db-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.db-card { padding: 20px; background: #fff; border: 1px solid #eceff3; border-radius: 16px; }
.db-h { margin: 0 0 14px; font-size: 18px !important; font-weight: 700; color: #203040; }
.db-h3 { margin: 18px 0 10px; font-size: 14px !important; font-weight: 700; padding-top: 14px; border-top: 1px solid #eceff3; }
.db-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.db-qa { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 1px solid #eceff3; border-radius: 10px; background: #fff; color: #203040; text-decoration: none; }
.db-qa:hover { background: #f8fafc; }
.db-ob-head { display: flex; align-items: center; gap: 14px; }
.db-ring { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 3px solid #2998ff; border-radius: 50%; box-sizing: border-box; }
.db-ob-title { font-size: 18px; flex: 1; }
.db-ob-x { border: 0; background: none; font-size: 28px; color: #8b939c; cursor: pointer; }
.db-ob-card { display: flex; max-width: 560px; margin: 36px auto 26px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(15, 23, 42, .12); }
.db-ob-copy { flex: 1; padding: 28px 22px 24px; }
.db-ob-copy small { color: #8b939c; }
.db-ob-copy h3 { margin: 18px 0 8px; font-size: 24px !important; font-weight: 700; }
.db-ob-copy p { margin: 0 0 40px; color: #4b5666; }
.db-ob-btns { display: flex; align-items: center; gap: 24px; }
.db-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 19px; background: #2998ff; color: #fff; text-decoration: none; }
.db-skip { color: #b0b8c2; }
.db-ob-art { width: 190px; background: #e6f2ff; display: flex; align-items: flex-end; justify-content: center; }
.db-ob-art span { width: 96px; height: 150px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 4px #d3e6fa inset; }
.db-steps { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
.db-step { flex: 1; position: relative; }
.db-step::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 2px solid #8fc5f7; z-index: 0; }
.db-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-bottom: 8px; border: 2px solid #2998ff; border-radius: 50%; background: #fff; color: #2998ff; font-size: 12px; }
.db-step.is-current .db-dot { background: #2998ff; }
.db-step.is-current small { color: #2998ff; }
.db-step small { display: block; padding: 0 6px; }
.db-eng-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.db-eng-head .db-h { margin: 0 8px 0 0; }
.db-grow { flex: 1; }
.db-dd { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #d5dde8; border-radius: 8px; background: #fff; }
.db-dd em { font-style: normal; color: #8b939c; }
.db-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #d5dde8; border-radius: 50%; color: #2998ff; }
.db-sub { margin: 18px 0 6px; }
.db-chart { display: block; }
.db-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid #d5dde8; border-radius: 18px; background: #fff; color: #2998ff; text-decoration: none; }
.db-day { margin: 14px 0 0 12px; }
.db-day span { display: inline-block; padding: 8px 10px; border-radius: 8px; background: #f1f3f6; }
.db-act { position: relative; display: flex; align-items: center; gap: 10px; margin-left: 20px; padding: 14px 0 0 18px; border-left: 1px solid #e3e8ef; }
.db-adot { position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #2998ff; }
.db-aic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #607af0; color: #fff; }
.db-aic svg { width: 16px; height: 16px; }
.db-green { background: #34c38f; }
.db-red { background: #fde8e8; color: #e24646; }
.db-atext { line-height: 1.5; }
.db-empty { padding: 28px; text-align: center; color: #8b939c; }
.db-attn-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f6f7f9; color: #203040; text-decoration: none; }
.db-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #ff9500; color: #fff; }
.db-promo { text-align: center; }
.db-promo p { margin: 8px 0 14px; }
.db-gift { width: 90px; height: 90px; margin: 4px auto 8px; border-radius: 12px; background: linear-gradient(#ff8fc4, #ffb3d9); }
.db-phone { width: 62px; height: 100px; margin: 4px auto 8px; border-radius: 12px; background: #cfe6fb; }
.db-alert { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #eceff3; border-radius: 10px; }
.db-miles { display: flex; gap: 22px; }
.db-miles > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.db-hex { display: inline-block; width: 52px; height: 58px; background: #2998ff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.db-hex-sm { width: 36px; height: 40px; background: #8b5cf6; flex-shrink: 0; }
.db-next { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.db-next > div { flex: 1; }
.db-bar { height: 4px; margin-top: 8px; border-radius: 2px; background: #e6edf5; }
.db-bar i { display: block; height: 100%; border-radius: 2px; background: #2998ff; }
@media (max-width: 1100px) { .db-layout { grid-template-columns: 1fr; } }
.dashboard-columns .dashboard-widget-card:nth-child(2) { display: none; }
.dashboard-columns { grid-template-columns: 1fr; }

/* My Schedule (desktop): week strip + day cards, Connecteam style */
.ms-card { padding: 20px; margin-bottom: 16px; background: #fff; border: 1px solid #eceff3; border-radius: 16px; }
.ms-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ms-range { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid #d5dde8; border-radius: 10px; color: #203040; }
.ms-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #d5dde8; border-radius: 50%; color: #203040; text-decoration: none; font-size: 20px; line-height: 1; }
.ms-today { margin-left: auto; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid #d5dde8; border-radius: 20px; color: #2998ff; text-decoration: none; }
.ms-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.ms-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 10px; border: 1px solid #eceff3; border-radius: 12px; background: #fff; color: #203040; text-decoration: none; }
.ms-tile small { color: #8b939c; }
.ms-tile b { font-size: 18px !important; font-weight: 700; }
.ms-tile i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.ms-tile i.has { background: #2998ff; }
.ms-tile.is-today { border-color: #2998ff; background: #eaf5ff; }
.ms-tile:hover { background: #f8fafc; }
.ms-page .my-schedule-section-title { margin: 8px 0 12px; font-size: 16px !important; font-weight: 700; color: #203040; }
.ms-page .my-schedule-list { display: flex; flex-direction: column; gap: 12px; }
.ms-page .my-schedule-day { padding: 16px 20px; background: #fff; border: 1px solid #eceff3; border-radius: 14px; }
.ms-page .my-schedule-day-heading { margin-bottom: 10px; font-weight: 700; color: #203040; text-transform: none; }
.ms-page .my-schedule-day-heading.is-today { color: #2998ff; }
.ms-page .my-schedule-day-empty { color: #8b939c; }
.ms-page .my-schedule-day-empty a { color: #2998ff; text-decoration: none; margin-left: 6px; }
.ms-page .my-shift-card { margin-top: 8px; padding: 14px 16px; border: 1px solid #eceff3; border-left: 4px solid #2998ff; border-radius: 10px; background: #f8fafc; box-shadow: none; }
.ms-page .my-shift-card-main { display: flex; align-items: center; gap: 18px; }
.ms-page .my-shift-card-date { min-width: 150px; color: #203040; font-weight: 600; }
.ms-page .my-shift-card-body { flex: 1; }
.ms-page .my-shift-card-body h3 { margin: 0 0 2px; font-size: 14px !important; font-weight: 600; color: #203040; }
.ms-page .my-shift-card-badges .status-badge { display: inline-flex; padding: 4px 12px; border-radius: 14px; font-weight: 600; }
.ms-page .my-shift-card-actions { display: flex; gap: 8px; }
.ms-page .my-shift-card-actions .btn { height: 36px; padding: 0 16px; border-radius: 18px; }
.ms-page .my-schedule-absence-banner { padding: 10px 14px; border-radius: 8px; background: #fff4e5; color: #b26a00; }
@media (max-width: 800px) { .ms-strip { gap: 4px; } .ms-page .my-shift-card-main { flex-wrap: wrap; } }

/* Multiple shifts drawer: "repeat the first row" control in the toolbar */
.multi-shifts-repeat {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.multi-shifts-repeat select,
.multi-shifts-repeat input[type="date"] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
}
.multi-shifts-repeat-until {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
}
.multi-shifts-repeat-until[hidden],
.multi-shifts-repeat [hidden] { display: none; }
.multi-shifts-repeat .btn {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border-color: #dbdee0;
    color: var(--primary);
    font-weight: 400;
}

/* Search filters on the schedule board hide rows with [hidden]; make sure row
   display rules (flex/grid) never override that. */
[data-manage-user-row][hidden],
[data-manage-admin-row][hidden],
[data-manage-site-row][hidden],
[data-template-list] [data-template-preset][hidden],
.schedule-multiple-date-row[hidden],
[data-multi-user-option][hidden] { display: none !important; }

/* multi-shift sheet: readable inputs (time not cut, small colour dot, labelled claim) */
.multi-shift-head,
.multi-shift-row {
    grid-template-columns: 170px 120px 120px 130px 160px 230px 200px 170px 170px 170px 170px 220px 70px;
}
.multi-shifts-table { min-width: 2260px; }
.multi-shift-row input[type="time"] { padding: 0 8px 0 12px; }
.main-content .multi-shift-row .multi-color input[type="color"] {
    flex: 0 0 16px;
    width: 16px;
    min-width: 0;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}
.multi-cell-job select { flex: 1 1 auto; min-width: 0; }
.multi-claim-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}
.multi-cell-claim input[type="number"]:disabled { background: #f6f7f7; color: #9aa3ad; }
.multi-cell-claim em { color: #6b7280; font-size: 13px; font-style: normal; }

/* multi-shift sheet: break minutes box replaces the "Add break" button while editing */
.multi-cell-break.is-editing .multi-add-break { display: none; }
.multi-shift-row .multi-break-input { flex: 1 1 auto; min-width: 0; }
.multi-shift-row .multi-break-input input[type="number"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 8px 0 12px;
}

/* multi-shift sheet: Job uses the app's searchable dropdown, sized like the other cells */
.multi-cell-job .search-select-picker {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.multi-cell-job .schedule-search-picker-trigger {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #dbdee0;
    border-radius: 8px;
    color: #1f2937;
    font-size: 14px;
}
.multi-cell-job .schedule-picker-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.multi-cell-job .schedule-search-picker.open .schedule-search-picker-trigger { border-color: #3b9cf5; }

/* Timesheets date pill: fit the full "19 Oct 2026 – 25 Oct 2026" label (was a fixed 108px) */
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-trigger,
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range .date-range-picker.has-value .date-range-trigger {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    white-space: nowrap;
}
.ts-tsx-toolbar .ts-tsx-datepill .ts-tsx-range [data-date-range-label] { white-space: nowrap; }
/* Timesheets toolbar: on narrower screens the right-side buttons drop to a new line instead of overlapping */
.ts-tsx-toolbar { flex-wrap: wrap !important; row-gap: 10px; }
.ts-tsx-toolbar .ts-toolbar-left { flex: 0 0 auto !important; }
.ts-tsx-toolbar .ts-toolbar-right { margin-left: auto; }

/* Time Clock user sheet: Schedule / Site reference column */
.ts-us-table td.ts-us-ref { text-align: center; min-width: 160px; line-height: 1.3; }
.ts-us-table td.ts-us-ref strong { display: block; font-weight: 600; color: #1f2937; font-size: 13px; }
.ts-us-table td.ts-us-ref small { display: block; color: #6b7280; font-size: 12px; margin-top: 2px; }

/* Time Clock user sheet: rows open the entry panel; "+ Add" for manual hours */
.ts-us-table tr.ts-us-row { cursor: pointer; }
.ts-us-table tr.ts-us-row:hover td { background: #f7fafd; }
.ts-us-table tr.ts-us-row.is-editing td { background: #eaf4fe; }
.ts-us-add {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border, #dbdee0);
    border-radius: 999px;
    background: #fff;
    color: #2f80ed;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
}
.ts-us-add:hover { background: #f3f8fe; }

/* entry panel slides in over the right side of the sheet */
.ts-us-edit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 400px;
    max-width: 100%;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .12);
}
.ts-us-edit[hidden] { display: none; }
.ts-us-edit form { display: flex; flex-direction: column; height: 100%; }
.ts-us-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #edf0f3; }
.ts-us-edit-head strong { font-size: 16px; color: #111827; }
.ts-us-edit-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: #6b7280; cursor: pointer; }
.ts-us-edit-x:hover { background: #f3f5f7; }
.ts-us-edit-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.ts-us-edit-status { display: flex; align-items: center; gap: 8px; min-height: 0; }
.ts-us-edit-status:empty { display: none; }
.ts-us-edit-status small { color: #6b7280; font-size: 12px; }
.ts-us-edit-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #374151; font-weight: 600; }
.ts-us-edit-field[hidden] { display: none; }
.ts-us-edit-field input,
.ts-us-edit-field select,
.ts-us-edit-field textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #dbdee0;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    font-weight: 400;
    font-size: 14px;
    box-sizing: border-box;
}
.ts-us-edit-field textarea { resize: vertical; }
.ts-us-edit-field input:focus,
.ts-us-edit-field select:focus,
.ts-us-edit-field textarea:focus { outline: none; border-color: #3b9cf5; }
.ts-us-edit-empty { padding: 12px 14px; border-radius: 10px; background: #fff8eb; color: #92400e; font-size: 13px; }
.ts-us-edit-empty[hidden] { display: none; }
.ts-us-edit-sched { display: flex; flex-direction: column; border-radius: 10px; background: #f6f7f9; padding: 4px 12px; }
.ts-us-edit-sched:empty { display: none; }
.ts-us-edit-sched div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #eceef1; min-width: 0; }
.ts-us-edit-sched div:last-child { border-bottom: 0; }
.ts-us-edit-sched span { flex: 0 0 auto; font-size: 13px; color: #6b7280; }
.ts-us-edit-sched strong { min-width: 0; font-size: 13px; color: #1f2937; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-us-edit-hint { margin: 0; font-size: 12px; color: #6b7280; }
.ts-us-edit-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid #edf0f3; }
.ts-us-btn { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.ts-us-btn[hidden] { display: none; }
.ts-us-btn:disabled { opacity: .5; cursor: not-allowed; }
.ts-us-btn-save { background: #fff; border-color: #dbdee0; color: #2f80ed; }
.ts-us-btn-approve { background: #21b27a; color: #fff; }
.ts-us-btn-decline { background: #fff; border-color: #f3c4c4; color: #dc2626; }
@media (max-width: 640px) { .ts-us-edit { width: 100%; } }