/**
 * Wide Layout for osTicket Staff Panel
 *
 * Expands the default 960px container to use more screen space.
 * Uses color scheme from osticket-customizations (MLM Gallery Branding).
 * Works with the Custom CSS Loader plugin.
 *
 * Filename: wide-layout-staff.css (contains "staff" = Admin Panel)
 * Location: assets/custom/css/wide-layout-staff.css
 */

/* ==========================================================================
   Color Variables - MLM Gallery Design System
   ========================================================================== */

:root {
    /* Primary Colors */
    --primary: #1E3A5F;              /* blue-700 - Main color */
    --primary-rgb: 30, 58, 95;       /* RGB for transparency */

    /* Neutral Colors */
    --neutral-light: #FFFFFF;        /* White */
    --neutral-warm: #EAE6DF;         /* Warm Beige */
    --neutral-gray: #CFCBCC;         /* Warm Gray */
    --neutral-dark: #2C2B29;         /* Dark Gray */
}

/* ==========================================================================
   Main Container - Wider Layout
   ========================================================================== */

/*
 * Default osTicket: #container { width: 960px; }
 * This makes it responsive and wider on large screens.
 *
 * IMPORTANT: In osTicket, #header, #nav, and #content are ALL inside #container.
 * So we only need to change the container width - everything else follows.
 */
#container {
    width: 95%;
    max-width: 1800px;
    margin: 0 auto 20px auto;
}

/* ==========================================================================
   Header - Blue Background
   ========================================================================== */

#header {
    background-color: var(--primary) !important;
    background-image: none !important;
    border-color: var(--primary) !important;
}

/* Logo - white text */
#header a#logo {
    color: var(--neutral-light) !important;
}

/* Header links - white */
#header a,
#header .pull-right a,
#header #info a {
    color: var(--primary) !important;
}

#header a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Info area text */
#header #info,
#header .pull-right {
    color: var(--primary) !important;
}

/* ==========================================================================
   Navigation - Horizontal Scroll for Many Items
   ========================================================================== */

#nav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* Prevent text wrapping in nav items */
#nav li a {
    white-space: nowrap;
}

/* Subtle scrollbar */
#nav::-webkit-scrollbar {
    height: 4px;
}

#nav::-webkit-scrollbar-track {
    background: var(--neutral-warm);
}

#nav::-webkit-scrollbar-thumb {
    background: var(--neutral-gray);
    border-radius: 2px;
}

/* ==========================================================================
   Sub-Navigation (Queue Navigation)
   ========================================================================== */

#customQ_nav,
nav#customQ_nav {
    overflow-x: auto;
    overflow-y: visible;
}

#customQ_nav #sub_nav {
    white-space: nowrap;
}

/* ==========================================================================
   Tables - Full Width with Horizontal Scroll
   ========================================================================== */

#content table,
table.list {
    width: 100%;
    min-width: 900px;
}

/* Wrap content area for horizontal scroll on tables */
#content {
    overflow-x: auto;
}

/* ==========================================================================
   Form Layout Adjustments
   ========================================================================== */

.settings_table {
    width: 100%;
}

.settings_table td {
    max-width: none;
}

@media (min-width: 1200px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        max-width: 600px;
    }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1200px) {
    #container {
        width: 98%;
        max-width: none;
    }
}

@media (max-width: 768px) {
    #container {
        width: 100%;
        padding: 0 10px;
    }
}