/**
 * SKED ERP — Unified Visual Design System Tokens & Classes
 * Clean, Standardized Enterprise Visual Architecture
 */

/* -------------------------------------------------------------------------- */
/* 1. Local Font Declarations (@font-face)                                    */
/* -------------------------------------------------------------------------- */

/* IBM Plex Sans Arabic (400 Regular) */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-400.woff2') format('woff2');
}

/* IBM Plex Sans Arabic (500 Medium) */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-500.woff2') format('woff2');
}

/* IBM Plex Sans Arabic (600 SemiBold) */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-600.woff2') format('woff2');
}

/* IBM Plex Sans Arabic (700 Bold) */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-700.woff2') format('woff2');
}

/* Manrope (400 Regular) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/manrope/manrope-400.woff2') format('woff2');
}

/* Manrope (500 Medium) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/manrope/manrope-500.woff2') format('woff2');
}

/* Manrope (600 SemiBold) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/manrope/manrope-600.woff2') format('woff2');
}

/* Manrope (700 Bold) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/manrope/manrope-700.woff2') format('woff2');
}

/* Manrope (800 ExtraBold) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/manrope/manrope-800.woff2') format('woff2');
}

/* -------------------------------------------------------------------------- */
/* 2. SKED Official Color Palette & CSS Variables                             */
/* -------------------------------------------------------------------------- */

:root {
    /* 1. Topbar & Sidebar Base */
    --sked-topbar-sidebar: #063B3A;

    /* 2. Primary Buttons */
    --sked-primary-btn: #07877F;
    --sked-primary-btn-hover: #066F69;
    --sked-primary-btn-disabled: #A8C8C5;
    --sked-primary-btn-text: #FFFFFF;

    /* 3. Secondary Buttons */
    --sked-secondary-btn-bg: #FFFFFF;
    --sked-secondary-btn-border: #07877F;
    --sked-secondary-btn-text: #07877F;

    /* 4. Danger Buttons */
    --sked-danger-btn: #DC3545;
    --sked-danger-btn-text: #FFFFFF;

    /* 5. Table Headers */
    --sked-table-header-bg: #071B2B;
    --sked-table-header-text: #FFFFFF;
    --sked-table-gold-line: #C9A227;

    /* 6. Active Sidebar Item */
    --sked-nav-active-bg: #075D59;
    --sked-nav-active-border: #10BFB2;
    --sked-nav-active-text: #FFFFFF;

    /* 7. Page Background & Cards */
    --sked-page-bg: #F5F7F9;
    --sked-card-bg: #FFFFFF;
    --sked-card-border: #DCE5EA;
    --sked-text-primary: #132238;
    --sked-text-secondary: #68768A;

    /* 8. Gold Accent */
    --sked-gold-accent: #C9A227;

    /* 9. Semantic Colors */
    --sked-semantic-red: #DC3545;    /* Risk / Debit / Delay / Error */
    --sked-semantic-green: #28A745;  /* Success / Credit / Approved */
    --sked-semantic-amber: #FFC107;  /* Warning / Pending */
    --sked-semantic-gray: #6C757D;   /* Neutral / Inactive / Zero */
    --sked-semantic-blue: #17A2B8;   /* Informational Message */

    /* Universal Radius Standard */
    --sked-border-radius: 10px;

    /* Typography Stack */
    --font-sked-arabic: 'IBM Plex Sans Arabic', sans-serif;
    --font-sked-english: 'Manrope', sans-serif;
}

/* -------------------------------------------------------------------------- */
/* 3. Utility Classes                                                         */
/* -------------------------------------------------------------------------- */

.font-ibm {
    font-family: var(--font-sked-arabic) !important;
}

.font-manrope {
    font-family: var(--font-sked-english) !important;
}

.font-sked {
    font-family: var(--font-sked-arabic), var(--font-sked-english), sans-serif;
}

/* Page & Card Utilities */
.bg-sked-page { background-color: var(--sked-page-bg) !important; }
.bg-sked-card { background-color: var(--sked-card-bg) !important; }
.bg-sked-topbar { background-color: var(--sked-topbar-sidebar) !important; }
.bg-sked-header { background-color: var(--sked-table-header-bg) !important; }

.text-sked-primary { color: var(--sked-text-primary) !important; }
.text-sked-secondary { color: var(--sked-text-secondary) !important; }
.text-sked-gold { color: var(--sked-gold-accent) !important; }
.text-sked-teal { color: var(--sked-primary-btn) !important; }

.border-sked-card { border-color: var(--sked-card-border) !important; }
.border-sked-gold { border-color: var(--sked-gold-accent) !important; }

/* Unified Standardized Buttons */
.btn-sked-primary {
    background-color: var(--sked-primary-btn) !important;
    color: var(--sked-primary-btn-text) !important;
    border-radius: var(--sked-border-radius) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out;
}
.btn-sked-primary:hover {
    background-color: var(--sked-primary-btn-hover) !important;
}
.btn-sked-primary:disabled {
    background-color: var(--sked-primary-btn-disabled) !important;
    cursor: not-allowed !important;
}

.btn-sked-secondary {
    background-color: var(--sked-secondary-btn-bg) !important;
    color: var(--sked-secondary-btn-text) !important;
    border: 1px solid var(--sked-secondary-btn-border) !important;
    border-radius: var(--sked-border-radius) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out;
}
.btn-sked-secondary:hover {
    background-color: #F0F9F8 !important;
}

.btn-sked-danger {
    background-color: var(--sked-danger-btn) !important;
    color: var(--sked-danger-btn-text) !important;
    border-radius: var(--sked-border-radius) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out;
}
.btn-sked-danger:hover {
    background-color: #BD2130 !important;
}

/* Standardized Table Header */
.table-sked-header {
    background-color: var(--sked-table-header-bg) !important;
    color: var(--sked-table-header-text) !important;
    border-bottom: 2px solid var(--sked-table-gold-line) !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Login & Authentication Geometry                                         */
/* -------------------------------------------------------------------------- */

.sked-login-body {
    background-color: var(--sked-topbar-sidebar);
    color: #FFFFFF;
    font-family: var(--font-sked-arabic);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
}

.sked-glass-card {
    background: rgba(6, 26, 25, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(25, 195, 180, 0.3);
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.sked-input-field {
    background-color: rgba(3, 16, 15, 0.85) !important;
    border: 1px solid rgba(25, 195, 180, 0.3) !important;
    color: #FFFFFF !important;
    transition: all 0.2s ease-in-out;
}

.sked-input-field:focus {
    background-color: rgba(3, 16, 15, 0.95) !important;
    border-color: #19C3B4 !important;
    box-shadow: 0 0 0 3px rgba(25, 195, 180, 0.25) !important;
    outline: none !important;
}

.sked-input-field::placeholder {
    color: rgba(184, 195, 190, 0.5) !important;
}

.sked-btn-submit {
    background: linear-gradient(135deg, #075C57 0%, #07877F 100%) !important;
    color: #ECE4CF !important;
    border: 1px solid rgba(25, 195, 180, 0.4) !important;
    transition: all 0.2s ease-in-out;
}

.sked-btn-submit:hover {
    background: linear-gradient(135deg, #066F69 0%, #19C3B4 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 25px rgba(25, 195, 180, 0.3) !important;
    transform: translateY(-1px);
}

.sked-btn-submit:active {
    transform: translateY(0);
}