/* =========================================
   Global Styles - Pencil Design System
   ========================================= */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* CSS Variables */
:root {
    /* Colors */
    --gs-bg: #1A1A1A;
    --gs-surface: #0F0F0F;
    --gs-surface-darker: #0A0A0A;
    --gs-border: #2A2A2A;
    --gs-text: #F5F5F0;
    --gs-text-muted: #6B6B6B;
    --gs-primary: #FFD600;
    --gs-primary-text: #1A1A1A;

    /* Badge Colors */
    --gs-success-bg: #1A4D2E;
    --gs-success: #4ADE80;
    --gs-warning-bg: #4D3A1A;
    --gs-warning: #FBBF24;
    --gs-danger-bg: #4D1A1A;
    --gs-danger: #F87171;

    /* Typography */
    --gs-font-heading: 'Space Grotesk', sans-serif;
    --gs-font-body: 'Inter', sans-serif;

    /* Spacing & Sizing */
    --gs-radius-sm: 8px;
    --gs-radius-md: 12px;
    --gs-padding-card: 24px;
    --gs-padding-input: 12px 16px;
    --gs-padding-btn: 12px 24px;
}

/* =========================================
   Base Styles
   ========================================= */

html {
    font-size: 14px;
}

body {
    background-color: var(--gs-bg);
    font-family: var(--gs-font-body);
    color: var(--gs-text);
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* =========================================
   Typography
   ========================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gs-font-heading);
    font-weight: 600;
    color: var(--gs-text);
    margin-top: 0;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 18px;
}

h1:focus {
    outline: none;
}

p, span, div {
    font-family: var(--gs-font-body);
    font-size: 14px;
}

small, .label, .text-label {
    font-family: var(--gs-font-heading);
    font-size: 12px;
    letter-spacing: 1px;
}

/* =========================================
   Cards
   ========================================= */

.card, .gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    padding: var(--gs-padding-card);
}

/* =========================================
   Buttons
   ========================================= */

.btn, .gs-btn, button[type="submit"] {
    font-family: var(--gs-font-heading);
    font-size: 12px;
    font-weight: 700;
    padding: var(--gs-padding-btn);
    border-radius: var(--gs-radius-sm);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:hover, .gs-btn:hover, button[type="submit"]:hover {
    opacity: 0.9;
}

.btn:active, .gs-btn:active, button[type="submit"]:active {
    transform: scale(0.98);
}

/* Primary Button */
.btn-primary, .gs-btn-primary, button[type="submit"] {
    background: var(--gs-primary);
    color: var(--gs-primary-text);
}

/* Secondary Button */
.btn-secondary, .gs-btn-secondary {
    background: transparent;
    border: 1px solid var(--gs-border);
    color: var(--gs-text);
}

.btn-secondary:hover, .gs-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Danger Button */
.btn-danger, .gs-btn-danger {
    background: var(--gs-danger-bg);
    color: var(--gs-danger);
    border: 1px solid var(--gs-danger);
}

/* Success Button */
.btn-success, .gs-btn-success {
    background: var(--gs-success-bg);
    color: var(--gs-success);
    border: 1px solid var(--gs-success);
}

/* =========================================
   Form Inputs
   ========================================= */

input, textarea, select,
.form-control, .gs-input {
    background: var(--gs-surface-darker);
    border: 1px solid var(--gs-border);
    color: var(--gs-text);
    padding: var(--gs-padding-input);
    border-radius: var(--gs-radius-sm);
    font-family: var(--gs-font-body);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

input::placeholder, textarea::placeholder,
.form-control::placeholder, .gs-input::placeholder {
    color: var(--gs-text-muted);
}

input:focus, textarea:focus, select:focus,
.form-control:focus, .gs-input:focus {
    outline: none;
    border-color: var(--gs-primary);
}

/* Form validation states */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--gs-success);
}

.invalid {
    outline: 1px solid var(--gs-danger);
}

.validation-message {
    color: var(--gs-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* Form Labels */
label, .form-label {
    font-family: var(--gs-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--gs-text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

/* =========================================
   Tables
   ========================================= */

table, .gs-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gs-border);
}

thead, .gs-table thead {
    background: var(--gs-surface-darker);
}

th {
    font-family: var(--gs-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--gs-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gs-border);
}

tbody tr {
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
}

tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

td {
    padding: 12px 16px;
    font-family: var(--gs-font-body);
    font-size: 14px;
    color: var(--gs-text);
}

/* =========================================
   Badges
   ========================================= */

.badge, .gs-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--gs-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.badge-success, .gs-badge-success {
    background: var(--gs-success-bg);
    color: var(--gs-success);
}

.badge-warning, .gs-badge-warning {
    background: var(--gs-warning-bg);
    color: var(--gs-warning);
}

.badge-danger, .gs-badge-danger {
    background: var(--gs-danger-bg);
    color: var(--gs-danger);
}

/* =========================================
   Layout
   ========================================= */

.content {
    padding-top: 1.1rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =========================================
   Blazor Error Boundary
   ========================================= */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--gs-danger-bg);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--gs-danger);
    border: 1px solid var(--gs-danger);
    border-radius: var(--gs-radius-sm);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* =========================================
   Mobile Card Styles
   ========================================= */

.mobile-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gs-border);
}

.mobile-card-title {
    font-family: var(--gs-font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--gs-text);
    margin: 0;
}

.mobile-card-body {
    display: grid;
    gap: 0.5rem;
}

.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.mobile-card-label {
    font-family: var(--gs-font-heading);
    font-weight: 500;
    color: var(--gs-text-muted);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mobile-card-value {
    color: var(--gs-text);
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

.mobile-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gs-border);
}

.mobile-card-actions .gs-btn {
    flex: 1;
}

/* Mobile/Desktop card view toggle */
@media (max-width: 767.98px) {
    .mobile-card-view {
        display: block;
    }
}

@media (min-width: 768px) {
    .mobile-card-view {
        display: none;
    }
}

/* =========================================
   Light Theme Overrides
   ========================================= */

[data-theme="light"] {
    --gs-bg: #F5F2EE;
    --gs-surface: #FFFFFF;
    --gs-surface-darker: #FAF8F5;
    --gs-border: #DDD6CC;
    --gs-text: #1A3263;
    --gs-text-muted: #547792;
    --gs-primary: #1A3263;
    --gs-primary-text: #FFFFFF;
    --gs-success-bg: #EEF7F1;
    --gs-success: #1B7A4A;
    --gs-warning-bg: #FEF8EC;
    --gs-warning: #B87D1E;
    --gs-danger-bg: #FDF0F0;
    --gs-danger: #800000;
}

[data-theme="light"] body {
    background-color: #F5F2EE;
    color: #1A3263;
}

[data-theme="light"] .card,
[data-theme="light"] .gs-card {
    background: #FFFFFF;
    border-color: #DDD6CC;
    box-shadow: 0 1px 3px rgba(26, 50, 99, 0.06), 0 1px 2px rgba(26, 50, 99, 0.04);
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .form-control,
[data-theme="light"] .gs-input {
    background: #FFFFFF;
    border-color: #DDD6CC;
    color: #1A3263;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] .form-control::placeholder,
[data-theme="light"] .gs-input::placeholder {
    color: #8A9AAB;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] .form-control:focus,
[data-theme="light"] .gs-input:focus {
    border-color: #1A3263;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1);
}

[data-theme="light"] thead,
[data-theme="light"] .gs-table thead {
    background: #FAF8F5;
}

[data-theme="light"] th {
    color: #547792;
    border-bottom-color: #DDD6CC;
}

[data-theme="light"] tbody tr {
    background: #FFFFFF;
    border-bottom-color: #E8E2DB;
}

[data-theme="light"] tbody tr:hover {
    background: #FAF8F5;
}

[data-theme="light"] td {
    color: #1A3263;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .gs-btn-primary,
[data-theme="light"] button[type="submit"] {
    background: #1A3263;
    color: #FFFFFF;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .gs-btn-secondary {
    background: #FFFFFF;
    border-color: #DDD6CC;
    color: #2E4A6E;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .gs-btn-secondary:hover {
    background: #FAF8F5;
    border-color: #D4CCC2;
}

[data-theme="light"] label,
[data-theme="light"] .form-label {
    color: #547792;
}

[data-theme="light"] .badge,
[data-theme="light"] .gs-badge {
    font-weight: 600;
}

[data-theme="light"] .badge-success,
[data-theme="light"] .gs-badge-success {
    background: #EEF7F1;
    color: #1B7A4A;
}

[data-theme="light"] .badge-warning,
[data-theme="light"] .gs-badge-warning {
    background: #FEF8EC;
    color: #B87D1E;
}

[data-theme="light"] .badge-danger,
[data-theme="light"] .gs-badge-danger {
    background: #FDF0F0;
    color: #800000;
}

[data-theme="light"] .mobile-card {
    background: #FFFFFF;
    border-color: #DDD6CC;
    box-shadow: 0 1px 3px rgba(26, 50, 99, 0.06);
}

[data-theme="light"] .mobile-card-label {
    color: #547792;
}

[data-theme="light"] .mobile-card-value {
    color: #1A3263;
}

[data-theme="light"] .mobile-card-header {
    border-bottom-color: #E8E2DB;
}

[data-theme="light"] .mobile-card-actions {
    border-top-color: #E8E2DB;
}

[data-theme="light"] .blazor-error-boundary {
    background-color: #FDF0F0;
    color: #800000;
    border-color: #E8BFBF;
}

/* =========================================
   Utility Classes
   ========================================= */

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

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

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

.text-danger {
    color: var(--gs-danger);
}

.bg-surface {
    background: var(--gs-surface);
}

.bg-surface-darker {
    background: var(--gs-surface-darker);
}

/* =========================================
   Collapsed Sidebar - Global Overrides
   ========================================= */

/* Hide text, dots, dividers, user section in collapsed sidebar */
#sidebar.gs-sidebar--collapsed .nav-logo-text,
#sidebar.gs-sidebar--collapsed .sidebar-nav-text,
#sidebar.gs-sidebar--collapsed .sidebar-nav-dot,
#sidebar.gs-sidebar--collapsed .nav-user-wrapper,
#sidebar.gs-sidebar--collapsed .nav-divider,
#sidebar.gs-sidebar--collapsed .nav-divider--full {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Kill scrollbar completely */
#sidebar.gs-sidebar--collapsed {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#sidebar.gs-sidebar--collapsed::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Logo section */
#sidebar.gs-sidebar--collapsed .nav-logo-section {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#sidebar.gs-sidebar--collapsed .nav-logo-link {
    justify-content: center !important;
    padding: 0 !important;
    flex: 0 !important;
}

#sidebar.gs-sidebar--collapsed .nav-logo-square {
    width: 36px !important;
    height: 36px !important;
}

/* Nav main - icon strip */
#sidebar.gs-sidebar--collapsed .nav-main,
#sidebar.gs-sidebar--collapsed nav.nav-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#sidebar.gs-sidebar--collapsed .nav-main::-webkit-scrollbar {
    display: none !important;
}

/* Nav items - centered icon boxes */
#sidebar.gs-sidebar--collapsed .sidebar-nav-item,
#sidebar.gs-sidebar--collapsed a.sidebar-nav-item {
    width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border-left: 3px solid transparent !important;
    gap: 0 !important;
}

#sidebar.gs-sidebar--collapsed .sidebar-nav-item svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* Topbar collapse button */
.gs-topbar__collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--gs-text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.gs-topbar__collapse-btn:hover {
    background: var(--gs-primary-light);
    color: var(--gs-text);
}

/* Arrow points LEFT when open (to indicate close action) */
.gs-topbar__collapse-icon {
    transform: scaleX(-1);
    transition: transform 0.3s ease;
}

/* Arrow points RIGHT when collapsed (to indicate open action) */
.gs-sidebar--collapsed ~ .gs-main .gs-topbar__collapse-icon,
#sidebar.gs-sidebar--collapsed ~ .gs-main .gs-topbar__collapse-icon {
    transform: scaleX(1) !important;
}

[data-theme="light"] .gs-topbar__collapse-btn {
    color: var(--gs-text-muted);
}

[data-theme="light"] .gs-topbar__collapse-btn:hover {
    background: rgba(26, 50, 99, 0.08);
    color: var(--gs-text);
}

@media (max-width: 768px) {
    .gs-topbar__collapse-btn {
        display: none !important;
    }
}