/* Admin & Customer Portal Styling - Tree Yard Turf & Earth */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Source+Serif+4:wght@600;700&display=swap');

:root {
    /* Exact source palette from material-static-theme.css */
    --blue-300: #7da3d6;
    --blue-500: #6483ac;
    --blue-700: #496281;

    --olive-500: #5a5b44;
    --olive-700: #474936;
    --olive-900: #353726;

    --sand-100: #f1dfc1;
    --sand-300: #bdb09b;
    --sand-500: #8c8474;

    --copper-400: #a67150;
    --copper-600: #906345;
    --copper-800: #7a5339;

    --brown-700: #54342c;
    --brown-800: #462921;
    --brown-900: #371d15;

    /* Theme-aligned mappings for existing styling */
    --color-trunk: var(--brown-900);
    --color-soil: var(--brown-800);
    --color-soil-light: var(--brown-700);
    --color-sunset-orange: var(--copper-600);
    --color-sunset-gold: var(--sand-100);
    --color-leaf-green: var(--olive-700);
    --color-leaf-dark: var(--olive-900);
    --color-cream: var(--sand-100);
    --color-sand: #f8f6f2; /* canvas */

    --admin-bg: #f8f6f2; /* canvas */
    --admin-surface: #ffffff;
    --admin-border: var(--sand-500);
    --admin-text: var(--brown-900);
    --admin-text-muted: var(--brown-700);

    --font-serif: "Utopia Std", Utopia, "Iowan Old Style", Georgia, serif;
    --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;

    /* Brand variables aligned with theme.css */
    --canvas: #f8f6f2;
    --surface-soft: #fbf7ef;
    --surface-muted: var(--sand-100);
    --text: var(--brown-900);
    --text-muted: var(--brown-700);
    --heading: var(--brown-900);

    --primary: var(--blue-700);
    --primary-hover: #3d526c;
    --primary-pressed: #33465c;
    --primary-soft: #e9eff7;

    --secondary: var(--olive-700);
    --secondary-hover: var(--olive-900);
    --secondary-soft: #eef0e8;

    --accent: var(--copper-600);
    --accent-hover: var(--copper-800);
    --accent-soft: #f8eee5;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

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

body.admin-body, body.portal-body {
    font-family: var(--font-sans);
    background: var(--admin-bg);
    color: var(--admin-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Navbar */
.admin-header, .portal-header {
    background: var(--brown-900);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
    box-shadow: var(--elevation-2);
}

.admin-header .brand, .portal-header .brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.25rem;
    text-decoration: none;
}

.admin-header .brand img, .portal-header .brand img {
    height: 38px;
    width: 38px;
    object-fit: contain;
    border-radius: 0;
}

.admin-nav, .portal-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.admin-nav a, .portal-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 0;
    transition: all 120ms ease;
}

.admin-nav a:hover, .portal-nav a:hover,
.admin-nav a.active, .portal-nav a.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--sand-100);
}

.user-profile-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #ffffff;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0;
}

/* Layout Grid for Admin/Portal */
.admin-layout, .portal-layout {
    max-width: 1280px;
    margin: 1.75rem auto;
    padding: 0 1.25rem;
    width: 100%;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--brown-900);
}

.page-actions {
    display: flex;
    gap: 0.75rem;
}

/* Cards & Panels */
.admin-card {
    background: var(--admin-surface);
    border: 1px solid var(--border-soft);
    border-radius: 0;
    box-shadow: var(--elevation-1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-card h2, .admin-card h3 {
    font-family: var(--font-serif);
    color: var(--brown-900);
    margin-bottom: 1rem;
}

/* Data Tables */
.table-responsive {
    overflow-x: auto;
    background: var(--admin-surface);
    border: 1px solid var(--border-soft);
    border-radius: 0;
    box-shadow: var(--elevation-1);
}

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}

table.admin-table th {
    background: var(--surface-soft);
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--divider);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

table.admin-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--divider);
    color: var(--admin-text);
    vertical-align: middle;
}

table.admin-table tr:hover td {
    background: var(--primary-soft);
}

/* Status Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* NC Tax Badges */
.badge-nc-capital { background: #dcfce7; color: #15803d; }
.badge-nc-rmi { background: #fef3c7; color: #b45309; }
.badge-nc-goods { background: #e0f2fe; color: #0369a1; }
.badge-nc-exempt { background: #f3f4f6; color: #4b5563; }
.badge-nc-review { background: #fee2e2; color: #b91c1c; }

/* Visit Status Badges */
.badge-scheduled { background: #e0e7ff; color: #4338ca; }
.badge-confirmed { background: #dbeafe; color: #1d4ed8; }
.badge-en_route { background: #fef3c7; color: #d97706; }
.badge-in_progress { background: #fde68a; color: #92400e; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-weather_delayed { background: #fee2e2; color: #991b1b; }
.badge-rescheduled { background: #f3e8ff; color: #6b21a8; }

/* General Badges */
.badge-active { background: #dcfce7; color: #166534; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-draft { background: #f3f4f6; color: #4b5563; }
.badge-sent { background: #e0f2fe; color: #0369a1; }
.badge-paid { background: #dcfce7; color: #15803d; }
.badge-overdue { background: #fee2e2; color: #b91c1c; }

/* Form Controls */
.form-control {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.9rem;
    background: #ffffff;
    color: var(--admin-text);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
}

/* Modal Popup */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: var(--admin-surface);
    border-radius: 0;
    max-width: 550px;
    width: 90%;
    padding: 1.75rem;
    box-shadow: var(--elevation-3);
    border: 1px solid var(--border-soft);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.modal-header h3 {
    font-family: var(--font-serif);
    color: var(--brown-900);
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--admin-text-muted);
}