/* Unified page layout for AIFM admin pages.
   - Handles header (60px), footer (40px) and a fixed 20px gap above the footer.
   - Supports a single main panel layout.
   - Keeps padding consistent (20px) without double-counting gaps. */

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

/* Universal reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Prevent horizontal scroll globally */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================
   Utility Classes
   ======================================== */

/* Generic visibility toggles - use with component classes for proper specificity.
   Components define their hidden state (display: none), these override when added. */
.hidden {
    display: none !important;
}

/* Invisible - element takes up space but is not visible */
.invisible {
    visibility: hidden !important;
}

/* Empty state — centered muted message for empty lists/panels */
.empty-state {
    color: var(--color-gray-500);
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

/* Muted secondary text */
.text-muted {
    color: var(--color-gray-500);
    font-size: 0.9em;
}

/* Text truncation with ellipsis */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* File link — clickable document/file names */
.file-link {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}
.file-link:hover,
.file-link:focus {
    color: var(--color-primary-dark);
}

/* Dark file link — for use over coloured backgrounds where green is hard to read */
.file-link-dark {
    color: var(--color-text);
    text-decoration: underline;
    cursor: pointer;
}
.file-link-dark:hover,
.file-link-dark:focus {
    color: var(--color-gray-700);
}

/* Light file link — for use over dark coloured backgrounds */
.file-link-light {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.file-link-light:hover,
.file-link-light:focus {
    color: #e0e0e0;
}

/* Compact form input variant */
.form-input-sm {
    height: auto;
    padding: 4px 8px;
    font-size: 0.85em;
}

/* List item — clickable row with hover */
.list-item {
    cursor: pointer;
    user-select: none;
}
.list-item:hover {
    background-color: var(--color-gray-100);
}

/* List item header — bold top-level item */
.list-item-header {
    font-weight: 600;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-200);
}

/* List item sub — secondary level item */
.list-item-sub {
    color: var(--color-gray-600);
    border-bottom: 1px solid var(--color-gray-200);
}


/* Badge — inline label/tag */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Loading spinner */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Section divider line */
.divider {
    border: none;
    border-top: 1px solid var(--color-gray-250);
    margin: 0.5em 0;
}

/* Viewer/panel placeholder — full-height centered empty message */
.viewer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    color: var(--color-gray-500);
    padding: 2rem;
}
.viewer-placeholder p {
    margin-bottom: 0.5rem;
}

/* Map container — shared border/radius for Google Maps and similar */
.map-container {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 300px;
    display: flex;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gray-250);
}
.map-container *:focus {
    outline: none;
}

/* Dashed button variant */
.btn--dashed {
    border-style: dashed;
}

:root {
    /* Layout dimensions */
    --header-h: 60px;
    --footer-h: 40px;
    --gap: 10px;            /* desired gap above footer / between panels */
    --logged-h: 25px;       /* fixed logged-in bar height */
    --panel-pad: 10px;      /* padding inside panels */
    --border-radius: 6px;   /* standard border radius for all elements */

    /* Brand Colors - User customizable */
    --color-primary: #009579;
    --color-primary-dark: #006653;
    --color-primary-darker: #006b59;

    /* Module Colors */
    --color-water: #25adc2;
    --color-water-dark: #1d8a9b;

    /* Semantic Hierarchy Colors - Property structure */
    --color-region: #009579;      /* teal - same as primary */
    --color-region-bg: #e6f3f0;
    --color-region-hover: #cce7e1;

    --color-site: #9c27b0;        /* purple */
    --color-site-bg: #f4e7f6;

    --color-building: #ff9800;    /* orange */
    --color-building-bg: #fff5e6;

    --color-floor: #1f6feb;       /* blue */
    --color-floor-bg: #e9f0fd;

    --color-room: #e53935;        /* red */
    --color-room-bg: #fceaea;
    --color-room-hover: #f9d5d4;

    /* Semantic Hierarchy Colors - Asset field classification (1:1 with location hierarchy) */
    --color-home: var(--color-gray-500);          /* grey */
    --color-home-bg: var(--color-gray-150);

    --color-category: var(--color-region);        /* teal (= region) */
    --color-category-bg: var(--color-region-bg);

    --color-type: var(--color-site);              /* purple (= site) */
    --color-type-bg: var(--color-site-bg);

    --color-subtype: var(--color-building);       /* orange (= building) */
    --color-subtype-bg: var(--color-building-bg);

    --color-manufacturer: var(--color-floor);     /* blue (= floor) */
    --color-manufacturer-bg: var(--color-floor-bg);
    --color-manufacturer-hover: var(--color-floor-hover, var(--color-floor));

    --color-model: var(--color-room);             /* red (= room) */
    --color-model-bg: var(--color-room-bg);
    --color-model-hover: var(--color-room-hover);

    --color-document: var(--color-region);        /* teal (= region) */
    --color-document-bg: var(--color-region-bg);
    --color-document-hover: var(--color-region-hover);

    /* Semantic Hierarchy Colors - System tree (cycling region/site/building/floor/room) */
    --color-system: var(--color-region);          /* teal */
    --color-system-bg: var(--color-region-bg);

    --color-level1: var(--color-site);            /* purple */
    --color-level1-bg: var(--color-site-bg);

    --color-level2: var(--color-building);        /* orange */
    --color-level2-bg: var(--color-building-bg);

    --color-level3: var(--color-floor);           /* blue */
    --color-level3-bg: var(--color-floor-bg);

    --color-level4: var(--color-room);            /* red */
    --color-level4-bg: var(--color-room-bg);

    --color-level5: var(--color-region);          /* teal (cycle repeats) */
    --color-level5-bg: var(--color-region-bg);

    --color-level6: var(--color-site);            /* purple */
    --color-level6-bg: var(--color-site-bg);

    --color-level7: var(--color-building);        /* orange */
    --color-level7-bg: var(--color-building-bg);

    --color-level8: var(--color-floor);           /* blue */
    --color-level8-bg: var(--color-floor-bg);

    --color-level9: var(--color-room);            /* red */
    --color-level9-bg: var(--color-room-bg);

    /* Asset Colors */
    --color-asset-marker: #2563eb;     /* blue - asset point markers */
    --color-asset-selected: #dc2626;   /* red - selected assets */
    --color-asset-hover: #60a5fa;      /* light blue - hover state */
    --color-asset-no-icon: #000000;    /* black - fallback when no subtype icon */

    /* GeoJSON Layer Colors */
    --color-geojson-walls: #000000;    /* black */
    --color-geojson-doors: #c62828;    /* red */
    --color-geojson-windows: #e65100;  /* dark orange */
    --color-geojson-stairs: #1565c0;   /* dark blue */

    /* Toggle Button Colors */
    --color-toggle: #2563eb;
    --color-toggle-hover: #1d4ed8;
    --color-toggle-bg: #dbeafe;
    --color-toggle-bg-hover: #bfdbfe;
    --color-toggle-border: #93c5fd;
    --color-toggle-text: #1e40af;

    /* State Colors */
    --color-error: #c62828;
    --color-error-bright: #FF0000;
    --color-error-banner: #c0392b;
    --color-success: #00ac37;

    /* Action Colors */
    --color-danger: #c62828;
    --color-danger-dark: #8b1c1c;
    --color-danger-light: #fef2f2;

    /* Text Colors */
    --color-text: #000000;
    --color-text-light: #ffffff;
    --color-text-secondary: #333333;
    --color-text-tertiary: #444444;
    --color-text-disabled: #777777;

    /* Background Colors */
    --color-bg: #ffffff;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-bg-page: #009579;     /* page background - same as primary */
    --color-bg-panel: #ffffff;

    /* Border Colors */
    --color-border: #dddddd;
    --color-border-dark: #000000;
    --color-border-medium: #4c4c4c;

    /* Gray Scale Palette */
    --color-gray-50: #f7f7f7;
    --color-gray-100: #f4f4f4;
    --color-gray-150: #f0f0f0;
    --color-gray-200: #e5e7eb;
    --color-gray-250: #ddd;
    --color-gray-300: #d5d7db;
    --color-gray-400: #777777;
    --color-gray-500: #555555;
    --color-gray-600: #444444;
    --color-gray-700: #333333;
    --color-gray-800: #222222;
    --color-gray-900: #111827;

    /* Cancel/Secondary Button Colors */
    --color-cancel-bg: #e5e7eb;
    --color-cancel-hover: #d5d7db;
    --color-cancel-text: #111827;

    /* Tint Colors (with transparency) - Legacy aliases for primary */
    --color-tint-primary-light: rgba(0, 149, 121, 0.04);
    --color-tint-primary: var(--color-region-bg);

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.3);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    --shadow-darker: rgba(0, 0, 0, 0.65);

    /* White Transparency */
    --white-subtle: rgba(255, 255, 255, 0.15);
    --white-light: rgba(255, 255, 255, 0.3);
    --white-medium: rgba(255, 255, 255, 0.5);
    --white-strong: rgba(255, 255, 255, 0.85);
}

/* Base body styles */
body {
    margin: 0;
    padding-bottom: 0;       /* layout gap handled via main shell calc */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-page);
}

/* Background logo image - centralized via CSS pseudo-element */
body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vh;
    height: 95vh;
    background: url('/assets/images/logo.svg') center/contain no-repeat;
    z-index: 0;
    pointer-events: none;
}

/* Page frame below the navbar */
.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    padding: var(--gap) var(--gap) 0 var(--gap); /* uniform side/top padding; no bottom to avoid double-counting gap */
    width: 100%;
    gap: var(--gap);        /* vertical spacing between logged bar and main */
    flex: 1 1 auto;
}

/* Logged-in bar spacing */
.page-shell .logged-bar {
    padding: 0; /* outer spacing handled by page-shell padding */
    height: var(--logged-h);
    display: flex;
    align-items: center;
    margin-bottom: 0; /* space handled by page-shell gap */
}
/* Standardize menu bar spacing inside logged bar */
.page-shell .logged-bar .top-menu-bar {
    margin: 0;
    width: 100%;
}

/* Main area */
.page-shell .page-main {
    flex: 0 0 auto;
    height: calc(100vh - var(--header-h) - var(--footer-h) - var(--logged-h) - 30px);
    min-height: 0;          /* allow children to scroll instead of growing */
    display: flex;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 0;
}
/* Single panel */
.page-shell .page-main.single .panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* No-top variants — pages without a breadcrumb bar */
.page-shell .page-main.single-no-top,
.page-shell .page-main.double-no-top {
    height: calc(100vh - var(--header-h) - var(--footer-h) - 20px);
}
.page-shell .page-main.single-no-top .panel,
.page-shell .page-main.double-no-top .panel {
    min-width: 0;
    min-height: 0;
}
.page-shell .page-main.single-no-top .panel {
    flex: 1;
}
.page-shell:has(.page-main.single-no-top) .logged-bar,
.page-shell:has(.page-main.double-no-top) .logged-bar {
    display: none;
}

/* Floating form overlay (add/merge/split in content panel) */
.page-main .panel.structure-panel-info {
    position: relative;
}
.floating-form,
.structure-add-menu {
    position: absolute;
    top: var(--panel-pad);
    left: var(--panel-pad);
    width: 280px;
    max-height: calc(100% - var(--panel-pad) * 2);
    overflow-y: auto;
    z-index: 10;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px var(--shadow-light);
    padding: var(--panel-pad);
    box-sizing: border-box;
    user-select: none;
}
.floating-form h3 {
    text-align: center;
}
.floating-form input,
.floating-form textarea,
.structure-add-menu input,
.structure-add-menu textarea {
    user-select: text;
}
.floating-form .drag-handle,
.structure-add-menu .drag-handle {
    cursor: grab;
    padding: 4px 0;
    margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) 8px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    align-self: stretch;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.floating-form .drag-handle:active,
.structure-add-menu .drag-handle:active {
    cursor: grabbing;
}
.drag-handle-dots {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-gray-250);
}

/* Base panel styling */
.page-shell .panel {
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--panel-pad);
    box-sizing: border-box;
    overflow: auto;         /* scroll inside panels when content is tall */
    z-index: 1;
}

/* ========================================
   Table System - Global Styles
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    font-weight: 600;
    padding: 0.5em 0.75em;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

tbody td {
    padding: 0.5em 0.75em;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-200);
}

/* Compact table variant — for sidebar lists, small panels */
.table-compact {
    font-size: 0.85em;
    table-layout: auto;
}
.table-compact th,
.table-compact td {
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}
.table-compact th {
    font-weight: 600;
    color: var(--color-gray-600);
    border-bottom: 2px solid var(--color-gray-300);
}
.table-compact tbody tr:hover {
    background-color: var(--color-gray-50);
}
.table-compact tr.subheader td {
    font-weight: 600;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

/* Form table — label headers + input cells, no table chrome */
.form-table thead th {
    background: var(--color-gray-50);
    border: none;
    text-align: center;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95em;
    padding: 0 0.75em 4px;
}
.form-table tbody td {
    background: var(--color-gray-50);
    border: none;
    padding: 0 0.75em 16px;
    vertical-align: top;
}
.form-table tbody tr:hover td {
    background: var(--color-gray-50);
}

/* Rotated column header — for tables with many narrow columns */
thead th:has(.rotated-header) {
    background: transparent;
    border: none;
    position: relative;
}
.rotated-header {
    transform: rotate(-45deg);
    transform-origin: left bottom;
    position: absolute;
    bottom: 3px;
    left: 20px;
    width: 150px;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 0.85;
    text-align: left;
}

/* Sortable column headers */
thead th.sortable {
    cursor: pointer;
    transition: color 0.15s ease;
}

thead th.sortable:hover {
    color: var(--color-site);
}

/* Table row backgrounds - white rows on grey card */
tbody tr {
    background: var(--color-white);
}

tbody tr:hover td {
    background: var(--color-gray-100);
}

/* Floor-coloured rows */
tbody tr.floor-row td {
    background: var(--color-floor-bg);
}

tbody tr.floor-row:hover td {
    background: var(--color-floor);
    color: var(--color-text-light);
}

/* Room-coloured rows */
tbody tr.room-row td {
    background: var(--color-room-bg);
}

tbody tr.room-row:hover td {
    background: var(--color-room-hover);
}

/* Add rows - grey background */
tbody tr.add-row td {
    background: var(--color-gray-50);
}

tbody tr.add-row:hover td {
    background: var(--color-gray-100);
}

/* Empty rows - no hover effect */
tbody tr.empty-row:hover td {
    background: transparent;
}

/* Action columns - standard width and alignment */
col.col-action {
    width: 60px;
}

td.col-action,
td.col-edit,
td.col-move,
td.col-delete {
    text-align: center;
    white-space: nowrap;
}

/* Sort label - inline indicator for sortable columns */
.sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sort-label::after {
    content: "\21c5";
    color: var(--color-primary);
    font-size: 0.75em;
    line-height: 1;
}
thead th.sortable:hover .sort-label::after {
    color: var(--color-site);
}
thead th.sort-asc .sort-label::after {
    content: "\25bc";
}
thead th.sort-desc .sort-label::after {
    content: "\25b2";
}

/* ========================================
   Pagination
   ======================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 1em 0 0 0;
    flex-wrap: wrap;
}

.pagination button {
    padding: 6px 12px;
    border: 1px solid var(--color-gray-250);
    border-radius: var(--border-radius);
    background: var(--color-bg);
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s, border-color 0.2s;
}

.pagination button:hover:not(:disabled) {
    background: var(--color-gray-100);
    border-color: var(--color-primary);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: default;
}

.pagination button.active {
    background: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}

.pagination .page-info {
    margin: 0 0.5em;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

/* ========================================
   Column Selector
   ======================================== */

.column-selector {
    border: 1px solid var(--color-gray-250);
    border-radius: var(--border-radius);
    max-height: 180px;
    overflow-y: auto;
    padding: 0.5em;
    background: var(--color-bg);
}

.column-selector label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 4px 0;
    cursor: pointer;
    font-weight: normal;
    color: var(--color-text);
}