:root {
    /* Modern Palette */
    --primary: #4F46E5;
    /* Indigo 600 */
    --primary-hover: #4338CA;
    /* Indigo 700 */
    --secondary: #10B981;
    /* Emerald 500 */

    --background: #F9FAFB;
    /* Dev Agent Spec: Cool Gray */
    --surface: #FFFFFF;

    /* Text Colors */
    --text-main: #111827;
    /* Gray 900 */
    --text-secondary: #4B5563;
    /* Gray 600 */
    --text-light: #9CA3AF;
    /* Gray 400 */
    --divider: #E5E7EB;
    /* Gray 200 */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--text-main);
    line-height: 1.5;
}

/* Utilities */
.hidden {
    display: none !important;
}

/* App Bar */
.app-bar {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    color: var(--text-main);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--divider);
    position: sticky;
    top: 0;
    z-index: 50;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--primary);
}

.badge {
    background: #EEF2FF;
    color: var(--primary);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    letter-spacing: 0.05em;
}

/* Tabs */
.tabs {
    /* margin-left: auto; REMOVED to allow custom positioning */
    display: flex;
    gap: 0.5rem;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 8px;
}

/* Scoped: Top Navigation Tabs (Centered) */
.app-bar .tabs {
    margin: 0 auto;
}

/* Scoped: HR Card Tabs (Left/Default) */
.card .tabs {
    margin-right: auto;
    width: fit-content;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* Layout */
main {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

.view {
    display: none;
}

.view.active {
    display: block;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards & Containers */
.card {
    background: var(--surface);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--divider);
}

.agent-office {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.agent-email {
    color: var(--text-light);
    /* Lighter gray */
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    /* Prevent breaking layout */
}

h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Forms */
.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--divider);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: #FFFFFF;
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.input-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--divider);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: #FFFFFF;
    resize: vertical;
    font-family: inherit;
}

.input-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
}

.btn-danger {
    background-color: #EF4444;
    /* Hardcoded red */
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    width: 100%;
}

.btn-danger:hover {
    background-color: #DC2626;
    /* Darker Red */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
}

.btn-secondary {
    background-color: white;
    color: var(--text-main);
    border: 1px solid var(--divider);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset-danger {
    width: 100%;
    padding: 1rem;
    background: #FEF2F2;
    border: 1px dashed #EF4444;
    color: #DC2626;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-reset-danger:hover {
    background: #FEE2E2;
    border-color: #DC2626;
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1);
}

/* --- PREMIUM DASHBOARD UI --- */

/* Header Controls */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Filter Group (Segmented) */
.filter-group {
    display: inline-flex;
    background: #E5E7EB;
    padding: 4px;
    border-radius: 8px;
}

.filter-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    color: var(--text-main);
}

.filter-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

/* Agent Card - Premium Spec */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    /* Slightly wider */
    gap: 1.5rem;
    /* Gap 6 equivalent */
}

.agent-card {
    position: relative;
    /* For absolute positioning of delete button */
    background: white;
    border: 1px solid #E5E7EB;
    /* Subtle border */
    border-radius: 12px;
    padding: 24px;
    /* Increased padding */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* sm shadow */
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.agent-card:hover {
    transform: translateY(-4px);
    /* Lift effect */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #D1D5DB;
}

/* Card Internals */
.card-top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EEF2FF;
    /* Light Indigo */
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.agent-info {
    flex-grow: 1;
    min-width: 0;
    /* Critical for flex truncation */
    display: flex;
    flex-direction: column;
}

.agent-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1F2937;
    /* Dark Slate */
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-office {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-email {
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges */
.status-pill {
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 99px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    text-align: center;
    max-width: 130px;
    /* Constraint width if needed, but flex should handle it */
}

.badge-grey {
    background: #F3F4F6;
    color: #374151;
}

.badge-blue {
    background: #DBEAFE;
    color: #1E40AF;
}

/* Active */
.badge-green {
    background: #D1FAE5;
    color: #065F46;
}

/* Returned */
.badge-red {
    background: #FEE2E2;
    color: #991B1B;
}

/* Pending */


/* Stats Grid */
.card-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.stat-item .value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

.btn-delete-agent {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 4px;
    color: #9CA3AF;
    transition: all 0.2s;
    z-index: 10;
    line-height: 1;
}

.btn-delete-agent:hover {
    background: #FEE2E2;
    transform: scale(1.1);
}

/* Modals & Other */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal-card {
    background: white;
    /* padding: 2rem;  MOVED TO WRAPPER */
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    position: relative;
    max-height: 90vh;
    /* overflow-y: auto; REPLACED */
    overflow: hidden;
    /* Clips the inner scrollbar corners */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.modal-content-wrapper {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    width: 100%;
}

.modal-agent-details {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.detail-row {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.75rem;
    color: #6B7280;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
    word-break: break-all;
}

.signature-wrapper {
    border: 2px dashed #E5E7EB;
    background: #F9FAFB;
    border-radius: 8px;
}

.signature-wrapper:hover {
    border-color: var(--primary);
}

.signature-trigger {
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    background: #F9FAFB;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.signature-trigger:hover {
    border-color: var(--primary);
    background: #EEF2FF;
    color: var(--primary);
}

.asset-item {
    padding: 1rem;
    border: 1px solid var(--divider);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    background: white;
}



/* LOGIN PAGE ANIMATIONS */
.login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Archived Notes Pills */
#note-history-container {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    padding-right: 5px;
}

.note-pill {
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.note-date {
    font-size: 0.75rem;
    color: #6B7280;
    font-weight: 600;
}

.note-type {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.note-type.check-in {
    background: #DBEAFE;
    color: #1E40AF;
}

.note-type.check-out {
    background: #FEE2E2;
    color: #991B1B;
}

.note-text {
    color: #374151;
    word-break: break-all;
    font-size: 0.85rem;
}

/* Allow clicking on specific elements even in read-only mode if needed, 
   but for now we want "greyed out so they can't do anything". 
   However, user said "click on user tiles but everything should be grayed out".
   So we might need a more targeted approach if we want clickability. 
   
   Let's try a softer approach: just visual grey out + disable specific controls.
*/
.view-only-mode .btn-primary,
.view-only-mode .btn-danger,
.view-only-mode .btn-text,
.view-only-mode .btn-secondary,
.view-only-mode input,
.view-only-mode select {
    pointer-events: none;
    opacity: 0.5;
    background: #e5e7eb !important;
    color: #9ca3af !important;
    border-color: #d1d5db !important;
}

/* Specifically allow scrolling and maybe tile clicking if we wrap content appropriately 
   For dashboard, we want to allow clicking the tile to OPEN the modal, but the modal itself acts differently.
*/
#dashboard.view-only-mode .agent-card {
    pointer-events: auto;
    /* ALLOW clicking cards */
    opacity: 1;
    /* Keep cards visible */
    filter: none;
}

/* But buttons inside dashboard header should be disabled */
/* But buttons inside dashboard header should be disabled */
#dashboard.view-only-mode .dashboard-header button {
    pointer-events: auto;
    /* Enable filters */
    opacity: 1;
}

#dashboard.view-only-mode .dashboard-header input {
    pointer-events: auto;
    /* Enable search */
    opacity: 1;
    background: white !important;
    color: var(--text-main) !important;
    border-color: #d1d5db !important;
}

/* Modal View Only Overrides */
.modal-view-only .modal-actions,
.modal-view-only .signature-wrapper {
    pointer-events: none;
    opacity: 0.5;
    display: none;
}

.modal-view-only input[type="checkbox"] {
    /* pointer-events: none; handled by disabled attribute in JS */
    opacity: 0.5;
    cursor: not-allowed;
    /* display: none;  REMOVED: User wants them visible but greyed/disabled */
}

.modal-view-only .modal-actions {
    display: flex;
    opacity: 1;
    /* Ensure container is fully visible so child opacity works */
    pointer-events: auto;
    /* Allow clicking inside */
}

.modal-view-only #confirm-return {
    display: none !important;
}

.modal-view-only #signature-container {
    display: none !important;
}

.modal-view-only #cancel-return {
    pointer-events: auto;
    opacity: 1;
    background: var(--primary) !important;
    color: white !important;
}

/* New Arrivals - Orange Theme */
.badge-orange {
    background: #FFEDD5;
    color: #9A3412;
}