/*!
 * FLUENT FRONTEND FRAMEWORK - Microsoft Fluent Design System
 * Complete, modern, responsive, and accessible frontend system
 * Version 3.0
 */

:root {
    /* ===== FLUENT DESIGN TOKENS ===== */
    --fluent-bg: #ffffff;
    --fluent-bg-secondary: #faf9f8;
    --fluent-bg-tertiary: #f3f2f1;
    --fluent-bg-hover: #edebe9;
    --fluent-bg-pressed: #e1dfdd;
    --fluent-bg-selected: #e6f2fa;
    --fluent-bg-disabled: #f3f2f1;
    
    --fluent-border: #edebe9;
    --fluent-border-hover: #c8c6c4;
    --fluent-border-focus: #0078d4;
    --fluent-border-disabled: #c8c6c4;
    
    --fluent-text: #323130;
    --fluent-text-secondary: #605e5c;
    --fluent-text-tertiary: #a19f9d;
    --fluent-text-disabled: #a19f9d;
    --fluent-text-inverse: #ffffff;
    
    --fluent-accent: #0078d4;
    --fluent-accent-light: #e6f2fa;
    --fluent-accent-dark: #106ebe;
    --fluent-accent-hover: #106ebe;
    --fluent-accent-pressed: #005a9e;
    
    --fluent-success: #107c41;
    --fluent-success-light: #dff6dd;
    --fluent-success-dark: #0b5c31;
    --fluent-warning: #ff8c00;
    --fluent-warning-light: #fff4e6;
    --fluent-warning-dark: #cc7000;
    --fluent-error: #d13438;
    --fluent-error-light: #fde7e9;
    --fluent-error-dark: #a0262a;
    --fluent-info: #0078d4;
    --fluent-info-light: #e6f2fa;
    --fluent-info-dark: #106ebe;
    
    /* ===== SPACING ===== */
    --fluent-space-xs: 4px;
    --fluent-space-sm: 8px;
    --fluent-space-md: 12px;
    --fluent-space-lg: 16px;
    --fluent-space-xl: 20px;
    --fluent-space-xxl: 24px;
    --fluent-space-xxxl: 32px;
    --fluent-space-xxxxl: 40px;
    
    /* ===== TYPOGRAPHY ===== */
    --fluent-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', 'Roboto', sans-serif;
    --fluent-font-mono: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
    --fluent-font-size-xs: 11px;
    --fluent-font-size-sm: 12px;
    --fluent-font-size-md: 14px;
    --fluent-font-size-lg: 16px;
    --fluent-font-size-xl: 18px;
    --fluent-font-size-xxl: 20px;
    --fluent-font-size-xxxl: 24px;
    --fluent-font-size-display: 32px;
    
    --fluent-font-weight-normal: 400;
    --fluent-font-weight-semibold: 600;
    --fluent-font-weight-bold: 700;
    
    --fluent-line-height-tight: 1.2;
    --fluent-line-height-normal: 1.5;
    --fluent-line-height-loose: 1.8;
    
    /* ===== BORDER RADIUS ===== */
    --fluent-radius-sm: 2px;
    --fluent-radius-md: 4px;
    --fluent-radius-lg: 6px;
    --fluent-radius-xl: 8px;
    --fluent-radius-xxl: 12px;
    --fluent-radius-circle: 50%;
    --fluent-radius-pill: 9999px;
    
    /* ===== SHADOWS ===== */
    --fluent-shadow-sm: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.1);
    --fluent-shadow-md: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 0.6px 1.8px rgba(0,0,0,0.1);
    --fluent-shadow-lg: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.1);
    --fluent-shadow-xl: 0 8px 16px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.12);
    --fluent-shadow-focus: 0 0 0 3px rgba(0, 120, 212, 0.1);
    --fluent-shadow-error: 0 0 0 3px rgba(209, 52, 56, 0.1);
    
    /* ===== TRANSITIONS ===== */
    --fluent-transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    --fluent-transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --fluent-transition-extra-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== CONTAINER WIDTHS ===== */
    --fluent-container-sm: 640px;
    --fluent-container-md: 768px;
    --fluent-container-lg: 1024px;
    --fluent-container-xl: 1200px;
    --fluent-container-xxl: 1400px;
    
    /* ===== Z-INDEX LAYERS ===== */
    --fluent-z-base: 1;
    --fluent-z-dropdown: 1000;
    --fluent-z-sticky: 1020;
    --fluent-z-fixed: 1030;
    --fluent-z-modal: 1040;
    --fluent-z-popover: 1050;
    --fluent-z-tooltip: 1060;
    --fluent-z-overlay: 1070;
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--fluent-font-size-md);
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: var(--fluent-font);
    line-height: var(--fluent-line-height-normal);
    color: var(--fluent-text);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-size: var(--fluent-font-size-md);
    line-height: var(--fluent-line-height-normal);
    font-family: var(--fluent-font);
    color: var(--fluent-text);
    background: var(--fluent-bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--fluent-space-md) 0;
    padding: 0;
    font-weight: var(--fluent-font-weight-semibold);
    line-height: var(--fluent-line-height-tight);
    color: var(--fluent-text);
}

h1 {
    font-size: var(--fluent-font-size-xxxl);
    color: var(--fluent-accent);
    font-weight: var(--fluent-font-weight-semibold);
    letter-spacing: -0.02em;
}

h2, .subject {
    font-size: var(--fluent-font-size-xxl);
    color: var(--fluent-text);
    font-weight: var(--fluent-font-weight-semibold);
}

h3 {
    font-size: var(--fluent-font-size-xl);
    color: var(--fluent-text);
}

h4 {
    font-size: var(--fluent-font-size-lg);
    color: var(--fluent-text);
}

h5 {
    font-size: var(--fluent-font-size-md);
    color: var(--fluent-text-secondary);
}

h6 {
    font-size: var(--fluent-font-size-sm);
    color: var(--fluent-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

p {
    margin: 0 0 var(--fluent-space-md) 0;
    line-height: var(--fluent-line-height-normal);
}

b, strong {
    font-weight: var(--fluent-font-weight-semibold);
}

small {
    font-size: var(--fluent-font-size-sm);
    color: var(--fluent-text-secondary);
}

/* ===== LINKS ===== */
a, .link {
    color: var(--fluent-accent);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1px;
    transition: all var(--fluent-transition);
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

a:hover, .link:hover {
    border-bottom: 1px solid var(--fluent-accent-dark);
    margin-bottom: 0;
    color: var(--fluent-accent-dark);
}

a:focus, .link:focus {
    outline: none;
    box-shadow: var(--fluent-shadow-focus);
    border-radius: var(--fluent-radius-sm);
}

a:active, .link:active {
    color: var(--fluent-accent-pressed);
}

/* ===== BLOCKQUOTES ===== */
blockquote {
    margin: 0 0 var(--fluent-space-md) 0;
    padding: var(--fluent-space-md) var(--fluent-space-lg);
    border-left: 4px solid var(--fluent-accent-light);
    background: var(--fluent-bg-tertiary);
    border-radius: 0 var(--fluent-radius-md) var(--fluent-radius-md) 0;
    color: var(--fluent-text-secondary);
    font-style: italic;
}

/* ===== HORIZONTAL RULES ===== */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--fluent-border);
    margin: var(--fluent-space-lg) 0;
    padding: 0;
}

/* ===== LISTS ===== */
ul, ol {
    margin: 0 0 var(--fluent-space-md) 0;
    padding-left: var(--fluent-space-xl);
}

li {
    margin-bottom: var(--fluent-space-xs);
    line-height: var(--fluent-line-height-normal);
}

ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
}

/* ===== IMAGES ===== */
img {
    border: 0;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    border-radius: var(--fluent-radius-sm);
}

/* ===== FORMS ===== */
form {
    margin: 0;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

legend {
    display: block;
    width: 100%;
    margin-bottom: var(--fluent-space-md);
    padding: 0;
    font-size: var(--fluent-font-size-lg);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-text);
    border-bottom: 1px solid var(--fluent-border);
    padding-bottom: var(--fluent-space-sm);
}

label {
    cursor: pointer;
    display: inline-block;
    margin-bottom: var(--fluent-space-xs);
    font-size: var(--fluent-font-size-sm);
    font-weight: var(--fluent-font-weight-normal);
    color: var(--fluent-text);
}

label.required, span.required {
    font-weight: var(--fluent-font-weight-semibold);
}

label.required::after, span.required::after {
    content: '*';
    color: var(--fluent-error);
    margin-left: var(--fluent-space-xs);
}

input,
select,
textarea {
    font-family: var(--fluent-font);
    font-size: var(--fluent-font-size-md);
    margin: 0;
    vertical-align: baseline;
    color: var(--fluent-text);
    background: var(--fluent-bg);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-sm);
    transition: all var(--fluent-transition);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--fluent-border-hover);
    background: var(--fluent-bg-hover);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--fluent-border-focus);
    outline: none;
    box-shadow: var(--fluent-shadow-focus);
    background: var(--fluent-bg);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--fluent-bg-disabled);
    border-color: var(--fluent-border-disabled);
    color: var(--fluent-text-disabled);
    cursor: not-allowed;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"] {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    line-height: var(--fluent-line-height-normal);
    width: 100%;
    max-width: 400px;
    -webkit-appearance: none;
    appearance: none;
}

input[type="file"] {
    padding: var(--fluent-space-sm) 0;
    border: none;
    background: transparent;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: var(--fluent-space-xs);
    vertical-align: middle;
    accent-color: var(--fluent-accent);
    cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--fluent-border-hover);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    box-shadow: var(--fluent-shadow-focus);
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
}

select {
    padding: var(--fluent-space-sm) var(--fluent-space-xl) var(--fluent-space-sm) var(--fluent-space-md);
    line-height: var(--fluent-line-height-normal);
    width: 100%;
    max-width: 400px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--fluent-space-sm) center;
    padding-right: var(--fluent-space-xxl);
}

textarea {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    line-height: var(--fluent-line-height-normal);
    width: 100%;
    min-height: 100px;
    resize: vertical;
    overflow: auto;
    vertical-align: top;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== TABLES ===== */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: var(--fluent-space-lg);
    background: var(--fluent-bg);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-md);
    overflow: hidden;
}

th,
td {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    vertical-align: top;
    border-bottom: 1px solid var(--fluent-border);
    text-align: left;
}

th {
    background: var(--fluent-bg-secondary);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-text);
    border-bottom: 2px solid var(--fluent-accent-light);
}

td {
    color: var(--fluent-text);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--fluent-bg-hover);
}

/* ===== BUTTONS ===== */
.button,
.button:visited {
    background: var(--fluent-text);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fluent-font-size-md);
    padding: var(--fluent-space-sm) var(--fluent-space-xl);
    min-width: 120px;
    max-width: 220px;
    text-align: center;
    color: var(--fluent-text-inverse);
    font-weight: var(--fluent-font-weight-semibold);
    text-decoration: none;
    border-radius: var(--fluent-radius-sm);
    box-shadow: var(--fluent-shadow-sm);
    position: relative;
    cursor: pointer;
    font-family: var(--fluent-font);
    line-height: 1;
    transition: all var(--fluent-transition);
    gap: var(--fluent-space-xs);
    height: 36px;
}

.button:hover {
    background: var(--fluent-text-secondary);
    color: var(--fluent-text-inverse);
    text-decoration: none;
    box-shadow: var(--fluent-shadow-md);
}

.button:focus {
    outline: none;
    box-shadow: var(--fluent-shadow-focus);
}

.button:active {
    transform: translateY(1px);
    box-shadow: none;
    top: 1px;
}

.button.green,
.button.green:visited {
    background: var(--fluent-success);
}

.button.green:hover {
    background: var(--fluent-success-dark);
}

.button.blue,
.button.blue:visited {
    background: var(--fluent-accent);
}

.button.blue:hover {
    background: var(--fluent-accent-dark);
}

.button.small {
    font-size: var(--fluent-font-size-sm);
    padding: var(--fluent-space-xs) var(--fluent-space-lg);
    min-width: 80px;
    height: 28px;
}

.button.large {
    font-size: var(--fluent-font-size-lg);
    padding: var(--fluent-space-md) var(--fluent-space-xxl);
    min-width: 160px;
    height: 44px;
}

/* ===== ACTION BUTTON ===== */
.action-button {
    border-radius: var(--fluent-radius-sm);
    color: var(--fluent-text-secondary) !important;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fluent-border);
    cursor: pointer;
    font-size: var(--fluent-font-size-sm);
    overflow: hidden;
    background: var(--fluent-bg);
    padding: 0 var(--fluent-space-sm);
    text-decoration: none;
    line-height: 28px;
    margin-left: var(--fluent-space-xs);
    transition: all var(--fluent-transition);
    height: 28px;
}

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

.action-button span,
.action-button a {
    color: var(--fluent-text-secondary) !important;
    display: inline-flex;
    align-items: center;
    float: left;
}

.action-button a {
    color: var(--fluent-text-secondary);
    text-decoration: none;
}

.action-button a:hover {
    color: var(--fluent-text);
}

/* ===== ALERTS & NOTICES ===== */
#msg_notice,
#msg_warning,
#msg_error,
#msg_info,
.warning-banner,
.notice-bar,
.error-bar,
.info-bar {
    position: relative;
    margin: 0 0 var(--fluent-space-md) 0;
    padding: var(--fluent-space-md) var(--fluent-space-md) var(--fluent-space-md) 44px;
    min-height: 40px;
    font-size: var(--fluent-font-size-md);
    line-height: var(--fluent-line-height-normal);
    border: none;
    border-left: 4px solid transparent;
    border-radius: var(--fluent-radius-md);
    background: var(--fluent-bg);
    box-shadow: var(--fluent-shadow-sm);
    display: flex;
    align-items: center;
}

#msg_notice::before,
#msg_warning::before,
#msg_error::before,
#msg_info::before,
.warning-banner::before,
.notice-bar::before,
.error-bar::before,
.info-bar::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#msg_notice,
.notice-bar {
    border-left-color: var(--fluent-success);
    background: var(--fluent-success-light);
}

#msg_notice::before,
.notice-bar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23107c41'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}

#msg_warning,
.warning-banner {
    border-left-color: var(--fluent-warning);
    background: var(--fluent-warning-light);
}

#msg_warning::before,
.warning-banner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8c00'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 4l8.5 15h-17L12 6zm-1 5v5h2v-5h-2zm0 7v2h2v-2h-2z'/%3E%3C/svg%3E");
}

#msg_error,
.error-bar {
    border-left-color: var(--fluent-error);
    background: var(--fluent-error-light);
}

#msg_error::before,
.error-bar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d13438'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
}

#msg_info,
.info-bar {
    border-left-color: var(--fluent-info);
    background: var(--fluent-info-light);
    color: var(--fluent-text);
}

#msg_info::before,
.info-bar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230078d4'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
}

.warning {
    background: var(--fluent-warning-light);
    font-style: italic;
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    border-radius: var(--fluent-radius-sm);
    border-left: 4px solid var(--fluent-warning);
}

.warning strong {
    text-transform: uppercase;
    color: var(--fluent-warning-dark);
    font-style: normal;
    margin-right: var(--fluent-space-xs);
}

.error {
    color: var(--fluent-error);
}

.error input {
    border-color: var(--fluent-error);
}

.error input:focus {
    border-color: var(--fluent-error);
    box-shadow: var(--fluent-shadow-error);
}

/* ===== PAGINATION ===== */
#pagination {
    border: 0;
    margin: 0 0 var(--fluent-space-xxl) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fluent-space-xs);
    justify-content: center;
}

#pagination li {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: var(--fluent-font-size-sm);
    list-style: none;
    display: inline-block;
}

#pagination li a {
    margin-right: 2px;
    display: block;
    float: left;
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    text-decoration: none;
    color: var(--fluent-text);
    background: var(--fluent-bg);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-sm);
    transition: all var(--fluent-transition);
    min-width: 32px;
    text-align: center;
}

#pagination li a:hover {
    background: var(--fluent-bg-hover);
    border-color: var(--fluent-border-hover);
    color: var(--fluent-text);
    text-decoration: none;
}

#pagination .previousOff,
#pagination .nextOff {
    color: var(--fluent-text-disabled);
    display: block;
    float: left;
    font-weight: var(--fluent-font-weight-semibold);
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    background: var(--fluent-bg-disabled);
    border: 1px solid var(--fluent-border-disabled);
    border-radius: var(--fluent-radius-sm);
    cursor: not-allowed;
    min-width: 32px;
    text-align: center;
}

#pagination .next a,
#pagination .previous a {
    font-weight: var(--fluent-font-weight-semibold);
}

#pagination .active {
    color: var(--fluent-text-inverse);
    font-weight: var(--fluent-font-weight-semibold);
    margin-right: 2px;
    display: block;
    float: left;
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    text-decoration: none;
    background: var(--fluent-accent);
    border: 1px solid var(--fluent-accent);
    border-radius: var(--fluent-radius-sm);
    min-width: 32px;
    text-align: center;
}

/* ===== LAYOUT ===== */
body {
    background: var(--fluent-bg-secondary);
}

#container {
    background: var(--fluent-bg);
    width: 100%;
    max-width: var(--fluent-container-lg);
    margin: 0 auto;
    box-shadow: var(--fluent-shadow-lg);
    border-radius: var(--fluent-radius-xl);
    overflow: hidden;
}

/* ===== HEADER ===== */
#header {
    position: relative;
    height: 80px;
    padding: 0 var(--fluent-space-xl);
    background: var(--fluent-bg);
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#logo {
    height: 100%;
    display: flex;
    align-items: center;
}

#header #logo img {
    max-height: 60px;
    max-width: 380px;
    width: auto;
    height: auto;
    vertical-align: middle;
    border-radius: 0;
}

.valign-helper {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

#header p {
    width: 400px;
    margin: 0;
    padding: 0;
    color: var(--fluent-text-secondary);
    font-size: var(--fluent-font-size-sm);
    text-align: right;
}

/* ===== NAVIGATION ===== */
#nav {
    margin: 0;
    padding: 0 var(--fluent-space-xl);
    height: 48px;
    background: var(--fluent-bg-secondary);
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    align-items: center;
    gap: var(--fluent-space-xs);
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

#nav li a {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 36px;
    line-height: 1;
    text-align: center;
    padding: 0 var(--fluent-space-lg) 0 44px;
    margin-left: 0;
    color: var(--fluent-text);
    border-radius: var(--fluent-radius-pill);
    background-position: 16px 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    transition: all var(--fluent-transition);
    font-size: var(--fluent-font-size-md);
    font-weight: var(--fluent-font-weight-normal);
}

#nav li a.active,
#nav li a:hover {
    background-color: var(--fluent-bg-selected);
    color: var(--fluent-accent-dark);
}

#nav li a.active {
    font-weight: var(--fluent-font-weight-semibold);
}

/* Navigation Icons - SVG */
#nav li a.home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

#nav li a.kb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M4 6h16v2H4zm2-4h12v2H6zm14 6H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm0 10H4v-8h16v8z'/%3E%3C/svg%3E");
}

#nav li a.new {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

#nav li a.status {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm0 10c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
}

#nav li a.tickets {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-4l4-4 4 4 4-4 4 4v4z'/%3E%3C/svg%3E");
}

/* ===== CONTENT ===== */
#content {
    padding: var(--fluent-space-xl);
    margin: 0;
    min-height: 400px;
}

/* ===== FOOTER ===== */
#footer {
    text-align: center;
    font-size: var(--fluent-font-size-sm);
    color: var(--fluent-text-secondary);
    padding: var(--fluent-space-lg) var(--fluent-space-xl);
    border-top: 1px solid var(--fluent-border);
    background: var(--fluent-bg-secondary);
}

#footer a {
    color: var(--fluent-text-secondary);
    text-decoration: none;
}

#footer a:hover {
    color: var(--fluent-accent);
    text-decoration: underline;
}

#footer p {
    margin: var(--fluent-space-xs) 0 0 0;
}

#footer #poweredBy {
    display: block;
    width: 126px;
    height: 23px;
    outline: none;
    text-indent: -9999px;
    margin: var(--fluent-space-sm) auto 0;
    background-image: url('../images/poweredby.svg');
    background-size: auto 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    transition: opacity var(--fluent-transition);
}

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

/* ===== LANDING PAGE ===== */
.front-page-button {
    transition: all var(--fluent-transition);
}

#landing_page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fluent-space-xl);
    margin-top: var(--fluent-space-xxl);
}

#landing_page #new_ticket,
#landing_page #check_status {
    margin-top: 0;
    padding: var(--fluent-space-xl) var(--fluent-space-xl) var(--fluent-space-xl) 80px;
    background-position: 20px center;
    background-repeat: no-repeat;
    background-size: 48px 48px;
    background-color: var(--fluent-bg-secondary);
    border-radius: var(--fluent-radius-xl);
    transition: all var(--fluent-transition-slow);
    width: 100%;
    padding-left: 80px;
    min-height: 120px;
}

#landing_page #new_ticket:hover,
#landing_page #check_status:hover {
    background-color: var(--fluent-bg-hover);
    box-shadow: var(--fluent-shadow-md);
    transform: translateY(-2px);
}

#landing_page #new_ticket {
    background-image: url('../images/new_ticket_icon.svg');
}

#landing_page #check_status {
    background-image: url('../images/check_status_icon.svg');
}

#landing_page h1, 
#landing_page h2, 
#landing_page h3 {
    margin-bottom: var(--fluent-space-sm);
}

.main-content {
    width: 100%;
    max-width: 565px;
}

/* ===== FAQ ===== */
#faq {
    clear: both;
    margin: 0;
    padding: var(--fluent-space-md);
    background: var(--fluent-bg);
    border-radius: var(--fluent-radius-md);
}

#faq ol {
    font-size: var(--fluent-font-size-md);
    margin-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--fluent-border);
}

#faq ol li {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--fluent-text-tertiary);
}

#faq ol li a {
    display: flex;
    align-items: center;
    padding: var(--fluent-space-sm) 0 var(--fluent-space-sm) 28px;
    height: auto !important;
    overflow: hidden;
    margin: 0;
    border-bottom: 1px solid var(--fluent-border);
    line-height: var(--fluent-line-height-normal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23605e5c'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    color: var(--fluent-text);
}

#faq ol li a:hover {
    background-color: var(--fluent-bg-hover);
    text-decoration: none;
}

#faq .article-meta {
    padding: var(--fluent-space-sm);
    background: var(--fluent-bg-tertiary);
    border-radius: var(--fluent-radius-sm);
    font-size: var(--fluent-font-size-sm);
    color: var(--fluent-text-secondary);
}

.faq-content .article-title {
    font-size: 20pt;
    margin-top: var(--fluent-space-md);
    color: var(--fluent-accent);
}

/* ===== KNOWLEDGE BASE ===== */
#kb {
    margin: var(--fluent-space-xs) 0;
    padding: var(--fluent-space-md);
    overflow: hidden;
}

#kb > li {
    padding: var(--fluent-space-lg);
    height: auto !important;
    overflow: hidden;
    margin: 0 0 var(--fluent-space-md) 0;
    background: var(--fluent-bg-secondary);
    border-bottom: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-md);
    display: block;
    transition: all var(--fluent-transition);
}

#kb > li:hover {
    background: var(--fluent-bg-hover);
}

#kb > li h4 span {
    color: var(--fluent-text-secondary);
    font-size: var(--fluent-font-size-sm);
}

#kb > li h4 a {
    font-size: var(--fluent-font-size-lg);
    color: var(--fluent-accent);
}

#kb > li > i {
    display: block;
    width: 32px;
    height: 32px;
    float: left;
    margin-right: var(--fluent-space-sm);
    background-image: url('../images/kb_large_folder.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.featured-category {
    margin-top: var(--fluent-space-sm);
    width: 49.7%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    padding: var(--fluent-space-sm);
}

.category-name {
    display: inline-block;
    font-weight: var(--fluent-font-weight-semibold);
    font-size: 120%;
    color: var(--fluent-text);
}

.featured-category i {
    color: rgba(0, 174, 239, 0.8);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
    vertical-align: middle;
}

.article-headline {
    margin-left: 34px;
}

.article-teaser {
    font-size: var(--fluent-font-size-sm);
    line-height: var(--fluent-line-height-normal);
    height: 3em;
    overflow: hidden;
    color: var(--fluent-text-secondary);
}

.article-title {
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-text);
}

/* ===== KB SEARCH ===== */
#kb-search {
    padding: var(--fluent-space-md) 0;
    overflow: hidden;
}

#kb-search div {
    clear: both;
    overflow: hidden;
    padding-top: var(--fluent-space-xs);
}

#kb-search #query {
    margin: 0;
    display: inline-block;
    float: left;
    width: 200px;
    margin-right: var(--fluent-space-xs);
}

#kb-search #cid {
    margin: 0;
    display: inline-block;
    float: left;
    width: 200px;
    margin-right: var(--fluent-space-xs);
    position: relative;
    top: 0;
}

#kb-search #topic-id {
    margin: 0;
    display: inline-block;
    float: left;
    width: 410px;
}

#kb-search #searchSubmit {
    margin: 0;
    display: inline-block;
    float: left;
    position: relative;
    top: 0;
}

#kb-search #breadcrumbs {
    color: var(--fluent-text-secondary);
    margin-bottom: var(--fluent-space-md);
    font-size: var(--fluent-font-size-sm);
}

#kb-search #breadcrumbs a {
    color: var(--fluent-text-secondary);
}

#kb-search #breadcrumbs a:hover {
    color: var(--fluent-accent);
}

/* ===== TICKET FORM ===== */
#ticketForm div.clear,
#clientLogin div.clear {
    clear: both;
    padding: var(--fluent-space-xs) 0;
    overflow: hidden;
}

#ticketForm div label,
#clientLogin div label {
    display: block;
    width: 140px;
    float: left;
    margin-bottom: 0;
}

#ticketForm div label.required,
#clientLogin div label.required {
    text-align: left;
}

#ticketForm div input,
#clientLogin div input,
#ticketForm div textarea,
#clientLogin div textarea {
    width: auto;
    min-width: 250px;
    max-width: 600px;
    border: 1px solid var(--fluent-border);
    background: var(--fluent-bg);
    display: block;
    float: left;
    border-radius: var(--fluent-radius-sm);
}

#ticketForm div input[type=file],
#clientLogin div input[type=file] {
    border: none;
    padding-left: 0;
}

#ticketForm div select,
#clientLogin div select {
    display: block;
    float: left;
    width: auto;
    min-width: 250px;
}

#ticketForm div div.captchaRow,
#clientLogin div div.captchaRow {
    line-height: 36px;
    display: flex;
    align-items: center;
}

#ticketForm div div.captchaRow input,
#clientLogin div div.captchaRow input {
    position: relative;
    top: 0;
    margin-left: var(--fluent-space-xs);
}

#ticketForm > table {
    table-layout: fixed;
    width: 100%;
}

#ticketForm > table td {
    width: 160px;
    padding: var(--fluent-space-xs);
}

#ticketForm > table td + td {
    width: auto;
}

#ticketForm td textarea,
#clientLogin td textarea,
#ticketForm div textarea,
#clientLogin div textarea {
    width: 600px;
    max-width: 100%;
}

#ticketForm td em,
#clientLogin td em,
#ticketForm div em,
#clientLogin div em {
    color: var(--fluent-text-tertiary);
    font-style: italic;
    font-size: var(--fluent-font-size-sm);
    display: block;
    clear: both;
    margin-left: 140px;
}

#ticketForm td .captcha,
#clientLogin td .captcha,
#ticketForm div .captcha,
#clientLogin div .captcha {
    width: 88px;
    height: 31px;
    background: var(--fluent-text);
    display: block;
    float: left;
    margin-right: var(--fluent-space-lg);
    border-radius: var(--fluent-radius-sm);
}

#ticketForm td label.inline,
#clientLogin td label.inline,
#ticketForm div label.inline,
#clientLogin div label.inline {
    width: auto;
    padding: 0 var(--fluent-space-sm);
    float: none;
    display: inline-block;
}

#ticketForm div.error input,
#clientLogin div.error input {
    border: 1px solid var(--fluent-error);
}

#ticketForm div.error input:focus,
#clientLogin div.error input:focus {
    box-shadow: var(--fluent-shadow-error);
}

#ticketForm div.error label,
#clientLogin div.error label {
    color: var(--fluent-error);
}

/* ===== CLIENT LOGIN ===== */
#clientLogin {
    display: block;
    margin-top: var(--fluent-space-xl);
    padding: var(--fluent-space-xl);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-sm);
    background: var(--fluent-bg-secondary);
    background-image: url('../images/lock.svg');
    background-position: 95% 50%;
    background-repeat: no-repeat;
    background-size: 48px 48px;
}

#clientLogin .instructions {
    display: table-cell;
    padding-left: 2em;
    padding-right: 90px;
    color: var(--fluent-text-secondary);
}

#clientLogin p {
    clear: both;
    margin-top: var(--fluent-space-md);
}

#clientLogin strong {
    font-size: var(--fluent-font-size-sm);
    color: var(--fluent-error);
    display: block;
    margin-bottom: var(--fluent-space-xs);
}

#clientLogin #email,
#clientLogin #ticketno {
    margin-right: 0;
    width: 250px;
    max-width: 250px;
}

#clientLogin input[type=text],
#clientLogin input[type=password] {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    border-radius: var(--fluent-radius-md);
    margin-bottom: var(--fluent-space-md);
    border: 1px solid var(--fluent-border);
}

#clientLogin input[type=submit] {
    padding: var(--fluent-space-xs) var(--fluent-space-md);
    border-radius: var(--fluent-radius-md);
}

/* ===== REPLY SECTION ===== */
#reply {
    margin-top: var(--fluent-space-xs);
    padding: var(--fluent-space-lg);
    background: var(--fluent-bg-tertiary);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-lg);
}

#reply h2 {
    margin-bottom: var(--fluent-space-sm);
    padding-bottom: var(--fluent-space-xs);
    border-bottom: 2px dotted var(--fluent-border);
}

#reply > table {
    width: 100%;
}

#reply table td {
    vertical-align: top;
    padding: var(--fluent-space-xs);
}

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

#reply input[type=text],
#reply #response_options textarea {
    border: 1px solid var(--fluent-border);
    background: var(--fluent-bg);
    border-radius: var(--fluent-radius-sm);
}

/* ===== TICKET ICONS ===== */
.Icon {
    display: inline-flex;
    align-items: center;
    padding-left: 24px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    color: var(--fluent-accent);
    text-decoration: none;
    line-height: 1;
    height: 20px;
    transition: all var(--fluent-transition);
}

.Icon:hover {
    color: var(--fluent-accent-dark);
    text-decoration: underline;
}

.Icon.Ticket {
    background-image: url('../images/icons/ticket.svg');
}

.Icon.webTicket {
    background-image: url('../images/icons/ticket_source_web.svg');
}

.Icon.emailTicket {
    background-image: url('../images/icons/ticket_source_email.svg');
}

.Icon.phoneTicket {
    background-image: url('../images/icons/ticket_source_phone.svg');
}

.Icon.otherTicket,
.Icon.apiTicket {
    background-image: url('../images/icons/ticket_source_other.svg');
}

.Icon.attachment {
    background-image: url('../images/icons/attachment.svg');
}

.Icon.file {
    background-image: url('../images/icons/attachment.svg');
}

.Icon.refresh {
    background-image: url('../images/icons/refresh.svg');
}

.Icon.thread {
    font-weight: var(--fluent-font-weight-semibold);
    font-size: var(--fluent-font-size-md);
    background-image: url('../images/icons/thread.svg');
}

i.refresh {
    color: var(--fluent-success);
    font-size: 80%;
    vertical-align: middle;
}

/* ===== TICKET TABLE ===== */
#ticketTable {
    width: 100%;
    border: 1px solid var(--fluent-border);
    border-left: none;
    border-bottom: none;
    border-radius: var(--fluent-radius-md);
    overflow: hidden;
}

#ticketTable caption {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    text-align: left;
    color: var(--fluent-text);
    background: var(--fluent-bg-secondary);
    border: 1px solid var(--fluent-border);
    border-bottom: none;
    font-weight: var(--fluent-font-weight-semibold);
}

#ticketTable th {
    height: 32px;
    line-height: 32px;
    background: var(--fluent-bg-selected);
    border: 1px solid var(--fluent-border);
    border-right: none;
    border-top: none;
    padding: 0 var(--fluent-space-sm);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-text);
}

#ticketTable th a {
    color: var(--fluent-text);
}

#ticketTable th a:hover {
    color: var(--fluent-accent);
}

#ticketTable td {
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    border: 1px solid var(--fluent-border);
    border-right: none;
    border-top: none;
}

#ticketTable tr.alt td {
    background: var(--fluent-bg-tertiary);
}

#ticketTable tr:hover td {
    background: var(--fluent-bg-hover);
}

/* ===== INFO TABLE ===== */
.infoTable {
    background: var(--fluent-info-light);
    border-radius: var(--fluent-radius-md);
    overflow: hidden;
}

.infoTable th {
    text-align: left;
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    background: var(--fluent-info-light);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-text);
    border-bottom: 1px solid var(--fluent-border);
}

/* ===== STATES ===== */
.states small {
    font-size: 70%;
}

.active.state {
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-success);
}

/* ===== SEARCH ===== */
.search.well {
    padding: var(--fluent-space-md);
    background-color: var(--fluent-bg-tertiary);
    margin-bottom: var(--fluent-space-sm);
    margin-top: -15px;
    border-radius: var(--fluent-radius-md);
}

.searchbar .search,
.search-form .search {
    display: inline-block;
    width: 400px;
    border-radius: var(--fluent-radius-pill);
    border: 1px solid var(--fluent-border);
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    box-shadow: var(--fluent-shadow-sm);
    transition: all var(--fluent-transition);
}

.searchbar .search:hover,
.search-form .search:hover {
    border-color: var(--fluent-border-hover);
    box-shadow: var(--fluent-shadow-md);
}

.searchbar .search:focus,
.search-form .search:focus {
    border-color: var(--fluent-border-focus);
    box-shadow: var(--fluent-shadow-focus);
}

.searchbar .search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--fluent-space-sm);
}

/* ===== SIDEBAR ===== */
.sidebar {
    margin-bottom: var(--fluent-space-xl);
    margin-left: var(--fluent-space-xl);
    width: 215px;
}

.sidebar .content {
    padding: var(--fluent-space-md);
    border: 1px solid var(--fluent-accent-light);
    background: var(--fluent-info-light);
    border-radius: var(--fluent-radius-md);
}

.sidebar .content:empty {
    display: none;
}

.sidebar section .header {
    font-weight: var(--fluent-font-weight-semibold);
    margin-bottom: 0.3em;
    color: var(--fluent-text);
}

.sidebar section + section {
    margin-top: var(--fluent-space-md);
}

/* ===== GRID SYSTEM ===== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1%;
}

.span4 {
    display: inline-block;
    width: 31.333%;
    margin: 0 1%;
    vertical-align: top;
}

.span8 {
    display: inline-block;
    width: 64.666%;
    margin: 0 1%;
    vertical-align: top;
}

/* ===== UTILITIES ===== */
.centered {
    text-align: center;
}

.clear {
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

.hidden {
    display: none !important;
}

.faded {
    color: var(--fluent-text-tertiary);
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

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

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

.truncate {
    display: inline-block;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.bleed {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== TABLES ===== */
table.padded tr > td,
table.padded tr > th {
    height: 20px;
    padding-bottom: var(--fluent-space-xs);
}

table.custom-data {
    margin-top: var(--fluent-space-sm);
}

table.custom-data th {
    width: 25%;
    background-color: var(--fluent-info-light);
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
}

table .headline,
table.custom-data .headline {
    border-bottom: 2px solid var(--fluent-border);
    font-weight: var(--fluent-font-weight-semibold);
    background-color: var(--fluent-bg);
}

/* ===== TICKET INFO ===== */
#ticketInfo h1 {
    padding-bottom: var(--fluent-space-sm);
    margin-bottom: var(--fluent-space-xs);
    border-bottom: 2px dotted var(--fluent-border);
}

#ticketInfo h1 small {
    font-weight: var(--fluent-font-weight-normal);
    font-size: var(--fluent-font-size-md);
    color: var(--fluent-text-secondary);
}

/* ===== THREAD ENTRY ===== */
.thread-entry {
    margin-bottom: var(--fluent-space-md);
    position: relative;
}

.thread-entry.avatar {
    margin-left: 60px;
}

.thread-entry.response.avatar {
    margin-right: 60px;
    margin-left: 0;
}

.thread-entry > .avatar {
    margin-left: -60px;
    display: inline-block;
    width: 48px;
    height: auto;
    border-radius: var(--fluent-radius-circle);
    overflow: hidden;
}

.thread-entry.response > .avatar {
    margin-left: initial;
    margin-right: -60px;
}

img.avatar {
    border-radius: inherit;
    width: 100%;
    height: auto;
}

.avatar > img.avatar {
    width: 100%;
    height: auto;
}

.thread-entry .header {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-md) var(--fluent-radius-md) 0 0;
    position: relative;
}

.thread-entry.avatar .header {
    position: relative;
}

.thread-entry.avatar .header:before {
    position: absolute;
    top: 12px;
    right: -8px;
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--fluent-border);
    display: inline-block;
}

.thread-entry.avatar .header:after {
    position: absolute;
    top: 12px;
    right: -7px;
    content: '';
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--fluent-bg);
    display: inline-block;
}

.thread-entry.response .header {
    background: var(--fluent-bg-tertiary);
}

.thread-entry.avatar.response .header:after {
    border-left: 7px solid var(--fluent-bg-tertiary);
}

.thread-entry.message .header {
    background: var(--fluent-info-light);
}

.thread-entry.avatar.message .header:before {
    top: 12px;
    left: -8px;
    right: initial;
    border-left: none;
    border-right: 8px solid var(--fluent-border);
}

.thread-entry.avatar.message .header:after {
    top: 12px;
    left: -7px;
    right: initial;
    border-left: none;
    border-right: 7px solid var(--fluent-info-light);
}

.thread-entry .header .title {
    max-width: 500px;
    vertical-align: bottom;
    display: inline-block;
    margin-left: var(--fluent-space-md);
    font-weight: var(--fluent-font-weight-semibold);
}

.thread-entry .thread-body {
    border: 1px solid var(--fluent-border);
    border-top: none;
    border-bottom: 2px solid var(--fluent-border-dark, var(--fluent-border));
    border-radius: 0 0 var(--fluent-radius-md) var(--fluent-radius-md);
    background: var(--fluent-bg);
}

/* ===== THREAD BODY ATTACHMENTS ===== */
.thread-body .attachments {
    background-color: var(--fluent-info-light);
    margin: 0 -0.9em;
    position: relative;
    top: 0.9em;
    padding: var(--fluent-space-xs) var(--fluent-space-md);
    border-top: 1px dotted var(--fluent-border);
    border-radius: 0 0 var(--fluent-radius-md) var(--fluent-radius-md);
}

.thread-body .attachments .filesize {
    margin-left: var(--fluent-space-xs);
    color: var(--fluent-text-tertiary);
    font-size: var(--fluent-font-size-sm);
}

.thread-body .attachments a,
.thread-body .attachments a:hover {
    text-decoration: none;
}

.thread-body .attachment-info {
    margin-right: var(--fluent-space-sm);
    display: inline-block;
    width: 48%;
}

.thread-body .attachment-info .filename {
    max-width: 80%;
    max-width: calc(100% - 70px);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ===== LABELS ===== */
.label {
    font-size: var(--fluent-font-size-xs);
    padding: 2px var(--fluent-space-xs);
    border-radius: var(--fluent-radius-sm);
    font-weight: var(--fluent-font-weight-semibold);
    line-height: 1;
    color: var(--fluent-text-inverse);
    vertical-align: baseline;
    white-space: nowrap;
    background-color: var(--fluent-text-tertiary);
    display: inline-block;
}

.label-bare {
    background-color: transparent;
    border: 1px solid var(--fluent-text-tertiary);
    color: var(--fluent-text-tertiary);
    text-shadow: none;
}

/* ===== THREAD EVENT ===== */
.thread-event {
    padding: 0 2px var(--fluent-space-md);
    margin-left: 60px;
    position: relative;
}

.type-icon {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-bg-tertiary);
    padding: 4px 6px;
    margin-right: var(--fluent-space-xs);
    text-align: center;
    display: inline-block;
    font-size: 1.1em;
    border: 1px solid var(--fluent-border);
    vertical-align: top;
    position: relative;
}

.type-icon.dark {
    border-color: var(--fluent-text-secondary);
    background-color: var(--fluent-text-tertiary);
    color: var(--fluent-text-inverse);
}

.thread-event img.avatar {
    vertical-align: middle;
    border-radius: var(--fluent-radius-sm);
    width: auto;
    max-height: 24px;
    margin: -3px 3px 0;
}

.thread-event .description {
    margin-left: -30px;
    padding-top: 6px;
    padding-left: 30px;
    display: inline-block;
    width: 642px;
    width: calc(100% - 95px);
    line-height: var(--fluent-line-height-normal);
    color: var(--fluent-text-secondary);
}

/* ===== TICKET THREAD ===== */
#ticketThread {
    z-index: 0;
    position: relative;
    border-bottom: 2px solid var(--fluent-border);
}

#ticketThread::before {
    border-left: 2px dotted var(--fluent-border);
    position: absolute;
    margin-left: 74px;
    z-index: -1;
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.thread-entry::after {
    content: "";
    border-bottom: 2px solid var(--fluent-bg);
    display: block;
}

.thread-entry::before {
    content: "";
    display: block;
    border-top: 2px solid var(--fluent-bg);
}

/* ===== FREETEXT FILES ===== */
.freetext-files {
    padding: var(--fluent-space-md);
    margin-top: var(--fluent-space-sm);
    border: 1px dotted var(--fluent-border);
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-bg-tertiary);
}

.freetext-files .file {
    margin-right: var(--fluent-space-sm);
    display: inline-block;
    width: 48%;
    padding-top: 0.2em;
}

.freetext-files .title {
    font-weight: var(--fluent-font-weight-semibold);
    margin-bottom: 0.3em;
    font-size: 1.1em;
    color: var(--fluent-text);
}

/* ===== EXTERNAL AUTH ===== */
.external-auth + .external-auth {
    margin-top: var(--fluent-space-xs);
}

a.external-sign-in {
    text-decoration: none;
}

.external-auth-box {
    vertical-align: middle;
    border-radius: var(--fluent-radius-md);
    border: 1px solid var(--fluent-border);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    transition: all var(--fluent-transition);
}

.external-auth-box:hover {
    border-color: var(--fluent-border-hover);
    box-shadow: var(--fluent-shadow-sm);
}

.external-auth-icon {
    display: inline-block;
    color: var(--fluent-text);
    width: 30px;
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    border-right: 1px solid var(--fluent-border);
    text-align: center;
}

.external-auth-name {
    color: var(--fluent-text);
    width: 100px;
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    line-height: 30px;
    font-size: 11pt;
}

img.sign-in-image {
    border: none;
    max-height: 40px;
    max-width: 200px;
    width: auto;
    height: auto;
}

/* ===== LOGIN BOX ===== */
.login-box {
    width: 40%;
    display: table-cell;
    box-shadow: 12px 0 15px -15px var(--fluent-shadow-sm);
    padding: var(--fluent-space-md);
}

/* ===== IMAGE HOVER ===== */
.image-hover a.action-button:hover,
.image-hover a.action-button {
    color: initial !important;
    text-decoration: none;
}

/* ===== RTL SUPPORT ===== */
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl #nav li a {
    background-position: right 16px center;
    padding-left: var(--fluent-space-md);
    padding-right: 44px;
    margin-right: 0;
    margin-left: 0;
}

.rtl #clientLogin {
    background-position: 5% 50%;
}

.rtl #clientLogin .instructions {
    padding-left: 0;
    padding-right: 2em;
    padding-left: 90px;
}

.rtl .sidebar {
    margin-left: 0;
    margin-right: var(--fluent-space-xl);
}

.rtl .login-box {
    box-shadow: -12px 0 15px -15px var(--fluent-shadow-sm);
}

.rtl .article-headline {
    margin-left: 0;
    margin-right: 34px;
}

.rtl .thread-entry.avatar {
    margin-left: 0;
    margin-right: 60px;
}

.rtl .thread-entry.response.avatar {
    margin-left: 60px;
    margin-right: 0;
}

.rtl .thread-entry > .avatar {
    margin-left: 0;
    margin-right: -60px;
}

.rtl .thread-entry.response > .avatar {
    margin-left: -60px;
    margin-right: 0;
}

.rtl .thread-entry.avatar .header:before {
    left: -8px;
    right: initial;
    border-left: none;
    border-right: 8px solid var(--fluent-border);
}

.rtl .thread-entry.avatar .header:after {
    left: -7px;
    right: initial;
    border-left: none;
    border-right: 7px solid var(--fluent-bg);
}

.rtl .thread-entry.avatar.message .header:before {
    right: -8px;
    left: initial;
    border-right: none;
    border-left: 8px solid var(--fluent-border);
}

.rtl .thread-entry.avatar.message .header:after {
    right: -7px;
    left: initial;
    border-right: none;
    border-left: 7px solid var(--fluent-info-light);
}

/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --fluent-bg: #1e1e1e;
        --fluent-bg-secondary: #2d2d2d;
        --fluent-bg-tertiary: #333333;
        --fluent-bg-hover: #404040;
        --fluent-bg-pressed: #4a4a4a;
        --fluent-bg-selected: #1e3b4a;
        --fluent-bg-disabled: #2a2a2a;
        
        --fluent-border: #404040;
        --fluent-border-hover: #666666;
        --fluent-border-focus: #4a9eff;
        --fluent-border-disabled: #4d4d4d;
        
        --fluent-text: #ffffff;
        --fluent-text-secondary: #c8c6c4;
        --fluent-text-tertiary: #8a8886;
        --fluent-text-disabled: #6d6d6d;
        
        --fluent-accent: #4a9eff;
        --fluent-accent-light: #1e3b4a;
        --fluent-accent-dark: #6cb4ee;
        
        --fluent-success: #6bb700;
        --fluent-success-light: #1e3a1e;
        --fluent-warning: #ffaa44;
        --fluent-warning-light: #4a3a1e;
        --fluent-error: #f17070;
        --fluent-error-light: #4a1e1e;
        --fluent-info: #4a9eff;
        --fluent-info-light: #1e2e4a;
    }
    
    #nav li a {
        background-image: brightness(0.8) invert(0.8);
    }
    
    .thread-entry.avatar .header:after {
        border-left-color: var(--fluent-bg);
    }
    
    .rtl .thread-entry.avatar .header:after {
        border-right-color: var(--fluent-bg);
    }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    #container {
        max-width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    :root {
        --fluent-container-lg: 100%;
    }
    
    #header {
        flex-direction: column;
        height: auto;
        padding: var(--fluent-space-md);
    }
    
    #header #logo {
        margin-bottom: var(--fluent-space-sm);
    }
    
    #header p {
        width: 100%;
        text-align: center;
    }
    
    #nav {
        flex-wrap: wrap;
        height: auto;
        padding: var(--fluent-space-sm);
        white-space: normal;
    }
    
    #nav li a {
        padding: 0 var(--fluent-space-sm) 0 40px;
        font-size: var(--fluent-font-size-sm);
        height: 32px;
    }
    
    #landing_page {
        grid-template-columns: 1fr;
    }
    
    #ticketForm div label,
    #clientLogin div label {
        width: 100%;
        float: none;
    }
    
    #ticketForm div input,
    #clientLogin div input,
    #ticketForm div textarea,
    #clientLogin div textarea,
    #ticketForm div select,
    #clientLogin div select {
        width: 100%;
        float: none;
        max-width: 100%;
    }
    
    #ticketForm td em,
    #clientLogin td em,
    #ticketForm div em,
    #clientLogin div em {
        margin-left: 0;
    }
    
    #clientLogin {
        background-image: none;
        padding: var(--fluent-space-lg);
    }
    
    #clientLogin .instructions {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    
    #clientLogin strong {
        padding-left: 0;
    }
    
    #kb-search #query,
    #kb-search #cid,
    #kb-search #topic-id,
    #kb-search #searchSubmit {
        width: 100%;
        float: none;
        margin-bottom: var(--fluent-space-xs);
    }
    
    .button {
        width: 100%;
        max-width: 100%;
    }
    
    .span4,
    .span8 {
        width: 100%;
        margin: 0 0 var(--fluent-space-md) 0;
    }
    
    .sidebar {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .thread-entry.avatar,
    .thread-entry.response.avatar {
        margin-left: 0;
        margin-right: 0;
    }
    
    .thread-entry > .avatar {
        display: none;
    }
    
    .thread-event {
        margin-left: 0;
    }
    
    .thread-event .description {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }
    
    .featured-category {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #nav li a {
        padding: 0 var(--fluent-space-sm) 0 36px;
        background-position: 12px 50%;
    }
    
    .thread-body .attachment-info {
        width: 100%;
    }
    
    .freetext-files .file {
        width: 100%;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    #nav,
    #footer,
    .button,
    .refresh,
    #reply,
    .attachments,
    .action-button,
    .sidebar {
        display: none !important;
    }
    
    #container {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    a {
        color: black !important;
        text-decoration: underline;
    }
    
    .thread-entry .header {
        border: 1px solid #ddd;
    }
}

/* ===== ACCESSIBILITY ===== */
:focus-visible {
    outline: 2px solid var(--fluent-border-focus);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .button,
    #nav li a,
    #ticketTable th,
    .thread-entry .header,
    .action-button,
    .external-auth-box {
        forced-color-adjust: none;
        border: 1px solid WindowText;
    }
    
    .button,
    #nav li a.active,
    .active.state {
        background: Highlight;
        color: HighlightText;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    #landing_page #new_ticket:hover,
    #landing_page #check_status:hover,
    .button:hover {
        transform: none;
    }
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--fluent-bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--fluent-text-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fluent-text-secondary);
}