/*
 * BEGIN 
 *
 * @BEGIN Header Block
 * @FILENAME: [FILENAME]
 * @TITLE: PMS > Project Management System
 * @DESCRIPTION: [FILE DESCRIPTION]
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.1
 * + File Created, Ary van der Pijl, 2026/05/01
 * + File Modified, Ary van der Pijl, 2026/05/01, [TICKET #], Enhancing
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */


:root {
    /* Brand Colors */
    --color-brand-50: #f5f7ff;
    --color-brand-100: #ebf0fe;
    --color-brand-200: #ced9fc;
    --color-brand-300: #b1c2fa;
    --color-brand-400: #7695f7;
    --color-brand-500: #3b68f3;
    --color-brand-600: #355edb;
    --color-brand-700: #2c4eb6;
    --color-brand-800: #233e92;
    --color-brand-900: #1d3377;

    /* Semantic Colors */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Spacing Tokens */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /* Surface & Borders */
    --surface-bg: #f8fafc;
    --surface-card: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
}

/* Dark Mode Overrides */
[data-theme="dark"] {
    --surface-bg: #0f172a;
    --surface-card: #1e293b;
    --border-color: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
}

/* Density Modes */
[data-density="compact"] {
    --space-4: 0.5rem;
    --space-6: 1rem;
    --font-size-base: 0.875rem;
}

[data-density="spacious"] {
    --space-4: 1.5rem;
    --space-6: 2rem;
    --font-size-base: 1.125rem;
}

/* Toast Container */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast-msg {
    min-width: 300px;
    padding: var(--space-4);
    margin-bottom: var(--space-2);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--surface-card);
    color: var(--text-primary);
    border-left: 4px solid var(--color-info);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideInRight 0.3s ease;
}

.toast-msg.success {
    border-left-color: var(--color-success);
}

.toast-msg.error {
    border-left-color: var(--color-error);
}

.toast-msg.warning {
    border-left-color: var(--color-warning);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--border-color) 25%, var(--surface-bg) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Mobile Responsiveness & Container Polish */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card {
        margin-bottom: 15px;
    }

    .table-responsive {
        border: 0;
    }

    /* Kanban column adjustment */
    .kanban-col {
        width: 85vw !important;
        min-width: 280px;
    }

    /* Hide some non-critical desktop elements */
    .hidden-sm {
        display: none !important;
    }
}

/* Base UI Polish */
.btn-raised {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.btn-raised:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card {
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.badge {
    font-weight: 600;
    letter-spacing: 0.5px;
}