/* ============================================
   PRIMAZENTRA - MAIN STYLESHEET
   Gold & Brown Theme - Construction Management App
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================
   1. CSS VARIABLES (THEME & DESIGN TOKENS)
   ============================================ */

:root {
    /* Brand Colors */
    --color-primary: #D99600;
    --color-primary-dark: #8C701C;
    --color-primary-light: #F2D888;
    --color-accent: #FFF1C5;
    --color-secondary: #7A5C2D;
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;
    --color-info: #3498db;
    
    /* Grays */
    --color-gray-dark: #212529;
    --color-gray: #6c757d;
    --color-gray-light: #f8f9fa;
    --color-gray-lighter: #e9ecef;
    --color-border: #dee2e6;
    --color-white: #ffffff;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Typography */
    --font-family-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-code: "Monaco", "Courier New", monospace;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    
    /* Borders */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-base: 0.3s ease-in-out;

    /* Dashboard */
    --db-gold:      #C8A951;
    --db-gold-dark: #8C701C;
    --db-orange:    #C47A0F;
    --db-cream:     #FBF6E8;
    --db-border:    #E8D9A8;
    --db-text:      #1a1a1a;
}

/* ============================================
   2. RESET & BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-gray-dark);
    background-color: var(--color-white);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Hide the browser's native password-reveal button (Edge/Chrome) — use the custom toggle instead */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button { display: none !important; }

/* ── Auth pages — white background, system form conventions ── */
body.auth-page {
    min-height: 100vh;
    display: block;
    background: #fff;
}

.auth-shell {
    min-height: 100vh;
    padding: 0 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-brand {
    width: 100%;
    padding: 1.1rem 0 0.9rem;
    text-align: center;
    border-bottom: 2px solid #e0d4b0;
    margin-bottom: 2.5rem;
}

.auth-logo {
    width: min(170px, 42vw);
    height: auto;
    display: inline-block;
}

.auth-card {
    width: min(760px, 100%);
    background: #fff;
    border: 1px solid #e0d4b0;
    border-radius: 12px;
    padding: 2.2rem 2.4rem 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
}

.auth-card--login {
    width: min(520px, 100%);
    padding: 2rem 2.2rem 1.9rem;
}

.auth-card--wide {
    width: min(840px, 100%);
}

.auth-card h1 {
    text-align: center;
    color: #3b2a0e;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
}

.auth-card--login h1 {
    font-size: clamp(1.4rem, 2.8vw, 1.7rem);
    margin-bottom: 1.5rem;
}

.auth-form {
    width: 100%;
}

.auth-section-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #9a7b3a;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0.25rem 0 1rem;
}

.auth-section-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.auth-divider {
    height: 1px;
    background: #e0d4b0;
    margin: 1.4rem 0 1.25rem;
}

.form-row--auth {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.2rem;
}

/* Labels — match pz-form-group label */
.auth-field label {
    display: block;
    margin: 0 0 0.32rem 0;
    color: #9a7b3a;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Bare inputs (direct children only — NOT inside .auth-input-wrap) */
.auth-field > input,
.auth-field > select {
    width: 100%;
    border: 1.5px solid #e0d5b8;
    border-radius: 7px;
    background: #fdf8ee;
    color: #2c1a00;
    font-size: 1rem;
    font-family: inherit;
    padding: 0.65rem 0.9rem;
    outline: none;
    transition: border-color 140ms, background 140ms;
}

.auth-field > input:focus,
.auth-field > select:focus {
    border-color: #c8a951;
    background: #fff;
    box-shadow: none;
}

.auth-field > input::placeholder {
    color: #b09060;
    opacity: 1;
}

/* Icon-wrapped inputs — border lives on the wrap, not the input */
.auth-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1.5px solid #e0d5b8;
    border-radius: 7px;
    background: #fdf8ee;
    overflow: hidden;
    transition: border-color 140ms, background 140ms;
    min-height: 46px;
}

.auth-input-wrap:focus-within {
    border-color: #c8a951;
    background: #fff;
}

.auth-input-wrap input {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    min-width: 0;
    flex: 1;
    padding: 0.65rem 0.9rem 0.65rem 0;
    color: #2c1a00;
    font-size: 1rem;
    font-family: inherit;
    text-transform: none !important;
}

.auth-input-wrap--icon-left input {
    padding-left: 0.3rem;
}

.auth-input-wrap--icon-right input {
    padding-right: 0.3rem;
}

.auth-input-wrap input::placeholder { color: #b09060; }

.auth-icon {
    width: 2.2rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.65rem;
    color: #c8a951;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 1.15rem;
    line-height: 1;
}

.auth-icon-button {
    width: 2.2rem;
    height: 100%;
    border: 0;
    background: transparent;
    color: #9a7b3a;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.55rem;
    flex: 0 0 auto;
}

.auth-link-row {
    margin-top: 0.45rem;
    font-size: 0.88rem;
}

.auth-link-row--right {
    text-align: right;
}

.auth-options-row {
    margin-top: 0.8rem;
    display: flex;
    justify-content: flex-start;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #6b5a39;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.auth-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #c8a951;
}

.auth-link-row a,
.auth-footer-link a {
    color: #9a7b3a;
    font-weight: 700;
    text-decoration: none;
    transition: color 140ms;
}

.auth-link-row a:hover,
.auth-footer-link a:hover {
    color: #c8a951;
}

.auth-footer-link {
    margin-top: 1.8rem;
    text-align: center;
    font-size: 0.92rem;
    color: #7a6040;
}

.auth-message {
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin: 0 auto 1.2rem;
    font-weight: 500;
    font-size: 0.92rem;
}

.auth-message--error {
    background: #fde8e8;
    color: #b42318;
    border: 1px solid #f8b4b4;
}

.auth-message--success {
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #abefc6;
}

.auth-note {
    max-width: 28rem;
    margin: -0.3rem auto 1.2rem;
    text-align: center;
    color: #7a6040;
    font-size: 0.9rem;
}

/* Password strength and reset view helpers */
.pw-rules { font-size: 0.88rem; color: #7a6040; margin-top: 0.6rem; list-style: none; padding: 0; }
.pw-rules li { margin: 0.25rem 0; }
.pw-strength { height: 6px; border-radius: 6px; background: #e0d4b0; overflow: hidden; margin-top: 0.5rem; }
.pw-strength > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#f39c12,#27ae60); transition: width .25s ease; }
.auth-email-display { text-align: center; color: #7a6040; margin-bottom: 0.6rem; font-size: 0.9rem; }
.auth-submit-wrap { text-align: center; }

/* Inline field error */
.field-error {
    display: inline-block;
    margin-top: 0.5rem;
    color: #b42318;
    background: #fde8e8;
    border: 1px solid #f8b4b4;
    padding: 0.4rem 0.65rem;
    border-radius: 7px;
    font-size: 0.88rem;
}

.field-error.hidden { display: none; }

.field-error.pointer:after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fde8e8;
    margin: 6px auto 0;
}

/* Submit button — matches pz-btn-primary */
.auth-submit {
    display: block;
    width: min(230px, 100%);
    margin: 1.8rem auto 0;
    padding: 0.75rem 1.4rem;
    border: 1.5px solid #16a34a;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 140ms, border-color 140ms;
}

.auth-submit:hover {
    background: #15803d;
    border-color: #15803d;
}

.auth-compact-panel {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1rem 1.2rem;
    margin-top: 1.25rem;
    align-items: end;
}

.auth-field--half { min-width: 0; }
.auth-field--full { width: 100%; }

.auth-contact-block {
    margin-top: 1.2rem;
}

/* Phone input — match system input style */
.phone-input-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e0d5b8;
    border-radius: 7px;
    overflow: hidden;
    background: #fdf8ee;
    transition: border-color 140ms, background 140ms;
}

.phone-input-group:focus-within {
    border-color: #c8a951;
    background: #fff;
}

.phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem;
    background: transparent;
    color: #9a7b3a;
    font-weight: 700;
    white-space: nowrap;
    border-right: 1px solid #e0d5b8;
}

.phone-input-group input {
    border: 0;
    border-radius: 0;
    flex: 1;
    min-width: 0;
    background: transparent;
    color: #2c1a00;
    font-size: 1rem;
    padding: 0.65rem 0.9rem;
}

.phone-input-group input:focus { box-shadow: none; outline: none; }

.phone-hint {
    display: block;
    margin-top: 0.35rem;
    color: #9a7b3a;
    font-size: 0.82rem;
}

.phone-error {
    display: block;
    margin-top: 0.35rem;
    color: #b42318;
    font-size: 0.82rem;
}

/* intl-tel-input overrides to match system inputs */
.iti { width: 100%; display: block; }

.iti input#contactNumber {
    width: 100%;
    border: 1.5px solid #e0d5b8;
    border-radius: 7px;
    background: #fdf8ee;
    color: #2c1a00;
    font-size: 1rem;
    font-family: inherit;
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    transition: border-color 140ms, background 140ms;
}

.iti input#contactNumber:focus {
    border-color: #c8a951;
    background: #fff;
    box-shadow: none;
    outline: none;
}

.auth-shell--register .auth-input-wrap,
.auth-shell--register .iti input#contactNumber {
    background: #fdf8ee;
}

.auth-shell--register .auth-input-wrap input,
.auth-shell--register .iti input#contactNumber {
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.auth-shell--register .auth-input-wrap:focus-within,
.auth-shell--register .iti input#contactNumber:focus {
    border-color: #c8a951;
    background: #fff;
}

.auth-shell--register .auth-icon-button {
    border: 0;
    background: transparent;
}

.auth-shell--register .phone-input-group {
    border: 1.5px solid #e0d5b8;
    background: #fdf8ee;
}

.auth-shell--register .iti input#contactNumber {
    border-color: transparent;
}

.auth-shell--register .iti input#contactNumber:focus {
    border-color: transparent;
}

.iti--separate-dial-code .iti__selected-flag {
    border-right: 1px solid #e0d5b8;
    border-radius: 7px 0 0 7px;
    background: rgba(253, 248, 238, 0.9);
    padding-right: 0.75rem;
}

.iti__country-list {
    border: 1px solid #e0d4b0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    font-family: var(--font-family-base);
}

.iti__country.iti__highlight { background: #fdf8ee; }

.auth-role-row {
    display: flex;
    justify-content: center;
    margin-top: 1.2rem;
}

.auth-radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #9a7b3a;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.auth-radio-pill input { accent-color: #c8a951; }

.auth-card--wide .form-row--auth { margin-bottom: 0.25rem; }
.auth-card--wide .auth-submit { margin-top: 1.5rem; }

@media (max-width: 900px) {
    .auth-card,
    .auth-card--wide {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

    .form-row--auth,
    .auth-compact-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .auth-brand { margin-bottom: 1.5rem; }

    .auth-card {
        border-radius: 10px;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
    }

    .auth-card h1 { margin-bottom: 1.3rem; }

    .auth-input-wrap,
    .phone-input-group,
    .auth-field input,
    .auth-field select,
    .auth-submit {
        border-radius: 10px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* ============================================
   3. LAYOUT - SIDEBAR & MAIN CONTENT (SB Admin pattern)
   ============================================ */

#wrapper {
    display: flex;
    overflow-x: hidden;
    min-height: 100vh;
}

.sidebar {
    width: 225px;
    min-height: 100vh;
    background: linear-gradient(180deg, #F2D888 0%, #FFF1C5 100%);
    border-right: 2px solid #c8a84b;
    box-shadow: 2px 0 12px rgba(0,0,0,0.07);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    overflow-y: auto;
    transition: width 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sidebar.toggled {
    width: 72px !important;
    overflow: visible;
}

.main-content {
    width: calc(100% - 225px);
    margin-left: 225px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
    transition: margin-left 0.25s ease, width 0.25s ease;
}

body.sidebar-toggled .main-content {
    width: calc(100% - 72px);
    margin-left: 72px;
}

/* Sidebar Header & Logo */
.sidebar-header {
    padding: 1rem 1rem 0.5rem 1rem;
    position: relative;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 80px;
}

.sidebar-toggle {
    position: absolute;
    right: 10px;
    top: 14px;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: #8C701C;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.sidebar-toggle:hover { background: rgba(140,112,28,0.1); }

.logo-link { display: block; }
.logo-img { max-width: 210px; max-height: 90px; height: auto; display: block; object-fit: contain; }

.header-logo { max-height: 54px; width: auto; object-fit: contain; }

/* Sidebar Navigation */
.sidebar-menu {
    list-style: none;
    padding: 0.5rem 0;
    flex: 1 1 auto;
    min-height: 0;
}

.sidebar-menu li { margin: 0.2rem 0; }

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: #8C701C;
    font-weight: 500;
    font-size: 1.05rem;
    transition: background 0.2s, color 0.2s;
    margin: 0 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
}

.sidebar-menu a:hover { background: rgba(140,112,28,0.10); color: #6B5D1E; }

.sidebar-menu a.active {
    background: rgba(191, 132, 0, 0.30);
    color: #6B5D1E;
    font-weight: 700;
}

.sidebar-menu a .icon {
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.25rem;
}

.sidebar-menu a .label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
}

/* Collapsed sidebar */
.sidebar.toggled .sidebar-header { padding-left: 0.5rem; padding-right: 0.5rem; }
.sidebar.toggled .sidebar-logo {
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0.25rem 0;
}
.sidebar.toggled .logo-link {
    display: none;
}
.sidebar.toggled .logo-img {
    width: 44px;
    max-width: 44px;
    max-height: 44px;
    height: 44px;
    object-fit: contain;
}
.sidebar.toggled .sidebar-menu a { justify-content: center; padding: 0.75rem 0.5rem; margin: 0 0.25rem; }
.sidebar.toggled .sidebar-menu a .label { display: none; }
.sidebar.toggled .submenu { display: none !important; }
.sidebar.toggled .logout-section .btn-export .label-text { display: none; }
.sidebar.toggled .sidebar-toggle { right: 50%; transform: translateX(50%); }

/* Submenu */
.submenu {
    list-style: none;
    padding-left: 2.2rem;
    margin: 0.2rem 0 0.6rem 0;
}

.submenu li a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    color: #7A5C2D;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 6px;
    margin: 0;
    white-space: normal;
    overflow: visible;
}

.submenu li a:hover { background: rgba(140,112,28,0.07); }

.submenu li a .label {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.25;
}

.sidebar-menu a.active + .submenu li a { color: #6B5D1E; font-weight: 500; }

/* Logout section */
.logout-section {
    padding: 1rem;
    margin-top: auto;
    width: 100%;
}

.logout-section form {
    width: 100%;
}

.logout-section .btn-export {
    width: 100%;
    justify-content: center;
}

.sidebar.toggled .logout-section {
    padding: 0.75rem 0.5rem 1rem;
}

.sidebar.toggled .logout-section .btn-export {
    width: calc(100% - 0.5rem);
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Mobile overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 199;
}

.sidebar-overlay.show { display: block; }

/* Mobile toggle button in topbar */
.sidebar-mobile-toggle {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: #8C701C;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    display: none;
}

/* Main Content inner */
#content { flex: 1; }

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
}

/* ============================================
   4. HEADER
   ============================================ */

.header {
    background: #ffffff;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2ddd4;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-profile strong { color: #8C701C; font-weight: 600; font-size: 0.92rem; }
.user-profile small  { color: #8C701C; font-size: 0.78rem; }

.notification-icon { font-size: 1.2rem; cursor: pointer; opacity: 0.7; }
.notification-icon:hover { opacity: 1; }

/* Avatar */
.avatar-initial {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #D99600;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1rem;
    flex-shrink: 0;
}

/* ============================================
   5. RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 992px) {
    .sidebar { width: 200px; }
    .main-content { width: calc(100% - 200px); margin-left: 200px; }
    body.sidebar-toggled .main-content { width: calc(100% - 72px); margin-left: 72px; }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(0);
        width: 240px !important;
    }
    .sidebar.toggled {
        width: 240px !important;
        transform: translateX(-240px);
        overflow: hidden;
    }
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
    body.sidebar-toggled .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .sidebar-mobile-toggle { display: inline-block; }
    .page-content { padding: 1rem; gap: 1rem; }
    .header { padding: 0.6rem 1rem; }
    .summary-cards { grid-template-columns: repeat(2, 1fr); }
    .projects-toolbar, .resource-controls, .staff-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 576px) {
    .summary-cards { grid-template-columns: 1fr; }
    .page-content { padding: 0.75rem; }
    .header { flex-wrap: wrap; gap: 0.5rem; }
    .resource-table th, .projects-table th, .staff-table th { padding: 0.5rem; font-size: 0.78rem; }
    .resource-table td, .projects-table td, .staff-table td { padding: 0.5rem; font-size: 0.82rem; }
    .btn { padding: 0.5rem 0.85rem; font-size: 0.88rem; }
    .form-control, input, select, textarea { font-size: 16px; }
}

/* ============================================
   LEGACY: welcome_message inline styles moved here
   (migrated from app/Views/welcome_message.php)
   ============================================ */

/* Page-specific layout styles for the welcome message */
* { transition: background-color 300ms ease, color 300ms ease; }
*:focus { background-color: rgba(221, 72, 20, .2); outline: none; }
html, body { color: rgba(33, 37, 41, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 16px; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
header { background-color: rgba(247, 248, 249, 1); padding: .4rem 0 0; }
.menu { padding: .4rem 2rem; }
header ul { border-bottom: 1px solid rgba(242, 242, 242, 1); list-style-type: none; margin: 0; overflow: hidden; padding: 0; text-align: right; }
header li { display: inline-block; }
header li a { border-radius: 5px; color: rgba(0, 0, 0, .5); display: block; height: 44px; text-decoration: none; }
header li.menu-item a { border-radius: 5px; margin: 5px 0; height: 38px; line-height: 36px; padding: .4rem .65rem; text-align: center; }
header li.menu-item a:hover, header li.menu-item a:focus { background-color: rgba(221, 72, 20, .2); color: rgba(221, 72, 20, 1); }
header .logo { float: left; height: 44px; padding: .4rem .5rem; }
header .menu-toggle { display: none; float: right; font-size: 2rem; font-weight: bold; }
header .menu-toggle button { background-color: rgba(221, 72, 20, .6); border: none; border-radius: 3px; color: rgba(255, 255, 255, 1); cursor: pointer; font: inherit; font-size: 1.3rem; height: 36px; padding: 0; margin: 11px 0; overflow: visible; width: 40px; }
header .menu-toggle button:hover, header .menu-toggle button:focus { background-color: rgba(221, 72, 20, .8); color: rgba(255, 255, 255, .8); }
header .heroe { margin: 0 auto; max-width: 1100px; padding: 1rem 1.75rem 1.75rem 1.75rem; }
header .heroe h1 { font-size: 2.5rem; font-weight: 500; }
header .heroe h2 { font-size: 1.5rem; font-weight: 300; }
section { margin: 0 auto; max-width: 1100px; padding: 2.5rem 1.75rem 3.5rem 1.75rem; }
section h1 { margin-bottom: 2.5rem; }
section h2 { font-size: 120%; line-height: 2.5rem; padding-top: 1.5rem; }
section pre { background-color: rgba(247, 248, 249, 1); border: 1px solid rgba(242, 242, 242, 1); display: block; font-size: .9rem; margin: 2rem 0; padding: 1rem 1.5rem; white-space: pre-wrap; word-break: break-all; }
section code { display: block; }
section a { color: rgba(221, 72, 20, 1); }
section svg { margin-bottom: -5px; margin-right: 5px; width: 25px; }
.further { background-color: rgba(247, 248, 249, 1); border-bottom: 1px solid rgba(242, 242, 242, 1); border-top: 1px solid rgba(242, 242, 242, 1); }
.further h2:first-of-type { padding-top: 0; }
.svg-stroke { fill: none; stroke: #000; stroke-width: 32px; }
footer { background-color: rgba(221, 72, 20, .8); text-align: center; }
footer .environment { color: rgba(255, 255, 255, 1); padding: 2rem 1.75rem; }
footer .copyrights { background-color: rgba(62, 62, 62, 1); color: rgba(200, 200, 200, 1); padding: .25rem 1.75rem; }
@media (max-width: 629px) {
    header ul { padding: 0; }
    header .menu-toggle { padding: 0 1rem; }
    header .menu-item { background-color: rgba(244, 245, 246, 1); border-top: 1px solid rgba(242, 242, 242, 1); margin: 0 15px; width: calc(100% - 30px); }
    header .menu-toggle { display: block; }
    header .hidden { display: none; }
    header li.menu-item a { background-color: rgba(221, 72, 20, .1); }
    header li.menu-item a:hover, header li.menu-item a:focus { background-color: rgba(221, 72, 20, .7); color: rgba(255, 255, 255, .8); }
}

/* ============================================
   MIGRATED INLINE STYLES
   These styles were converted from inline attributes in views.
   Keep names stable; if you want different naming, tell me.
   ============================================ */

/* Avatar initial circle used in header */
.avatar-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #D99600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

/* Small utility classes */
.text-center { text-align: center; }
.d-none { display: none !important; }
.mt-15 { margin-top: 15px; }
.mt-2rem { margin-top: 2rem; }
.mb-20 { margin-bottom: 20px; }
.mr-10 { margin-right: 10px; }
.flex-1 { flex: 1; }

/* Specific migrated pieces for resources views */
.project-address-note { margin-top: 6px; color: #555; font-size: 0.95em; }
.items-heading { color: #8C701C; margin-bottom: 1rem; }

/* Modal migrated styles (for #addItemModal) */
#addItemModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; padding: 20px; }
#addItemModal .modal-content { background: white; margin: 5% auto; padding: 30px; border-radius: 12px; width: 90%; max-width: 500px; }
#addItemModal .modal-close { float: right; font-size: 28px; cursor: pointer; }
#addItemModal .modal-heading { color: #8C701C; margin-bottom: 20px; }



/* active item with rounded pill background */
.sidebar-menu a.active {
    background-color: #F2D888;
    color: #8C701C;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: 14px;
    font-weight: 700;
}

.menu-section {
    padding: 1rem 0.5rem 0 0.5rem;
}

.menu-section h4 {
    color: #8C701C;
    font-size: 0.9rem;
    margin: 0.75rem 0;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.logout-section {
    padding: 1rem;
}

/* Submenu styling */
.submenu {
    list-style: none;
    margin: 0.2rem 0 0.6rem 0;
    padding-left: 2.2rem;
}

.submenu li a {
    display: block;
    padding: 0.4rem 0.5rem;
    color: #7A5C2D;
    font-size: 0.95rem;
    border-radius: 8px;
}

.submenu li a:hover {
    background-color: rgba(140,112,28,0.06);
}

.sidebar-menu a.active + .submenu li a {
    font-weight: 700;
    color: #8C701C;
}

/* collapsed sidebar */
.sidebar.collapsed {
    width: 72px !important;
}

.sidebar.collapsed .sidebar-logo { padding: 0.5rem 0; }
.sidebar.collapsed .logo-placeholder,
.sidebar.collapsed .logo-img { width: 48px; height: 48px; }
.sidebar.collapsed .sidebar-menu a { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
.sidebar.collapsed .sidebar-menu a .label { display: none; }
.sidebar.collapsed .submenu { display: none; }

/* Hide logout when sidebar is minimized/toggled */
.sidebar.collapsed .logout-section,
.sidebar.toggled .logout-section,
body.sidebar-toggled .logout-section { display: none; }

/* TABLE IMPROVEMENTS: spacing, rounded header, row padding */
.table-container { margin: 0.5rem 2rem 0.75rem 2rem; padding: 0; }
.resource-table th,
.projects-table th,
.staff-table th {
    background-color: #5c3d11;
    color: #f5e7b2;
    border-bottom: 4px solid #3e2808;
}
.resource-table td,
.projects-table td,
.staff-table td {
    padding: 1rem 1rem;
    vertical-align: middle;
}
.resource-table tbody tr:nth-child(odd),
.projects-table tbody tr:nth-child(odd),
.staff-table tbody tr:nth-child(odd) {
    background-color: #fff;
}
.resource-table tbody tr:nth-child(even),
.projects-table tbody tr:nth-child(even),
.staff-table tbody tr:nth-child(even) {
    background-color: #FBF7F0;
}
.table-actions { display: flex; gap: 0.5rem; justify-content: center; }

/* toolbar spacing above tables */
.projects-toolbar, .resource-controls, .staff-toolbar { display:flex; justify-content:space-between; align-items:center; padding: 0.5rem 2rem; gap:0.75rem; }

/* Make pager centered and spaced */
.pager-wrapper { margin: 2rem auto; }

/* Responsive adjustments */
@media (max-width: 992px) {
    .sidebar.collapsed { width: 72px; }
    .table-container { margin-left: 1rem; margin-right: 1rem; }
}


.main-content {
    width: calc(100% - 225px);
    margin-left: 225px;
    flex: 1;
    background-color: #fafafa;
    min-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-title-row h1,
.section-title-row h2 {
    margin: 0;
}

.section-title-row .text-muted {
    margin-top: 0.35rem;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.summary-card,
.dashboard-panel {
    background: var(--color-white);
    border: 1px solid #e0d4b0;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
}

.summary-card {
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    border-color: #c8a84b;
}

.summary-card p {
    margin: 0;
    color: #8C701C;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.summary-card h2 {
    margin: 0;
    color: #212529;
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;
}

.dashboard-panel {
    padding: 1.5rem;
}

.table-container,
.staff-table-container,
.tasks-table-wrap,
.equipment-items-wrap,
.items-container,
.dashboard-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0d4b0;
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
}

.table-container,
.dashboard-table-container {
    margin-top: 0.5rem;
}

.dashboard-panel table,
.resource-table,
.projects-table,
.staff-table,
.tasks-table,
.items-table,
.equipment-items-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.dashboard-panel table,
.resource-table,
.projects-table,
.staff-table,
.tasks-table {
    min-width: 720px;
}

.items-table,
.equipment-items-table {
    min-width: 820px;
}

.dashboard-panel h3 {
    margin: 0 0 1rem 0;
    color: #8C701C;
    border-bottom: 2px solid #F2D888;
    padding-bottom: 0.75rem;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.dashboard-panel table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.dashboard-panel table th {
    background: #f6f0dd;
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: #6d5414;
    border-bottom: 1px solid #e3d3a1;
}

.dashboard-panel table td {
    padding: 1rem;
    border-bottom: 1px solid #f0ead9;
    color: #5f5f5f;
}

.dashboard-panel table tr:hover {
    background: #fffaf0;
}

.blocker-item {
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff8eb;
    border: 1px solid #f1ddb0;
    border-left: 4px solid #e74c3c;
    border-radius: 12px;
}

.blocker-item strong {
    color: #212529;
    display: block;
    margin-bottom: 0.5rem;
}

.blocker-item p {
    margin: 0.35rem 0;
    color: #666;
    font-size: 0.94rem;
}

.empty-message {
    text-align: center;
    padding: 1.5rem;
    color: #7a7a7a;
    background: #faf7ef;
    border: 1px dashed #e2c97a;
    border-radius: 12px;
}

/* ============================================
   4. HEADER & NAVIGATION
   ============================================ */

.header {
    background-color: white;
    padding: 0.75rem 2rem;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 1px solid #E8E8E8;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: white;
    border-radius: 0;
}

.user-profile strong {
    color: #8C701C;
    font-weight: 600;
}

.user-profile small {
    color: #8C701C;
    font-size: 0.85rem;
}

/* ============================================
   5. BUTTONS
   ============================================ */

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family-base);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: #8C701C;
    color: white;
}

.btn-primary:hover {
    background-color: #6A5620;
}

.btn-secondary {
    background-color: white;
    color: #8C701C;
    border: 2px solid #D4A574;
}

.btn-secondary:hover {
    background-color: #D4A574;
    color: white;
}

.btn-success {
    background-color: #27ae60;
    color: white;
}

.btn-success:hover {
    background-color: #229954;
}

.btn-warning {
    background-color: #f39c12;
    color: white;
}

.btn-warning:hover {
    background-color: #e67e22;
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.btn-filter {
    background-color: white;
    border: 2px solid #8C701C;
    color: #8C701C;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-filter:hover {
    background-color: #F2D888;
}

.btn-import {
    background-color: #D4A574;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-import:hover {
    background-color: #c29563;
}

.btn-export {
    background-color: #FF9800;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-export:hover {
    background-color: #e68900;
}

.btn-add {
    background-color: #27ae60;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-add:hover {
    background-color: #229954;
}

/* ============================================
   6. FORMS
   ============================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D4A574;
    border-radius: 10px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
}

input[type="text"],
input[type="tel"],
textarea {
    text-transform: uppercase;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #8C701C;
    box-shadow: 0 0 0 3px rgba(140, 112, 28, 0.1);
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #8C701C;
    font-weight: 600;
    font-size: 0.95rem;
}

.phone-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #D4A574;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem;
    background: #F9F1DC;
    color: #8C701C;
    font-weight: 700;
    white-space: nowrap;
    border-right: 1px solid #D4A574;
}

.phone-input-group input {
    border: 0;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

.phone-input-group input:focus {
    box-shadow: none;
}

.auth-shell--register .iti--separate-dial-code .iti__selected-flag {
    border-radius: 10px 0 0 10px;
}

.phone-hint {
    display: block;
    margin-top: 0.35rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Manpower mobile form */
.manpower-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.manpower-topbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.manpower-back {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #d4a574;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #8C701C;
    text-decoration: none;
    flex: 0 0 auto;
}

.manpower-title {
    margin: 0;
    color: #8C701C;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
}

.manpower-card {
    background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
    border: 1px solid rgba(212, 165, 116, 0.45);
    border-radius: 24px;
    box-shadow: 0 16px 32px rgba(140, 112, 28, 0.12);
    padding: 1.2rem;
}

.manpower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.manpower-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.manpower-field label {
    color: #8C701C;
    font-weight: 600;
    font-size: 0.95rem;
}

.manpower-field input,
.manpower-field select {
    width: 100%;
    border: 1px solid #d4a574;
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    background: #f6f7fb;
    color: #232323;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.manpower-field input:focus,
.manpower-field select:focus {
    border-color: #8C701C;
    box-shadow: 0 0 0 4px rgba(140, 112, 28, 0.12);
    background: #fff;
}

.manpower-span-2 {
    grid-column: span 2;
}

.manpower-actions {
    display: flex;
    gap: .9rem;
    justify-content: center;
    margin-top: 1.6rem;
    flex-wrap: wrap;
}

.manpower-actions .btn {
    min-width: 132px;
    border-radius: 14px;
    padding: .9rem 1.3rem;
    font-weight: 700;
    border: none;
}

.btn-save-mobile {
    background: linear-gradient(180deg, #4ba44b 0%, #2f7d32 100%);
    color: #fff;
}

.btn-cancel-mobile {
    background: linear-gradient(180deg, #ff8b26 0%, #e46a09 100%);
    color: #fff;
}

.manpower-note {
    margin: .9rem 0 0;
    color: #7d6a49;
    font-size: .92rem;
    line-height: 1.45;
}

/* Equipment mobile form */
.equipment-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.equipment-topbar {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.equipment-back {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #d4a574;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #8C701C;
    text-decoration: none;
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.equipment-title {
    margin: 0;
    color: #8C701C;
    font-size: clamp(1.5rem, 4vw, 2.15rem);
    font-weight: 700;
}

.equipment-subtitle {
    margin: .45rem 0 0;
    color: #8b8b8b;
    font-size: .98rem;
    line-height: 1.5;
    max-width: 52ch;
}

.equipment-card {
    background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
    border: 1px solid rgba(212, 165, 116, 0.45);
    border-radius: 24px;
    box-shadow: 0 16px 32px rgba(140, 112, 28, 0.12);
    padding: 1.2rem;
}

.equipment-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.equipment-field label {
    color: #8C701C;
    font-weight: 600;
    font-size: 0.95rem;
}

.equipment-field input,
.equipment-field select {
    width: 100%;
    border: 1px solid #d4a574;
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    background: #f6f7fb;
    color: #232323;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.equipment-field input:focus,
.equipment-field select:focus {
    border-color: #8C701C;
    box-shadow: 0 0 0 4px rgba(140, 112, 28, 0.12);
    background: #fff;
}

.equipment-toggle-card {
    background: #fff;
    border: 1px solid rgba(212, 165, 116, 0.55);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    margin-top: 1.1rem;
}

.equipment-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #222;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}

.equipment-checkbox-label input {
    width: 22px;
    height: 22px;
    accent-color: #8C701C;
    flex: 0 0 auto;
}

.equipment-units-section {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .28s ease, opacity .2s ease, transform .2s ease;
}

.equipment-units-section.open {
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    margin-top: 1rem;
}

.equipment-section-head {
    margin: 1rem 0 0.8rem;
}

.equipment-section-head h2 {
    margin: 0 0 .25rem;
    color: #8C701C;
    font-size: 1.15rem;
}

.equipment-section-head p {
    margin: 0;
    color: #7d6a49;
    font-size: .92rem;
}

.equipment-items-wrap {
    overflow-x: auto;
}

.equipment-items-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    background: #fff;
    border: 1px solid rgba(212, 165, 116, 0.35);
    border-radius: 16px;
    overflow: hidden;
}

.equipment-items-table thead th {
    background: #5c3d11;
    color: #f5e7b2;
    text-align: center;
    padding: .85rem .8rem;
    font-size: .92rem;
}

.equipment-items-table td {
    padding: .65rem .8rem;
    border-top: 1px solid #f0e2c4;
    vertical-align: top;
    text-align: center;
}

.equipment-items-table input,
.equipment-items-table select {
    width: 100%;
    border: 1px solid #d4a574;
    border-radius: 14px;
    padding: .75rem .85rem;
    background: #f6f7fb;
}

.equipment-remove-btn {
    width: 100%;
    border: 1px solid #d4a574;
    background: #fff3e4;
    color: #8C701C;
    border-radius: 14px;
    padding: .75rem .85rem;
    font-weight: 600;
    cursor: pointer;
}

.equipment-address-group {
    display: none;
}

.equipment-address-group select,
.equipment-address-group input {
    width: 100%;
}

.equipment-address-project {
    display: block;
}

.equipment-warehouse-input-wrap {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

.equipment-warehouse-input-wrap input {
    flex: 1 1 auto;
}

.equipment-map-btn {
    flex: 0 0 auto;
    min-width: 72px;
    border: 1px solid #d4a574;
    border-radius: 14px;
    background: #fff7e8;
    color: #8C701C;
    font-weight: 600;
    padding: .75rem .9rem;
    cursor: pointer;
}

.equipment-map-btn:hover {
    background: #f4e1b9;
}

.equipment-map-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
}

.equipment-map-modal.open {
    display: block;
}

.equipment-map-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.equipment-map-dialog {
    position: relative;
    width: min(920px, calc(100vw - 1.5rem));
    margin: 5vh auto 0;
    background: #fffdf7;
    border-radius: 24px;
    border: 1px solid rgba(212, 165, 116, 0.45);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
    padding: 1rem;
}

.equipment-map-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
}

.equipment-map-header h2 {
    margin: 0;
    color: #8C701C;
    font-size: 1.2rem;
}

.equipment-map-header p {
    margin: .25rem 0 0;
    color: #7d6a49;
    font-size: .92rem;
}

.equipment-map-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #d4a574;
    background: #fff;
    color: #8C701C;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.equipment-map-search {
    width: 100%;
    border: 1px solid #d4a574;
    border-radius: 16px;
    padding: .85rem 1rem;
    margin-bottom: .75rem;
    background: #fff;
}

.equipment-map-canvas {
    height: min(55vh, 420px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(212, 165, 116, 0.45);
    background: #f4efe0;
}

.equipment-map-footer {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: .9rem;
    flex-wrap: wrap;
}

.equipment-map-footer .btn {
    min-width: 160px;
}

.equipment-actions-row {
    display: flex;
    justify-content: flex-start;
    margin-top: .9rem;
}

.equipment-actions {
    display: flex;
    gap: .9rem;
    justify-content: center;
    margin-top: 1.6rem;
    flex-wrap: wrap;
}

.equipment-actions .btn {
    min-width: 132px;
    border-radius: 14px;
    padding: .9rem 1.3rem;
    font-weight: 700;
    border: none;
}

@media (max-width: 640px) {
    .equipment-shell { padding-top: .25rem; }
    .equipment-card { padding: 1rem; border-radius: 22px; }
    .equipment-topbar { gap: 0.75rem; }
    .equipment-subtitle { font-size: .94rem; }
    .equipment-actions { justify-content: stretch; }
    .equipment-actions .btn { flex: 1 1 calc(50% - .45rem); }
    .equipment-warehouse-input-wrap { flex-direction: column; }
    .equipment-map-btn { width: 100%; }
    .equipment-map-dialog { margin-top: 2vh; width: calc(100vw - 1rem); padding: .85rem; border-radius: 20px; }
    .equipment-map-footer .btn { min-width: 0; flex: 1 1 calc(50% - .375rem); }
}

@media (max-width: 640px) {
    .manpower-shell { padding-top: .25rem; }
    .manpower-card { padding: 1rem; border-radius: 22px; }
    .manpower-grid { grid-template-columns: 1fr; }
    .manpower-span-2 { grid-column: span 1; }
    .manpower-actions { justify-content: stretch; }
    .manpower-actions .btn { flex: 1 1 calc(50% - .45rem); }
}

/* Custom date picker styles */
.date-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.date-picker .date-display {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D4A574;
    border-radius: var(--border-radius-md);
    background: var(--color-white);
}
.date-picker .date-toggle {
    background: var(--color-primary-light);
    border: 1px solid #D4A574;
    padding: 0.45rem 0.6rem;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.date-picker .date-toggle .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--color-primary-dark);
    line-height: 1;
}
.calendar-popup {
    position: fixed;
    width: 280px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    border-radius: 6px;
    display: none;
    z-index: 99999;
}
.calendar-popup.open { display: block; }
.calendar-popup .cal-header {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem;
}
.calendar-popup .cal-nav-btn {
    background: none; border: none; padding: 4px 6px; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--color-primary-dark); transition: background 120ms;
}
.calendar-popup .cal-nav-btn:hover { background: #f4e7c8; }
.calendar-popup .cal-nav-btn .material-symbols-outlined { font-size: 1.2rem; line-height: 1; }
.calendar-popup .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.calendar-popup .cal-day { text-align:center; padding:6px; border-radius:4px; cursor:pointer; }
.calendar-popup .cal-day:hover { background: #f4e7c8; }
.calendar-popup .cal-day.disabled { color: #ccc; cursor:default; }
.calendar-popup .cal-title { font-weight:600; color:var(--color-primary-dark); }

/* Months and Years views */
.calendar-popup .months-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.calendar-popup .month-cell { padding:10px; text-align:center; border-radius:6px; cursor:pointer; }
.calendar-popup .month-cell:hover { background:#f4e7c8; }
.calendar-popup .year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.calendar-popup .year-cell { padding:8px; text-align:center; border-radius:6px; cursor:pointer; }
.calendar-popup .year-cell.active { background: var(--color-primary); color: #fff; }
.calendar-popup .year-cell:hover { background:#f4e7c8; }

/* Header clickable title */
.calendar-popup .cal-header .cal-title { cursor: pointer; }



.form-row.full {
    grid-template-columns: 1fr;
}

.form-hint {
    display: block;
    margin-top: 0.35rem;
    color: #7A5C2D;
    font-size: 0.85rem;
}

.project-form-container {
    margin: 0 2rem 2rem 2rem;
    max-width: none;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-title-row h2 {
    margin-bottom: 0;
}

.tasks-table-wrap {
    overflow-x: auto;
}

.tasks-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.tasks-table th {
    background-color: #6B5D1E;
    color: white;
    padding: 0.9rem;
    text-align: left;
    font-size: 0.9rem;
}

.tasks-table td {
    padding: 0.75rem;
    border-top: 1px solid #eadfc7;
    vertical-align: middle;
    text-align: center;
    background: #fff;
}

.tasks-table tr:nth-child(even) td {
    background: #FBF7F0;
}

.tasks-table input,
.tasks-table select {
    width: 100%;
    min-width: 120px;
}

.btn-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
}

.btn-toolbar.btn-filter {
    background: #FFF3D1;
    color: #8C701C;
    border: 2px solid #8C701C;
}

.btn-toolbar.btn-add {
    background: #2F8A2C;
    color: #fff;
}

.btn-toolbar.btn-import {
    background: #D4A22B;
    color: #fff;
}

.btn-toolbar.btn-export {
    background: #FF9F2D;
    color: #fff;
}

/* ============================================
   7. RESOURCE PAGES STYLES
   ============================================ */

.resource-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
}

.resource-header h1 {
    color: #8C701C;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

.projects-header,
.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
}

.projects-header h1,
.staff-header h1 {
    color: #8C701C;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

/* Resource Tabs */
.resource-tabs {
    display: flex;
    gap: 0.75rem;
    border-bottom: none;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.tab-btn {
    background-color: white;
    color: #8C701C;
    border: 2px solid #8C701C;
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 20px;
    transition: all var(--transition-base);
    text-transform: uppercase;
}

.tab-btn:hover {
    background-color: #F2D888;
}

.tab-btn-active {
    background-color: #8C701C;
    color: white;
    border: 2px solid #8C701C;
}

.tab-content {
    display: none;
}

.tab-content-active {
    display: block;
}

/* Single flex-item wrapper so inner controls/table are not direct .page-content flex children */
.page-module {
    display: block;
    margin: 0;
    padding: 0;
}

/* Resource Controls */
.resource-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 2rem;
}

.projects-toolbar,
.staff-toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 2rem;
}

.search-input {
    flex: 1;
    min-width: 250px;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 9999px;
    font-size: var(--font-size-base);
    background-color: #999;
    color: white;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   8. TABLES
   ============================================ */

.table-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    margin-left: 2rem;
    margin-right: 2rem;
    border: 1px solid #ddd;
}

.resource-table,
.projects-table,
.staff-table {
    width: 100%;
    border-collapse: collapse;
}

.resource-table thead,
.projects-table thead,
.staff-table thead {
    background-color: #5c3d11;
    color: #f5e7b2;
}

.resource-table th,
.projects-table th,
.staff-table th {
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resource-table tbody tr,
.projects-table tbody tr,
.staff-table tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background-color var(--transition-base);
}

.resource-table tbody tr:hover,
.projects-table tbody tr:hover,
.staff-table tbody tr:hover {
    background-color: #FFFBF0;
}

.resource-table td,
.projects-table td,
.staff-table td {
    padding: 1rem;
    font-size: 1.05rem;
    text-align: center;
}

.resource-table,
.projects-table,
.staff-table {
    border-collapse: collapse;
    width: 100%;
}

/* Per-table minimum widths to keep column layout readable */
.resource-table { min-width: 720px; }
.staff-table { min-width: 820px; }
.projects-table { min-width: 980px; }

/* Action icon sizing when using Material Symbols */
.action-btn .material-symbols-outlined,
.action-button .material-symbols-outlined {
    font-size: 1.1rem;
    vertical-align: middle;
    line-height: 1;
}

.resource-table thead,
.projects-table thead,
.staff-table thead,
.tasks-table thead,
.items-table thead,
.equipment-items-table thead {
    background-color: #5c3d11;
    color: #f5e7b2;
}

.resource-table th,
.projects-table th,
.staff-table th,
.tasks-table th,
.items-table th,
.equipment-items-table th {
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resource-table tbody tr,
.projects-table tbody tr,
.staff-table tbody tr,
.tasks-table tbody tr,
.items-table tbody tr,
.equipment-items-table tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background-color var(--transition-base);
}

.resource-table tbody tr:hover,
.projects-table tbody tr:hover,
.staff-table tbody tr:hover,
.tasks-table tbody tr:hover,
.items-table tbody tr:hover,
.equipment-items-table tbody tr:hover {
    background-color: #FFFBF0;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: #666;
}

/* ============================================
   9. BADGES & TAGS
   ============================================ */

.status-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    background-color: #f8f9fa;
    color: #8C701C;
    border: 1px solid #eadfbe;
}

.progress-badge {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: #F2D888;
    color: #8C701C;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid #D4A574;
}

.status-available {
    background-color: #E8F5E9;
    color: #2e7d32;
}

.status-deployed {
    background-color: #FFF3E0;
    color: #e65100;
}

.status-maintenance {
    background-color: #F3E5F5;
    color: #6a1b9a;
}

.status-onleave {
    background-color: #E0E7FF;
    color: #283593;
}

.status-repair {
    background-color: #FCE4EC;
    color: #880e4f;
}

.status-in-use {
    background-color: #E8F5E9;
    color: #2e7d32;
}

.status-in-storage {
    background-color: #FFF3E0;
    color: #e65100;
}

.role-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    background-color: #E3F2FD;
    color: #1565c0;
}

.condition-badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 0.8rem;
    background-color: #F2D888;
    color: #8C701C;
}

.tag-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 0.75rem;
    margin: 0 0.25rem;
    background-color: #D4A574;
    color: white;
}

/* ============================================
   10. ACTION BUTTONS
   ============================================ */

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    margin: 0 0.1rem;
    text-decoration: none;
    transition: transform var(--transition-base);
    padding: 0.3rem;
    color: #8C701C;
    display: inline-flex;
    align-items: center;
}
td .action-btn { vertical-align: middle; }

.action-btn:hover {
    transform: scale(1.15);
}

.action-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    margin: 0 0.25rem;
    text-decoration: none;
    transition: transform var(--transition-base);
    padding: 0.5rem;
    color: #8C701C;
}

.action-button:hover {
    transform: scale(1.15);
}

/* ============================================
   11. INDIVIDUAL ITEMS TABLE (Resources)
   ============================================ */

.items-container {
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.items-table th,
.items-table td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 0.9rem;
}

.items-table th {
    background-color: #5c3d11;
    font-weight: 700;
    color: #f5e7b2;
}

.items-table input,
.items-table select {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.85rem;
    border: 1px solid #D4A574;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-base);
}

.items-table input:focus,
.items-table select:focus {
    outline: none;
    border-color: #8C701C;
    box-shadow: 0 0 0 2px rgba(140, 112, 28, 0.1);
}

/* ============================================
   12. FORM SECTIONS
   ============================================ */

.resource-form-container,
.form-container {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Staff create/edit form */
.staff-form-container {
    max-width: 1100px;
}


.staff-names-row,
.staff-contact-row {
    display: grid;
    column-gap: 1.5rem;
}

.staff-names-row {
    grid-template-columns: 1fr 1fr 1fr;
}

.staff-contact-row {
    grid-template-columns: 1fr 1fr;
}

.staff-names-row .form-group,
.staff-contact-row .form-group {
    margin-bottom: 0.85rem;
}

.staff-policy-notice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    background: #fdf6e3;
    border: 1px solid #e6dcc0;
    border-radius: 8px;
    color: #5a4210;
    font-size: 0.93rem;
    margin-bottom: 0;
}

.staff-policy-notice input[type="radio"] {
    accent-color: #8C701C;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: not-allowed;
}

@media (max-width: 680px) {
    .staff-names-row,
    .staff-contact-row {
        grid-template-columns: 1fr;
    }
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E8E8E8;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h2 {
    color: #8C701C;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.form-section h3 {
    color: #8C701C;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: flex-end;
}

/* ============================================
   STAFF DETAIL (CARD)
   ============================================ */
.detail-container {
    max-width: 1100px;
    margin: 1.5rem 2rem;
    background: white;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    border-left: 6px solid var(--color-primary);
}

.detail-container dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.5rem 1.5rem;
    align-items: start;
}

.detail-container dt {
    color: var(--color-gray-dark);
    font-weight: 700;
    font-size: 0.95rem;
    padding-top: 0.25rem;
}

.detail-container dd {
    margin: 0 0 0.75rem 0;
    color: #333;
    font-size: 1rem;
}

.detail-container .form-actions {
    margin-top: 1.5rem;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .detail-container dl { grid-template-columns: 1fr; }
    .detail-container { margin: 1rem; padding: 1rem; }
}

/* ============================================
   13. ALERTS
   ============================================ */

.alert-success {
    background-color: #E8F5E9;
    color: #2e7d32;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    border-left: 4px solid #27ae60;
    margin-bottom: 1rem;
}

.alert-error {
    background-color: #FFEBEE;
    color: #c62828;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    border-left: 4px solid #e74c3c;
    margin-bottom: 1rem;
}

.alert-warning {
    background-color: #FFF3E0;
    color: #e65100;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    border-left: 4px solid #f39c12;
    margin-bottom: 1rem;
}

/* ============================================
   14. PAGINATION
   ============================================ */

/* ── Interactive pager ── */
.pager-section {
    position: relative;
}
.pager-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 8px;
    backdrop-filter: blur(1px);
}
.pager-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #e8dfc7;
    border-top-color: #8C701C;
    border-radius: 50%;
    animation: pager-spin 0.65s linear infinite;
}
@keyframes pager-spin { to { transform: rotate(360deg); } }

.pager-jump {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    margin-left: 0.6rem;
}
.pager-jump input[type="number"] {
    width: 50px;
    height: 34px;
    border: 1.5px solid #d4c48a;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #3b2a0e;
    outline: none;
    padding: 0 4px;
    -moz-appearance: textfield;
}
.pager-jump input[type="number"]::-webkit-outer-spin-button,
.pager-jump input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.pager-jump input[type="number"]:focus {
    border-color: #8C701C;
    box-shadow: 0 0 0 2px rgba(140,112,28,0.15);
}

.pager-top {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    font-size: .81rem;
    color: #666;
    font-weight: 500;
}
.pager-top select {
    height: 30px;
    border: 1.5px solid #d4c48a;
    border-radius: 7px;
    padding: 0 26px 0 10px;
    font-size: .84rem;
    font-weight: 700;
    color: #3b2a0e;
    font-family: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C701C'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 9px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}
.pager-top select:focus {
    border-color: #8C701C;
    box-shadow: 0 0 0 2px rgba(140,112,28,.15);
}

.pz-page-hidden { display: none !important; }

.pager-info {
    font-size: 0.82rem;
    color: #888;
    font-weight: 500;
    white-space: nowrap;
    margin-right: auto;
}

/* ── Warehouse address picker ── */
.unit-warehouse-input-wrap { position: relative; }
.wh-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    z-index: 2000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}
.wh-picker.open { display: block; }
.wh-picker-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #999;
    padding: 0.55rem 0.75rem 0.2rem;
}
.wh-picker-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 0;
}
.wh-picker-item:hover { background: #f5f5f5; }
.wh-picker-pin {
    flex-shrink: 0;
    font-size: 17px;
    color: #8C701C;
    line-height: 1;
}
.wh-picker-other-icon {
    flex-shrink: 0;
    font-size: 17px;
    color: #aaa;
    line-height: 1;
}
.wh-picker-info { flex: 1; min-width: 0; }
.wh-picker-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #222;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wh-picker-addr-small {
    font-size: 0.75rem;
    color: #777;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wh-picker-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #bbb;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.wh-picker-remove:hover { color: #e53935; background: #fff0f0; }
.wh-picker-divider { border: none; border-top: 1px solid #f0f0f0; margin: 0.2rem 0; }
.wh-picker-save-row {
    padding: 0.35rem 0.75rem 0.5rem;
    border-top: 1px solid #f0f0f0;
}
.wh-picker-save-btn {
    background: none;
    border: none;
    color: #1a73e8;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.2rem 0;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.wh-picker-save-btn:hover { text-decoration: underline; }
.wh-picker-name-row {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem 0.4rem;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.wh-picker-name-input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.28rem 0.5rem;
    font-size: 0.78rem;
    font-family: inherit;
    min-width: 0;
}
.wh-picker-name-input:focus { outline: none; border-color: #8C701C; box-shadow: 0 0 0 2px rgba(140,112,28,0.12); }
.wh-picker-name-confirm {
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.6rem;
    font-size: 0.76rem;
    cursor: pointer;
    font-family: inherit;
    background: #8C701C;
    color: #fff;
    white-space: nowrap;
}
.wh-picker-name-confirm:hover { background: #6a540f; }
.wh-picker-name-cancel {
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.5rem;
    font-size: 0.76rem;
    cursor: pointer;
    font-family: inherit;
    background: #eee;
    color: #555;
}
.wh-picker-name-cancel:hover { background: #ddd; }
.wh-picker-empty {
    padding: 0.9rem 0.75rem;
    text-align: center;
    color: #888;
    font-size: 0.8rem;
}

.pager-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.2rem 2rem;
    gap: 0.5rem;
}

.pager-list {
    display: flex;
    list-style: none;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pager-link,
.pager-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 600;
    text-decoration: none;
    color: #8C701C;
    background-color: white;
    border: 1px solid #ddd;
    transition: all var(--transition-base);
}

.pager-link:hover {
    background-color: #F2D888;
    border-color: #8C701C;
}

.pager-active {
    background-color: #8C701C;
    color: white;
    border-color: #8C701C;
}

.pager-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8C701C;
    font-weight: 600;
}

/* Staff module styles */
.staff-table-container {
    overflow-x: auto;
    background: white;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.staff-table th,
.staff-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0e6d8;
    text-align: left;
}

.staff-table thead th {
    background: #5c3d11;
    color: #f5e7b2;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.action-button {
    display: inline-block;
    margin: 0 0.125rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.action-button:hover { background: #fff7e6; border-color: #e0c080; }

.role-badge {
    display: inline-block;
    padding: 0.22rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-transform: uppercase;
    /* default (fallback) */
    background: #f0ead8;
    color: #6b4d12;
}
.role-badge--administrator    { background: #1a3c5e; color: #fff; }
.role-badge--ops-manager      { background: #1e6b45; color: #fff; }
.role-badge--project-manager  { background: #7a4f1a; color: #fff; }
.role-badge--site-engineer    { background: #5a2d82; color: #fff; }

/* Toolbar */
.staff-toolbar { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.staff-toolbar .search-input { flex:1; min-width:200px; }
.btn-toolbar { padding:0.5rem 0.75rem; border-radius:6px; background:#fff; border:1px solid #e6dcc0; cursor:pointer; }
.btn-toolbar.btn-add { background: #8C701C; color:white; border-color:#8C701C }

/* Custom toast */
.custom-toast {
    position: fixed;
    right: 1rem;
    bottom: 1.25rem;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: all 240ms ease;
    z-index: 1100;
    pointer-events: none;
}
.custom-toast.show { transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.custom-toast.success { background: #2e7d32; }
.custom-toast.error { background: #c62828; }

/* Row removal animation handled via inline JS (animateRowOut) — no CSS class needed */

/* Responsive tweaks */
@media (max-width: 700px) {
    .staff-table thead { display:none; }
    .staff-table, .staff-table tbody, .staff-table tr, .staff-table td { display:block; width:100%; }
    .staff-table tr { margin-bottom: 1rem; border-bottom: 1px solid #eee; }

@media (max-width: 768px) {
    .page-content {
        padding: 1rem;
        gap: 1rem;
    }

    .section-title-row,
    .projects-toolbar,
    .resource-controls,
    .staff-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-container,
    .staff-table-container,
    .tasks-table-wrap,
    .equipment-items-wrap,
    .items-container,
    .dashboard-table-container {
        margin-left: 0;
        margin-right: 0;
    }

    .summary-cards {
        grid-template-columns: 1fr;
    }

    .dashboard-panel {
        padding: 1rem;
    }

    .dashboard-panel table,
    .resource-table,
    .projects-table,
    .staff-table,
    .tasks-table,
    .items-table,
    .equipment-items-table {
        min-width: 640px;
    }

    .table-container {
        padding: 0.25rem;
    }
}
    .staff-table td { text-align:right; padding-left:50%; position:relative; }
    .staff-table td::before { content: attr(data-label); position:absolute; left:0; width:45%; padding-left:1rem; font-weight:600; text-align:left; }
}

/* Confirm dialog */
.confirm-dialog { position:fixed; inset:0; align-items:center; justify-content:center; z-index:9999; pointer-events:none; display:none; }
.confirm-dialog .confirm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.confirm-dialog .confirm-box { position:relative; background:#fff; padding:1.6rem 1.5rem 1.3rem; width:400px; max-width:92%; border-radius:14px; box-shadow:0 8px 40px rgba(0,0,0,.2); border:1.5px solid #f5c6c6; transform:translateY(12px) scale(0.98); opacity:0; transition:all 200ms ease; pointer-events:auto; }
.confirm-dialog.open { display:flex; }
.confirm-dialog.open .confirm-box { transform:translateY(0) scale(1); opacity:1; }
.confirm-dialog.confirm-archive .confirm-box { border-color:#ffe0b2; }
.confirm-hdr { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.confirm-hdr-icon { font-size:1.5rem; color:#c0392b; font-variation-settings:'FILL' 1,'wght' 400; flex-shrink:0; }
.confirm-dialog.confirm-archive .confirm-hdr-icon { color:#e67e22; }
.confirm-hdr-title { font-weight:700; font-size:1.05rem; color:#1a1a1a; margin:0; }
.confirm-content p { margin:0; font-size:1rem; color:#444; line-height:1.5; }
.confirm-actions { display:flex; gap:.55rem; margin-top:1.3rem; }
.confirm-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem 1rem; border-radius:8px; font-weight:700; font-size:1rem; cursor:pointer; border:2px solid; transition:all .15s; white-space:nowrap; }
.confirm-btn-action { background:#c0392b; color:#fff; border-color:#c0392b; }
.confirm-btn-action:hover { background:#a93226; border-color:#a93226; }
.confirm-dialog.confirm-archive .confirm-btn-action { background:#e67e22; border-color:#e67e22; }
.confirm-dialog.confirm-archive .confirm-btn-action:hover { background:#ca6f1e; border-color:#ca6f1e; }
.confirm-btn-cancel { background:transparent; color:#c0392b; border-color:#c0392b; }
.confirm-btn-cancel:hover { background:#fef2f2; }
.confirm-dialog.confirm-archive .confirm-btn-cancel { color:#e67e22; border-color:#e67e22; }
.confirm-dialog.confirm-archive .confirm-btn-cancel:hover { background:#fff8f0; }

/* ============================================
   15. PROJECTS MODULE
   ============================================ */

/* ── Location field ───────────────────────── */
.location-wrap { position: relative; }

.location-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.location-input-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.btn-locate-me {
    flex-shrink: 0;
    background: #8C701C;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s;
}
.btn-locate-me:hover { background: #6b5214; }
.btn-locate-me .material-symbols-outlined { font-size: 18px !important; }

.location-coords {
    font-size: 0.72rem;
    color: #888;
    margin-top: 0.3rem;
    min-height: 1.1em;
}
.location-coords.has-coords { color: #4caf50; }

/* ── Map preview ──────────────────────────── */
.map-preview-wrap {
    margin-top: 0.6rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
}
#locationMap {
    width: 100%;
    height: 300px;
    cursor: crosshair !important;
}
#locationMap * { cursor: crosshair !important; }
.map-hint {
    font-size: 0.73rem;
    color: #666;
    padding: 0.35rem 0.6rem;
    background: #f9f6ef;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Google Autocomplete dropdown z-index fix */
.pac-container { z-index: 99999 !important; }

/* ── Phase Schedule ───────────────────────── */
.phase-schedule {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E8D9A8;
}
.schedule-hdr {
    background: #6B5D1E;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
}

.schedule-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #F6F0E4;
    border-top: 2px solid #8C701C;
    font-weight: 800;
    font-size: 0.85rem;
    color: #1a1a1a;
}
#totalWeightDisplay { font-variant-numeric: tabular-nums; }

/* ── Milestone card ──────────────────────────────────────────────── */
/* 6-column grid:                                                      */
/*   col 1 (28px)  drag handle                                         */
/*   col 2 (65px)  qty  (row 2)  / part of name (row 1 spans 2-4)     */
/*   col 3 (100px) unit (row 2)  / part of name                       */
/*   col 4 (1fr)   overflow      / part of name                       */
/*   col 5 (130px) weight (row 1) / target date (row 2) — aligned!    */
/*   col 6 (30px)  delete                                              */
.phase-card {
    display: grid;
    grid-template-columns: 28px 65px 100px 1fr 130px 30px;
    column-gap: 8px;
    row-gap: 8px;
    padding: 12px;
    align-items: end;
    background: #fff;
    border-top: 1px solid #E8D9A8;
}
.phase-card:first-child { border-top: none; }

/* Row 1 */
.phase-drag-handle    { grid-column: 1; grid-row: 1; align-self: center; }
.phase-card-name-inp  { grid-column: 2 / 5; grid-row: 1; }
.phase-field.f-weight { grid-column: 5; grid-row: 1; }
.phase-del-btn        { grid-column: 6; grid-row: 1; align-self: center; }

/* Row 2 — equal-width flex wrapper spanning cols 2-5 */
.phase-row2 { grid-column: 2 / 6; grid-row: 2; display: flex; gap: 8px; }
.phase-row2 .phase-field { flex: 1; min-width: 0; }

.phase-card-name-inp {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    padding: 6px 8px;
    font-family: inherit;
    text-transform: uppercase;
    width: 100%;
    box-sizing: border-box;
}
.phase-card-name-inp::placeholder { color: #bbb; font-weight: 400; }
.phase-card-name-inp:focus { outline: none; border-color: #C8A951; box-shadow: 0 0 0 2px rgba(200,169,81,.15); }
/* ── Milestone field error highlight ──────────────── */
.pz-field-error,
input.pz-field-error,
select.pz-field-error,
.phase-weight-group.pz-field-error { border-color: #e53935 !important; background: #fff5f5 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.13) !important; }
.phase-weight-inp.pz-field-error   { background: #fff5f5 !important; }
/* Date-picker wrapper error state — highlights the visible display input inside */
.date-picker.pz-field-error .date-display { border-color: #e53935 !important; background: #fff5f5 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.13) !important; }

.phase-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.phase-field-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9a7b3a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Shared height token for all row-2 fields */
.phase-card-inp,
.phase-card-sel,
.phase-card-date-picker { height: 31px; box-sizing: border-box; }

.phase-card-inp {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.9rem;
    width: 100%;
    font-family: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}
.phase-card-inp::-webkit-inner-spin-button,
.phase-card-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.phase-card-sel {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 6px;
    font-size: 0.9rem;
    width: 100%;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}
/* Target date picker — same look as Start/End Date, scaled to field height */
.phase-card-date-picker { gap: 4px; }
.phase-card-date-picker .date-display {
    padding: 6px 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #555;
    flex: 1;
    min-width: 0;
    width: auto !important;   /* override .date-picker .date-display { width:100% } */
    height: 100%;
    box-sizing: border-box;
}
.phase-card-date-picker .date-toggle {
    padding: 5px 8px;
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
}

/* Weight input group: [ number | % ] */
.phase-weight-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    height: 31px;
    box-sizing: border-box;
}
.phase-weight-inp {
    border: none;
    border-radius: 0;
    padding: 6px 8px;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
    font-family: inherit;
    background: #fff;
}
.phase-weight-inp::-webkit-inner-spin-button,
.phase-weight-inp::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.phase-weight-unit {
    display: flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid #ddd;
    background: #fdf8ee;
    font-size: 0.85rem;
    font-weight: 700;
    color: #8c701c;
    font-family: inherit;
    user-select: none;
}
.phase-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e53935;
    transition: color .15s, background .15s;
}
.phase-del-btn:hover { background: #fdecea; }
.phase-del-btn .material-symbols-outlined { font-size: 18px !important; }

.phase-tasks-wrap {
    background: #FDFAF3;
    border-top: 1px solid #F0E8D0;
    padding: 8px 14px 10px;
}
.phase-task-row { margin-bottom: 8px; }

.task-name-inp {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    margin-bottom: 5px;
    box-sizing: border-box;
}
.task-meta-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.task-field-label { font-size: 0.78rem; font-weight: 600; color: #666; white-space: nowrap; }
.task-qty-inp { width: 70px; border: 1px solid #ddd; border-radius: 5px; padding: 5px 7px; font-size: 0.82rem; }
.task-unit-sel,
.task-status-sel { border: 1px solid #ddd; border-radius: 5px; padding: 5px 7px; font-size: 0.82rem; background: #fff; }
.task-unit-sel   { width: 70px; }
.task-status-sel { flex: 1; min-width: 100px; }
.task-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #bbb;
    display: flex;
    align-items: center;
    padding: 2px;
    transition: color .15s;
}
.task-del-btn:hover { color: #e53935; }
.task-del-btn .material-symbols-outlined { font-size: 18px !important; }
.btn-add-task {
    margin-top: 6px;
    background: none;
    border: 1.5px dashed #C8A951;
    border-radius: 6px;
    color: #8C701C;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 5px 12px;
    cursor: pointer;
    width: 100%;
    transition: background .15s;
}
.btn-add-task:hover { background: #FBF6E8; }

/* ============================================
   DASHBOARD
   ============================================ */

.db-root { display: flex; flex-direction: column; gap: 0; width: 100%; }

.db-section { padding-bottom: 2rem; width: 100%; box-sizing: border-box; }
.db-section + .db-section {
    border-top: 3px solid var(--db-gold);
    padding-top: 2rem;
}

/* ── Region header ──────────────────────────────────────── */
.db-region-title {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--db-text);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--db-gold);
    display: block;
    width: 100%;
}
.db-monitor-region {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* ── Monitor filter bar ─────────────────────────────────── */
/* Filter toggle button */
.db-filter-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
    position: relative;
}
.db-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    background: #f7f0dc;
    border: 2px solid var(--db-gold-dark);
    border-radius: 8px;
    color: var(--db-gold-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    user-select: none;
}
.db-filter-toggle-btn:hover { background: #f0e3b8; box-shadow: 0 2px 6px rgba(140,112,28,0.15); }
.db-filter-toggle-btn .db-filter-arrow {
    font-size: 0.6rem;
    transition: transform 0.2s;
    display: inline-block;
}
.db-filter-toggle-btn.open .db-filter-arrow { transform: rotate(180deg); }

/* Filter dropdown panel */
.db-filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    background: #fff;
    border: 1.5px solid var(--db-border);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    padding: 0.75rem 1rem;
    min-width: 420px;
    max-width: 95vw;
}
.db-filter-dropdown.open { display: block; }

.db-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: transparent;
    border: none;
}
.db-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.db-filter-row .db-filter-pills {
    flex-wrap: wrap;
    flex: 1;
}
.db-filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--db-gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 68px;
}
.db-filter-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
}
.db-filter-pill {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid var(--db-border);
    background: #fff;
    color: var(--db-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.db-filter-pill:hover { border-color: var(--db-gold); }
.db-filter-pill.active {
    background: var(--db-gold);
    border-color: var(--db-gold-dark);
    color: #fff;
}
.db-filter-divider { display: none; }
.db-filter-client-sel {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1.5px solid var(--db-border);
    background: #fff;
    color: var(--db-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    width: 130px;
}
.db-filter-client-sel:focus { border-color: var(--db-gold); }
.db-monitor-no-results {
    display: none;
    text-align: center;
    color: var(--db-gold-dark);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 3rem 1rem;
    border: 2px dashed var(--db-border);
    border-radius: 12px;
    margin-top: 1rem;
    background: #faf6ea;
}

/* ── Summary date header ────────────────────────────────── */
.db-today {
    font-size: 1.15rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0;
}
.db-today-date {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--db-text);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

/* ── Info cards row ─────────────────────────────────────── */
.db-info-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
.db-info-row {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 0.5rem;
    align-items: stretch;
}
.db-info-col          { flex: 1 1 0; min-width: 0; }
.db-info-col--wide    { flex: 2 1 0; min-width: 0; }
.db-info-col--stack   {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.db-info-col--stack > .db-info-col { flex: 1 1 0; }

/* Blockers card — full width, two-column split table */
.db-info-card--blockers {
    min-height: 260px;
    max-height: 340px;
}
.db-blocker-cols {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
}
.db-blocker-cols > .db-info-tbl-wrap {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.db-blocker-divider {
    width: 1px;
    background: var(--db-border);
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Info cards (Blockers / Tools / Deploy) ─────────────── */
.db-info-card {
    background: var(--db-cream);
    border: 2px solid var(--db-gold);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.db-info-card--tall {
    min-height: 260px;
    max-height: 340px;
}
.db-info-card--half {
    min-height: 120px;
    max-height: 160px;
}
.db-info-title {
    text-align: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--db-gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
}

/* scrollable table wrapper */
.db-info-tbl-wrap {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.db-info-tbl-wrap::-webkit-scrollbar { width: 4px; }
.db-info-tbl-wrap::-webkit-scrollbar-track { background: transparent; }
.db-info-tbl-wrap::-webkit-scrollbar-thumb { background: var(--db-gold); border-radius: 4px; }

.db-blockers-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.db-blocker-box {
    border: 1.5px solid var(--db-text);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.28rem;
    overflow: hidden;
    min-width: 0;
}
.db-blocker-name {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--db-gold-dark);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.db-blocker-line {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--db-gold-dark);
    white-space: nowrap;
    flex-shrink: 0;
}
.db-blocker-sep { color: var(--db-border); font-size: 0.78rem; flex-shrink: 0; }

/* ── Summary card helpers ───────────────────────────────── */
.db-info-card--spaced  { margin-bottom: 0.75rem; }
.db-info-empty {
    text-align: center;
    font-style: italic;
    color: var(--db-gold-dark);
    font-size: 0.8rem;
    padding: 0.8rem 0.5rem;
    margin: 0;
    opacity: 0.8;
    flex-shrink: 0;
}
.db-info-tbl td.db-tbl-name  { text-align: left;  font-weight: 700; }
.db-info-tbl td.db-tbl-right { text-align: right; }
.db-info-tbl td.db-delay-warn { color: #c0392b; font-weight: 700; }
.db-info-tbl td.db-delay-ok   { color: #999; }
.db-info-tbl td.db-status-dim { color: #777; }
.db-ai-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: #1e6b45;
    letter-spacing: 0;
    margin-left: 4px;
    vertical-align: middle;
}

.db-info-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
}
.db-info-tbl thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.db-info-tbl thead th {
    background: var(--db-gold);
    color: var(--db-text);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.22rem 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
}
.db-info-tbl tbody td {
    padding: 0.22rem 0.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--db-text);
    border-bottom: 1px solid var(--db-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
}
.db-info-tbl tbody tr:nth-child(odd)  td { background: #fff; }
.db-info-tbl tbody tr:nth-child(even) td { background: var(--db-cream); }
.db-info-tbl tbody tr:hover td { background: #f0e8d0; }

/* ── Project Card ───────────────────────────────────────── */
.db-project-card {
    background: #fff;
    border: 1px solid #ddd6c8;
    border-radius: 16px;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09), 0 0 0 1px rgba(0,0,0,0.02);
    transition: box-shadow .2s, border-color .2s;
}
.db-project-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.13); border-color: #c8a84b; }

.db-project-name-box {
    border: 2px solid var(--db-text);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--db-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0.7rem;
}
.db-project-name-link {
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.db-project-name-link:hover {
    background: #f5edda;
    border-color: #C47A0F;
    color: #6e570f;
    text-decoration: none;
}
.db-project-name-link .material-symbols-outlined {
    font-size: 14px;
    opacity: 0.6;
    font-variation-settings: 'FILL' 0, 'wght' 400;
    flex-shrink: 0;
}

.db-progress {
    position: relative;
    height: 26px;
    border-radius: 999px;
    background: var(--db-text);
    overflow: hidden;
    margin-bottom: 0.7rem;
}
.db-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: #F2C94C;
    border-radius: 999px;
    min-width: 28px;
    transition: width .6s ease;
}
.db-progress-pct {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 1;
    white-space: nowrap;
}

.db-dates { margin-bottom: 0.65rem; }
.db-date-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.db-date-label {
    font-weight: 800;
    font-size: 0.97rem;
    color: var(--db-text);
    text-transform: uppercase;
    white-space: nowrap;
}
.db-date-val {
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--db-orange);
    text-transform: uppercase;
}

.db-resources { flex: 1; margin-bottom: 0.65rem; overflow: hidden; }
.db-pill {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--db-text);
    border-radius: 999px;
    padding: 3px 10px 3px 6px;
    margin-bottom: 5px;
    gap: 5px;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--db-text);
    background: #fff;
    line-height: 1;
}
.db-pill-icons { display: flex; gap: 1px; align-items: center; flex-shrink: 0; }
.db-pill-icons .material-symbols-outlined { font-size: 16px !important; line-height: 1; }
.db-pill-name { flex: 1; line-height: 1; }

.db-more { display: none; }
.db-card-expanded .db-more { display: block; }
.db-btn-expand .material-symbols-outlined { transition: transform .2s ease; }
.db-card-expanded .db-btn-expand .material-symbols-outlined { transform: rotate(180deg); }

.db-card-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 0.55rem;
    border-top: 1px solid #EDE6D8;
    margin-top: auto;
    flex-wrap: nowrap;
}
.db-icon-chat { color: var(--db-orange); font-size: 20px !important; cursor: pointer; font-variation-settings:'FILL' 1,'wght' 600; }
.db-icon-warn { color: #E53935;          font-size: 20px !important; cursor: pointer; font-variation-settings:'FILL' 1,'wght' 600; }
.db-btn-locate {
    margin-left: auto;
    background: var(--db-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 5px 13px;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: background .15s;
}
.db-btn-locate:hover { background: #A8630A; color: #fff; text-decoration: none; }
.db-btn-request {
    background: #1e6fae;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 5px 13px;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: background .15s;
}
.db-btn-request:hover { background: #155a8e; }
.db-btn-expand {
    background: transparent;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--db-text);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.db-empty {
    color: #888;
    font-size: 1.1rem;
    text-align: center;
    padding: 0.75rem 0;
    font-style: italic;
    margin: 0;
}

.db-info-card h1,.db-info-card h2,.db-info-card h3,
.db-info-card h4,.db-info-card h5 { margin: 0; }
.db-project-card h1,.db-project-card h2,
.db-project-card h3,.db-project-card h4 { margin: 0; }

/* ── Drag-and-drop resource pills ───────────────────────── */
.db-pill { cursor: default; user-select: none; }
.db-pill-icons { cursor: grab; }
.db-pill-icons:active { cursor: grabbing; }
.db-pill-ghost {
    opacity: 0.35;
    border-style: dashed !important;
    background: #FBF6E8 !important;
}
.db-pill-drag {
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
    transform: scale(1.03);
    background: #fff !important;
    border-color: var(--db-gold) !important;
    z-index: 9999;
}
/* Pending transfer — locked in source card until approved */
.db-pill--pending {
    opacity: 0.55;
    filter: grayscale(1);
    background: #f2f2f2 !important;
    border-color: #c8c8c8 !important;
    color: #9a9a9a !important;
}
.db-pill--pending .db-pill-icons { cursor: not-allowed !important; }
.db-pill--pending .db-pill-name::after {
    content: ' · PENDING';
    font-size: 0.62em;
    opacity: 0.75;
    letter-spacing: 0.04em;
}
/* In-Transit — visible in destination card but grayed until SE accepts */
.db-pill--transit {
    opacity: 0.60;
    filter: grayscale(0.6);
    background: #e8f0fe !important;
    border-color: #93b4f7 !important;
    color: #3b5bdb !important;
}
.db-pill--transit .db-pill-icons { cursor: not-allowed !important; }
.db-pill--transit .db-pill-name::after {
    content: ' · IN-TRANSIT';
    font-size: 0.62em;
    opacity: 0.8;
    letter-spacing: 0.04em;
}
.db-res-drop-zone.dnd-active {
    background: rgba(200,169,81,0.06);
    border-radius: 6px;
    outline: 2px dashed rgba(200,169,81,0.4);
    outline-offset: 3px;
}
.db-res-drop-zone.dnd-drop-zone {
    background: rgba(200,169,81,0.04);
    border-radius: 6px;
    outline: 2px dashed rgba(200,169,81,0.22);
    outline-offset: 3px;
}
.db-project-card.dnd-received {
    box-shadow: 0 0 0 3px var(--db-gold) !important;
    transition: box-shadow .05s;
}

/* ── Delay / Past-Deadline card highlight ───────────────── */
.db-card--delayed {
    border-color: #f59e0b !important;
    box-shadow: 0 2px 10px rgba(245,158,11,0.18), 0 0 0 2px rgba(245,158,11,0.25) !important;
}
.db-card--past-deadline {
    border-color: #ef4444 !important;
    box-shadow: 0 2px 10px rgba(239,68,68,0.18), 0 0 0 2px rgba(239,68,68,0.25) !important;
}
.db-card-delay-banner {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    padding: .3rem .6rem;
    margin-bottom: .5rem;
}
.db-card-delay-banner .material-symbols-outlined { font-size: 1rem; }
.db-card-delay-banner--deadline {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Delay/deadline filter pills ────────────────────────── */
.db-filter-pill--warning.active,
.db-filter-pill--warning:hover { border-color: #f59e0b; background: #f59e0b; color: #fff; }
.db-filter-pill--warning { border-color: #f59e0b; color: #92400e; }
.db-filter-pill--danger.active,
.db-filter-pill--danger:hover  { border-color: #ef4444; background: #ef4444; color: #fff; }
.db-filter-pill--danger  { border-color: #ef4444; color: #991b1b; }

/* ── Right map sidebar panel ────────────────────────────── */
.main-content {
    transition: margin-left 0.25s ease, margin-right 0.25s ease, width 0.25s ease;
}
body.map-panel-open     .main-content { width: calc(100% - 225px - 380px); margin-right: 380px; }
body.map-panel-collapsed .main-content { width: calc(100% - 225px - 52px); margin-right: 52px; }
body.sidebar-toggled.map-panel-open     .main-content { width: calc(100% - 72px - 380px); }
body.sidebar-toggled.map-panel-collapsed .main-content { width: calc(100% - 72px - 52px); }

#mapSidePanel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 380px;
    background: var(--db-cream);
    border-left: 2px solid var(--db-gold);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0,0,0,0.10);
}
#mapSidePanel.map-panel-collapsed { width: 52px; }

.map-panel-hdr {
    background: var(--db-gold-dark);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 10px 11px 14px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 44px;
}
.map-panel-hdr .material-symbols-outlined { font-size: 18px !important; flex-shrink: 0; }
.map-panel-hdr-label {
    flex: 1;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.map-panel-hdr-spacer { width: 28px; flex-shrink: 0; }
#mapSidePanel.map-panel-collapsed .map-panel-hdr-spacer { display: none; }
.map-panel-toggle {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.map-panel-toggle .material-symbols-outlined {
    font-size: 20px !important;
    transition: transform 0.25s ease;
}
#mapSidePanel.map-panel-collapsed .map-panel-hdr-label { display: none; }
#mapSidePanel.map-panel-collapsed .map-panel-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}
#mapSidePanel.map-panel-collapsed #monitorMap { display: none; }
#monitorMap { flex: 1; width: 100%; min-height: 0; }
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #e5d9c0;
    flex-shrink: 0;
}
#mapSidePanel.map-panel-collapsed .map-legend { display: none; }
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.map-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(0,0,0,0.15);
}

@keyframes mapPanelFlash {
    0%, 100% { background: var(--db-gold-dark); }
    50%       { background: var(--db-gold); }
}
.map-panel-flash { animation: mapPanelFlash 0.45s ease 2; }

/* ── Resource category accordion ────────────────────────── */
.db-res-accordion { flex: 1; margin-bottom: 0.65rem; }
.db-res-group { margin-bottom: 0.3rem; }
.db-res-group-hdr {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: var(--db-cream);
    border: 1.5px solid var(--db-border);
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--db-gold-dark);
    transition: background 0.15s;
}
.db-res-group-hdr:hover { background: #F0E8C8; }
.db-res-group-hdr .material-symbols-outlined { font-size: 14px !important; }
.db-res-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.db-res-group.open .db-res-chevron { transform: rotate(90deg); }
.db-res-group-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #666;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.6;
    flex-shrink: 0;
}
.db-res-group-body { display: none; padding: 3px 2px 1px; }
.db-res-group.open .db-res-group-body { display: block; }
.db-res-drop-zone { min-height: 32px; }

@media (max-width: 991px) {
    body.map-panel-open .main-content,
    body.map-panel-collapsed .main-content { margin-right: 0 !important; }
    #mapSidePanel { z-index: 1045; box-shadow: -8px 0 30px rgba(0,0,0,0.2); }
    #mapSidePanel:not(.map-panel-collapsed) { width: min(380px, 85vw); }
}

/* ── Project Resources Page (.pr-*) ───────────────────────── */
.pr-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}
.pr-back {
    display: flex;
    align-items: center;
    color: var(--db-gold-dark);
    text-decoration: none;
    flex-shrink: 0;
}
.pr-back:hover { opacity: 0.75; }
.pr-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--db-gold-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-subtitle {
    font-size: 0.83rem;
    color: #777;
    margin-bottom: 1.1rem;
}
/* Currently Assigned panel */
.pr-section {
    background: #fff;
    border: 1.5px solid #e8e0d0;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}
.pr-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--db-gold-dark);
    margin-bottom: 0.6rem;
}
.pr-subsection-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0.7rem 0 0.4rem;
}
.pr-assigned-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f5efd8;
}
.pr-assigned-item:last-child { border-bottom: none; }
.pr-assigned-icon { color: var(--db-gold); font-size: 1.1rem; }
.pr-assigned-name { font-size: 0.88rem; font-weight: 700; }
.pr-assigned-meta { font-size: 0.76rem; color: #666; margin-top: 0.1rem; }
.pr-empty { color: #888; font-size: 0.87rem; padding: 0.4rem 0; }
/* Tab bar */
.pr-tabs {
    display: flex;
    border-bottom: 2px solid #e8e0d0;
    margin-bottom: 0.9rem;
}
.pr-tab {
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #777;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.pr-tab:hover { color: var(--db-gold-dark); }
.pr-tab.active { color: var(--db-gold-dark); border-bottom-color: var(--db-gold); }
/* Tab panels */
.pr-tab-content { display: none; }
.pr-tab-content.active { display: block; }
/* Resource cards */
.pr-resource-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1.5px solid #e8e0d0;
    border-radius: 8px;
    margin-bottom: 0.55rem;
    gap: 1rem;
}
.pr-resource-info { flex: 1; min-width: 0; }
.pr-resource-name {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.pr-resource-role, .pr-resource-meta {
    font-size: 0.76rem;
    color: #666;
    margin-top: 0.1rem;
}
.pr-resource-site { font-size: 0.73rem; color: #888; margin-top: 0.08rem; }
.pr-site-here { color: var(--db-gold); font-weight: 600; }
/* Buttons */
.pr-btn {
    padding: 0.38rem 0.9rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s, background 0.15s;
}
.pr-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.pr-btn-assign  { background: var(--db-gold);    color: #fff; }
.pr-btn-assign:hover:not(:disabled)  { background: var(--db-gold-dark); }
.pr-btn-remove  { background: #d9534f;            color: #fff; }
.pr-btn-remove:hover:not(:disabled)  { background: #c9302c; }
.pr-btn-unavail { background: #e0e0e0;            color: #aaa; }
.pr-btn-view    { background: var(--db-gold);    color: #fff; }
.pr-btn-view:hover { background: var(--db-gold-dark); }
/* Units modal */
.pr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}
.pr-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 460px;
    max-height: 78vh;
    overflow-y: auto;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.pr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.pr-modal-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--db-gold-dark);
}
.pr-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #aaa;
    padding: 0;
}
.pr-modal-close:hover { color: #555; }
.pr-modal-sub { font-size: 0.8rem; color: #666; margin-bottom: 0.9rem; }
.pr-unit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: #faf6ee;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}
.pr-unit-serial { font-size: 0.88rem; font-weight: 700; }
.pr-unit-status { font-size: 0.76rem; color: #666; margin-top: 0.1rem; }
.pr-loading { color: #888; font-size: 0.87rem; padding: 0.8rem 0; }

/* ── Project form — file upload widget ───────────────────── */
.file-upload-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border: 1.5px dashed #c8b97a;
    border-radius: 8px;
    background: #fdf9f0;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 42px;
}
.file-upload-label:hover {
    border-color: var(--db-gold);
    background: #faf3de;
}
.file-upload-icon { font-size: 1.15rem; color: var(--db-gold); flex-shrink: 0; }
.file-upload-text { font-size: 0.82rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-upload-list { margin-top: 0.45rem; display: flex; flex-direction: column; gap: 0.3rem; }
.file-upload-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #555;
    background: #f5f0e4;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
}
.file-upload-item .material-symbols-outlined { font-size: 0.95rem; color: var(--db-gold); }
.file-upload-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload-size { color: #777; flex-shrink: 0; }
.file-existing-list { margin-top: 0.6rem; }
.file-existing-label { font-size: 0.72rem; font-weight: 700; color: #777; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.3rem; }
.file-existing-list .file-upload-name { color: var(--db-gold-dark); text-decoration: none; }
.file-existing-list .file-upload-name:hover { text-decoration: underline; }
.file-remove-btn { margin-left: .4rem; flex-shrink: 0; background: none; border: none; cursor: pointer; color: #999; font-size: .85rem; line-height: 1; padding: 0 .15rem; border-radius: 3px; transition: color 120ms; }
.file-remove-btn:hover { color: #c0392b; }

/* ============================================================
   RESOURCE REQUESTS & TRANSFERS
   ============================================================ */

/* ── Page header ── */
.rr-header { margin-bottom: 0.5rem; }
.rr-header h1 { font-size: 1.4rem; font-weight: 800; color: #5c3d11; margin: 0 0 0.25rem; }
.rr-header p  { font-size: 0.82rem; color: #7a6040; margin: 0; line-height: 1.5; }

/* ── Search ── */
.rr-search-wrap { position: relative; margin: 1rem 0 0.75rem; }
.rr-search-wrap .material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 20px; pointer-events: none; }
.rr-search { width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.4rem; border: 1.5px solid #e0d5b8; border-radius: 999px; font-size: 0.88rem; background: #fff; outline: none; box-sizing: border-box; }
.rr-search:focus { border-color: #a0782a; }

/* ── Filter chips ── */
.rr-filters   { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1rem; }
.rr-chip-row  { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rr-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.85rem; border: 1.5px solid #d4c49a; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #7a5c1e; background: #fff; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.rr-chip:hover  { border-color: #8C701C; color: #8C701C; background: #fdf5e4; }
.rr-chip.active { background: #f5e7b2; border-color: #c8a951; color: #5c3d11; }
.rr-chip .material-symbols-outlined { font-size: 14px; }

/* ── List table ── */
.rr-table-wrap { overflow-x: auto; border-radius: 10px; border: 1.5px solid #d4c49a; }
.rr-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rr-table thead tr { background: #5c3d11; color: #f5e7b2; }
.rr-table th { padding: 0.6rem 0.85rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; text-align: left; }
.rr-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid #f0e8d0; color: #333; vertical-align: middle; }
.rr-table tbody tr:last-child td { border-bottom: none; }
.rr-table tbody tr:hover { background: #fdf8ed; }
.rr-table .rr-id    { font-family: monospace; font-size: 0.78rem; font-weight: 700; color: #7a5c1e; }
.rr-table .rr-site  { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-table .rr-empty { text-align: center; padding: 2rem; color: #999; font-style: italic; }

/* ── Action button (eye icon) ── */
.rr-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.5px solid #d4b87a; border-radius: 8px; color: #7a5c1e; text-decoration: none; transition: background .15s; }
.rr-action-btn:hover { background: #f5e7b2; color: #5c3d11; }
.rr-action-btn .material-symbols-outlined { font-size: 17px; }

/* ── Status badges ── */
.status-badge            { display: inline-block; padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.badge-pending           { background: #fff3cd; color: #856404;  border: 1px solid #ffc107; }
.badge-pending-secondary { background: #cfe2ff; color: #084298;  border: 1px solid #9ec5fe; }
.badge-approved          { background: #d1e7dd; color: #0a3622;  border: 1px solid #a3cfbb; }
.badge-rejected          { background: #f8d7da; color: #58151c;  border: 1px solid #f1aeb5; }
.badge-completed         { background: #e2e3e5; color: #2b2d42;  border: 1px solid #ced4da; }

/* ── Detail page ── */
.rr-back { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; color: #7a5c1e; text-decoration: none; margin-bottom: 1rem; }
.rr-back:hover { color: #5c3d11; }

.rr-detail-card { background: #fff; border: 1.5px solid #d4c49a; border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }

.rr-detail-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; }
.rr-detail-hdr h2 { font-size: 1.3rem; font-weight: 800; color: #5c3d11; margin: 0; }
.rr-detail-subtitle { font-size: 0.82rem; color: #7a6040; margin: 0; }

.rr-info-grid  { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; font-size: 0.85rem; }
.rr-info-label { font-weight: 600; color: #7a6040; white-space: nowrap; }
.rr-info-value { color: #222; }

.rr-section-title  { font-size: 1rem; font-weight: 800; color: #8C701C; margin: 0 0 0.6rem; }
.rr-reserved-empty { font-size: 0.83rem; color: #777; font-style: italic; }

.rr-reserved-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.85rem; border: 1.5px solid #e0d5b8; border-radius: 10px; margin-bottom: 0.5rem; }
.rr-reserved-name { font-weight: 700; font-size: 0.88rem; color: #333; }
.rr-reserved-sub  { font-size: 0.75rem; color: #888; margin-top: 0.1rem; }

/* ── Approval form ── */
.rr-approval-form { display: flex; flex-direction: column; gap: 0.85rem; }
.rr-form-field    { display: flex; flex-direction: column; gap: 0.3rem; }
.rr-form-field label  { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #7a5c1e; letter-spacing: 0.3px; }
.rr-form-field select { width: 100%; padding: 0.5rem 0.75rem; border: 1.5px solid #d4b87a; border-radius: 8px; font-size: 0.88rem; background: #fafaf8; color: #333; box-sizing: border-box; }
.rr-form-field select:focus { outline: none; border-color: #a0782a; }

.rr-bypass-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: #555; cursor: pointer; }
.rr-bypass-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #8C701C; flex-shrink: 0; }

.rr-approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.25rem; }

.btn-rr-approve { background: #2d7a3a; color: #fff; border: none; padding: 0.7rem; border-radius: 8px; font-weight: 700; font-size: 0.88rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: background .15s; width: 100%; }
.btn-rr-approve:hover { background: #245f2d; }

.btn-rr-reject { background: #fff; color: #c0392b; border: 2px solid #c0392b; padding: 0.7rem; border-radius: 8px; font-weight: 700; font-size: 0.88rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: background .15s, color .15s; width: 100%; }
.btn-rr-reject:hover { background: #c0392b; color: #fff; }

.btn-rr-secondary { background: #1a5fa8; color: #fff; border: none; padding: 0.7rem; border-radius: 8px; font-weight: 700; font-size: 0.88rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; width: 100%; transition: background .15s; }
.btn-rr-secondary:hover { background: #134a84; }

/* ── Dashboard drag-and-drop toast ── */
#dndToast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px); background: #5c3d11; color: #f5e7b2; padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9999; }
#dndToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Transfer confirm modal ── */
#dndConfirmOverlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; pointer-events: none;
    transition: opacity 200ms ease;
}
#dndConfirmOverlay.open { opacity: 1; pointer-events: auto; }
#dndConfirmBox {
    background: #fdf8ee; border-radius: 18px;
    padding: 1.6rem 1.5rem 1.3rem;
    width: min(340px, 92vw);
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    transform: translateY(12px) scale(.97);
    transition: transform 220ms ease, opacity 220ms ease;
    opacity: 0;
}
#dndConfirmOverlay.open #dndConfirmBox { transform: translateY(0) scale(1); opacity: 1; }
.dnd-modal-title {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.15rem; font-weight: 800; color: #3b2a0e;
    margin-bottom: 1rem;
}
.dnd-modal-title .material-symbols-outlined { font-size: 1.25rem; color: #7a5c1e; }
.dnd-modal-body { font-size: .88rem; color: #444; line-height: 1.6; margin-bottom: 1.2rem; }
.dnd-modal-body strong { color: #2c1a00; }
.dnd-modal-project { font-size: .78rem; font-weight: 700; color: #7a5c1e; letter-spacing: .04em; margin: .1rem 0; }
.dnd-modal-label { font-size: .75rem; color: #888; margin-top: .55rem; }
.dnd-modal-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-top: .8rem; border-top: 1px solid #e8dfc7;
}
.dnd-modal-cancel {
    background: none; border: none; color: #7a5c1e; font-size: .82rem;
    font-weight: 700; letter-spacing: .06em; cursor: pointer;
    text-transform: uppercase; padding: .4rem .5rem;
}
.dnd-modal-cancel:hover { color: #3b2a0e; }
.dnd-modal-confirm {
    background: #7a5c1e; color: #fff; border: none;
    border-radius: 10px; padding: .65rem 1.3rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; cursor: pointer;
    transition: background 150ms;
}
.dnd-modal-confirm:hover { background: #5c3d11; }
.dnd-modal-confirm:disabled { opacity: .55; cursor: not-allowed; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .rr-table th:nth-child(2),
    .rr-table td:nth-child(2) { display: none; }
    .rr-approval-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   PZ DESIGN SYSTEM — Standardised Page Components
   Projects · Resources · Staff · Requests
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.pz-page-header { padding: 1.4rem 2rem 0.6rem; }
.pz-page-header h1 { font-size: 1.8rem; font-weight: 700; color: #3b2a0e; margin: 0 0 .15rem; letter-spacing: -.01em; }
.pz-page-header p  { font-size: .9rem; color: #7a6040; margin: 0; }

/* ── Toolbar (search + action buttons) ───────────────────── */
.pz-toolbar { display: flex; align-items: center; gap: .55rem; padding: .55rem 2rem; flex-wrap: wrap; }
.pz-toolbar-right { display: flex; align-items: center; gap: .55rem; margin-left: auto; flex-wrap: wrap; }

/* ── Search input ────────────────────────────────────────── */
.pz-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.pz-search-wrap .material-symbols-outlined { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: #a08050; pointer-events: none; }
.pz-search { width: 100%; padding: .42rem .75rem .42rem 2.3rem; border: 1.5px solid #e0d5b8; border-radius: 999px; font-size: 1rem; font-family: inherit; background: #fdf8ee; color: #2c1a00; outline: none; transition: border-color 150ms; }
.pz-search:focus { border-color: #c8a951; background: #fff; }
.pz-search::placeholder { color: #b09060; }

/* ── Buttons ─────────────────────────────────────────────── */
.pz-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .42rem 1rem; border-radius: 7px; font-size: 1rem; font-weight: 700; font-family: inherit; letter-spacing: .04em; cursor: pointer; border: 1.5px solid transparent; transition: background 140ms, color 140ms, border-color 140ms; text-decoration: none; white-space: nowrap; line-height: 1.4; }
.pz-btn .material-symbols-outlined { font-size: 1.2rem; }
.pz-btn-primary { background: #16a34a; color: #fff; border-color: #16a34a; }
.pz-btn-primary:hover { background: #15803d; border-color: #15803d; color: #fff; }
.pz-btn-outline { background: transparent; color: #7a5c1e; border-color: #c8a951; }
.pz-btn-outline:hover { background: #f5e7b2; color: #3b2a0e; border-color: #8C701C; }
.pz-btn-cancel { background: transparent; color: #dc2626; border-color: #dc2626; }
.pz-btn-cancel:hover { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }
.pz-btn-ghost  { background: transparent; color: #7a5c1e; border-color: transparent; }
.pz-btn-ghost:hover { background: #f0e6c4; color: #3b2a0e; }
.pz-btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.pz-btn-danger:hover { background: #962d22; border-color: #962d22; color: #fff; }
.pz-btn-danger-outline { background: transparent; color: #c0392b; border-color: #c0392b; }
.pz-btn-danger-outline:hover { background: #fde8e6; }
.pz-btn-success { background: #2d7a3a; color: #fff; border-color: #2d7a3a; }
.pz-btn-success:hover { background: #225e2c; color: #fff; }
.pz-btn-sm { padding: .28rem .65rem; font-size: .74rem; }
.pz-btn:disabled, .pz-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Icon-only row action buttons */
.pz-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; color: #7a5c1e; background: transparent; border: none; cursor: pointer; transition: background 140ms, color 140ms; text-decoration: none; }
.pz-btn-icon .material-symbols-outlined { font-size: 1.2rem; }
.pz-btn-icon:hover { background: #f0e6c4; color: #3b2a0e; }
.pz-btn-icon.danger { color: #9a3a2a; }
.pz-btn-icon.danger:hover { background: #fde8e6; color: #c0392b; }

/* ── Flash alerts ────────────────────────────────────────── */
.pz-alert { display: flex; align-items: center; gap: .45rem; margin: .4rem 2rem .1rem; padding: .6rem 1rem; border-radius: 8px; font-size: 1rem; font-weight: 600; }
.pz-alert-success { background: #d1f0d9; color: #155724; border: 1px solid #a3d9b1; }
.pz-alert-error   { background: #fde8e6; color: #7b1f1f; border: 1px solid #f5b8b4; }

/* ── Filter panel ────────────────────────────────────────── */
.pz-filter-panel { margin: 0 2rem .75rem; background: #fdf8ee; border: 1.5px solid #e8dfc7; border-radius: 8px; padding: 1rem 1.25rem .85rem; display: none; }
.pz-filter-panel.open { display: block; }
.pz-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .65rem .9rem; }
.pz-filter-group { display: flex; flex-direction: column; gap: .28rem; }
.pz-filter-group label { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: #9a7b3a; letter-spacing: .05em; }
.pz-filter-group select, .pz-filter-group input[type="text"] { padding: .38rem .6rem; border: 1.5px solid #e0d5b8; border-radius: 6px; font-size: 1rem; font-family: inherit; background: #fff; color: #2c1a00; outline: none; transition: border-color 140ms; }
.pz-filter-group select:focus, .pz-filter-group input:focus { border-color: #c8a951; }
.pz-filter-footer { display: flex; align-items: center; gap: .65rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #e8dfc7; }
.pz-filter-badge { display: inline-flex; align-items: center; justify-content: center; background: #8C701C; color: #fff; border-radius: 50%; font-size: .58rem; font-weight: 700; width: 14px; height: 14px; margin-left: 3px; vertical-align: middle; }

/* Filter chips (alphabet / category / status) */
.pz-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pz-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .32rem .85rem; border-radius: 999px; border: 1.5px solid #d4c49a; font-size: 1rem; font-weight: 700; color: #7a5c1e; background: #fdf8ee; cursor: pointer; transition: background 140ms, border-color 140ms, color 140ms; text-decoration: none; }
.pz-chip:hover { background: #f0e6c4; border-color: #c8a951; color: #3b2a0e; }
.pz-chip.active { background: #f5e7b2; border-color: #c8a951; color: #5c3d11; }
.pz-chip .material-symbols-outlined { font-size: 1rem; }

/* ── Table ───────────────────────────────────────────────── */
.pz-table-wrap { margin: 0 2rem .75rem; border-radius: 10px; border: 1px solid #e0d4b0; box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); background: #fff; }
.pz-table { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
.pz-table thead tr { background: #5c3d11; }
.pz-table th { padding: .65rem 1rem; text-align: center; font-size: 1rem; font-weight: 700; color: #f5e7b2; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.pz-table th.center, .pz-table td.center { text-align: center; }
.pz-table tbody tr { border-bottom: 1px solid #f0e8d0; transition: background 110ms; }
.pz-table tbody tr:last-child { border-bottom: none; }
.pz-table tbody tr:hover { background: #fdf8ee; }
.pz-table td { padding: .62rem 1rem; font-size: 1rem; color: #2c1a00; vertical-align: middle; text-align: center; }
.pz-row-num  { color: #9a7b3a; font-size: .85rem; font-weight: 600; width: 40px; }
.pz-row-name { font-weight: 700; }
.pz-row-muted { color: #7a6040; font-size: 1rem; }
.pz-table-empty { text-align: center; padding: 2.5rem 1rem; color: #9a7b3a; font-size: 1rem; }
.pz-table-empty a { color: #8C701C; font-weight: 700; }
.pz-table-empty--filter { color: #7a5c1e; background: #fdf8ee; font-style: italic; }
.pz-table td.actions { white-space: nowrap; text-align: center; }

/* ── Status badges ───────────────────────────────────────── */
.pz-badge { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pz-badge-pending           { background: #f59e0b; color: #fff; }
.pz-badge-pending-secondary { background: #7c3aed; color: #fff; }
.pz-badge-approved          { background: #16a34a; color: #fff; }
.pz-badge-in-transit        { background: #3b82f6; color: #fff; }
.pz-badge-completed,
.pz-badge-done              { background: #475569; color: #fff; }
.pz-badge-rejected,
.pz-badge-halted            { background: #dc2626; color: #fff; }
.pz-badge-active,
.pz-badge-ongoing           { background: #d1f0d9; color: #155724; }
.pz-badge-available         { background: #d1e7dd; color: #0a3622; }
.pz-badge-deployed          { background: #fff3cd; color: #856404; }
.pz-badge-maintenance       { background: #cfe2ff; color: #084298; }
.pz-badge-unavailable       { background: #e2e3e5; color: #2b2d42; }
.pz-badge-progress          { background: #f5e7b2; color: #5c3d11; border: 1px solid #c8a951; }

/* ── Tabs ────────────────────────────────────────────────── */
.pz-tabs { display: flex; border-bottom: 2px solid #e8dfc7; margin: 0 2rem; padding: 0; gap: 0; }
.pz-tab { padding: .5rem 1.2rem; font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a7b3a; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color 140ms, border-color 140ms; }
.pz-tab:hover { color: #5c3d11; }
.pz-tab.active { color: #5c3d11; border-bottom-color: #8C701C; }

/* ── Back link ───────────────────────────────────────────── */
.pz-back-link { display: inline-flex; align-items: center; gap: .35rem; margin: 1.1rem 2rem .35rem; font-size: 1.4rem; font-weight: 700; color: #8C701C; text-decoration: none; letter-spacing: .03em; }
.pz-back-link .material-symbols-outlined { font-size: 1.5rem; }
.pz-back-link:hover { color: #3b2a0e; }

/* ── Detail / Show cards ─────────────────────────────────── */
.pz-card { background: #fff; border: 1px solid #e0d4b0; border-radius: 12px; margin: 0 2rem 1rem; padding: 1.2rem 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); }
.pz-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.pz-card-header h2 { font-size: 1.2rem; font-weight: 700; color: #3b2a0e; margin: 0; }
.pz-card-title   { font-size: 1.1rem; font-weight: 700; color: #3b2a0e; margin: 0 0 .8rem; }
.pz-card-subtitle{ font-size: 1rem; color: #7a6040; margin: .1rem 0 0; }
.pz-card-section { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9a7b3a; margin: 1rem 0 .55rem; }
.pz-card-actions { display: flex; gap: .55rem; margin-top: 1.2rem; flex-wrap: wrap; }
.pz-info-grid { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .45rem 1.2rem; font-size: 1rem; }
.pz-info-label { color: #9a7b3a; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; align-self: start; padding-top: .08rem; }
.pz-info-value { color: #2c1a00; font-weight: 500; word-break: break-word; }
.pz-info-divider { grid-column: 1 / -1; height: 1px; background: #f0e8d0; margin: .2rem 0; }

/* ── Forms ───────────────────────────────────────────────── */
.pz-form-container { background: #fff; border: 1px solid #e0d4b0; border-radius: 12px; margin: 0 2rem 1.5rem; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); }
.pz-form-section { margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid #f0e8d0; }
.pz-form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pz-form-section-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: #9a7b3a; letter-spacing: .07em; margin-bottom: .9rem; }
.pz-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem 1rem; }
.pz-form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pz-form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pz-form-row.full   { grid-template-columns: 1fr; }
.pz-form-group { display: flex; flex-direction: column; gap: .32rem; }
.pz-form-group label { font-size: .95rem; font-weight: 700; text-transform: uppercase; color: #9a7b3a; letter-spacing: .04em; }
.pz-form-group input,
.pz-form-group select,
.pz-form-group textarea { padding: .65rem .9rem; border: 1.5px solid #e0d5b8; border-radius: 7px; font-size: 1.08rem; font-family: inherit; color: #2c1a00; background: #fdf8ee; outline: none; transition: border-color 140ms, background 140ms; }
.pz-form-group input:focus,
.pz-form-group select:focus,
.pz-form-group textarea:focus { border-color: #c8a951; background: #fff; }
.pz-form-group input::placeholder { color: #b09060; }
.pz-form-group small { font-size: .9rem; color: #9a7b3a; }
.pz-form-actions { display: flex; gap: .55rem; margin-top: 1.4rem; flex-wrap: wrap; padding-top: 1.1rem; border-top: 1px solid #f0e8d0; }
.pz-policy-notice { display: flex; align-items: center; gap: .45rem; font-size: .77rem; color: #7a6040; margin: .65rem 0; }

/* Responsive adjustments for pz-* components */
@media (max-width: 768px) {
    .pz-page-header, .pz-toolbar, .pz-filter-panel, .pz-table-wrap,
    .pz-card, .pz-back-link, .pz-tabs, .pz-alert, .pz-form-container { margin-left: 1rem; margin-right: 1rem; }
    .pz-form-row.cols-3, .pz-form-row.cols-2 { grid-template-columns: 1fr; }
    .pz-toolbar-right { margin-left: 0; }
    .pz-info-grid { grid-template-columns: 1fr; }
    .pz-info-label { padding-bottom: 0; }
}

/* ── Dashboard responsive ───────────────────────────────── */
@media (max-width: 900px) {
    /* Map sidebar becomes hidden by default on tablet */
    #mapSidePanel { display: none !important; }
    body.map-panel-open .main-content,
    body.map-panel-collapsed .main-content { margin-right: 0; }
}

@media (max-width: 768px) {
    /* Info row stacks vertically */
    .db-info-row { flex-direction: column; }
    .db-info-col, .db-info-col--wide, .db-info-col--stack { width: 100%; flex: none; }
    .db-info-card--tall     { min-height: 220px; max-height: 280px; }
    .db-info-card--half     { min-height: 140px; max-height: 200px; }
    .db-info-card--blockers { max-height: none; }
    .db-blocker-cols        { flex-direction: column; }

    /* Project cards: 1 column */
    .db-monitor-region .row { display: flex; flex-direction: column; gap: 0.5rem; }
    .db-monitor-region .row > [class*="col-"] { width: 100%; max-width: 100%; flex: none; }

    /* Summary section padding */
    .db-section { padding-bottom: 1rem; }

    /* Filter bar wraps */
    .db-filter-bar { flex-direction: column; gap: 0.5rem; }
    .db-filter-pills { flex-wrap: wrap; }

    /* Blocker pills: allow shorter text */
    .db-blocker-name { font-size: 0.75rem; }
    .db-blocker-line { font-size: 0.72rem; }
    .db-info-tbl { font-size: 0.75rem; }
    .db-info-tbl thead th { font-size: 0.7rem; }
    .db-info-tbl tbody td { font-size: 0.72rem; }
}

@media (max-width: 480px) {
    /* Toolbar wraps on very small screens */
    .pz-toolbar { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .pz-toolbar-right { margin-left: 0; flex-wrap: wrap; }
    .pz-search-wrap { width: 100%; }
    .pz-search { width: 100%; }

    /* Table: compact on small screens */
    .pz-table th { font-size: .82rem; padding: .35rem .4rem; }
    .pz-table td { font-size: .9rem;  padding: .35rem .4rem; }
    .rr-col-sm { display: none; }

    /* Dashboard date */
    .db-today-date { font-size: 1.5rem; }
}

/* Requests table — hide secondary columns progressively */
@media (max-width: 1100px) {
    .rr-col-md { display: none; }
}
@media (max-width: 900px) {
    .rr-col-sm { display: none; }
}

/* ============================================
   16. NOTIFICATION BELL & HEADER BADGES
   ============================================ */

.pz-notif-wrap { position:relative; }
.pz-notif-btn {
  background:none; border:none; cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center;
  position:relative; color:#fff; border-radius:8px;
  transition:background .15s;
}
.pz-notif-btn:hover { background:rgba(255,255,255,.15); }
.pz-notif-btn .material-symbols-outlined { font-size:32px; color:#ffd740; font-variation-settings:'FILL' 1,'wght' 400; }
.pz-notif-badge {
  position:absolute; top:3px; right:3px;
  background:#e53935; color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; pointer-events:none; line-height:1;
}
.pz-notif-panel {
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  width:340px; background:#fff; border-radius:10px;
  box-shadow:0 4px 24px rgba(0,0,0,.18); z-index:9999;
  overflow:hidden;
}
.pz-notif-panel.open { display:block; }
.pz-notif-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eee;
  font-weight:700; font-size:.92rem; color:#333;
}
.pz-notif-mark-all {
  background:none; border:none; cursor:pointer; font-size:.78rem;
  color:#b8960c; font-weight:600; padding:0;
}
.pz-notif-mark-all:hover { text-decoration:underline; }
.pz-notif-list { max-height:380px; overflow-y:auto; }
.pz-notif-empty { padding:32px 16px; text-align:center; color:#999; font-size:.88rem; }
.pz-notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-bottom:1px solid #f5f5f5;
  cursor:pointer; transition:background .12s;
  text-decoration:none; color:inherit;
}
.pz-notif-item:hover { background:#fdf8e1; }
.pz-notif-item.unread { background:#fffbea; }
.pz-notif-item.unread:hover { background:#fdf3c0; }
.pz-notif-icon {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#f0e9c5; color:#b8960c;
}
.pz-notif-icon .material-symbols-outlined { font-size:18px; }
.pz-notif-content { flex:1; min-width:0; }
.pz-notif-title { font-weight:600; font-size:.85rem; color:#222; line-height:1.3; }
.pz-notif-body  { font-size:.8rem; color:#555; margin-top:2px; line-height:1.35; }
.pz-notif-time  { font-size:.72rem; color:#aaa; margin-top:4px; }
.pz-notif-dot   { width:8px; height:8px; border-radius:50%; background:#b8960c; flex-shrink:0; margin-top:5px; }
.pz-notif-view-all {
  display:block; text-align:center; padding:10px;
  font-size:.8rem; color:#b8960c; font-weight:600;
  border-top:1px solid #eee; text-decoration:none;
  transition:background .12s;
}
.pz-notif-view-all:hover { background:#fdf8e1; }
.pz-msg-wrap { position:relative; }
.pz-msg-badge {
  position:absolute; top:3px; right:3px;
  background:#e53935; color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; pointer-events:none; line-height:1;
}
.pz-msg-btn {
  background:none; border:none; cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .15s; text-decoration:none; position:relative;
}
.pz-msg-btn:hover { background:rgba(255,255,255,.15); }
.pz-msg-btn .material-symbols-outlined { font-size:32px; color:#90caf9; font-variation-settings:'FILL' 1,'wght' 400; }

/* Drag-scroll cursor state */
body.pz-drag-scroll,
body.pz-drag-scroll * { cursor: grabbing !important; user-select: none !important; }

/* ============================================
   17. SHARED CONTROLS BAR & FILTER PANELS
   ============================================ */

.rv-controls {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin: 0 2rem 0.9rem;
}
.rv-search-wrap { position:relative; flex:1; min-width:200px; }
.rv-search-wrap .material-symbols-outlined {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:18px; color:#aaa; pointer-events:none;
  font-variation-settings:'FILL' 0,'wght' 300;
}
.rv-search {
  width:100%; height:42px; padding:0 14px 0 38px;
  border:1.5px solid #ddd; border-radius:999px;
  font-size:0.87rem; font-family:inherit; outline:none; box-sizing:border-box;
}
.rv-search:focus { border-color:#C47A0F; box-shadow:0 0 0 3px rgba(196,122,15,.1); }

.rv-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:42px; padding:0 16px; border-radius:8px; font-size:0.82rem;
  font-weight:700; letter-spacing:0.04em; cursor:pointer;
  border:1.5px solid transparent; font-family:inherit;
  white-space:nowrap; font-variation-settings:'FILL' 0,'wght' 400;
  text-decoration:none; flex-shrink:0; box-sizing:border-box;
}
.rv-btn .material-symbols-outlined { font-size:17px; }
.rv-btn-filter  { background:#fff; border-color:#ddd; color:#555; }
.rv-btn-filter:hover { border-color:#C47A0F; color:#8C701C; }
.rv-btn-add     { background:#27ae60; color:#fff; border-color:#27ae60; }
.rv-btn-add:hover { background:#1e8449; border-color:#1e8449; color:#fff; text-decoration:none; }
.rv-btn-import  { background:#fff; border-color:#adb5bd; color:#495057; }
.rv-btn-import:hover { border-color:#8C701C; color:#8C701C; }
.rv-btn-export  { background:#fff; border-color:#adb5bd; color:#495057; }
.rv-btn-export:hover { border-color:#8C701C; color:#8C701C; }
.rv-btn-invite  { background:#fff; border-color:#8C701C; color:#8C701C; }
.rv-btn-invite:hover { background:#fef3d0; }

/* ── Invite Admin modal ─────────────────────────────────── */
.invite-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.invite-modal { background:#fff; border-radius:12px; padding:1.75rem 1.75rem 1.4rem; width:100%; max-width:480px; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.invite-modal-head { display:flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:800; color:#3a2a0a; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; }
.invite-modal-head .material-symbols-outlined { color:#8C701C; font-size:1.25rem; }
.invite-modal-desc { font-size:.85rem; color:#555; margin-bottom:1rem; line-height:1.5; }
.invite-url-wrap { display:flex; gap:.4rem; align-items:center; }
.invite-url-input { flex:1; font-size:.8rem; padding:.55rem .75rem; border:1px solid #d0c090; border-radius:7px; background:#fafaf5; color:#222; outline:none; }
.invite-copy-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #C8A951; border-radius:7px; background:#fef3d0; color:#8C701C; cursor:pointer; flex-shrink:0; }
.invite-copy-btn:hover { background:#fce9a8; }
.invite-copy-btn .material-symbols-outlined { font-size:1rem; }
.invite-copied { font-size:.78rem; color:#15803d; margin:.4rem 0 0; }
.invite-modal-foot { margin-top:1.25rem; text-align:right; }
.invite-close-btn { padding:.45rem 1.1rem; border:1px solid #ccc; border-radius:7px; background:#f5f5f5; color:#444; font-size:.83rem; cursor:pointer; }
.invite-close-btn:hover { background:#e8e8e8; }

.filter-panel {
  background:#fff; border:1px solid #e0d4b0; border-radius:8px;
  padding:16px 20px 12px; margin:0 2rem 12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
.filter-rows  { display:flex; flex-direction:column; gap:12px; }
.filter-row   { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filter-row label { font-size:11px; font-weight:600; text-transform:uppercase; color:#666; letter-spacing:.4px; min-width:80px; }
.filter-row select { padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:13px; background:#fff; }
.ln-ranges    { display:flex; flex-wrap:wrap; gap:6px; }
.ln-chip {
  padding:6px 14px; border:1.5px solid #d4c185; border-radius:20px;
  font-size:0.85rem; font-weight:700; cursor:pointer; background:#fff; color:#8C701C;
  transition:background .15s,color .15s,border-color .15s;
}
.ln-chip:hover  { border-color:#8C701C; color:#8C701C; }
.ln-chip.active { background:#8C701C; color:#fff; border-color:#8C701C; }
.filter-footer  { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.filter-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:#8C701C; color:#fff; border-radius:50%;
  font-size:10px; font-weight:700; width:16px; height:16px; margin-left:5px; vertical-align:middle;
}

.filter-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px 18px; }
.filter-group { display:flex; flex-direction:column; gap:5px; }
.filter-group label { font-size:13px; font-weight:700; text-transform:uppercase; color:#8C701C; letter-spacing:.4px; }
.filter-group select { padding:8px 10px; border:1.5px solid #d4c185; border-radius:8px; font-size:14px; background:#fff; color:#3a2a0a; cursor:pointer; }
.filter-group select:focus { outline:none; border-color:#8C701C; box-shadow:0 0 0 2px rgba(140,112,28,.15); }

.pz-col-check { width:36px; text-align:center; }
.pz-col-check input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:#C47A0F; }

.bulk-action-bar {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
  background:#3a2a0a; color:#fff; border-radius:30px;
  padding:0.65rem 1.2rem; display:flex; align-items:center; gap:1rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.35); z-index:200;
  animation:slideUp 0.2s ease;
}
@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.bulk-count { font-size:0.88rem; font-weight:600; }
.bulk-delete-btn {
  display:flex; align-items:center; gap:0.3rem;
  background:#e53e3e; color:#fff; border:none; border-radius:20px;
  padding:0.4rem 1rem; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit;
  font-variation-settings:'FILL' 0,'wght' 400;
}
.bulk-delete-btn:hover { background:#c53030; }
.bulk-delete-btn .material-symbols-outlined { font-size:16px; }
.bulk-archive-btn {
  display:flex; align-items:center; gap:0.3rem;
  background:#e67e22; color:#fff; border:none; border-radius:20px;
  padding:0.4rem 1rem; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit;
  font-variation-settings:'FILL' 0,'wght' 400;
}
.bulk-archive-btn:hover { background:#ca6f1e; }
.bulk-archive-btn .material-symbols-outlined { font-size:16px; }

.recently-deleted-wrap { margin-top:1.5rem; border:1px solid #e8d9a8; border-radius:10px; overflow:hidden; }
.rd-toggle-btn {
  width:100%; display:flex; align-items:center; gap:0.5rem;
  background:#fdf8ee; border:none; padding:0.75rem 1rem;
  font-size:0.88rem; font-weight:700; color:#5c3d11; cursor:pointer;
  font-family:inherit; text-align:left;
  font-variation-settings:'FILL' 0,'wght' 400;
}
.rd-toggle-btn:hover { background:#f5e7b2; }
.rd-toggle-btn .material-symbols-outlined { font-size:18px; color:#8c701c; }
.rd-chevron { margin-left:auto; transition:transform 0.2s; }
.rd-badge { background:#e53e3e; color:#fff; border-radius:10px; font-size:0.72rem; font-weight:800; padding:0.1rem 0.45rem; line-height:1.4; }
.rd-panel { padding:0.75rem 1rem; background:#fff; }
.rd-empty { color:#aaa; font-size:0.85rem; text-align:center; padding:1rem 0; }
.rd-table { font-size:0.84rem; width:100%; border-collapse:collapse; }
.rd-table th { background:#fdf8ee; color:#8c701c; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:6px 10px; border-bottom:2px solid #e8d9a8; text-align:left; }
.rd-table td { padding:6px 10px; border-bottom:1px solid #f0e6c8; font-size:0.82rem; }
.rd-table tr:last-child td { border-bottom:none; }

/* ============================================
   18. RESOURCE TABS & STATUS BADGES
   ============================================ */

.rv-tabs { display:flex; border-bottom:2px solid #e5e0d0; margin-bottom:1.2rem; }
.rv-tab { background:none; border:none; padding:9px 22px; font-size:1rem; font-weight:700; letter-spacing:0.06em; color:#bbb; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit; transition:color .15s; }
.rv-tab.active  { color:#8C701C; border-bottom-color:#C47A0F; }
.rv-tab:hover   { color:#8C701C; }
.rv-panel       { display:none; }
.rv-panel.active { display:block; }

.rv-filter-panel { background:#fff; border:1px solid #e0d4b0; border-radius:8px; padding:14px 16px 10px; margin:0 2rem 0.9rem; box-shadow:0 2px 8px rgba(0,0,0,0.07); }
.rv-filter-row  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.rv-filter-row:last-child { margin-bottom:0; }
.rv-filter-label { font-size:0.85rem; font-weight:700; text-transform:uppercase; color:#8C701C; letter-spacing:0.05em; min-width:110px; }
.rv-chip-row    { display:flex; flex-wrap:wrap; gap:7px; }
.rv-chip { padding:6px 15px; border:1.5px solid #d4c185; border-radius:20px; font-size:0.85rem; font-weight:700; cursor:pointer; background:#fff; color:#8C701C; font-family:inherit; }
.rv-chip:hover  { background:#8C701C; color:#fff; border-color:#8C701C; }
.rv-chip.active { background:#8C701C; color:#fff; border-color:#8C701C; }
.rv-filter-badge { display:inline-flex; align-items:center; justify-content:center; background:#8C701C; color:#fff; border-radius:50%; font-size:10px; font-weight:800; width:16px; height:16px; margin-left:3px; }
.rv-filter-reset { background:none; border:1.5px solid #d4c185; color:#8C701C; border-radius:8px; padding:7px 16px; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block; }
.rv-filter-reset:hover { background:#8C701C; color:#fff; text-decoration:none; }
.rv-filter-select { padding:7px 10px; border:1.5px solid #d4c185; border-radius:8px; font-size:0.85rem; font-weight:600; background:#fff; color:#3a2a0a; font-family:inherit; cursor:pointer; min-width:130px; }
.rv-filter-select:focus { outline:none; border-color:#8C701C; box-shadow:0 0 0 2px rgba(140,112,28,.15); }
.rv-filter-select option { color:#333; font-weight:400; }

.rv-rd-wrap { margin:1.5rem 2rem 0; border:1px solid #e0d4b0; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.07); background:#fff; }
.rv-rd-toggle { width:100%; display:flex; align-items:center; gap:0.5rem; background:#fdf8ee; border:none; padding:0.7rem 1rem; font-size:0.85rem; font-weight:700; color:#5c3d11; cursor:pointer; font-family:inherit; text-align:left; font-variation-settings:'FILL' 0,'wght' 400; }
.rv-rd-toggle:hover { background:#f5e7b2; }
.rv-rd-toggle .material-symbols-outlined { font-size:18px; color:#8c701c; }
.rv-rd-chevron { margin-left:auto; transition:transform 0.2s; font-size:18px !important; }
.rv-rd-badge { background:#e53e3e; color:#fff; border-radius:10px; font-size:0.7rem; font-weight:800; padding:0.1rem 0.45rem; line-height:1.4; }
.rv-rd-panel { padding:0.7rem 1rem; background:#fff; }
.rv-rd-empty { color:#888; font-size:0.85rem; text-align:center; padding:0.8rem 0; }

.rv-bulk-bar { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:#3a2a0a; color:#fff; border-radius:30px; padding:0.65rem 1.2rem; display:flex; align-items:center; gap:1rem; box-shadow:0 4px 20px rgba(0,0,0,0.35); z-index:200; animation:rvSlideUp 0.2s ease; }
@keyframes rvSlideUp { from { opacity:0; transform:translateX(-50%) translateY(16px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.rv-bulk-count { font-size:0.88rem; font-weight:600; }
.rv-bulk-del-btn { display:flex; align-items:center; gap:5px; background:#e53e3e; color:#fff; border:none; border-radius:20px; padding:0.4rem 1rem; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit; font-variation-settings:'FILL' 0,'wght' 400; }
.rv-bulk-del-btn:hover { background:#c53030; }
.rv-bulk-del-btn .material-symbols-outlined { font-size:16px; }
.rv-bulk-arch-btn { display:flex; align-items:center; gap:5px; background:#e67e22; color:#fff; border:none; border-radius:20px; padding:0.4rem 1rem; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit; font-variation-settings:'FILL' 0,'wght' 400; }
.rv-bulk-arch-btn:hover { background:#ca6f1e; }
.rv-bulk-arch-btn .material-symbols-outlined { font-size:16px; }

.mp-status-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; border:1px solid; }
.mp-status-available { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }
.mp-status-deployed  { background:#fff3e0; color:#e65100; border-color:#ffcc80; }
.mp-status-onleave   { background:#f5f5f5; color:#757575; border-color:#e0e0e0; }
.mp-status-other     { background:#f5f5f5; color:#757575; border-color:#e0e0e0; }

/* ============================================
   19. REQUESTS MODULE
   ============================================ */

.rr-shell { padding:0 2rem 2rem; box-sizing:border-box; width:100%; overflow:hidden; }
.rr-shell .rv-controls { margin-left:0; margin-right:0; margin-bottom:0.75rem; }
.rr-shell .pz-table-wrap { margin-left:0; margin-right:0; }

.rr-filter-panel { margin-bottom:.75rem; background:#fdf8ee; border:1px solid #e8d9a8; border-radius:8px; padding:12px 16px 10px; box-shadow:0 2px 8px rgba(0,0,0,0.07); }
.rr-filter-section { margin-bottom:10px; }
.rr-filter-section:last-child { margin-bottom:0; }
.rr-filter-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; color:#8C701C; letter-spacing:0.05em; margin-bottom:6px; }
.rr-cell-site { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:960px)  { .rr-col-md { display:none; } }
@media (max-width:640px)  { .rr-col-sm { display:none; } .rr-cell-site { max-width:90px; } }

/* ============================================
   20. PROFILE MODULE
   ============================================ */

.profile-shell { max-width:560px; margin:0 auto; }
.profile-avatar-row { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem; }
.profile-avatar-wrap { position:relative; width:80px; height:80px; flex-shrink:0; cursor:pointer; }
.profile-avatar-circle { width:80px; height:80px; border-radius:50%; background:#8C701C; color:#fff; font-size:2rem; font-weight:700; display:flex; align-items:center; justify-content:center; overflow:hidden; border:3px solid #d4c185; }
.profile-avatar-circle img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-avatar-overlay { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity:1; }
.profile-avatar-overlay .material-symbols-outlined { color:#fff; font-size:24px; }
.profile-avatar-uploading .profile-avatar-overlay { opacity:1; background:rgba(0,0,0,0.55); }
#avatarUploadProgress { display:none; font-size:0.75rem; color:#8C701C; margin-top:4px; text-align:center; }
.profile-avatar-upload-err { font-size:0.75rem; color:#c0392b; margin-top:4px; display:none; }
.profile-avatar-meta .profile-role  { font-size:0.82rem; font-weight:700; text-transform:uppercase; color:#8C701C; letter-spacing:.5px; }
.profile-avatar-meta .profile-email { font-size:0.84rem; color:#555; margin-top:2px; }
.profile-avatar-meta .profile-change-hint { font-size:0.75rem; color:#aaa; margin-top:3px; }
.profile-card { background:#fff; border:1px solid #e5e0d0; border-radius:10px; padding:1.6rem 1.8rem; margin-bottom:1.2rem; }
.profile-card h3 { font-size:0.92rem; font-weight:700; text-transform:uppercase; color:#5c3d11; letter-spacing:.4px; margin:0 0 1rem; }
.profile-field { margin-bottom:1rem; }
.profile-field label { display:block; font-size:0.78rem; font-weight:700; text-transform:uppercase; color:#666; letter-spacing:.4px; margin-bottom:4px; }
.profile-field input { width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:6px; font-size:0.92rem; font-family:inherit; }
.profile-field input[readonly] { background:#f6f4ee; color:#888; cursor:not-allowed; }
.profile-actions { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-top:0.5rem; }
.btn-profile-save { background:#8C701C; color:#fff; border:none; border-radius:6px; padding:9px 22px; font-size:0.9rem; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-profile-save:hover { background:#6e570f; }
.btn-profile-pw { background:#f5f0e4; color:#5c3d11; border:1px solid #d4c185; border-radius:6px; padding:8px 18px; font-size:0.9rem; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
.btn-profile-pw:hover { background:#ede3c6; color:#3d2800; text-decoration:none; }
.btn-profile-pw .material-symbols-outlined { font-size:16px; }

.pw-shell { max-width:480px; margin:0 auto; }
.pw-card { background:#fff; border:1px solid #e5e0d0; border-radius:10px; padding:1.6rem 1.8rem; }
.pw-card h3 { font-size:0.92rem; font-weight:700; text-transform:uppercase; color:#5c3d11; letter-spacing:.4px; margin:0 0 1rem; }
.pw-field { margin-bottom:1rem; }
.pw-field label { display:block; font-size:0.78rem; font-weight:700; text-transform:uppercase; color:#666; letter-spacing:.4px; margin-bottom:4px; }
.pw-field input { width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:6px; font-size:0.92rem; font-family:inherit; }
.pw-actions { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-top:0.5rem; }
.btn-pw-save { background:#8C701C; color:#fff; border:none; border-radius:6px; padding:9px 22px; font-size:0.9rem; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-pw-save:hover { background:#6e570f; }
.btn-pw-back { background:#f5f0e4; color:#5c3d11; border:1px solid #d4c185; border-radius:6px; padding:8px 18px; font-size:0.9rem; font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit; }
.btn-pw-back:hover { background:#ede3c6; text-decoration:none; }
.pw-hint { font-size:0.78rem; color:#888; margin-top:4px; }

.avatar-upload-wrap { display:flex; align-items:center; gap:24px; padding:6px 0; }
.avatar-circle { width:96px; height:96px; border-radius:50%; overflow:hidden; background:#e8eef5; border:3px solid #d0dce8; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:700; color:#1a3c5e; text-transform:uppercase; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; }
.avatar-upload-controls { display:flex; flex-direction:column; gap:8px; }
.avatar-upload-controls small { color:#888; font-size:11px; }

/* ============================================
   21. MESSAGES MODULE
   ============================================ */

.msg-page-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.msg-page-hdr h1 { font-size:1.4rem; font-weight:700; margin:0; }
.chat-list { display:flex; flex-direction:column; gap:8px; }
.chat-card { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e2ddd4; border-radius:10px; padding:14px 18px; cursor:pointer; transition:background .12s,border-color .12s,box-shadow .12s; text-decoration:none; color:inherit; position:relative; box-shadow:0 1px 5px rgba(0,0,0,0.07); }
.chat-card:hover { background:#fdf8e1; border-color:#e8d97a; }
.chat-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:#f0ead8; color:#b8960c; display:flex; align-items:center; justify-content:center; }
.chat-avatar .material-symbols-outlined { font-size:22px; }
.chat-info { flex:1; min-width:0; }
.chat-title { font-weight:700; font-size:1rem; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-preview { font-size:.9rem; color:#777; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-right { flex-shrink:0; display:flex; align-items:center; gap:8px; }
.chat-time { font-size:.82rem; color:#888; white-space:nowrap; }
.chat-info-btn { flex-shrink:0; background:none; border:none; cursor:pointer; color:#b8960c; padding:2px; line-height:1; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .12s; }
.chat-info-btn:hover { background:#f0ead8; }
.chat-info-btn .material-symbols-outlined { font-size:16px; font-variation-settings:'FILL' 1; }
.chat-members-pop { display:none; position:absolute; right:14px; top:42px; background:#fff; border:1px solid #e8d97a; border-radius:10px; padding:10px 14px; min-width:180px; max-width:260px; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:100; font-size:.88rem; color:#333; }
.chat-members-pop.open { display:block; }
.chat-members-pop-title { font-weight:700; font-size:.82rem; color:#b8960c; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.chat-members-pop ul { margin:0; padding:0 0 0 14px; }
.chat-members-pop li { margin-bottom:3px; }

/* ── Unread chat state ───────────────────────────────────── */
.chat-card--unread { border-color:#c8a84b; background:#fffdf4; }
.chat-card--unread:hover { background:#fdf8e1; }
.chat-title-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#c8a84b; margin-left:5px; vertical-align:middle; margin-bottom:2px; }
.chat-preview--unread { color:#3a3320; font-weight:600; }
.chat-time--unread { color:#b8960c; font-weight:700; }
.chat-unread-badge { background:#b8960c; color:#fff; font-size:.7rem; font-weight:700; border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; line-height:1.6; flex-shrink:0; }
.msg-empty { text-align:center; padding:60px 20px; color:#888; }
.msg-empty .material-symbols-outlined { font-size:48px; display:block; margin-bottom:12px; opacity:.4; }
.msg-empty p { font-size:.9rem; margin-bottom:4px; }
.msg-empty a { color:#b8960c; font-weight:600; text-decoration:none; }
.msg-empty a:hover { text-decoration:underline; }
#chatLoading { text-align:center; padding:40px; color:#aaa; font-size:.9rem; }

.msg-show-wrap { display:flex; flex-direction:column; height:calc(100vh - 120px); min-height:400px; background:#fff; border:1px solid #e2ddd4; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,0.08); padding:1.25rem 1.5rem 0; }
.msg-chat-hdr { display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid #eee; flex-shrink:0; position:relative; }
.msg-back-btn { background:none; border:none; cursor:pointer; color:#b8960c; display:flex; align-items:center; padding:4px; border-radius:6px; transition:background .1s; }
.msg-back-btn:hover { background:#fdf8e1; }
.msg-back-btn .material-symbols-outlined { font-size:22px; }
.msg-chat-title { font-size:1.1rem; font-weight:700; color:#1a1a1a; }
.msg-hdr-info-btn { flex-shrink:0; background:none; border:none; cursor:pointer; color:#b8960c; padding:4px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .12s; }
.msg-hdr-info-btn:hover { background:#f0ead8; }
.msg-hdr-info-btn .material-symbols-outlined { font-size:20px; font-variation-settings:'FILL' 1; }
.msg-hdr-pop { display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid #e8d97a; border-radius:10px; padding:10px 14px; min-width:180px; max-width:260px; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:200; font-size:.88rem; color:#333; }
.msg-hdr-pop.open { display:block; }
.msg-hdr-pop-title { font-weight:700; font-size:.82rem; color:#b8960c; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.msg-hdr-pop ul { margin:0; padding:0 0 0 14px; }
.msg-hdr-pop li { margin-bottom:3px; }
.msg-thread { flex:1; overflow-y:auto; padding:16px 4px; display:flex; flex-direction:column; gap:10px; }
.msg-bubble-row { display:flex; align-items:flex-end; gap:8px; }
.msg-bubble-row.mine { flex-direction:row-reverse; }
.msg-avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; background:#e8e8e8; color:#888; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; text-transform:uppercase; }
.msg-bubble-row.mine .msg-avatar { background:#f0ead8; color:#b8960c; }
.msg-bubble-wrap { max-width:72%; display:flex; flex-direction:column; }
.msg-bubble-row.mine .msg-bubble-wrap { align-items:flex-end; }
.msg-sender-label { font-size:.78rem; color:#aaa; margin-bottom:3px; padding:0 4px; }
.msg-bubble { padding:9px 14px; border-radius:16px; font-size:.95rem; line-height:1.45; word-break:break-word; background:#f0f0f0; color:#222; border-bottom-left-radius:4px; }
.msg-bubble-row.mine .msg-bubble { background:#b8960c; color:#fff; border-bottom-right-radius:4px; border-bottom-left-radius:16px; }
.msg-bubble img { max-width:240px; max-height:240px; border-radius:10px; display:block; cursor:pointer; margin-bottom:4px; }
.msg-file-link { display:flex; align-items:center; gap:8px; font-size:.85rem; text-decoration:none; color:inherit; }
.msg-file-link .material-symbols-outlined { font-size:20px; }
.msg-bubble-row.mine .msg-file-link { color:#fff; }
.msg-time { font-size:.75rem; color:#bbb; margin-top:3px; padding:0 4px; }
.msg-bubble-row.mine .msg-time { text-align:right; }
.msg-date-div { text-align:center; font-size:.72rem; color:#bbb; margin:6px 0; display:flex; align-items:center; gap:8px; }
.msg-date-div::before, .msg-date-div::after { content:''; flex:1; height:1px; background:#eee; }
.msg-empty-thread { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#ccc; }
.msg-empty-thread .material-symbols-outlined { font-size:44px; opacity:.4; }
.msg-empty-thread p { font-size:.85rem; }
#threadLoading { text-align:center; padding:40px; color:#aaa; font-size:.9rem; }
.msg-compose-area { flex-shrink:0; border-top:1px solid #eee; padding-top:10px; padding-bottom:14px; }
.msg-chips-row { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:8px; }
.msg-att-chip { display:flex; align-items:center; gap:5px; background:#fdf8e1; border:1px solid #e8d97a; border-radius:20px; padding:4px 8px 4px 5px; font-size:.77rem; max-width:210px; }
.att-chip-img  { width:30px; height:30px; border-radius:5px; object-fit:cover; flex-shrink:0; }
.att-chip-icon { font-size:20px; color:#b8960c; flex-shrink:0; }
.att-chip-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#555; max-width:130px; }
.att-chip-rm   { background:none; border:none; cursor:pointer; color:#c00; font-size:17px; line-height:1; padding:0 2px; flex-shrink:0; }
.msg-compose   { display:flex; align-items:flex-end; gap:8px; }
.msg-attach-btn { background:none; border:1.5px solid #ddd; color:#888; border-radius:50%; width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s,color .15s; }
.msg-attach-btn:hover { border-color:#b8960c; color:#b8960c; }
.msg-attach-btn .material-symbols-outlined { font-size:20px; }
.msg-compose textarea { flex:1; resize:none; border:1.5px solid #ddd; border-radius:10px; padding:10px 12px; font-size:.95rem; outline:none; line-height:1.4; max-height:120px; overflow-y:auto; transition:border-color .15s; font-family:inherit; text-transform:none; }
.msg-compose textarea:focus { border-color:#b8960c; }
.msg-send-btn { background:#b8960c; color:#fff; border:none; border-radius:50%; width:40px; height:40px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.msg-send-btn:hover { background:#9a7c0a; }
.msg-send-btn:disabled { opacity:.5; cursor:default; }
.msg-send-btn .material-symbols-outlined { font-size:20px; }
#imgLightbox { display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.85); align-items:center; justify-content:center; cursor:zoom-out; }
#imgLightbox.open { display:flex; }
#imgLightbox img { max-width:90vw; max-height:90vh; border-radius:8px; }
#pzToastWrap { position:fixed; bottom:24px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:320px; }
.pz-toast { padding:11px 16px; border-radius:9px; font-size:.85rem; font-weight:500; line-height:1.4; box-shadow:0 4px 18px rgba(0,0,0,.18); pointer-events:all; opacity:0; transform:translateY(8px); transition:opacity .22s,transform .22s; display:flex; align-items:flex-start; gap:10px; }
.pz-toast.show { opacity:1; transform:translateY(0); }
.pz-toast.type-error   { background:#c62828; color:#fff; }
.pz-toast.type-success { background:#2e7d32; color:#fff; }
.pz-toast.type-info    { background:#1565c0; color:#fff; }
.pz-toast .pz-toast-icon { font-size:18px; flex-shrink:0; }

/* ============================================
   22. NOTIFICATIONS MODULE
   ============================================ */

.notif-page-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; flex-wrap:wrap; gap:.5rem; }
.notif-page-hdr h1 { font-size:1.4rem; font-weight:700; margin:0; }
.notif-mark-all-btn { background:none; border:1.5px solid #b8960c; color:#b8960c; padding:6px 16px; border-radius:20px; font-size:.83rem; font-weight:600; cursor:pointer; transition:background .15s,color .15s; }
.notif-mark-all-btn:hover { background:#b8960c; color:#fff; }
.notif-mark-all-btn:disabled { opacity:.45; cursor:default; }
.notif-section-label { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#999; padding:0 0 6px; margin:1.2rem 0 .3rem; }
.notif-section-label:first-child { margin-top:0; }
.notif-item { display:flex; align-items:flex-start; gap:14px; padding:14px 18px; border-radius:10px; cursor:pointer; transition:background .12s; margin-bottom:4px; background:#fff; border:1px solid #eee; text-decoration:none; color:inherit; }
.notif-item:hover { background:#fdf8e1; border-color:#e8d97a; }
.notif-item.unread { background:#fffcec; border-color:#e8d97a; }
.notif-item.unread:hover { background:#fdf3c0; }
.notif-type-icon { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#f5f0dc; color:#b8960c; }
.notif-type-icon.type-emergency { background:#fde8e8; color:#c62828; }
.notif-type-icon.type-approved  { background:#e8f5e9; color:#2e7d32; }
.notif-type-icon.type-message   { background:#e3f2fd; color:#1565c0; }
.notif-type-icon.type-approval  { background:#fff3e0; color:#e65100; }
.notif-type-icon .material-symbols-outlined { font-size:20px; }
.notif-body-wrap { flex:1; min-width:0; }
.notif-title     { font-weight:600; font-size:.9rem; color:#1a1a1a; line-height:1.3; }
.notif-body-text { font-size:.82rem; color:#555; margin-top:3px; line-height:1.4; }
.notif-meta      { display:flex; align-items:center; gap:8px; margin-top:5px; }
.notif-time      { font-size:.75rem; color:#aaa; }
.notif-type-pill { font-size:.68rem; font-weight:600; letter-spacing:.04em; padding:2px 8px; border-radius:10px; background:#f0ecd8; color:#b8960c; }
.notif-type-pill.type-emergency { background:#fde8e8; color:#c62828; }
.notif-type-pill.type-approved  { background:#e8f5e9; color:#2e7d32; }
.notif-type-pill.type-message   { background:#e3f2fd; color:#1565c0; }
.notif-type-pill.type-approval  { background:#fff3e0; color:#e65100; }
.notif-unread-dot { width:9px; height:9px; border-radius:50%; background:#b8960c; flex-shrink:0; margin-top:6px; }
.notif-empty-state { text-align:center; padding:60px 20px; color:#aaa; }
.notif-empty-state .material-symbols-outlined { font-size:48px; display:block; margin-bottom:12px; opacity:.4; }
.notif-empty-state p { font-size:.9rem; }
#notifLoading { text-align:center; padding:40px; color:#aaa; font-size:.9rem; }

/* ============================================
   23. PROJECT FORM & SCHEDULE
   ============================================ */

#projectForm input[type="text"]:not([readonly]) { text-transform:uppercase; }
.phase-drag-handle { cursor:grab; color:#b09060; font-size:1.25rem; user-select:none; flex-shrink:0; line-height:1; padding:0 2px 0 0; transition:color 120ms; }
.phase-drag-handle:hover  { color:#8C701C; }
.phase-drag-handle:active { cursor:grabbing; }
.phase-card.pz-dragging   { opacity:.35; }
.phase-drop-line { height:3px; background:#8C701C; border-radius:2px; margin:1px 0; pointer-events:none; }
/* ── Form validation toast (card, slides in from right) ─── */
#formToast { position:fixed; top:1.5rem; right:1.5rem; width:min(360px,calc(100vw - 2rem)); background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.18); border-left:5px solid #c0392b; z-index:9999; opacity:0; transform:translateX(calc(100% + 2rem)); transition:opacity 260ms,transform 320ms cubic-bezier(.22,.61,.36,1); pointer-events:none; }
#formToast.show { opacity:1; transform:translateX(0); pointer-events:auto; }
.ft-hdr { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem .6rem; border-bottom:1px solid #fce4e4; }
.ft-hdr .ft-icon { color:#c0392b; font-size:1.35rem; flex-shrink:0; font-variation-settings:'FILL' 1,'wght' 500; }
.ft-hdr .ft-title { flex:1; font-weight:700; font-size:.9rem; color:#7b1f1f; }
.ft-hdr .ft-close { background:none; border:none; cursor:pointer; color:#9ca3af; display:flex; align-items:center; padding:2px; border-radius:4px; line-height:1; }
.ft-hdr .ft-close:hover { color:#374151; background:#f3f4f6; }
.ft-hdr .ft-close .material-symbols-outlined { font-size:1.05rem; }
.ft-list { list-style:none; margin:0; padding:.55rem 1rem .7rem; display:flex; flex-direction:column; gap:.28rem; }
.ft-list li { display:flex; align-items:center; gap:.4rem; font-size:.84rem; color:#4b1010; line-height:1.3; }
.ft-list li .ft-bullet { font-size:.9rem; color:#c0392b; flex-shrink:0; font-variation-settings:'FILL' 0,'wght' 400; }

.ps-shell { padding-bottom:2rem; }
.ps-page-hdr { display:flex; align-items:center; gap:10px; margin-bottom:1.4rem; }
.ps-back-btn { background:none; border:none; cursor:pointer; color:#8C701C; display:flex; align-items:center; padding:6px; border-radius:6px; transition:background .12s; font-variation-settings:'FILL' 0,'wght' 400; }
.ps-back-btn:hover { background:#f0ead8; }
.ps-back-btn .material-symbols-outlined { font-size:22px; }
.ps-page-title { font-size:1.2rem; font-weight:800; color:#2c1f07; margin:0; }
.ps-page-sub   { font-size:0.85rem; color:#999; margin:2px 0 0; }
.ps-card { background:#fff; border:1px solid #e5e0d0; border-radius:12px; overflow:hidden; margin-bottom:1.4rem; box-shadow:0 2px 10px rgba(0,0,0,0.07); }
.ps-card-hdr { padding:1rem 1.2rem 0.75rem; border-bottom:1px solid #f0ebe0; }
.ps-card-hdr h2 { font-size:0.95rem; font-weight:700; color:#3b2a0e; margin:0; }
.ps-ms-list { list-style:none; margin:0; padding:0; }
.ps-ms-row { display:grid; grid-template-columns:28px 1fr 100px 80px 110px 130px 36px; gap:8px; align-items:center; padding:0.55rem 1rem; border-bottom:1px solid #f0ebe0; }
.ps-ms-row:last-child { border-bottom:none; }
.ps-ms-drag { cursor:grab; color:#b09060; display:flex; align-items:center; font-variation-settings:'FILL' 0,'wght' 400; }
.ps-ms-drag:active { cursor:grabbing; }
.ps-ms-drag .material-symbols-outlined { font-size:20px; }
.ps-ms-name { font-size:0.88rem; font-weight:700; }
.ps-field-label { font-size:0.7rem; color:#888; margin-bottom:2px; }
.ps-ms-num { width:100%; padding:5px 8px; border:1px solid #e0dbd0; border-radius:6px; font-size:0.84rem; font-family:inherit; text-align:right; outline:none; }
.ps-ms-num:focus { border-color:#C47A0F; }
.ps-ms-select { width:100%; padding:5px 8px; border:1px solid #e0dbd0; border-radius:6px; font-size:0.82rem; font-family:inherit; outline:none; background:#fff; }
.ps-ms-select:focus { border-color:#C47A0F; }
.ps-ms-date-picker { gap:4px; }
.ps-ms-date-picker .date-display { padding:5px 8px; font-size:0.82rem; min-width:0; width:auto !important; border-color:#e0dbd0; }
.ps-ms-date-picker .date-display:focus { border-color:#C47A0F; }
.ps-ms-date-picker .date-toggle { padding:4px 5px; }
.ps-ms-date-picker .date-toggle .material-symbols-outlined { font-size:1rem; }
.ps-ms-date-picker .calendar-popup { left:auto; right:0; min-width:260px; }
.ps-ms-del { background:none; border:none; cursor:pointer; color:#e53e3e; padding:4px; border-radius:6px; display:flex; align-items:center; transition:background .12s; font-variation-settings:'FILL' 1; }
.ps-ms-del:hover { background:#fff0f0; }
.ps-ms-del .material-symbols-outlined { font-size:18px; }
.ps-ms-col-hdr { display:grid; grid-template-columns:28px 1fr 100px 80px 110px 130px 36px; gap:8px; padding:0.3rem 1rem 0.1rem; background:#faf6ee; border-bottom:1px solid #f0ebe0; }
.ps-ms-col-hdr span { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#8C701C; }
.ps-add-row { padding:0.65rem 1rem; border-top:1px solid #f0ebe0; display:flex; justify-content:space-between; align-items:center; }
.ps-add-btn { background:none; border:none; cursor:pointer; color:#8C701C; font-size:0.85rem; font-weight:700; padding:5px 10px; border-radius:7px; display:flex; align-items:center; gap:5px; font-family:inherit; transition:background .12s; }
.ps-add-btn:hover { background:#f0ead8; }
.ps-add-btn .material-symbols-outlined { font-size:18px; }
.ps-total-weight { font-size:0.82rem; font-weight:800; letter-spacing:0.04em; color:#3b2a0e; }
.ps-total-weight span { color:#8C701C; margin-left:6px; }
.ps-total-weight.over  span { color:#c53030; }
.ps-total-weight.exact span { color:#2e7d32; }
.ps-weekly-toggle { display:flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:700; color:#3b2a0e; cursor:pointer; user-select:none; margin:0.5rem 0; }
.ps-weekly-toggle .material-symbols-outlined { font-size:20px; color:#8C701C; }
.ps-weekly-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.ps-weekly-table th { background:#7a5c1e; color:#fff; padding:0.55rem 0.8rem; text-align:left; font-size:0.75rem; letter-spacing:0.04em; }
.ps-weekly-table th.num { text-align:right; }
.ps-weekly-table td { padding:0.45rem 0.8rem; border-bottom:1px solid #f0ebe0; color:#3b2a0e; }
.ps-weekly-table td.num { text-align:right; font-weight:600; }
.ps-weekly-table tbody tr:hover { background:#fdf8ed; }
.ps-weekly-empty { text-align:center; padding:1rem; color:#888; font-style:italic; font-size:0.85rem; }
.ps-footer { display:flex; gap:0.75rem; padding:0.5rem 0; }
.ps-btn { padding:0.65rem 1.6rem; border-radius:8px; font-size:0.88rem; font-weight:700; cursor:pointer; border:none; font-family:inherit; letter-spacing:0.04em; }
.ps-btn-save   { background:#3a7d34; color:#fff; }
.ps-btn-save:hover { background:#2d6228; }
.ps-btn-cancel { background:#e53e3e; color:#fff; }
.ps-btn-cancel:hover { background:#c53030; }
.ps-alert { padding:0.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:0.88rem; font-weight:600; }
.ps-alert-success { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.ps-alert-error   { background:#fce4ec; color:#b71c1c; border:1px solid #ef9a9a; }
.ps-ms-row.dragging  { opacity:.4; }
.ps-ms-row.drag-over { border-top:2px solid #C47A0F; }

/* ============================================
   24. PROJECT RESOURCES
   ============================================ */

.pres-shell { padding-bottom:2rem; }
.pres-header { display:flex; align-items:center; gap:10px; margin-bottom:1.4rem; }
.pres-back { display:inline-flex; align-items:center; color:#8C701C; text-decoration:none; line-height:1; }
.pres-back:hover { color:#5c3d11; text-decoration:none; }
.pres-back .material-symbols-outlined { font-size:22px; }
.pres-title { font-size:1.15rem; font-weight:800; color:#2c1f07; margin:0; }
.pres-section-label { font-size:1rem; font-weight:700; color:#8C701C; margin:0 0 0.9rem; letter-spacing:0.01em; }
.pres-divider { border:none; border-top:1px solid #e5e0d0; margin:1.5rem 0; }
.pres-empty { font-size:0.85rem; color:#aaa; margin:0; }
.pres-assigned-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-bottom:4px; }
.pres-assigned-card { background:#fff; border:1px solid #ddd6c8; border-radius:10px; padding:14px 18px; margin-bottom:0; display:flex; align-items:center; gap:12px; box-shadow:0 1px 4px rgba(0,0,0,0.07); }
.pres-assigned-icon { color:#C47A0F; font-size:1.2rem; font-variation-settings:'FILL' 1,'wght' 600; }
.pres-assigned-name { font-size:0.9rem; font-weight:700; color:#2c1f07; }
.pres-assigned-meta { font-size:0.76rem; color:#999; margin-top:2px; }
.pres-tabs { display:flex; border-bottom:2px solid #e5e0d0; margin-bottom:1rem; }
.pres-tab { background:none; border:none; padding:8px 18px; font-size:0.8rem; font-weight:700; letter-spacing:0.06em; color:#bbb; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit; }
.pres-tab.active { color:#8C701C; border-bottom-color:#C47A0F; }
.pres-tab:hover  { color:#8C701C; }
.pres-tab-panel  { display:none; }
.pres-tab-panel.active { display:block; }
.pres-mp-header { display:flex; justify-content:flex-start; margin-bottom:1rem; }
.pres-btn-bulk-assign { display:inline-flex; align-items:center; gap:6px; background:#3a2a0a; color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:0.82rem; font-weight:700; letter-spacing:0.05em; cursor:pointer; font-family:inherit; font-variation-settings:'FILL' 1,'wght' 600; }
.pres-btn-bulk-assign:hover { background:#5c3d11; }
.pres-btn-bulk-assign .material-symbols-outlined { font-size:17px; }
.pres-res-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.pres-res-card { background:#fff; border:1px solid #ddd6c8; border-radius:12px; padding:16px 18px; margin-bottom:0; display:flex; align-items:center; gap:14px; box-shadow:0 1px 5px rgba(0,0,0,0.07); transition:border-color .15s,box-shadow .15s; }
.pres-res-card:hover { border-color:#d4c185; box-shadow:0 2px 8px rgba(140,112,28,.08); }
.pres-res-info { flex:1; min-width:0; }
.pres-res-name { font-size:0.95rem; font-weight:800; color:#2c1f07; }
.pres-res-sub  { font-size:0.78rem; color:#666; margin-top:3px; }
.pres-res-avail { color:#5a8a3c; }
.pres-res-site  { font-size:0.75rem; color:#888; margin-top:3px; }
.pres-res-site-here { color:#8C701C; font-weight:600; }
.pres-role-badge { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; border-radius:20px; white-space:nowrap; padding:2px 9px; margin-top:4px; }
.pres-role-field-worker { background:#dbeafe; color:#1e40af; }
.pres-role-foreman      { background:#fef3c7; color:#7c4a00; }
.pres-role-filter { display:flex; align-items:center; gap:8px; margin-bottom:0.9rem; flex-wrap:wrap; }
.pres-role-chip { padding:5px 14px; border:1.5px solid #ddd; border-radius:20px; font-size:0.75rem; font-weight:700; letter-spacing:0.04em; cursor:pointer; background:#fff; color:#666; transition:background .12s,border-color .12s,color .12s; font-family:inherit; }
.pres-role-chip:hover { border-color:#b8960c; color:#7a5c00; }
.pres-role-chip.active    { background:#3a2a0a; border-color:#3a2a0a; color:#fff; }
.pres-role-chip.active-fw { background:#1e40af; border-color:#1e40af; color:#fff; }
.pres-role-chip.active-fm { background:#7c4a00; border-color:#7c4a00; color:#fff; }
.pres-res-actions { display:flex; gap:8px; flex-shrink:0; }
.pres-res-card-col { flex-direction:column; align-items:stretch; }
.pres-res-card-col .pres-res-info { flex:none; }
.pres-res-card-col .pres-res-actions { display:flex; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #f0ebe0; justify-content:flex-end; }
.pres-btn { border:none; border-radius:20px; padding:6px 14px; font-size:0.75rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; letter-spacing:0.04em; }
.pres-btn:disabled { cursor:not-allowed; opacity:0.55; }
.pres-btn-assign  { background:#8C701C; color:#fff; }
.pres-btn-assign:hover:not(:disabled) { background:#6e570f; }
.pres-btn-remove  { background:#c62828; color:#fff; }
.pres-btn-remove:hover:not(:disabled) { background:#7f0000; }
.pres-btn-unavail { background:#f0ede6; color:#bbb; border:1px solid #e0dbd0; }
.pres-btn-view    { background:#3a2a0a; color:#fff; }
.pres-btn-view:hover { background:#5c3d11; }
.pres-btn-bulk { background:none; color:#8C701C; border:1.5px solid #C47A0F; border-radius:20px; padding:5px 14px; font-size:0.75rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; letter-spacing:0.04em; }
.pres-btn-bulk:hover { background:#fdf8ee; }
.pres-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px); background:#e65100; color:#fff; padding:10px 20px; border-radius:8px; font-size:0.85rem; font-weight:600; z-index:9999; transition:transform 0.25s ease,opacity 0.25s ease; opacity:0; pointer-events:none; white-space:nowrap; max-width:90vw; }
.pres-toast.show    { transform:translateX(-50%) translateY(0); opacity:1; }
.pres-toast.success { background:#2e7d32; }
.pres-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1050; align-items:center; justify-content:center; padding:1rem; }
.pres-modal-overlay.open { display:flex; }
.pres-modal { background:#fff; border-radius:16px; width:100%; max-width:540px; padding:1.8rem 2rem 2rem; max-height:88vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,0.22); animation:presModalIn .2s ease; }
@keyframes presModalIn { from { opacity:0; transform:scale(0.95) translateY(-12px); } to { opacity:1; transform:scale(1) translateY(0); } }
.pres-modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.3rem; }
.pres-modal-title { font-size:1rem; font-weight:800; color:#2c1f07; margin:0; }
.pres-modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#aaa; line-height:1; padding:4px; }
.pres-modal-close:hover { color:#555; }
.pres-modal-sub { font-size:0.8rem; color:#999; margin:0 0 1rem; }
.pres-unit-card { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fdf8ee; border:1px solid #e8d9a8; border-radius:8px; padding:10px 14px; margin-bottom:8px; }
.pres-unit-serial { font-size:0.88rem; font-weight:700; }
.pres-unit-status { font-size:0.75rem; color:#999; margin-top:2px; }
.pres-bulk-field { margin-bottom:1rem; }
.pres-bulk-field label { display:block; font-size:0.78rem; font-weight:700; color:#666; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.pres-bulk-select { width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:8px; font-size:0.9rem; font-family:inherit; background:#fff; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23aaa'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.pres-bulk-input { width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:8px; font-size:0.9rem; font-family:inherit; background:#fff; box-sizing:border-box; outline:none; }
.pres-bulk-input:focus { border-color:#C47A0F; }
.pres-qty-row { display:flex; align-items:center; justify-content:center; gap:20px; margin:1rem 0 1.4rem; }
.pres-qty-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid #e0dbd0; background:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#8C701C; font-weight:700; }
.pres-qty-btn:hover { background:#fdf8ee; }
.pres-qty-val { font-size:1.2rem; font-weight:700; min-width:2ch; text-align:center; }
.pres-modal-actions { display:flex; gap:10px; }
.pres-modal-btn { flex:1; padding:12px; border-radius:8px; border:none; font-size:0.9rem; font-weight:700; cursor:pointer; font-family:inherit; }
.pres-modal-btn-cancel  { background:#f0ede6; color:#5c3d11; border:1.5px solid #e0dbd0; }
.pres-modal-btn-cancel:hover { background:#e5e0d0; }
.pres-modal-btn-confirm { background:#3a2a0a; color:#fff; }
.pres-modal-btn-confirm:hover { background:#5c3d11; }

/* ============================================
   25. IMPORT / EXPORT MODALS
   ============================================ */

.pz-modal-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.45);
  align-items:center; justify-content:center;
}
.pz-modal-box { background:#fff; border-radius:14px; padding:32px 36px; min-width:340px; max-width:420px; width:100%; box-shadow:0 8px 40px rgba(0,0,0,.22); }
.pz-modal-title { margin:0 0 4px; font-size:20px; font-weight:700; color:#1a1a1a; }
.pz-modal-subtitle { margin:0 0 18px; color:#666; font-size:14px; }
.pz-modal-subtitle a { font-weight:600; text-decoration:none; }
.pz-modal-drop-zone { border:2px dashed #d4c185; border-radius:8px; padding:24px; text-align:center; cursor:pointer; color:#888; font-size:13px; transition:border-color .15s; }
.pz-modal-file-name { margin-top:8px; font-size:12px; color:#555; }
.pz-modal-result    { margin-top:10px; font-size:13px; }
.pz-modal-actions   { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.pz-modal-export-list { display:flex; flex-direction:column; gap:12px; }
.pz-modal-close-row { text-align:right; margin-top:22px; }
.pz-btn-modal-cancel { padding:9px 22px; background:#f0f0f0; border:none; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; color:#444; }
.pz-btn-modal-cancel:hover { background:#ddd; }
.pz-btn-modal-import { padding:8px 18px; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; background:#8C701C; }
.pz-btn-modal-import:hover { background:#6e570f; }
.pz-btn-modal-import-navy { padding:8px 18px; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; background:#1a3c5e; }
.pz-btn-modal-import-navy:hover { background:#12294a; }
.pz-export-link { display:flex; align-items:center; gap:12px; padding:13px 18px; border:1.5px solid; border-radius:10px; text-decoration:none; font-weight:700; font-size:15px; transition:opacity .15s; }
.pz-export-link:hover { opacity:.8; text-decoration:none; }
.pz-export-link--xlsx  { border-color:#1a6aa8; color:#1a6aa8; }
.pz-export-link--csv   { border-color:#7b5ea7; color:#7b5ea7; }
.pz-export-link--pdf   { border-color:#c0392b; color:#c0392b; }
.pz-export-link--print { border-color:#27ae60; color:#27ae60; }
.pz-export-link-icon   { font-size:22px; flex-shrink:0; }

/* == Extracted from: index == */
/* ── Report modal overlay ─────────────────────────────────────────────── */
.rpt-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:1200; align-items:center; justify-content:center;
}
.rpt-overlay.open { display:flex; }
.rpt-modal {
    background:#fff; border-radius:14px; width:min(420px,95vw);
    max-height:90vh; display:flex; flex-direction:column;
    box-shadow:0 8px 32px rgba(0,0,0,.28); overflow:hidden;
    transition: width .2s ease;
}
.rpt-modal.wide { width:min(720px,96vw); }
.rpt-sum-row-label { font-weight:600; font-size:.82rem; white-space:nowrap; }
.rpt-modal-hdr {
    display:flex; align-items:center; gap:.6rem;
    background:#c0392b; color:#fff; padding:.85rem 1rem;
}
.rpt-modal-hdr .rpt-hdr-back {
    background:none; border:none; color:#fff; cursor:pointer; padding:2px;
    display:flex; align-items:center; border-radius:50%;
}
.rpt-modal-hdr .rpt-hdr-back:hover { background:rgba(255,255,255,.2); }
.rpt-modal-hdr .rpt-hdr-back .material-symbols-outlined { font-size:20px; }
.rpt-modal-title { flex:1; font-weight:700; font-size:.95rem; }
.rpt-modal-hdr .rpt-hdr-close {
    background:none; border:none; color:#fff; cursor:pointer; padding:2px;
    display:flex; align-items:center; border-radius:50%;
}
.rpt-modal-hdr .rpt-hdr-close:hover { background:rgba(255,255,255,.2); }
.rpt-modal-hdr .rpt-hdr-close .material-symbols-outlined { font-size:20px; }

/* progress report modal header is golden */
.rpt-overlay[data-type="daily"] .rpt-modal-hdr { background:#8C701C; }

.rpt-modal-body { flex:1; overflow-y:auto; padding:1rem 1.1rem; }

/* Calendar */
.rpt-cal-nav {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.7rem;
}
.rpt-cal-nav button {
    background:none; border:1px solid #ddd; border-radius:6px; padding:3px 7px;
    cursor:pointer; display:flex; align-items:center;
}
.rpt-cal-nav button:hover { background:#f5f0e4; }
.rpt-cal-nav button .material-symbols-outlined { font-size:18px; }
.rpt-cal-month { font-size:.92rem; font-weight:700; color:#3a2a0a; }
.rpt-cal-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
    text-align:center;
}
.rpt-dow { font-size:.72rem; font-weight:700; color:#888; padding:4px 0; }
.rpt-cal-day {
    font-size:.84rem; padding:7px 3px; border-radius:50%; cursor:default;
    line-height:1; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    box-sizing:border-box;
}
.rpt-cal-day.has-report {
    background:#c0392b; color:#fff; cursor:pointer; font-weight:700;
}
.rpt-cal-day.has-report:hover { background:#a93226; }
.rpt-cal-day.is-today {
    border:2px solid #c0392b; color:#c0392b; font-weight:700;
}
.rpt-cal-day.has-report.is-today {
    border:none; color:#fff;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85);
}

/* golden for progress */
.rpt-overlay[data-type="daily"] .rpt-cal-day.has-report { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-cal-day.has-report:hover { background:#6e570f; }
.rpt-overlay[data-type="daily"] .rpt-cal-day.is-today { border-color:#8C701C; color:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-cal-day.has-report.is-today { color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85); }

.rpt-legend {
    display:flex; gap:1rem; margin-top:.8rem; justify-content:center;
    font-size:.76rem; color:#666;
}
.rpt-legend-item { display:flex; align-items:center; gap:.35rem; }
.rpt-dot {
    width:14px; height:14px; border-radius:50%; flex-shrink:0;
}
.rpt-dot.filled { background:#c0392b; }
.rpt-dot.outline { border:2px solid #c0392b; }
.rpt-overlay[data-type="daily"] .rpt-dot.filled { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-dot.outline { border-color:#8C701C; }

/* Detail view */
.rpt-detail-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    background:#fdecea; color:#c0392b; border:1px solid #f5c6c6;
    border-radius:6px; padding:.4rem .75rem; font-size:.82rem; font-weight:700; margin-bottom:.8rem;
}
.rpt-detail-badge .material-symbols-outlined { font-size:16px; }
.rpt-detail-date {
    display:flex; align-items:center; gap:.4rem;
    font-size:.84rem; color:#555; margin-bottom:.8rem;
}
.rpt-detail-date .material-symbols-outlined { font-size:16px; color:#888; }
.rpt-detail-section { margin-bottom:.8rem; }
.rpt-detail-section strong { display:block; font-size:.78rem; text-transform:uppercase; color:#666; letter-spacing:.4px; margin-bottom:.3rem; }
.rpt-detail-section ul { margin:.3rem 0 0 1.2rem; padding:0; font-size:.88rem; }
.rpt-detail-section p { font-size:.88rem; margin:0; }
.rpt-detail-meta { font-size:.78rem; color:#888; margin-top:.6rem; }
.rpt-daily-date { font-size:1.15rem; font-weight:800; color:#2c1f07; margin-bottom:.5rem; }
.rpt-daily-row  { font-size:.88rem; color:#555; margin-bottom:.6rem; }
.rpt-daily-section-title { font-weight:700; font-size:.88rem; color:#2c1f07; margin:.7rem 0 .3rem; }
.rpt-daily-crew { margin:.2rem 0 .5rem 1.1rem; padding:0; font-size:.88rem; color:#333; }
.rpt-daily-crew li { margin-bottom:.2rem; }
.rpt-daily-ext  { font-style:italic; color:#999; font-size:.82rem; }
.rpt-daily-completion { font-size:.9rem; color:#2c1f07; font-weight:600; margin:.6rem 0; }
.rpt-daily-divider { border:none; border-top:1px solid #e0e0e0; margin:.8rem 0; }
.rpt-daily-milestone { margin-bottom:.65rem; }
.rpt-daily-ms-name { font-size:.9rem; color:#2c1f07; font-weight:500; }
.rpt-daily-ms-meta { font-size:.82rem; color:#777; margin-top:.1rem; }
.rpt-daily-ms-bar-wrap { height:4px; background:#f0e6c8; border-radius:2px; margin-top:.35rem; overflow:hidden; }
.rpt-daily-ms-bar { height:4px; background:#c8a951; border-radius:2px; min-width:0; transition:width .3s; }
.rpt-ms-photos { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.rpt-ms-thumb { width:62px; height:62px; object-fit:cover; border-radius:5px; cursor:pointer; border:1.5px solid #e8d9a8; flex-shrink:0; }
.rpt-ms-thumb:hover { border-color:#8c701c; }
/* Milestone form rows */
.rpt-ms-row { border:1px solid #e8d9a8; border-radius:8px; padding:.6rem .75rem; margin-bottom:.5rem; background:#fdf8ee; }
.rpt-ms-row-header { font-size:.85rem; font-weight:600; color:#2c1f07; margin-bottom:.4rem; }
.rpt-ms-row-qty { display:flex; align-items:center; gap:.5rem; }
.rpt-ms-row-qty-label { font-size:.75rem; color:#666; font-weight:700; text-transform:uppercase; white-space:nowrap; letter-spacing:.03em; }
.rpt-ms-row-qty input { flex:1; padding:5px 8px; border:1px solid #ccc; border-radius:5px; font-size:.9rem; font-family:inherit; }
.rpt-ms-existing-photos { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.4rem; }
/* Edit button in daily detail footer */
.rpt-btn-edit { padding:.5rem 1.2rem; border-radius:50px; font-size:.85rem; font-weight:700; background:#fdf8ee; border:1.5px solid #c8a951; color:#5c3d11; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:.3rem; }
.rpt-btn-edit:hover { background:#f5ecd4; }
.rpt-btn-edit .material-symbols-outlined { font-size:16px; }
/* ── Summary buttons ───────────────────────────────────────── */
.rpt-summary-btn {
    width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.7rem 1rem; border:1.5px solid #c8a951; border-radius:50px;
    background:#fff; color:#5c3d11; font-size:.9rem; font-weight:700;
    cursor:pointer; font-family:inherit; letter-spacing:.01em;
}
.rpt-summary-btn:hover { background:#fdf8ee; border-color:#8C701C; }
.rpt-summary-btn .material-symbols-outlined { font-size:18px; }
/* ── Summary tables ────────────────────────────────────────── */
.rpt-sum-title { font-size:.95rem; font-weight:700; color:#3a2a0a; margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem; }
.rpt-sum-title .material-symbols-outlined { font-size:1.1rem; }
.rpt-sum-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-bottom:1rem; }
.rpt-sum-metric { background:#fdf8ee; border-radius:8px; padding:.6rem .8rem; text-align:center; }
.rpt-sum-metric-label { font-size:.68rem; font-weight:700; text-transform:uppercase; color:#8c701c; letter-spacing:.04em; margin-bottom:.2rem; }
.rpt-sum-metric-value { font-size:1.2rem; font-weight:800; color:#3a2a0a; }
.rpt-sum-metric-value.pos { color:#2e7d32; }
.rpt-sum-metric-value.neg { color:#c62828; }
.rpt-sum-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.rpt-sum-table th { background:#fdf8ee; color:#8c701c; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:.5rem .6rem; border-bottom:2px solid #e8d9a8; text-align:left; }
.rpt-sum-table td { padding:.5rem .6rem; border-bottom:1px solid #f0e6c8; color:#3a2a0a; }
.rpt-sum-table tr:last-child td { border-bottom:none; }
.rpt-sum-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.rpt-sum-table .pos { color:#2e7d32; font-weight:600; }
.rpt-sum-table .neg { color:#c62828; font-weight:600; }
.rpt-sum-table .muted { color:#aaa; }
.rpt-sum-ms-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#c8a951; margin-right:3px; vertical-align:middle; }
.rpt-sum-status { display:inline-block; padding:.1rem .45rem; border-radius:4px; font-size:.72rem; font-weight:600; }
.rpt-sum-status-pending    { background:#f5f5f5; color:#666; }
.rpt-sum-status-inprogress { background:#e3f2fd; color:#1565c0; }
.rpt-sum-status-done       { background:#e8f5e9; color:#2e7d32; }
.rpt-sum-empty { text-align:center; color:#aaa; padding:1.5rem; font-size:.88rem; }
.rpt-sum-overall-hdr { background:#8C701C; color:#fff; border-radius:8px 8px 0 0; padding:.9rem 1rem; text-align:center; margin-bottom:0; }
.rpt-sum-overall-title { font-size:1rem; font-weight:700; }
.rpt-sum-overall-sub { font-size:.82rem; opacity:.85; margin-top:.2rem; }
.rpt-sum-overall-badge { display:inline-block; background:rgba(255,255,255,.2); border-radius:50px; font-size:.78rem; padding:.25rem .75rem; margin-top:.4rem; }
.rpt-sum-ms-heading { font-size:.82rem; font-weight:800; color:#8C701C; text-transform:uppercase; letter-spacing:.06em; margin:.9rem 0 .4rem; }

/* Progress detail badge is golden */
.rpt-overlay[data-type="daily"] .rpt-detail-badge { background:#fffbee; color:#8C701C; border-color:#d4c185; }

/* New report form */
.rpt-form-title { font-weight:700; color:#c0392b; margin-bottom:1rem; font-size:.95rem; }
.rpt-overlay[data-type="daily"] .rpt-form-title { color:#8C701C; }
.rpt-form-group { margin-bottom:.9rem; }
.rpt-form-group label { display:block; font-size:.8rem; font-weight:700; text-transform:uppercase; color:#555; letter-spacing:.5px; margin-bottom:6px; }
.rpt-form-group input[type="date"],
.rpt-form-group input[type="number"],
.rpt-form-group textarea {
    width:100%; padding:7px 10px; border:1px solid #ccc; border-radius:6px;
    font-size:.9rem; font-family:inherit;
}
.rpt-form-group textarea { resize:vertical; text-transform:none; }
.rpt-form-group textarea::placeholder { text-transform:none; }
.rpt-causes { border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }
.rpt-cause-item {
    display:flex; align-items:center; gap:1rem;
    padding:.85rem 1rem; font-size:1.15rem; cursor:pointer;
    border-bottom:1px solid #f0f0f0;
}
/* Override display:block + uppercase from .rpt-form-group label */
label.rpt-cause-item {
    display:flex; align-items:center; gap:1rem;
    text-transform:none; letter-spacing:0; font-weight:500; color:#222; margin-bottom:0;
}
.rpt-cause-item:last-child { border-bottom:none; }
.rpt-cause-item:hover { background:#fef9f9; }
.rpt-cause-item input[type="checkbox"] { accent-color:#c0392b; width:18px; height:18px; cursor:pointer; flex-shrink:0; }
.rpt-overlay[data-type="daily"] .rpt-cause-item input[type="checkbox"] { accent-color:#8C701C; }
.rpt-overlay[data-type="daily"] label.rpt-cause-item { color:#5c3d11; }
/* Detail view cause list */
.rpt-cause-list { list-style:none; margin:.3rem 0 0; padding:0; font-size:.88rem; }
.rpt-cause-list li { display:flex; align-items:center; gap:.35rem; padding:.25rem 0; }
.rpt-cause-icon { font-size:14px; color:#c0392b; flex-shrink:0; }
/* Resolve button */
.rpt-resolve-btn {
    margin-top:.9rem; display:inline-flex; align-items:center; gap:.4rem;
    background:#15803d; color:#fff; border:none; border-radius:6px;
    padding:.5rem .9rem; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit;
    transition:background .15s;
}
.rpt-resolve-btn:hover { background:#166534; }
.rpt-resolve-btn:disabled { background:#9ca3af; cursor:default; }
.rpt-resolve-btn .material-symbols-outlined { font-size:16px; }

/* Modal footer */
.rpt-modal-footer {
    padding:.75rem 1rem; border-top:1px solid #ebebeb;
    display:flex; gap:.6rem; align-items:center; justify-content:flex-end;
}
.rpt-btn-back {
    background:#f5f5f5; border:1px solid #ddd; color:#444;
    border-radius:6px; padding:7px 14px; font-size:.85rem; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:.3rem; font-family:inherit;
}
.rpt-btn-back:hover { background:#ebebeb; }
.rpt-btn-back .material-symbols-outlined { font-size:16px; }
.rpt-btn-new {
    background:#c0392b; color:#fff; border:none; border-radius:6px;
    padding:7px 16px; font-size:.85rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; gap:.4rem; font-family:inherit;
}
.rpt-btn-new:hover { background:#a93226; }
.rpt-btn-new .material-symbols-outlined { font-size:16px; }
.rpt-overlay[data-type="daily"] .rpt-btn-new { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-btn-new:hover { background:#6e570f; }
.rpt-btn-submit {
    background:#c0392b; color:#fff; border:none; border-radius:6px;
    padding:7px 18px; font-size:.85rem; font-weight:700; cursor:pointer; font-family:inherit;
}
.rpt-btn-submit:hover { background:#a93226; }
.rpt-overlay[data-type="daily"] .rpt-btn-submit { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-btn-submit:hover { background:#6e570f; }

/* Dashboard card footer icon buttons */
.db-icon-btn {
    background:none; border:none; cursor:pointer; padding:2px; color:var(--db-orange);
    display:inline-flex; align-items:center; border-radius:4px; font-family:inherit;
}
.db-icon-btn:hover { color:#3a2a0a; background:#f0ebe0; }
.db-icon-btn .material-symbols-outlined {
    font-size:20px;
    font-variation-settings:'FILL' 1,'wght' 600;
}
.db-icon-btn.db-icon-emergency { color:#c0392b; }
.db-icon-btn.db-icon-emergency .material-symbols-outlined {
    font-variation-settings:'FILL' 0,'wght' 400;
}
.db-icon-btn.db-icon-emergency:hover { color:#922b21; background:#fdecea; }
.db-icon-btn.db-icon-report:hover { color:#6e570f; }
.db-icon-chat {
    font-variation-settings:'FILL' 1,'wght' 600 !important;
}

/* == Extracted from: projects_show == */
/* ── Page shell ───────────────────────────────────────────────────── */
.pd-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 2rem; box-sizing: border-box; }
.pd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .pd-two-col { grid-template-columns: 1fr; } }
.pd-two-col .pd-section { margin-bottom: 0; }

/* Back + Edit row */
.pd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.2rem;
}
.pd-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: #8C701C; font-weight: 600; text-decoration: none; font-size: 1.35rem;
}
.pd-back:hover { color: #5c3d11; text-decoration: none; }
.pd-back .material-symbols-outlined { font-size: 28px; }
.pd-edit-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1.5px solid #C47A0F; color: #8C701C;
    border-radius: 8px; padding: 10px 22px; font-size: 1.1rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}
.pd-edit-btn:hover { background: #fdf8ee; color: #5c3d11; text-decoration: none; }
.pd-edit-btn .material-symbols-outlined { font-size: 22px; }

/* Project card at top */
.pd-project-card {
    background: #fff; border: 1px solid #e5e0d0; border-radius: 14px;
    padding: 1.4rem 1.5rem; margin-bottom: 1rem;
}
.pd-project-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 4px;
}
.pd-project-name { font-size: 1.45rem; font-weight: 800; color: #2c1f07; line-height: 1.2; }
.pd-status-badge {
    flex-shrink: 0; border-radius: 20px; padding: 4px 14px;
    font-size: 0.88rem; font-weight: 700; border: 1.5px solid;
    white-space: nowrap;
}
.pd-project-type { font-size: 0.95rem; color: #8C701C; font-weight: 600; margin-bottom: 0.9rem; }
.pd-progress-row { display: flex; align-items: center; gap: 10px; }
.pd-progress-bar-wrap { flex: 1; background: #e8e0cc; border-radius: 6px; height: 10px; overflow: hidden; }
.pd-progress-fill { height: 100%; background: #8C701C; border-radius: 6px; }
.pd-progress-pct { font-size: 0.95rem; font-weight: 700; color: #5c3d11; min-width: 36px; text-align: right; }

/* Section blocks */
.pd-section { background: #fff; border: 1px solid #e5e0d0; border-radius: 14px; margin-bottom: 1rem; overflow: hidden; }
.pd-section-hdr {
    background: #8C701C; color: #fff;
    padding: 9px 16px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase;
}
.pd-section-body { padding: 0; }
.pd-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 12px 16px; border-bottom: 1px solid #f0ebe0;
}
.pd-row:last-child { border-bottom: none; }
.pd-row-label { font-size: 0.95rem; color: #888; font-weight: 500; flex-shrink: 0; min-width: 140px; }
.pd-row-value { font-size: 1rem; color: #2c1f07; font-weight: 500; text-align: right; word-break: break-word; }
.pd-row-value a { color: #8C701C; font-weight: 600; text-decoration: none; }
.pd-row-value a:hover { text-decoration: underline; }

/* Action buttons grid */
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
.pd-action-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 10px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
    text-decoration: none; text-transform: uppercase;
    font-variation-settings: 'FILL' 1, 'wght' 600;
}
.pd-action-btn .material-symbols-outlined { font-size: 18px; }
.pd-btn-resources  { background: #3a2a0a; color: #fff; }
.pd-btn-schedule   { background: #1565c0; color: #fff; }
.pd-btn-reports    { background: #2e7d32; color: #fff; }
.pd-btn-emergency  { background: #b71c1c; color: #fff; }
.pd-btn-resources:hover  { background: #5c3d11; text-decoration: none; color: #fff; }
.pd-btn-schedule:hover   { background: #0d47a1; text-decoration: none; color: #fff; }
.pd-btn-reports:hover    { background: #1b5e20; text-decoration: none; color: #fff; }
.pd-btn-emergency:hover  { background: #7f0000; text-decoration: none; color: #fff; }

/* ── Milestone / progress cards (unchanged) ───────────────────────── */
.ms-card { background:#fff; border:1px solid #e8d9a8; border-radius:12px; padding:1.5rem; margin-bottom:1.5rem; }
.ms-card-title { font-size:1rem; font-weight:700; color:#5c3d11; margin:0 0 1rem; display:flex; align-items:center; gap:.5rem; }
.ms-card-title .material-symbols-outlined { font-size:1.15rem; }
.ms-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; }
.ms-metric { background:#fdf8ee; border-radius:8px; padding:.9rem 1rem; text-align:center; }
.ms-metric-label { font-size:.72rem; font-weight:600; color:#8c701c; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.ms-metric-value { font-size:1.5rem; font-weight:800; color:#3a2a0a; }
.ms-metric-value.positive { color:#2e7d32; }
.ms-metric-value.negative { color:#c62828; }
.ms-metric-value.neutral  { color:#5c3d11; }
.ms-undated-badge { display:inline-flex; align-items:center; gap:.3rem; background:#fff3cd; color:#856404; border:1px solid #ffc107; border-radius:20px; font-size:.78rem; font-weight:600; padding:.25rem .75rem; margin-bottom:1rem; }
.ms-table-wrap { overflow-x:auto; }
.ms-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.ms-table th { background:#fdf8ee; color:#8c701c; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:.6rem .8rem; border-bottom:2px solid #e8d9a8; text-align:left; }
.ms-table td { padding:.6rem .8rem; border-bottom:1px solid #f0e6c8; color:#3a2a0a; }
.ms-table tr:last-child td { border-bottom:none; }
.ms-table tr:hover td { background:#fdf8ee; }
.ms-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.ms-table .pos { color:#2e7d32; font-weight:600; }
.ms-table .neg { color:#c62828; font-weight:600; }
.ms-table .muted { color:#999; }
.ms-milestone-marker { display:inline-block; width:7px; height:7px; border-radius:50%; background:#c8a951; margin-right:4px; vertical-align:middle; }
.ms-status { display:inline-block; padding:.15rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; }
.ms-status-pending     { background:#f5f5f5; color:#666; }
.ms-status-inprogress  { background:#e3f2fd; color:#1565c0; }
.ms-status-done        { background:#e8f5e9; color:#2e7d32; }
.ms-warning { background:#fff8e1; border:1px solid #ffe082; border-radius:8px; padding:.7rem 1rem; font-size:.85rem; color:#795548; display:flex; align-items:flex-start; gap:.5rem; margin-bottom:1rem; }
.ms-warning .material-symbols-outlined { font-size:1.05rem; flex-shrink:0; color:#f9a825; margin-top:1px; }
.ms-empty { text-align:center; padding:2rem 1rem; color:#999; font-size:.9rem; }
.ms-section-title { font-size:0.85rem; font-weight:700; color:#8C701C; text-transform:uppercase; letter-spacing:0.05em; margin:1.5rem 0 0.5rem; }

/* ── Report modal (emergency + daily) ────────────────────────────── */
.rpt-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:1200; align-items:center; justify-content:center;
}
.rpt-overlay.open { display:flex; }
.rpt-modal {
    background:#fff; border-radius:14px; width:min(420px,95vw);
    max-height:90vh; display:flex; flex-direction:column;
    box-shadow:0 8px 32px rgba(0,0,0,.28); overflow:hidden;
    transition: width .2s ease;
}
.rpt-modal.wide { width:min(720px,96vw); }
.rpt-sum-row-label { font-weight:600; font-size:.82rem; white-space:nowrap; }
.rpt-modal-hdr {
    display:flex; align-items:center; gap:.6rem;
    background:#c0392b; color:#fff; padding:.85rem 1rem;
}
.rpt-modal-hdr .rpt-hdr-back {
    background:none; border:none; color:#fff; cursor:pointer; padding:2px;
    display:flex; align-items:center; border-radius:50%;
}
.rpt-modal-hdr .rpt-hdr-back:hover { background:rgba(255,255,255,.2); }
.rpt-modal-hdr .rpt-hdr-back .material-symbols-outlined { font-size:20px; }
.rpt-modal-title { flex:1; font-weight:700; font-size:.95rem; }
.rpt-modal-hdr .rpt-hdr-close {
    background:none; border:none; color:#fff; cursor:pointer; padding:2px;
    display:flex; align-items:center; border-radius:50%;
}
.rpt-modal-hdr .rpt-hdr-close:hover { background:rgba(255,255,255,.2); }
.rpt-modal-hdr .rpt-hdr-close .material-symbols-outlined { font-size:20px; }
.rpt-overlay[data-type="daily"] .rpt-modal-hdr { background:#8C701C; }
.rpt-modal-body { flex:1; overflow-y:auto; padding:1rem 1.1rem; }
.rpt-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.rpt-cal-nav button { background:none; border:1px solid #ddd; border-radius:6px; padding:3px 7px; cursor:pointer; display:flex; align-items:center; }
.rpt-cal-nav button:hover { background:#f5f0e4; }
.rpt-cal-nav button .material-symbols-outlined { font-size:18px; }
.rpt-cal-month { font-size:.92rem; font-weight:700; color:#3a2a0a; }
.rpt-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.rpt-dow { font-size:.72rem; font-weight:700; color:#888; padding:4px 0; }
.rpt-cal-day { font-size:.84rem; padding:7px 3px; border-radius:50%; cursor:default; line-height:1; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.rpt-cal-day.has-report { background:#c0392b; color:#fff; cursor:pointer; font-weight:700; }
.rpt-cal-day.has-report:hover { background:#a93226; }
.rpt-cal-day.is-today { border:2px solid #c0392b; color:#c0392b; font-weight:700; }
.rpt-cal-day.has-report.is-today { border:none; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85); }
.rpt-overlay[data-type="daily"] .rpt-cal-day.has-report { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-cal-day.has-report:hover { background:#6e570f; }
.rpt-overlay[data-type="daily"] .rpt-cal-day.is-today { border-color:#8C701C; color:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-cal-day.has-report.is-today { color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85); }
.rpt-legend { display:flex; gap:1rem; margin-top:.8rem; justify-content:center; font-size:.76rem; color:#666; }
.rpt-legend-item { display:flex; align-items:center; gap:.35rem; }
.rpt-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.rpt-dot.filled { background:#c0392b; }
.rpt-dot.outline { border:2px solid #c0392b; }
.rpt-overlay[data-type="daily"] .rpt-dot.filled { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-dot.outline { border-color:#8C701C; }
.rpt-detail-badge { display:inline-flex; align-items:center; gap:.4rem; background:#fdecea; color:#c0392b; border:1px solid #f5c6c6; border-radius:6px; padding:.4rem .75rem; font-size:.82rem; font-weight:700; margin-bottom:.8rem; }
.rpt-detail-badge .material-symbols-outlined { font-size:16px; }
.rpt-detail-date { display:flex; align-items:center; gap:.4rem; font-size:.84rem; color:#555; margin-bottom:.8rem; }
.rpt-detail-date .material-symbols-outlined { font-size:16px; color:#888; }
.rpt-detail-section { margin-bottom:.8rem; }
.rpt-detail-section strong { display:block; font-size:.78rem; text-transform:uppercase; color:#666; letter-spacing:.4px; margin-bottom:.3rem; }
.rpt-detail-section ul { margin:.3rem 0 0 1.2rem; padding:0; font-size:.88rem; }
.rpt-detail-section p { font-size:.88rem; margin:0; }
.rpt-detail-meta { font-size:.78rem; color:#888; margin-top:.6rem; }
.rpt-overlay[data-type="daily"] .rpt-detail-badge { background:#fffbee; color:#8C701C; border-color:#d4c185; }
.rpt-form-title { font-weight:700; color:#c0392b; margin-bottom:1rem; font-size:.95rem; }
.rpt-overlay[data-type="daily"] .rpt-form-title { color:#8C701C; }
.rpt-form-group { margin-bottom:.9rem; }
.rpt-form-group label { display:block; font-size:.8rem; font-weight:700; text-transform:uppercase; color:#555; letter-spacing:.5px; margin-bottom:6px; }
.rpt-form-group input[type="date"], .rpt-form-group input[type="number"], .rpt-form-group textarea { width:100%; padding:7px 10px; border:1px solid #ccc; border-radius:6px; font-size:.9rem; font-family:inherit; }
.rpt-form-group textarea { resize:vertical; text-transform:none; }
.rpt-form-group textarea::placeholder { text-transform:none; }
.rpt-causes { border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }
.rpt-cause-item { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; font-size:1.15rem; cursor:pointer; border-bottom:1px solid #f0f0f0; }
label.rpt-cause-item { display:flex; align-items:center; gap:1rem; text-transform:none; letter-spacing:0; font-weight:500; color:#222; margin-bottom:0; }
.rpt-cause-item:last-child { border-bottom:none; }
.rpt-cause-item:hover { background:#fef9f9; }
.rpt-cause-item input[type="checkbox"] { accent-color:#c0392b; width:18px; height:18px; cursor:pointer; flex-shrink:0; }
.rpt-overlay[data-type="daily"] .rpt-cause-item input[type="checkbox"] { accent-color:#8C701C; }
.rpt-overlay[data-type="daily"] label.rpt-cause-item { color:#5c3d11; }
.rpt-modal-footer { padding:.75rem 1rem; border-top:1px solid #ebebeb; display:flex; gap:.6rem; align-items:center; justify-content:flex-end; }
.rpt-btn-back { background:#f5f5f5; border:1px solid #ddd; color:#444; border-radius:6px; padding:7px 14px; font-size:.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:.3rem; font-family:inherit; }
.rpt-btn-back:hover { background:#ebebeb; }
.rpt-btn-back .material-symbols-outlined { font-size:16px; }
.rpt-btn-new { background:#c0392b; color:#fff; border:none; border-radius:6px; padding:7px 16px; font-size:.85rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:.4rem; font-family:inherit; }
.rpt-btn-new:hover { background:#a93226; }
.rpt-btn-new .material-symbols-outlined { font-size:16px; }
.rpt-overlay[data-type="daily"] .rpt-btn-new { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-btn-new:hover { background:#6e570f; }
.rpt-btn-submit { background:#c0392b; color:#fff; border:none; border-radius:6px; padding:7px 18px; font-size:.85rem; font-weight:700; cursor:pointer; font-family:inherit; }
.rpt-btn-print { background:#8C701C; color:#fff; border:none; border-radius:6px; padding:7px 16px; font-size:.85rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:.4rem; font-family:inherit; }
.rpt-btn-print:hover { background:#6e570f; }
.rpt-btn-print .material-symbols-outlined { font-size:16px; }
.rpt-btn-submit:hover { background:#a93226; }
.rpt-overlay[data-type="daily"] .rpt-btn-submit { background:#8C701C; }
.rpt-overlay[data-type="daily"] .rpt-btn-submit:hover { background:#6e570f; }

/* ── Daily report detail layout ───────────────────────── */
.rpt-daily-date { font-size:1.15rem; font-weight:800; color:#2c1f07; margin-bottom:.5rem; }
.rpt-daily-row  { font-size:.88rem; color:#555; margin-bottom:.6rem; }
.rpt-daily-section-title { font-weight:700; font-size:.88rem; color:#2c1f07; margin:.7rem 0 .3rem; }
.rpt-daily-crew { margin:.2rem 0 .5rem 1.1rem; padding:0; font-size:.88rem; color:#333; }
.rpt-daily-crew li { margin-bottom:.2rem; }
.rpt-daily-ext  { font-style:italic; color:#999; font-size:.82rem; }
.rpt-daily-completion { font-size:.9rem; color:#2c1f07; font-weight:600; margin:.6rem 0; }
.rpt-daily-divider { border:none; border-top:1px solid #e0e0e0; margin:.8rem 0; }
.rpt-daily-milestone { margin-bottom:.65rem; }
.rpt-daily-ms-name { font-size:.9rem; color:#2c1f07; font-weight:500; }
.rpt-daily-ms-meta { font-size:.82rem; color:#777; margin-top:.1rem; }
.rpt-daily-ms-bar-wrap { height:4px; background:#f0e6c8; border-radius:2px; margin-top:.35rem; overflow:hidden; }
.rpt-daily-ms-bar { height:4px; background:#c8a951; border-radius:2px; min-width:0; }
.rpt-ms-photos { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.rpt-ms-thumb { width:62px; height:62px; object-fit:cover; border-radius:5px; cursor:pointer; border:1.5px solid #e8d9a8; flex-shrink:0; }
.rpt-ms-thumb:hover { border-color:#8c701c; }
.rpt-ms-row { border:1px solid #e8d9a8; border-radius:8px; padding:.6rem .75rem; margin-bottom:.5rem; background:#fdf8ee; }
.rpt-ms-row-header { font-size:.85rem; font-weight:600; color:#2c1f07; margin-bottom:.35rem; }
.rpt-ms-row-qty { display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.rpt-ms-row-qty-label { font-size:.74rem; color:#777; font-weight:700; text-transform:uppercase; white-space:nowrap; letter-spacing:.03em; min-width:85px; }
.rpt-ms-row-qty input[type="number"] { flex:1; padding:5px 8px; border:1px solid #ccc; border-radius:5px; font-size:.9rem; font-family:inherit; }
.rpt-ms-row-after { font-size:.78rem; color:#8c701c; margin-top:.1rem; font-weight:500; }
.rpt-ms-existing-photos { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.4rem; }
.rpt-ms-existing-photos .rpt-ms-thumb { width:52px; height:52px; }
/* Manpower checklist */
.rpt-mp-list { border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; max-height:200px; overflow-y:auto; }
.rpt-mp-item { display:flex; align-items:center; gap:.7rem; padding:.55rem .85rem; font-size:.88rem; cursor:pointer; border-bottom:1px solid #f0f0f0; }
.rpt-mp-item:last-child { border-bottom:none; }
.rpt-mp-item input[type="checkbox"] { width:16px; height:16px; accent-color:#8c701c; flex-shrink:0; }
.rpt-mp-name { font-weight:500; color:#2c1f07; }
.rpt-mp-role { font-size:.78rem; color:#999; margin-left:.2rem; }
.rpt-mp-empty { text-align:center; padding:.8rem; color:#aaa; font-size:.85rem; }
/* Edit button */
.rpt-btn-edit { padding:.5rem 1.2rem; border-radius:50px; font-size:.85rem; font-weight:700; background:#fdf8ee; border:1.5px solid #c8a951; color:#5c3d11; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:.3rem; }
.rpt-btn-edit:hover { background:#f5ecd4; }
.rpt-btn-edit .material-symbols-outlined { font-size:16px; }
/* ── ML Prediction panel (inside daily report detail) ─────── */
.rpt-ml-panel { margin-top:1rem; padding:.65rem .8rem; background:#f0f4ff; border:1px solid #c7d4f5; border-radius:8px; }
.rpt-ml-panel-title { font-size:.78rem; font-weight:700; color:#3b4a8c; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.45rem; display:flex; align-items:center; gap:.3rem; }
.rpt-ml-delay-warn { font-size:.86rem; color:#92400e; display:flex; align-items:center; gap:.3rem; }
.rpt-ml-on-track   { font-size:.86rem; color:#166534; display:flex; align-items:center; gap:.3rem; }
.rpt-ml-blocker    { font-size:.82rem; color:#4b5563; margin-top:.35rem; }
/* ── Resource Utilization widget (dashboard summary) ─────── */
.pz-util-card { margin-top:.9rem; padding:1.25rem 1.5rem 1rem; }
.pz-util-head { display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#5a4020; margin-bottom:1.1rem; }
.pz-util-head-icon { font-size:1rem; color:#c08820; }
.pz-util-bars { display:flex; flex-direction:column; gap:.75rem; }
.pz-util-row { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:.6rem; }
.pz-util-label { font-size:.82rem; font-weight:600; color:#3a2a0a; }
.pz-util-track { height:9px; background:#ede8d8; border-radius:99px; overflow:hidden; }
.pz-util-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.pz-util-low  { background:#d4870a; }
.pz-util-mid  { background:#c07a0a; }
.pz-util-high { background:#b06e0a; }
.pz-util-pct  { font-size:.82rem; font-weight:700; color:#2c1a00; white-space:nowrap; }
.pz-util-frac { font-size:.75rem; font-weight:500; color:#888; }
.pz-util-combined { border-top:1px solid #ede8d8; padding-top:.75rem; margin-top:.1rem; }
.pz-util-footer { text-align:center; margin-top:.9rem; }
.pz-util-dl { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; color:#8a6420; text-decoration:none; }
.pz-util-dl:hover { color:#5a3e10; text-decoration:underline; }
.pz-util-dl .material-symbols-outlined { font-size:.95rem; }
/* ── Summary buttons ───────────────────────────────────────── */
.rpt-summary-btn {
    width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.7rem 1rem; border:1.5px solid #c8a951; border-radius:50px;
    background:#fff; color:#5c3d11; font-size:.9rem; font-weight:700;
    cursor:pointer; font-family:inherit; letter-spacing:.01em;
}
.rpt-summary-btn:hover { background:#fdf8ee; border-color:#8C701C; }
.rpt-summary-btn .material-symbols-outlined { font-size:18px; }
/* ── Summary tables ────────────────────────────────────────── */
.rpt-sum-title { font-size:.95rem; font-weight:700; color:#3a2a0a; margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem; }
.rpt-sum-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.rpt-sum-table th { background:#b8d4e8; color:#1a3a4a; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:.5rem .6rem; border-bottom:2px solid #9bbfd4; text-align:left; }
.rpt-sum-table td { padding:.5rem .6rem; border-bottom:1px solid #f0e6c8; color:#3a2a0a; }
.rpt-sum-table tr:last-child td { border-bottom:none; }
.rpt-sum-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.rpt-sum-table .pos { color:#2e7d32; font-weight:600; }
.rpt-sum-table .neg { color:#c62828; font-weight:600; }
.rpt-sum-table .muted { color:#aaa; }
.rpt-sum-status { display:inline-block; padding:.1rem .45rem; border-radius:4px; font-size:.72rem; font-weight:600; }
.rpt-sum-status-pending    { background:#f5f5f5; color:#666; }
.rpt-sum-status-inprogress { background:#e3f2fd; color:#1565c0; }
.rpt-sum-status-done       { background:#e8f5e9; color:#2e7d32; }
.rpt-sum-empty { text-align:center; color:#aaa; padding:1.5rem; font-size:.88rem; }
.rpt-sum-overall-hdr { background:#8C701C; color:#fff; border-radius:8px 8px 0 0; padding:.9rem 1rem; text-align:center; margin-bottom:0; }
.rpt-sum-overall-title { font-size:1rem; font-weight:700; }
.rpt-sum-overall-sub { font-size:.82rem; opacity:.85; margin-top:.2rem; }
.rpt-sum-overall-badge { display:inline-block; background:rgba(255,255,255,.2); border-radius:50px; font-size:.78rem; padding:.25rem .75rem; margin-top:.4rem; }
.rpt-sum-ms-heading { font-size:.82rem; font-weight:800; color:#8C701C; text-transform:uppercase; letter-spacing:.06em; margin:.9rem 0 .4rem; }

/* == Extracted from: equipments_form == */
.unit-cards-container { display: flex; flex-direction: column; gap: 0.6rem; }
.unit-card { border: 1.5px solid #c8a951; border-radius: 10px; overflow: hidden; background: #fff; }
.unit-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 1rem; background: #f5e7b2; cursor: pointer; user-select: none;
}
.unit-card-title { font-weight: 700; font-size: 0.82rem; color: #5c3d11; }
.unit-card-chevron { font-size: 20px !important; color: #7a5c1e; transition: transform 0.2s ease; flex-shrink: 0; }
.unit-card.collapsed .unit-card-chevron { transform: rotate(180deg); }
.unit-card-body { padding: 1rem 1.1rem 0.8rem; }
.unit-card.collapsed .unit-card-body { display: none; }
.unit-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1rem; }
@media (max-width: 600px) { .unit-fields-grid { grid-template-columns: 1fr; } }
.unit-field { display: flex; flex-direction: column; gap: 0.25rem; }
.unit-field > label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #7a5c1e; letter-spacing: 0.3px; }
.unit-field input, .unit-field select {
    width: 100%; padding: 0.38rem 0.6rem;
    border: 1.5px solid #d4b87a; border-radius: 7px;
    font-size: 0.85rem; background: #fafaf8; color: #333; box-sizing: border-box;
}
.unit-field input:focus, .unit-field select:focus { outline: none; border-color: #a0782a; background: #fff; }
.unit-field-address { grid-column: 1 / -1; }
.unit-warehouse-input-wrap { display: flex; gap: 0.4rem; }
.unit-warehouse-input-wrap input { flex: 1; }
.unit-card-footer { display: flex; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid #e8d5a0; }
.qty-stepper { display: flex; align-items: center; background: #f5f5f3; border-radius: 999px; border: 1.5px solid #d4b87a; flex-shrink: 0; min-width: 0; width: fit-content; }
.qty-btn { flex: 0 0 28px !important; width: 28px !important; min-width: 0 !important; height: 24px !important; font-size: 14px !important; line-height: 24px !important; text-align: center; background: none !important; border: none !important; color: #7a5c1e !important; cursor: pointer; transition: background 0.15s; user-select: none; padding: 0 !important; }
.qty-btn:hover { background: #ede3c4 !important; border-radius: 999px; }
.qty-input { flex: 0 0 28px !important; width: 28px !important; min-width: 0 !important; text-align: center; border: none !important; background: transparent !important; font-size: 12px !important; font-weight: 600; color: #333; padding: 0 !important; -moz-appearance: textfield; }
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; }
.qty-stepper .qty-input { border: none !important; border-radius: 0 !important; background: transparent !important; }
.add-flow-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.unit-qty-row { display: flex; justify-content: flex-end; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.unit-qty-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: #7a5c1e; letter-spacing: 0.3px; }
.equipment-remove-btn { background: transparent !important; border: 1.5px solid #e53e3e !important; color: #e53e3e !important; border-radius: 8px !important; }
.equipment-remove-btn:hover { background: #e53e3e !important; color: #fff !important; }
/* ── Warehouse default banner ─────────────────────────────── */
.warehouse-default-banner { display:flex; align-items:flex-start; gap:0.55rem; background:#fdf8ee; border:1px solid #d4b87a; border-radius:9px; padding:0.6rem 0.85rem; margin-bottom:0.75rem; font-size:0.83rem; }
.wdb-icon { font-size:18px !important; color:#8c701c; margin-top:1px; flex-shrink:0; }
.wdb-body { flex:1; min-width:0; }
.wdb-label { color:#8c701c; font-weight:700; margin-right:0.3rem; }
.wdb-address { color:#3a2a0a; word-break:break-word; }
.wdb-not-set { color:#aaa; font-style:italic; }
.wdb-edit-form { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.2rem; }
.wdb-input-row { display:flex; gap:0.4rem; align-items:center; }
.wdb-action-row { display:flex; gap:0.4rem; justify-content:flex-end; }
.wdb-input { flex:1; min-width:0; padding:0.3rem 0.6rem; border:1.5px solid #d4b87a; border-radius:7px; font-size:0.82rem; background:#fff; box-sizing:border-box; font-family:inherit; }
.wdb-save-btn { padding:0.3rem 0.75rem; background:#c8a951; color:#fff; border:none; border-radius:7px; font-size:0.8rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.wdb-save-btn:hover { background:#8c701c; }
.wdb-save-btn:disabled { opacity:0.6; cursor:not-allowed; }
.wdb-cancel-btn { padding:0.3rem 0.55rem; background:none; border:1px solid #ccc; border-radius:7px; font-size:0.8rem; cursor:pointer; font-family:inherit; color:#666; }
.wdb-map-btn { padding:0.3rem 0.65rem; background:#fff; border:1.5px solid #d4b87a; border-radius:7px; font-size:0.8rem; color:#7a5c1e; cursor:pointer; font-family:inherit; white-space:nowrap; }
.wdb-map-btn:hover { background:#f5e7b2; }
.wdb-edit-btn { background:none; border:1px solid #d4b87a; border-radius:6px; font-size:0.74rem; color:#8c701c; cursor:pointer; padding:0.18rem 0.5rem; font-family:inherit; flex-shrink:0; margin-top:1px; }
.wdb-edit-btn:hover { background:#f5e7b2; }
/* ── Warehouse saved chip (per card) ─────────────────────── */
.warehouse-saved-strip { margin-top:0.35rem; }
.warehouse-use-saved-btn { display:inline-flex; align-items:center; gap:0.3rem; background:#fdf8ee; border:1px solid #d4b87a; border-radius:20px; padding:0.2rem 0.75rem 0.2rem 0.55rem; font-size:0.75rem; color:#5c3d11; cursor:pointer; font-family:inherit; transition:background 0.15s; max-width:100%; }
.warehouse-use-saved-btn:hover { background:#f5e7b2; border-color:#a0782a; }
.wss-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; font-weight:600; }

/* == Extracted from: manpower_form == */
.skills-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.skill-chip-label { cursor:pointer; user-select:none; }
.skill-chip-label input[type="checkbox"] { display:none; }
.skill-chip { display:inline-block; padding:7px 16px; border:2px solid #ccc; border-radius:20px; font-size:13px; font-weight:600; color:#444; transition:background .15s,color .15s,border-color .15s; }
.skill-chip-label:hover .skill-chip { border-color:#8C701C; color:#8C701C; }
.skill-chip-label input[type="checkbox"]:checked + .skill-chip { background:#8C701C; color:#fff; border-color:#8C701C; }

/* == Extracted from: tools_form == */
.unit-cards-container { display: flex; flex-direction: column; gap: 0.6rem; }
.unit-card { border: 1.5px solid #c8a951; border-radius: 10px; overflow: hidden; background: #fff; }
.unit-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 1rem; background: #f5e7b2; cursor: pointer; user-select: none;
}
.unit-card-title { font-weight: 700; font-size: 0.82rem; color: #5c3d11; }
.unit-card-chevron { font-size: 20px !important; color: #7a5c1e; transition: transform 0.2s ease; flex-shrink: 0; }
.unit-card.collapsed .unit-card-chevron { transform: rotate(180deg); }
.unit-card-body { padding: 1rem 1.1rem 0.8rem; }
.unit-card.collapsed .unit-card-body { display: none; }
.unit-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1rem; }
@media (max-width: 600px) { .unit-fields-grid { grid-template-columns: 1fr; } }
.unit-field { display: flex; flex-direction: column; gap: 0.25rem; }
.unit-field > label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #7a5c1e; letter-spacing: 0.3px; }
.unit-field input, .unit-field select {
    width: 100%; padding: 0.38rem 0.6rem;
    border: 1.5px solid #d4b87a; border-radius: 7px;
    font-size: 0.85rem; background: #fafaf8; color: #333; box-sizing: border-box;
}
.unit-field input:focus, .unit-field select:focus { outline: none; border-color: #a0782a; background: #fff; }
.unit-field-address { grid-column: 1 / -1; }
.unit-warehouse-input-wrap { display: flex; gap: 0.4rem; }
.unit-warehouse-input-wrap input { flex: 1; }
.unit-card-footer { display: flex; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid #e8d5a0; }
.qty-stepper { display: flex; align-items: center; background: #f5f5f3; border-radius: 999px; border: 1.5px solid #d4b87a; flex-shrink: 0; min-width: 0; width: fit-content; }
.qty-btn { flex: 0 0 28px !important; width: 28px !important; min-width: 0 !important; height: 24px !important; font-size: 14px !important; line-height: 24px !important; text-align: center; background: none !important; border: none !important; color: #7a5c1e !important; cursor: pointer; transition: background 0.15s; user-select: none; padding: 0 !important; }
.qty-btn:hover { background: #ede3c4 !important; border-radius: 999px; }
.qty-input { flex: 0 0 28px !important; width: 28px !important; min-width: 0 !important; text-align: center; border: none !important; background: transparent !important; font-size: 12px !important; font-weight: 600; color: #333; padding: 0 !important; -moz-appearance: textfield; }
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; }
.qty-stepper .qty-input { border: none !important; border-radius: 0 !important; background: transparent !important; }
.add-flow-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.unit-qty-row { display: flex; justify-content: flex-end; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.unit-qty-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: #7a5c1e; letter-spacing: 0.3px; }
.equipment-remove-btn { background: transparent !important; border: 1.5px solid #e53e3e !important; color: #e53e3e !important; border-radius: 8px !important; }
.equipment-remove-btn:hover { background: #e53e3e !important; color: #fff !important; }
/* ── Warehouse default banner ─────────────────────────────── */
.warehouse-default-banner { display:flex; align-items:flex-start; gap:0.55rem; background:#fdf8ee; border:1px solid #d4b87a; border-radius:9px; padding:0.6rem 0.85rem; margin-bottom:0.75rem; font-size:0.83rem; }
.wdb-icon { font-size:18px !important; color:#8c701c; margin-top:1px; flex-shrink:0; }
.wdb-body { flex:1; min-width:0; }
.wdb-label { color:#8c701c; font-weight:700; margin-right:0.3rem; }
.wdb-address { color:#3a2a0a; word-break:break-word; }
.wdb-not-set { color:#aaa; font-style:italic; }
.wdb-edit-form { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.2rem; }
.wdb-input-row { display:flex; gap:0.4rem; align-items:center; }
.wdb-action-row { display:flex; gap:0.4rem; justify-content:flex-end; }
.wdb-input { flex:1; min-width:0; padding:0.3rem 0.6rem; border:1.5px solid #d4b87a; border-radius:7px; font-size:0.82rem; background:#fff; box-sizing:border-box; font-family:inherit; }
.wdb-save-btn { padding:0.3rem 0.75rem; background:#c8a951; color:#fff; border:none; border-radius:7px; font-size:0.8rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.wdb-save-btn:hover { background:#8c701c; }
.wdb-save-btn:disabled { opacity:0.6; cursor:not-allowed; }
.wdb-cancel-btn { padding:0.3rem 0.55rem; background:none; border:1px solid #ccc; border-radius:7px; font-size:0.8rem; cursor:pointer; font-family:inherit; color:#666; }
.wdb-map-btn { padding:0.3rem 0.65rem; background:#fff; border:1.5px solid #d4b87a; border-radius:7px; font-size:0.8rem; color:#7a5c1e; cursor:pointer; font-family:inherit; white-space:nowrap; }
.wdb-map-btn:hover { background:#f5e7b2; }
.wdb-edit-btn { background:none; border:1px solid #d4b87a; border-radius:6px; font-size:0.74rem; color:#8c701c; cursor:pointer; padding:0.18rem 0.5rem; font-family:inherit; flex-shrink:0; margin-top:1px; }
.wdb-edit-btn:hover { background:#f5e7b2; }
/* ── Warehouse saved chip (per card) ─────────────────────── */
.warehouse-saved-strip { margin-top:0.35rem; }
.warehouse-use-saved-btn { display:inline-flex; align-items:center; gap:0.3rem; background:#fdf8ee; border:1px solid #d4b87a; border-radius:20px; padding:0.2rem 0.75rem 0.2rem 0.55rem; font-size:0.75rem; color:#5c3d11; cursor:pointer; font-family:inherit; transition:background 0.15s; max-width:100%; }
.warehouse-use-saved-btn:hover { background:#f5e7b2; border-color:#a0782a; }
.wss-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; font-weight:600; }


/* == Section 26: Project Resources — client-side pager == */
.pres-res-card.role-hidden  { display: none; }
.pres-res-card.pager-hidden { display: none; }
.pres-pager-wrap {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 0 0.25rem; flex-wrap: wrap;
}

/* == Section 27: Recently Deleted & Archive toolbar buttons == */
.rv-btn-group-view {
    display: flex;
    gap: 6px;
    align-items: center;
    border-left: 1.5px solid #ddd;
    padding-left: 8px;
    margin-left: 2px;
}
.rv-btn-trash,
.rv-btn-archive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    font-family: inherit;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.rv-btn-trash .material-symbols-outlined,
.rv-btn-archive .material-symbols-outlined { font-size: 17px; }
.rv-btn-trash {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}
.rv-btn-trash:hover { background: #a93226; border-color: #a93226; color: #fff; }
.rv-btn-archive {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
}
.rv-btn-archive:hover { background: #ca6f1e; border-color: #ca6f1e; color: #fff; }

/* == Section 28: Deleted & Archive pages == */
.del-shell { padding: 0; }
.del-header {
    display: flex; align-items: center; gap: 0.9rem;
    margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 1.5px solid #f0e8d8;
}
.del-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
    border: 1.5px solid #ddd; color: #555; text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.del-back:hover { background: #f5f5f5; border-color: #aaa; }
.del-back .material-symbols-outlined { font-size: 20px; }
.del-title { font-size: 1.25rem; font-weight: 700; color: #2c1f07; margin: 0 0 2px; }
.del-sub { font-size: 0.8rem; color: #999; margin: 0; }
.del-meta-row {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.9rem; flex-wrap: wrap;
}
.del-count-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px; font-size: 0.78rem;
    font-weight: 700; letter-spacing: 0.04em;
}
.del-count-badge.del-type-trash { background: #fce4e4; color: #c0392b; border: 1.5px solid #f5c6c6; }
.del-count-badge.del-type-archive { background: #fff3e0; color: #e67e22; border: 1.5px solid #ffe0b2; }
.del-empty {
    text-align: center; padding: 4rem 2rem; color: #bbb;
}
.del-empty .material-symbols-outlined { font-size: 3.5rem; display: block; margin-bottom: 0.75rem; color: #ddd; }
.del-empty p { margin: 0; font-size: 0.92rem; }
.del-expiry { font-size: 0.8rem; font-weight: 700; color: #888; }
.del-expiry-urgent { color: #c0392b; }
.del-expiry-warn   { color: #e67e22; }
.del-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px; border-radius: 6px; font-size: 0.75rem;
    font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
    font-family: inherit; transition: background 0.12s, border-color 0.12s;
    white-space: nowrap; vertical-align: middle;
}
.del-btn + .del-btn { margin-left: 4px; }
.del-btn-restore { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.del-btn-restore:hover { background: #c8e6c9; border-color: #2e7d32; }
.del-btn-restore:disabled, .del-btn-perma:disabled, .del-btn-unarchive:disabled { opacity: 0.45; cursor: not-allowed; }
.del-btn-perma { background: #fce4e4; color: #c0392b; border-color: #f5c6c6; }
.del-btn-perma:hover { background: #f5c6c6; border-color: #c0392b; }
.del-btn-unarchive { background: #fff8e1; color: #e67e22; border-color: #ffe0b2; }
.del-btn-unarchive:hover { background: #ffe0b2; border-color: #e67e22; }
.del-flash {
    padding: 10px 16px; border-radius: 8px; margin-bottom: 1.1rem;
    font-size: 0.84rem; font-weight: 600; animation: delFlashIn 0.2s ease;
}
@keyframes delFlashIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.del-flash-ok  { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.del-flash-err { background: #fce4e4; color: #c0392b; border: 1px solid #f5c6c6; }

/* deleted/archive pages: strip extra side-margins from pz-table-wrap */
.del-shell .pz-table-wrap { margin-left: 0; margin-right: 0; overflow-x: auto; }
/* let the browser size columns by content instead of equal-width fixed layout */
.del-shell .pz-table { table-layout: auto; min-width: 700px; }
/* pin narrow utility columns so content columns get the remaining space */
.del-shell .pz-table th:first-child,
.del-shell .pz-table td:first-child { width: 44px; }
.del-shell .pz-table th:last-child,
.del-shell .pz-table td:last-child  { width: 1%; white-space: nowrap; }
/* keep date / expires-in / by columns from expanding unnecessarily */
.del-shell .pz-table td,
.del-shell .pz-table th { vertical-align: middle; }

/* == Section 29: Dashboard ML Blockers carousel == */
.db-carousel-controls { display: flex; gap: 4px; }
.db-slide-btn {
    background: none; border: 1px solid #dcdacb; color: #b89b5e;
    border-radius: 4px; cursor: pointer; padding: 2px 8px;
    font-size: 12px; transition: all 0.2s;
}
.db-slide-btn:hover { background: #b89b5e; color: #fff; }
.db-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.db-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e0ddd0; cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}
.db-dot:hover { transform: scale(1.2); }
.db-dot.active { background: #b89b5e; }

/* == Section 30: Archive action button == */
.action-archive { color: #e67e22; font-variation-settings: 'FILL' 1; }
.action-archive:hover { color: #ca6f1e; transform: scale(1.15); }
.action-delete { color: #e53935; font-variation-settings: 'FILL' 1; }
.action-delete:hover { color: #b71c1c; transform: scale(1.15); }
td .action-wrap { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }

/* == Section 31: Dashboard summary cards (.pz-sc*) == */
.pz-sc { background: #FBF6E8; border: 2px solid #C8A951; border-radius: 10px; overflow: hidden; box-sizing: border-box; margin-bottom: .75rem; }
.pz-sc-head { text-align: center; font-weight: 800; font-size: .85rem; color: #8C701C; text-transform: uppercase; letter-spacing: .05em; padding: .55rem 1rem .45rem; border-bottom: 1px solid #E8D9A8; background: #FBF6E8; }
.pz-sc-empty { text-align: center; font-style: italic; color: #9a7b3a; font-size: .8rem; padding: .75rem .5rem; margin: 0; }
.pz-sc-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .8rem; }
.pz-sc-tbl thead th { background: #C8A951; color: #2c1a00; font-weight: 700; text-transform: uppercase; font-size: .7rem; padding: .3rem .55rem; text-align: left; white-space: nowrap; }
.pz-sc-tbl tbody td { padding: .26rem .55rem; color: #2c1a00; border-bottom: 1px solid #EDE4C8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-sc-tbl tbody tr:last-child td { border-bottom: none; }
.pz-sc-tbl tbody tr:nth-child(even) td { background: #F5EFD6; }
.pz-sc-tbl td.pz-sc-name { font-weight: 700; text-align: left; }
.pz-sc-tbl td.pz-sc-r { text-align: right; }
.pz-sc-tbl td.pz-delay-warn { color: #c0392b; font-weight: 700; }
.pz-sc-tbl td.pz-delay-ok { color: #999; }
.pz-sc-tbl th.pz-sc-r { text-align: right; }
.pz-sc-tbl td.pz-sc-reason { white-space: normal; vertical-align: middle; max-width: 160px; line-height: 1.3; }
.pz-reason-ok   { color: #FFC107; font-weight: 700; font-size: .78rem; }
.pz-reason-warn { color: #c0392b; font-weight: 700; font-size: .78rem; }
.pz-reason-se   { display: block; font-size: .65rem; color: #9a7b3a; font-style: italic; white-space: normal; margin-top: 2px; }
.pz-reason-text { font-size: .75rem; color: #FFC107; font-weight: 700; white-space: normal; }
.pz-sc-divider { width: 1px; background: #E8D9A8; flex-shrink: 0; align-self: stretch; }
.pz-sc-cols { display: flex; gap: .6rem; overflow: hidden; }
.pz-sc-cols > .pz-sc-half { flex: 1 1 0; min-width: 0; overflow-x: hidden; }
.pz-sc-row { display: flex; gap: .75rem; align-items: stretch; }
.pz-sc-row > .pz-sc { flex: 1 1 0; min-width: 0; margin-bottom: 0; }