/* ========================================================================== */
/* IMPORTS                                                                    */
/* ========================================================================== */

@import './buttons.css';
@import './forms.css';
@import './toggle-label.css';

/* ========================================================================== */
/* CUSTOM FONTS                                                               */
/* ========================================================================== */

@font-face {
    font-family: 'F25 Bank Printer';
    src: url('/fonts/f25_bank_printer/F25_Bank_Printer.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Retro Banker';
    src: url('/fonts/retro_banker/retro-banker.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========================================================================== */
/* CSS VARIABLES - Theme System                                               */
/* ========================================================================== */

/* Light Theme (Default) */
:root,
[data-theme="light"] {
    --terminal-bg: #ffffff;
    --terminal-bg-highlight: #f0f0f0;
    --terminal-text: #000000;
    --terminal-text-dim: #666666;
    --terminal-accent: #000000;
    --terminal-border: #000000;
    --terminal-success: #00aa00;
    --terminal-warning: #ff8800;
    --terminal-error: #cc0000;
    --terminal-active: #0066cc;
    --calendar-icon-filter: invert(0);
    --logo-filter: grayscale(100%) contrast(150%);
}

/* Dark Theme */
[data-theme="dark"] {
    --terminal-bg: #000000;
    --terminal-bg-highlight: #1a1a1a;
    --terminal-text: #a7a7a7;
    --terminal-text-dim: #5c5c5c;
    --terminal-accent: #ffffff;
    --terminal-border: #333333;
    --terminal-success: #44ff44;
    --terminal-warning: #ffaa00;
    --terminal-error: #ff4444;
    --terminal-active: #0e93ff;
    --calendar-icon-filter: invert(1);
    --logo-filter: grayscale(100%) contrast(150%) invert(1);
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    --terminal-bg: #000000;
    --terminal-bg-highlight: #222222;
    --terminal-text: #ffffff;
    --terminal-text-dim: #aaaaaa;
    --terminal-accent: #ffff00;
    --terminal-border: #ffffff;
    --terminal-success: #00ff00;
    --terminal-warning: #ffff00;
    --terminal-error: #ff0000;
    --terminal-active: #00ffff;
    --calendar-icon-filter: invert(1) brightness(2);
    --logo-filter: grayscale(100%) contrast(150%) invert(1) brightness(1.2);
}

/* ========================================================================== */
/* CSS VARIABLES - Font Sizes                                                 */
/* ========================================================================== */

:root,
[data-font-size="medium"] {
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-large: 16px;
    --font-size-h1: 24px;
    --font-size-h2: 18px;
    --font-size-h3: 16px;
    --font-size-h4: 14px;
    --font-size-h5: 13px;
    --font-size-h6: 12px;
    --font-size-button: 13px;
    --font-size-label: 12px;
    --font-size-caption: 11px;
    --font-size-table: 13px;
    --font-size-modal: 15px;
    --font-size-status: 12px;
}

[data-font-size="small"] {
    --font-size-base: 12px;
    --font-size-small: 10px;
    --font-size-large: 14px;
    --font-size-h1: 20px;
    --font-size-h2: 16px;
    --font-size-h3: 14px;
    --font-size-h4: 12px;
    --font-size-h5: 11px;
    --font-size-h6: 10px;
    --font-size-button: 11px;
    --font-size-label: 10px;
    --font-size-caption: 9px;
    --font-size-table: 11px;
    --font-size-modal: 13px;
    --font-size-status: 10px;
}

[data-font-size="large"] {
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: 28px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-h5: 15px;
    --font-size-h6: 14px;
    --font-size-button: 15px;
    --font-size-label: 14px;
    --font-size-caption: 13px;
    --font-size-table: 15px;
    --font-size-modal: 17px;
    --font-size-status: 14px;
}

/* ========================================================================== */
/* CSS VARIABLES - Animation Speeds                                           */
/* ========================================================================== */

:root,
[data-animation-speed="normal"] {
    --animation-duration-fast: 0.15s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.5s;
}

[data-animation-speed="fast"] {
    --animation-duration-fast: 0.1s;
    --animation-duration-normal: 0.2s;
    --animation-duration-slow: 0.3s;
}

[data-animation-speed="slow"] {
    --animation-duration-fast: 0.25s;
    --animation-duration-normal: 0.5s;
    --animation-duration-slow: 0.8s;
}

/* ========================================================================== */
/* GLOBAL RESET & BASE STYLES                                                 */
/* ========================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--terminal-bg, #ffffff);
    color: var(--terminal-text, #000000);
    font-family: 'Courier New', 'Courier', 'Fira Code', monospace;
    font-size: var(--font-size-base, 14px);
    -webkit-font-smoothing: none;
    line-height: 1.4;
}

*, *:before, *:after {
    box-sizing: inherit;
    border-radius: 0 !important; /* Global enforcement of square edges */
}

/* ========================================================================== */
/* LAYOUT CONTAINERS                                                          */
/* ========================================================================== */

/* Main app wrapper - fills viewport to eliminate gap below footer */
.app-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page container for all `routes/` components (svelte) */
.page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 20px;
    flex: 1;
}

.page-container.no-padding {
    padding: 0;
}

/* Content container for `pages/` components (svelte) */
.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    text-align: center;
    flex: 1;
}

/* Page-specific content container overrides */
.content-container.main,
.content-container.admin,
.content-container.entry,
.content-container.trucks,
.content-container.carrier {
    justify-content: flex-start;
    padding-bottom: 2rem;
}

/* ========================================================================== */
/* PAGE TITLES                                                                */
/* Main heading below page header                                             */
/* ========================================================================== */

.page-title {
    font-size: var(--font-size-h2, 1.5rem);
    color: var(--terminal-text, #000);
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 3px double var(--terminal-border, #000);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* ========================================================================== */
/* UTILITY CLASSES                                                            */
/* ========================================================================== */

.text-center {
    text-align: center;
}


/* No data / empty state utility */
.no-data {
    color: var(--terminal-text-dim, #999);
    font-style: italic;
    font-size: var(--font-size-small, 0.9rem);
}

/* Full empty state (centered, padded) */
.empty-state-full {
    text-align: center;
    padding: 0.1rem;
    color: var(--terminal-text-dim, #666);
    font-style: italic;
    font-size: var(--font-size-small, 0.9rem);
}

/* ========================================================================== */
/* LOGO                                                                       */
/* Shared logo styling for page headers                                       */
/* ========================================================================== */

.logo-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.logo {
    max-width: 85px;
    height: auto;
    filter: var(--logo-filter, grayscale(100%) contrast(150%));
}

/* ========================================================================== */
/* STATUS BADGES                                                              */
/* ========================================================================== */

.status-verified {
    background-color: var(--terminal-bg, #000);
    color: var(--terminal-text, #fff);
    padding: 0.2rem 0.5rem;
    font-size: var(--font-size-small, 0.8rem);
    text-transform: uppercase;
}

/* ========================================================================== */
/* ANIMATIONS                                                                 */
/* ========================================================================== */

@keyframes slideIn {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}

@keyframes fadeOut {
    from { 
        opacity: 1;
        transform: scale(1);
    }
    to { 
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Blinking Cursor */
.cursor {
    animation: blink var(--animation-duration-slow, 0.5s) infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ========================================================================== */
/* TOAST NOTIFICATIONS - Base Styles                                          */
/* Floating notifications that don't disrupt layout                           */
/* ========================================================================== */

.success-message,
.error-message,
.info-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
    max-width: 350px;
    width: auto;
    z-index: 9999;
    padding: 12px 16px;
    box-shadow: 4px 4px 0 #000;
    font-weight: bold;
    font-size: 0.9rem;
    animation: slideIn 0.3s ease-out forwards;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Toast fade out states */
.success-message.fading,
.error-message.fading,
.info-message.fading,
.message-dismiss .fading {
    animation: fadeOut 0.3s ease-out forwards;
}

.message-dismiss .success-message.fading,
.message-dismiss .error-message.fading {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Toast dismiss button wrapper */
.message-dismiss {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    text-align: left;
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* TOAST VARIANTS                                                             */
/* -------------------------------------------------------------------------- */

/* SUCCESS: White bg, Black border, Clean look */
.success-message {
    background-color: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    border: 2px solid var(--terminal-border, #000);
}

.success-message::before {
    content: "i";
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    margin-right: 5px;
    font-weight: bold;
    text-transform: none;
}

.success-message a {
    color: var(--terminal-text, #000);
    text-decoration: underline;
}

/* ERROR: Inverted - Black bg, White text */
.error-message {
    background-color: var(--terminal-bg, #000);
    color: var(--terminal-text, #fff);
    border: 2px solid var(--terminal-border, #000);
}

.error-message::before {
    content: "!";
    display: inline-block;
    background: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-weight: 900;
    margin-right: 5px;
}

.error-message a {
    color: var(--terminal-text, #fff);
    text-decoration: underline;
}

/* INFO: Dashed border, technical feel */
.info-message {
    background-color: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    border: 2px dashed var(--terminal-border, #000);
}

.info-message::before {
    content: "i";
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    margin-right: 5px;
    font-weight: bold;
    text-transform: none;
}

/* ========================================================================== */
/* INLINE WARNING MESSAGES                                                    */
/* Context-specific warnings within page content                              */
/* ========================================================================== */

.warning-message {
    background-color: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--terminal-border, #000);
    border-style: dotted;
    font-size: var(--font-size-small, 0.9rem);
}

.warning-message::before {
    content: "!";
    display: inline-block;
    background: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-weight: 900;
    margin-right: 5px;
}

.warning-message ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
    list-style-type: square;
}

.warning-message li {
    margin: 0.15rem 0;
}

/* -------------------------------------------------------------------------- */
/* FINAL WARNING - Critical action confirmation                               */
/* -------------------------------------------------------------------------- */

.final-warning {
    background-color: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 3px double var(--terminal-border, #000);
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

/* ========================================================================== */
/* LOADING STATES                                                             */
/* ========================================================================== */

.loading-message {
    text-align: center;
    padding: 2rem;
}

/* Animated loading indicator */
.loading {
    width: 100%;
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: var(--terminal-text, #000);
    font-family: monospace;
    text-transform: uppercase;
    animation: blink var(--animation-duration-slow, 0.5s) infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* ========================================================================== */
/* INLINE ALERTS                                                              */
/* Full-width alerts within page content                                      */
/* ========================================================================== */

.alert {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.alert-error {
    background-color: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    border: 2px dashed var(--terminal-border, #000);
}

.alert-error::before {
    content: "! ";
}

.alert-success {
    background-color: var(--terminal-bg, #fff);
    color: var(--terminal-text, #000);
    border: 2px solid var(--terminal-border, #000);
}

.alert-success::before {
    content: "OK ";
}

/* ========================================================================== */
/* TABLES                                                                     */
/* ========================================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--terminal-border, #000);
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: var(--terminal-bg, #fff);
    border-bottom: 2px solid var(--terminal-border, #000);
    text-transform: uppercase;
    font-weight: bold;
}

tr:hover {
    background-color: var(--terminal-bg-highlight, #eee);
}

/* ========================================================================== */
/* TYPOGRAPHY SCALE                                                           */
/* ========================================================================== */

h1 { font-size: var(--font-size-h1, 24px); }
h2 { font-size: var(--font-size-h2, 18px); }
h3 { font-size: var(--font-size-h3, 16px); }
h4 { font-size: var(--font-size-h4, 14px); }
h5 { font-size: var(--font-size-h5, 13px); }
h6 { font-size: var(--font-size-h6, 12px); }

p { font-size: var(--font-size-base, 14px); }
small { font-size: var(--font-size-small, 12px); }
.caption { font-size: var(--font-size-caption, 11px); }
.status-text { font-size: var(--font-size-status, 12px); }

/* ========================================================================== */
/* CUSTOM SCROLLBARS                                                          */
/* ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--terminal-bg, #ffffff);
    border: 1px solid var(--terminal-border, #000000);
}

::-webkit-scrollbar-thumb {
    background: var(--terminal-accent, #000000);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--terminal-accent, #000000);
    opacity: 0.8;
}

::-webkit-scrollbar-corner {
    background: var(--terminal-bg, #ffffff);
}

/* ========================================================================== */
/* CALENDAR PICKER ICON STYLING                                               */
/* ========================================================================== */

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: var(--calendar-icon-filter, invert(0));
    margin-left: 8px;
    cursor: pointer;
}