/*!
 * Group Seven Properties — Internal Portal Theme
 * Admin-style fixed left sidebar with icons-only / full-text toggle (Atum-inspired)
 * Brand: Group Seven Properties LLC — coral + navy + Gilroy
 * Light theme is the DEFAULT; body.gs-theme-dark overrides colors.
 */

/* =========================================================
   CSS variables — LIGHT (default)
   ========================================================= */
:root {
    --gs-bg:            #f7f7f7;
    --gs-bg-2:          #ffffff;
    --gs-surface:       #ffffff;
    --gs-surface-2:     #f1efef;
    --gs-border:        rgba(24, 26, 32, 0.09);
    --gs-border-hi:     rgba(235, 103, 83, 0.5);
    --gs-text:          #181a20;
    --gs-text-dim:      #5a5a5c;
    --gs-text-gray:     #717171;

    --gs-coral:         #eb6753;
    --gs-coral-2:       #ee4c34;
    --gs-navy:          #041e42;
    --gs-purple:        #573795;
    --gs-magenta:       #EC008C;

    --gs-font:          'Gilroy', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

    --gs-sidebar-open:    250px;
    --gs-sidebar-closed:  68px;
    --gs-header-h:        72px;
    --gs-transition:      cubic-bezier(.4, 0, .2, 1) 260ms;
}

/* =========================================================
   Dark theme overrides
   ========================================================= */
body.gs-theme-dark {
    --gs-bg:            #181a20;
    --gs-bg-2:          #0f1116;
    --gs-surface:       #1e2129;
    --gs-surface-2:     #242833;
    --gs-border:        rgba(235, 103, 83, 0.16);
    --gs-text:          #f2f4f8;
    --gs-text-dim:      #9aa1ad;
}

/* =========================================================
   Reset & base
   ========================================================= */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body.groupseven {
    background: var(--gs-bg);
    color: var(--gs-text);
    font-family: var(--gs-font);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: var(--gs-coral); text-decoration: none; transition: color 180ms ease; }
a:hover { color: var(--gs-coral-2); }

img, video, iframe, svg { max-width: 100%; height: auto; }

/* =========================================================
   Wrapper
   ========================================================= */
.gs-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* =========================================================
   Sidebar (fixed, left)
   ========================================================= */
.gs-sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--gs-sidebar-open);
    background: linear-gradient(180deg, var(--gs-bg-2) 0%, var(--gs-surface-2) 100%);
    border-right: 1px solid var(--gs-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    overflow: hidden;
    transition: width var(--gs-transition), transform var(--gs-transition);
}

body.gs-theme-dark .gs-sidebar-wrapper {
    background: linear-gradient(180deg, var(--gs-bg-2) 0%, var(--gs-navy) 100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

.gs-wrapper.closed .gs-sidebar-wrapper {
    width: var(--gs-sidebar-closed);
}

.gs-sidebar-sticky {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 103, 83, 0.35) transparent;
    display: flex;
    flex-direction: column;
}

.gs-sidebar-sticky::-webkit-scrollbar { width: 6px; }
.gs-sidebar-sticky::-webkit-scrollbar-thumb {
    background: rgba(235, 103, 83, 0.35);
    border-radius: 3px;
}

/* Brand mini */
.gs-sidebar-brand {
    height: var(--gs-header-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--gs-border);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}

.gs-brand-mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--gs-purple), var(--gs-magenta));
    border-radius: 8px;
}

.gs-brand-text {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--gs-text);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 180ms ease;
}

.gs-wrapper.closed .gs-brand-text {
    opacity: 0;
    pointer-events: none;
}

/* Sidebar logo (replaces brand text) */
.gs-sidebar-logo {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* When logo is present: hide the "7" mark by default, show the logo */
.gs-has-logo .gs-brand-mark {
    display: none;
}

/* Collapsed (icons-only): show the "7" mark, hide the full logo */
.gs-wrapper.closed .gs-has-logo .gs-brand-mark {
    display: inline-flex;
}

.gs-wrapper.closed .gs-has-logo .gs-sidebar-logo {
    display: none;
}

/* Toggle button */
.gs-sidebar-toggle {
    padding: 10px 0 2px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.gs-sidebar-toggle a {
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    color: var(--gs-text-dim);
    border-radius: 6px;
    transition: all 160ms ease;
}

.gs-sidebar-toggle a:hover {
    color: var(--gs-coral);
    background: rgba(235, 103, 83, 0.12);
}

.gs-collapse-icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
}

/* double-chevron icon via CSS */
.gs-collapse-icon::before,
.gs-collapse-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transition: all 200ms ease;
}

.gs-collapse-icon::before { left: 1px; }
.gs-collapse-icon::after  { left: 7px; }

/* open state: chevrons point left (collapse direction) */
.gs-collapse-icon.is-open::before { transform: translateY(-50%) rotate(-45deg); }
.gs-collapse-icon.is-open::after  { transform: translateY(-50%) rotate(-45deg); }

/* closed state: chevrons point right (expand direction) */
.gs-collapse-icon.is-closed::before { transform: translateY(-50%) rotate(135deg); }
.gs-collapse-icon.is-closed::after  { transform: translateY(-50%) rotate(135deg); }

/* Menu module area */
.gs-sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px 16px;
}

/* =========================================================
   Menu tree (rendered by mod_gsmenu)
   ========================================================= */
.gs-sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gs-sidebar-menu .gs-menu-tree,
.gs-sidebar-menu .gs-submenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gs-sidebar-menu li {
    list-style: none;
    position: relative;
}

.gs-sidebar-menu a.gs-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--gs-text-dim);
    border-left: 2px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 150ms ease;
}

.gs-sidebar-menu a.gs-menu-link:hover {
    color: var(--gs-coral);
    background: rgba(235, 103, 83, 0.1);
}

.gs-sidebar-menu li.active > a.gs-menu-link {
    color: var(--gs-coral);
    background: rgba(235, 103, 83, 0.16);
    border-left-color: var(--gs-coral);
}

.gs-menu-icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    font-size: 18px;
    color: var(--gs-coral);
}

.gs-menu-icon svg {
    display: block;
    margin: 0 auto;
}

.gs-menu-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 180ms ease;
}

.gs-menu-chevron {
    font-size: 12px;
    color: var(--gs-text-gray);
    transition: transform 180ms ease;
}

.gs-menu-item.expanded > .gs-menu-link .gs-menu-chevron {
    transform: rotate(90deg);
}

/* Children collapse */
.gs-menu-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height 260ms ease;
}

.gs-menu-children[data-expanded="true"] {
    max-height: 1000px;
}

.gs-menu-children .gs-submenu .gs-menu-link {
    padding-left: 42px;
    font-size: 13px;
}

.gs-menu-children .gs-submenu .gs-submenu .gs-menu-link {
    padding-left: 56px;
}

/* =========================================================
   Collapsed (icons-only) state
   ========================================================= */
.gs-wrapper.closed .gs-menu-text {
    display: none;
}

.gs-wrapper.closed .gs-menu-chevron {
    display: none;
}

.gs-wrapper.closed .gs-menu-link {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    border-left: 2px solid transparent;
}

.gs-wrapper.closed .gs-menu-icon {
    width: auto;
    font-size: 20px;
}

.gs-wrapper.closed .gs-menu-children {
    display: block;
}

.gs-wrapper.closed .gs-menu-children .gs-menu-link {
    padding-left: 0;
}

/* =========================================================
   Theme toggle (sidebar bottom)
   ========================================================= */
.gs-sidebar-theme {
    flex-shrink: 0;
    padding: 10px 8px 14px;
    margin-top: 8px;
    border-top: 1px solid var(--gs-border);
}

.gs-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--gs-text-dim);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: all 150ms ease;
}

.gs-theme-toggle:hover {
    color: var(--gs-coral);
    background: rgba(235, 103, 83, 0.1);
}

.gs-theme-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #d8dde4;
    transition: background 200ms ease;
}

body.gs-theme-dark .gs-theme-track {
    background: #343a44;
}

.gs-theme-sun,
.gs-theme-moon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
}

.gs-theme-sun  { left: 5px;  color: #f59e0b; }
.gs-theme-moon { right: 5px; color: #94a3b8; }

.gs-theme-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 200ms ease;
}

body.gs-theme-dark .gs-theme-thumb {
    transform: translateX(20px);
}

.gs-theme-label {
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 180ms ease;
}

/* Collapsed sidebar: hide the theme label, keep the switch */
.gs-wrapper.closed .gs-theme-label {
    display: none;
}

.gs-wrapper.closed .gs-theme-toggle {
    justify-content: center;
    padding: 8px 0;
}

/* =========================================================
   Main container (right of sidebar)
   ========================================================= */
.gs-container-main {
    margin-left: var(--gs-sidebar-open);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--gs-transition);
}

.gs-wrapper.closed .gs-container-main {
    margin-left: var(--gs-sidebar-closed);
}

/* =========================================================
   Header
   ========================================================= */
.gs-site-header {
    height: var(--gs-header-h);
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
}

.gs-header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
}

.gs-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.gs-header-logo {
    height: 40px;
    width: auto;
}

.gs-header-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--gs-purple), var(--gs-magenta));
    border-radius: 9px;
}

.gs-site-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--gs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-tagline {
    margin: 0;
    font-size: 13px;
    color: var(--gs-text-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-main-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.gs-main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-main-nav a {
    color: var(--gs-text-dim);
    font-size: 14px;
    font-weight: 500;
}

.gs-main-nav a:hover {
    color: var(--gs-coral);
}

.gs-user-chip {
    font-size: 13px;
    color: var(--gs-text);
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border);
    padding: 4px 12px;
    border-radius: 999px;
}

.gs-logout-link {
    font-size: 13px;
    color: var(--gs-coral);
}

/* Top-right Login button (guests) */
.gs-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    background: var(--gs-coral);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(235, 103, 83, 0.35);
    transition: all 160ms ease;
}

.gs-login-btn:hover {
    background: var(--gs-coral-2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(235, 103, 83, 0.45);
}

/* =========================================================
   Banner
   ========================================================= */
.gs-banner-area {
    background: linear-gradient(135deg, var(--gs-coral) 0%, var(--gs-magenta) 100%);
    color: #fff;
    padding: 18px 24px;
}

/* =========================================================
   Main content
   ========================================================= */
.gs-main-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.gs-main-content h1,
.gs-main-content h2,
.gs-main-content h3 {
    color: var(--gs-text);
}

.gs-main-content .page-header {
    margin-bottom: 20px;
}

.gs-main-content .item-page {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: 10px;
    padding: 24px;
}

.gs-main-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    width: 100%;
}

.gs-main-content th,
.gs-main-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gs-border);
    text-align: left;
}

.gs-main-content th {
    color: var(--gs-text);
    background: var(--gs-surface-2);
}

/* =========================================================
   Footer
   ========================================================= */
.gs-site-footer {
    border-top: 1px solid var(--gs-border);
    background: var(--gs-bg-2);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.gs-copyright {
    margin: 0;
    font-size: 13px;
    color: var(--gs-text-gray);
}

/* =========================================================
   Mobile toggle + overlay
   ========================================================= */
.gs-toggler-burger {
    display: none;
}

.gs-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
    .gs-sidebar-wrapper {
        transform: translateX(-100%);
        width: var(--gs-sidebar-open);
    }

    .gs-wrapper.open .gs-sidebar-wrapper {
        transform: translateX(0);
    }

    .gs-container-main,
    .gs-wrapper.closed .gs-container-main {
        margin-left: 0;
    }

    .gs-toggler-burger {
        display: inline-flex;
        position: fixed;
        top: 14px;
        left: 12px;
        z-index: 1001;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background: var(--gs-surface);
        border: 1px solid var(--gs-border);
        border-radius: 8px;
        cursor: pointer;
    }

    .gs-burger-icon,
    .gs-burger-icon::before,
    .gs-burger-icon::after {
        content: '';
        display: block;
        width: 18px;
        height: 2px;
        background: var(--gs-text);
        border-radius: 2px;
        position: relative;
    }

    .gs-burger-icon::before { position: absolute; top: -6px; left: 0; }
    .gs-burger-icon::after  { position: absolute; top: 6px;  left: 0; }

    .gs-wrapper.open ~ .gs-mobile-overlay,
    .gs-wrapper.open .gs-mobile-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .gs-header-inner {
        padding: 0 16px;
    }

    .gs-tagline { display: none; }

    .gs-main-content {
        padding: 16px;
    }

    /* Mobile: always show the full centered logo (not the compact "7" mark),
       and push it below the fixed burger toggle so it is not hidden */
    .gs-wrapper.closed .gs-has-logo .gs-brand-mark {
        display: none;
    }

    .gs-wrapper.closed .gs-has-logo .gs-sidebar-logo {
        display: inline-block;
    }

    .gs-sidebar-brand {
        height: auto;
        min-height: var(--gs-header-h);
        padding-top: 64px;
        padding-bottom: 12px;
    }
}