/* ==========================================================================
   osTicket Client Portal Modern Theme
   A comprehensive modernization overlay for the Client/User Portal
   Matches the Staff Panel (scp-modern.css) design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Variables)
   -------------------------------------------------------------------------- */

:root {
    /* ITC Primary Brand Colors (from itcnz.com) */
    --primary-color: #3080ff;       /* ITC Blue */
    --primary-hover: #155dfc;       /* ITC Blue Darker */
    --primary-light: #54a2ff;       /* ITC Blue Light */
    --primary-dark: #155dfc;        /* ITC Blue Dark */

    /* Cyan accent */
    --cyan-color: #00b7d7;          /* ITC Cyan */
    --cyan-light: #00d2ef;          /* ITC Cyan Light */

    /* Orange Accent */
    --accent-color: #fe6e00;        /* ITC Orange */
    --accent-hover: #cd6402;        /* ITC Orange Dark */

    /* Dark Theme - matching itcnz.com */
    --bg-page: #030712;             /* Page background (gray-950) */
    --bg-color: #101828;            /* Container background (gray-900) */
    --surface-color: #1e2939;       /* Card/surface background (gray-800) */
    --surface-elevated: #364153;    /* Elevated surface (gray-700) */
    --border-color: #364153;        /* Border color (gray-700) */
    --border-light: #4a5565;        /* Light border (gray-600) */

    /* Text colors for dark theme */
    --text-primary: #ffffff;        /* Primary text - white */
    --text-secondary: #d1d5db;      /* Secondary text - light gray */
    --text-muted: #6a7282;          /* Muted text (gray-500) */

    /* Status Colors */
    --success: #00c758;
    --success-light: rgba(0, 199, 88, 0.15);
    --warning: #fe6e00;
    --warning-light: rgba(254, 110, 0, 0.15);
    --error: #fb2c36;
    --error-light: rgba(251, 44, 54, 0.15);
    --info: #3080ff;
    --info-light: rgba(48, 128, 255, 0.15);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 20px;

    /* Shadows for dark theme */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
}

/* --------------------------------------------------------------------------
   2. Base Styles & Typography
   -------------------------------------------------------------------------- */

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-page) !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Flexbox sticky footer layout */
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 28px !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    margin-bottom: var(--spacing-md) !important;
}

h2 {
    font-size: 22px !important;
    color: var(--text-primary) !important;
}

h3 {
    font-size: 18px !important;
    color: var(--text-primary) !important;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

.faded {
    color: var(--text-muted) !important;
}

.clear {
    clear: both;
    height: 1px;
}

/* --------------------------------------------------------------------------
   3. Layout & Container
   -------------------------------------------------------------------------- */

#container {
    background: var(--bg-color) !important;
    width: 95% !important;
    max-width: 1400px;
    margin: 20px auto !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
    /* Flex grow to push footer down */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 1200px) {
    #container {
        width: 90% !important;
    }
}

@media screen and (min-width: 1600px) {
    #container {
        width: 85% !important;
        max-width: 1600px;
    }
}

@media screen and (max-width: 900px) {
    #container {
        width: 98% !important;
        margin: 10px auto !important;
    }
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

#header {
    background: var(--bg-color) !important;
    background-image: none !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    height: auto !important;
    min-height: 70px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between !important;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

#header #logo {
    width: auto;
    height: auto;
    float: none;
    display: flex;
    align-items: center;
    order: 1;
    flex-shrink: 0;
}

#header #logo img {
    max-height: 55px;
    width: auto;
}

#header .valign-helper {
    display: none;
}

#header p {
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    float: none;
    text-align: right;
    order: 2;
    margin-left: auto !important;
}

#header .pull-right {
    float: none !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    order: 2;
    margin-left: auto;
}

#header .pull-right p {
    color: var(--text-secondary) !important;
    font-size: 13px;
    background: var(--surface-color);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

#header .pull-right p a {
    color: var(--primary-light) !important;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-weight: 500;
}

#header .pull-right p a:hover {
    background: var(--surface-elevated);
    color: var(--primary-color) !important;
}

/* Language flags */
#header .flag {
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

#header .flag:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

#nav {
    background: var(--surface-color) !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 var(--spacing-lg) !important;
    height: auto !important;
    min-height: 50px;
    line-height: 50px;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    list-style: none;
    border-top: none !important;
}

#nav li {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#nav li a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    float: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 12px 18px !important;
    margin: 0 4px !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 15px;
    border-radius: var(--radius-md) !important;
    background-position: 14px center !important;
    padding-left: 40px !important;
    transition: all var(--transition-fast);
}

#nav li a:hover {
    background-color: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
}

#nav li a.active {
    background-color: rgba(48, 128, 255, 0.2) !important;
    color: var(--primary-light) !important;
}

/* --------------------------------------------------------------------------
   6. Content Area
   -------------------------------------------------------------------------- */

#content {
    background: var(--surface-color) !important;
    padding: var(--spacing-xl) !important;
    margin: var(--spacing-lg) !important;
    min-height: 300px !important;
    height: auto !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Flex grow to fill available space */
    flex: 1 0 auto;
}

/* Landing page layout */
#landing_page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

#landing_page .main-content {
    width: 100%;
    order: 1;
    text-align: center;
}

#landing_page .main-content h1 {
    font-size: 36px !important;
    margin-bottom: var(--spacing-md) !important;
}

#landing_page .main-content p {
    font-size: 18px !important;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--spacing-lg) auto !important;
    line-height: 1.7;
}

#landing_page .sidebar {
    width: 100%;
    order: 2;
}

/* Front page buttons - displayed prominently under support text */
.sidebar .front-page-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.sidebar .front-page-button p {
    margin: 0 !important;
}

.sidebar .front-page-button .green.button,
.sidebar .front-page-button .blue.button {
    min-width: 200px;
    padding: 16px 32px !important;
    font-size: 17px !important;
}

/* Thread body content */
.thread-body {
    line-height: 1.7;
    color: var(--text-secondary);
    background: transparent !important;
    font-size: 16px;
}

.thread-body p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 16px;
}

.thread-body h1 {
    color: var(--accent-color) !important;  /* ITC Orange */
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg) !important;
    font-size: 28px !important;
}

.thread-body a {
    color: var(--primary-light);
}

.thread-body a:hover {
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   7. Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
    float: none !important;
    width: 100%;
}

/* Note: .sidebar .front-page-button styles are in the Landing page layout section */

.sidebar .content {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
}

.sidebar .content section {
    margin-bottom: var(--spacing-md);
}

.sidebar .content section:last-child {
    margin-bottom: 0;
}

.sidebar .content .header {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
}

.sidebar .content section > div {
    padding: var(--spacing-xs) 0;
}

.sidebar .content section > div a {
    color: var(--text-secondary);
    font-size: 13px;
}

.sidebar .content section > div a:hover {
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.button,
.button:visited,
input[type="submit"],
input[type="button"],
input[type="reset"],
button,
.btn {
    display: inline-block !important;
    padding: 14px 28px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center;
    text-decoration: none !important;
    color: var(--text-primary) !important;
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
    width: auto !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover,
.btn:hover {
    background: var(--border-light) !important;
    border-color: var(--text-muted) !important;
    box-shadow: var(--shadow-md) !important;
    top: 0 !important;
    color: var(--text-primary) !important;
}

.button:active,
input[type="submit"]:active,
button:active,
.btn:active {
    transform: translateY(1px);
}

/* Primary blue button */
.blue.button,
.blue.button:visited,
input[type="submit"] {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.blue.button:hover,
input[type="submit"]:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

/* Green button */
.green.button,
.green.button:visited {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #ffffff !important;
}

.green.button:hover {
    background: #05df72 !important;
    border-color: #05df72 !important;
    color: #000000 !important;
}

/* Orange accent button */
.orange.button,
.accent.button {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

.orange.button:hover,
.accent.button:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

/* Cancel/Reset button */
input[type="reset"] {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

input[type="reset"]:hover {
    background: var(--bg-color) !important;
    color: var(--text-primary) !important;
}

/* Action buttons */
.action-button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
    font-size: 13px !important;
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast);
}

.action-button:hover {
    background: var(--bg-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Button containers */
.buttons,
p.buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    padding: 12px 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    background: var(--surface-color) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: auto;
    line-height: 1.4 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(48, 128, 255, 0.25) !important;
}

textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6 !important;
}

/* Form placeholders */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* Select dropdowns */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
    min-height: 42px !important;
    cursor: pointer;
}

/* Form labels */
label {
    font-weight: 500;
    color: var(--text-primary);
    display: inline-block;
    margin-bottom: var(--spacing-xs);
}

label.required {
    font-weight: 600 !important;
}

/* Required field indicator */
.required,
font.error {
    color: var(--error) !important;
}

/* Form hint text */
em,
.hint {
    color: var(--text-muted) !important;
    font-size: 12px;
    font-style: italic;
}

/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Form tables */
#ticketForm table,
#clientLogin table,
#ticketTable {
    width: 100%;
}

#ticketForm td,
#clientLogin td {
    padding: var(--spacing-sm) 0;
    vertical-align: top;
}

#ticketForm textarea,
#clientLogin textarea {
    width: 100% !important;
    max-width: 700px;
}

/* Login form specific */
#clientLogin {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-xl) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--spacing-lg);
    box-sizing: border-box;
}

#clientLogin .login-box {
    padding: var(--spacing-lg);
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

#clientLogin .login-box > div {
    margin-bottom: var(--spacing-md);
}

#clientLogin .login-box input[type="text"],
#clientLogin .login-box input[type="password"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* Make login form layout responsive */
#clientLogin > div[style*="display:table-row"],
#clientLogin > div[style*="display: table-row"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

#clientLogin > div > .login-box,
#clientLogin > div > div[style*="display:table-cell"],
#clientLogin > div > div[style*="display: table-cell"] {
    display: block !important;
    flex: 1;
    min-width: 280px;
}

#clientLogin strong {
    color: var(--error) !important;
    display: block;
    margin-bottom: var(--spacing-md);
    font-size: 13px;
}

#clientLogin p {
    margin-top: var(--spacing-md);
}

/* External auth buttons */
.external-auth {
    margin-bottom: var(--spacing-md);
}

/* Search form */
.search-form {
    margin-bottom: var(--spacing-xl);
}

.search-form form {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.search-form input.search {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

/* CAPTCHA */
.captcha {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.captchaRow {
    background: var(--bg-color);
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-md);
}

/* Form sections */
.form-header {
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-lg) 0 var(--spacing-md) !important;
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-lg) 0;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

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

#ticketTable {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    background: var(--surface-color);
}

#ticketTable caption {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    padding: var(--spacing-md) !important;
    text-align: left;
    font-weight: 600;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#ticketTable th {
    background: var(--surface-color) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.5px;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-right: none !important;
    text-align: left;
}

#ticketTable th a {
    color: var(--text-secondary) !important;
}

#ticketTable th a:hover {
    color: var(--primary-color) !important;
}

#ticketTable td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    border-right: none !important;
    color: var(--text-primary);
    vertical-align: middle;
}

#ticketTable tr:last-child td {
    border-bottom: none !important;
}

#ticketTable tr:hover td {
    background: var(--surface-elevated) !important;
}

#ticketTable tr.alt td {
    background: transparent !important;
}

/* Info tables */
.infoTable,
table.infoTable {
    background: var(--surface-color) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--border-color) !important;
}

.infoTable th {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px 12px !important;
    width: 120px;
}

.infoTable td {
    padding: 8px 12px !important;
    color: var(--text-primary);
}

.infoTable thead td.headline {
    background: var(--surface-elevated) !important;
    color: var(--primary-light) !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Ticket info table */
#ticketInfo {
    border: none !important;
}

#ticketInfo > tbody > tr > td {
    vertical-align: top;
    padding: var(--spacing-sm);
}

#ticketInfo h1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

#ticketInfo h1 small {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 14px;
}

#ticketInfo h1 .pull-right {
    margin-left: auto;
    display: flex;
    gap: var(--spacing-sm);
}

/* Custom data tables */
.custom-data {
    background: var(--surface-color) !important;
    border-radius: var(--radius-lg) !important;
    margin-top: var(--spacing-md);
    overflow: hidden;
    border: 1px solid var(--border-color) !important;
}

.custom-data .headline {
    background: var(--surface-elevated) !important;
    color: var(--primary-light) !important;
    font-weight: 600;
    padding: 10px 16px !important;
}

.custom-data th {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 10px 16px !important;
    width: 150px;
    background: transparent !important;
}

.custom-data td {
    padding: 10px 16px !important;
}

/* --------------------------------------------------------------------------
   11. Ticket List
   -------------------------------------------------------------------------- */

/* Search well */
.search.well {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-lg);
}

#ticketSearchForm {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

#ticketSearchForm input[type="text"] {
    min-width: 200px;
}

/* Pagination */
#pagination {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) 0;
    flex-wrap: wrap;
}

#pagination li {
    list-style: none;
}

#pagination li a,
#pagination .previousOff,
#pagination .nextOff {
    display: inline-block !important;
    float: none !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    transition: all var(--transition-fast);
}

#pagination li a:hover {
    background: var(--bg-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#pagination .active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

#pagination .previousOff,
#pagination .nextOff {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Refresh link */
a.refresh {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    float: none !important;
    padding: 8px 14px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-color) !important;
    transition: all var(--transition-fast);
}

a.refresh:hover {
    background: var(--bg-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* --------------------------------------------------------------------------
   12. Ticket Thread
   -------------------------------------------------------------------------- */

#ticketThread {
    margin-top: var(--spacing-lg);
}

#ticketThread table {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    margin-bottom: var(--spacing-md) !important;
    background: var(--surface-color);
}

#ticketThread table th {
    text-align: left;
    padding: var(--spacing-md) !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#ticketThread table th span {
    font-weight: 400;
    color: var(--text-muted);
}

#ticketThread table td {
    padding: var(--spacing-md) !important;
}

#ticketThread .message th {
    background: rgba(48, 128, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

#ticketThread .response th {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
}

#ticketThread .info {
    background: var(--surface-elevated) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

#ticketThread .info a {
    color: var(--text-secondary);
    padding-left: 24px;
    background-position: left center;
    background-repeat: no-repeat;
}

#ticketThread .info a:hover {
    color: var(--primary-color);
}

/* Thread entries (alternative styling) */
.thread-entry {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    overflow: hidden;
}

.thread-entry .header {
    background: var(--bg-color) !important;
    padding: var(--spacing-md) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.thread-entry .message {
    padding: var(--spacing-md) !important;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   13. Reply Form
   -------------------------------------------------------------------------- */

#reply {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-lg) !important;
    margin-top: var(--spacing-lg);
}

#reply h2 {
    margin-bottom: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

#reply table {
    width: 100% !important;
}

#reply textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#reply .attachments {
    margin-top: var(--spacing-md);
}

#reply .attachments .uploads div {
    display: inline-block;
    padding: var(--spacing-sm);
    background: var(--surface-color);
    border-radius: var(--radius-md);
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   14. Alerts & Notifications
   -------------------------------------------------------------------------- */

#msg_notice,
#msg_warning,
#msg_error,
.notice_bar,
.warning_bar,
.error_bar {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    font-weight: 500;
    border: 1px solid transparent !important;
    background-position: 16px center !important;
    padding-left: 50px !important;
}

#msg_notice,
.notice_bar {
    background-color: var(--success-light) !important;
    color: var(--success) !important;
    border-color: var(--success) !important;
}

#msg_warning,
.warning_bar {
    background-color: var(--warning-light) !important;
    color: var(--warning) !important;
    border-color: var(--warning) !important;
}

#msg_error,
.error_bar {
    background-color: var(--error-light) !important;
    color: var(--error) !important;
    border-color: var(--error) !important;
}

/* Info banner */
#msg_info,
.info_bar {
    background-color: var(--info-light) !important;
    color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--spacing-md) !important;
}

/* Inline errors */
.error {
    color: var(--error) !important;
}

.warning {
    background: var(--warning-light) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-style: normal !important;
    color: var(--warning) !important;
}

.warning strong {
    color: var(--error) !important;
}

/* --------------------------------------------------------------------------
   15. Knowledge Base
   -------------------------------------------------------------------------- */

#kb {
    list-style: none;
    margin: 0;
    padding: 0;
}

#kb > li {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    overflow: hidden;
}

#kb > li h4 {
    margin: 0 0 var(--spacing-sm) 0;
}

#kb > li h4 a {
    font-size: 16px !important;
    color: var(--primary-light);
    font-weight: 600;
}

#kb > li h4 span {
    color: var(--text-muted);
    font-weight: 400;
}

#kb li i {
    background: rgba(48, 128, 255, 0.2) !important;
    border-radius: var(--radius-md);
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
}

/* KB search */
#kb-search {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

#kb-search #breadcrumbs {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

#kb-search #breadcrumbs a {
    color: var(--primary-color);
}

/* Featured categories */
.featured-category {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-md);
}

.featured-category .category-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.featured-category .article-headline {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.featured-category .article-headline:last-child {
    border-bottom: none;
}

.featured-category .article-title a {
    color: var(--primary-light);
    font-weight: 500;
}

.featured-category .article-teaser {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: var(--spacing-xs);
}

/* FAQ list */
#faq ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-color) !important;
}

#faq ol li {
    margin: 0;
    padding: 0;
}

#faq ol li a {
    display: block;
    padding: var(--spacing-md) !important;
    padding-left: 36px !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    background-position: 12px center !important;
    transition: background var(--transition-fast);
}

#faq ol li a:hover {
    background-color: var(--surface-elevated) !important;
}

#faq .article-meta {
    background: var(--surface-color) !important;
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

#footer {
    background: var(--bg-color);
    text-align: center;
    padding: var(--spacing-lg) !important;
    color: var(--text-muted);
    font-size: 13px;
    /* Sticky footer - don't grow, stay at bottom */
    flex-shrink: 0;
    margin-top: auto;
}

#footer p {
    margin: 0 0 var(--spacing-sm) 0 !important;
}

#footer a {
    color: var(--text-muted) !important;
}

#footer a:hover {
    color: var(--primary-light) !important;
}

#footer #poweredBy {
    display: inline-block !important;
    margin: var(--spacing-sm) auto 0 !important;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

#footer #poweredBy:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   17. Loading Overlay
   -------------------------------------------------------------------------- */

#overlay {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(2px);
}

#loading {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--spacing-xl) !important;
    padding-left: 80px !important;
    box-shadow: var(--shadow-xl) !important;
    text-align: center;
}

#loading h4 {
    color: var(--primary-light) !important;
    margin-bottom: var(--spacing-sm);
}

#loading p {
    color: var(--text-secondary);
    margin: 0;
}

/* --------------------------------------------------------------------------
   18. Icons & Badges
   -------------------------------------------------------------------------- */

.Icon {
    padding-left: 24px !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    color: var(--primary-light) !important;
}

.Icon:hover {
    text-decoration: none !important;
    color: var(--primary-color) !important;
}

.Icon.refresh {
    padding-left: 20px;
}

/* Icon alignments */
i.icon-refresh,
i.refresh {
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

i.icon-refresh:hover,
i.refresh:hover {
    color: var(--primary-color);
}

/* Font Awesome icon colors */
.icon-2x {
    color: var(--primary-color);
}

.icon-folder-open {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   19. Select2 Overrides
   -------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    min-height: 42px !important;
    background: var(--surface-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    color: var(--text-primary) !important;
    padding-left: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(48, 128, 255, 0.25) !important;
}

.select2-dropdown {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface-color) !important;
    margin-top: 4px !important;
}

.select2-results__option {
    padding: 10px 14px !important;
    color: var(--text-primary) !important;
}

.select2-results__option--highlighted {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
}

.select2-results__option--selected {
    background: rgba(48, 128, 255, 0.2) !important;
    color: var(--primary-light) !important;
}

/* --------------------------------------------------------------------------
   20. Redactor Editor
   -------------------------------------------------------------------------- */

.redactor-box {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.redactor-toolbar {
    background: var(--surface-elevated) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--spacing-sm) !important;
}

.redactor-toolbar a {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
}

.redactor-toolbar a:hover {
    background: var(--surface-color) !important;
    color: var(--text-primary) !important;
}

.redactor-styles,
.redactor-in {
    background: var(--surface-color) !important;
    padding: var(--spacing-md) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
   21. File Upload / Attachments
   -------------------------------------------------------------------------- */

.filedrop {
    border: 2px dashed var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-xl) !important;
    text-align: center;
    transition: all var(--transition-fast);
    background: var(--surface-color) !important;
}

.filedrop:hover,
.filedrop.dragover {
    border-color: var(--primary-color) !important;
    background: rgba(48, 128, 255, 0.1) !important;
}

.file,
.uploads label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   22. jQuery UI Overrides
   -------------------------------------------------------------------------- */

.ui-widget {
    font-family: inherit !important;
}

.ui-dialog {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--surface-color) !important;
}

.ui-dialog-titlebar {
    background: var(--surface-elevated) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
}

.ui-dialog-title {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.ui-dialog-content {
    padding: var(--spacing-lg) !important;
    background: var(--surface-color) !important;
    color: var(--text-primary) !important;
}

.ui-dialog-buttonpane {
    background: var(--surface-elevated) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
}

.ui-datepicker {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-color) !important;
    padding: var(--spacing-sm) !important;
    background: var(--surface-color) !important;
}

.ui-datepicker-header {
    background: var(--primary-color) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: #ffffff !important;
}

.ui-datepicker-header a {
    color: #ffffff !important;
}

.ui-datepicker td a {
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
}

.ui-datepicker td a:hover {
    background: var(--surface-elevated) !important;
}

.ui-datepicker td a.ui-state-active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   23. Utility Classes
   -------------------------------------------------------------------------- */

.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-error,
.text-danger {
    color: var(--error) !important;
}

.bg-light {
    background: var(--surface-color) !important;
}

.rounded {
    border-radius: var(--radius-lg) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.flush-left {
    text-align: left !important;
}

.flush-right {
    text-align: right !important;
}

.centered {
    text-align: center !important;
}

.hidden {
    display: none !important;
}

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.mt-3 { margin-top: var(--spacing-lg) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.mb-3 { margin-bottom: var(--spacing-lg) !important; }

.p-1 { padding: var(--spacing-sm) !important; }
.p-2 { padding: var(--spacing-md) !important; }
.p-3 { padding: var(--spacing-lg) !important; }

/* --------------------------------------------------------------------------
   24. Print Styles
   -------------------------------------------------------------------------- */

@media print {
    body {
        background: #ffffff !important;
    }

    #container {
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #header,
    #nav,
    #footer,
    .sidebar,
    .action-button,
    .buttons {
        display: none !important;
    }

    #content {
        margin: 0 !important;
        padding: var(--spacing-md) !important;
        box-shadow: none !important;
    }
}

/* --------------------------------------------------------------------------
   25. Responsive Adjustments
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    #header {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between !important;
        padding: var(--spacing-md) !important;
    }

    #header #logo {
        order: 1;
    }

    #header .pull-right {
        order: 2;
        margin-left: auto;
        align-items: flex-end;
    }

    #nav {
        flex-wrap: wrap;
        justify-content: center;
        padding: var(--spacing-sm) !important;
    }

    #nav li a {
        padding: 8px 12px !important;
        padding-left: 32px !important;
        font-size: 13px;
        margin: 2px !important;
    }

    #content {
        padding: var(--spacing-md) !important;
        margin: var(--spacing-sm) !important;
    }

    #ticketInfo > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: var(--spacing-sm) 0;
    }

    .buttons {
        flex-direction: column;
    }

    .button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 20px !important;
    }

    #header #logo img {
        max-height: 40px;
    }

    #nav li a {
        padding: 8px !important;
        padding-left: 28px !important;
        font-size: 12px;
        background-size: 14px !important;
    }

    #ticketTable th,
    #ticketTable td {
        padding: 8px !important;
        font-size: 12px;
    }
}