/**
 * Karary University Certificate Verification System
 * Official Theme & Design System (Karary Official Brand Tokens)
 * Primary Green: #0D6B3F | Dark Green: #07512F | Deep Green: #06452A
 * Gold: #A59A4A | Light Gold: #C0B35A
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* 1. Official Karary Brand Color Palette */
    --brand-primary: #0D6B3F;
    --brand-primary-dark: #07512F;
    --brand-primary-deep: #06452A;

    --brand-gold: #C9A227;
    --brand-gold-light: #DFBE4B;
    --brand-gold-hover: #B08D20;

    --brand-white: #FFFFFF;

    --brand-background: #F5F7F6;
    --brand-surface: #FFFFFF;

    --brand-text: #1F2937;
    --brand-text-muted: #6B7280;
    --brand-border: #D9E2DD;

    --brand-success: #198754;
    --brand-warning: #C9A227;
    --brand-danger: #DC3545;
    --brand-info: #0D6B3F;

    /* 2. System Aliases & Compatibility Tokens */
    --karary-primary: var(--brand-primary);
    --karary-primary-dark: var(--brand-primary-dark);
    --karary-primary-deep: var(--brand-primary-deep);
    --karary-primary-light: #175936;
    --karary-primary-subtle: #EDF7F2;
    --karary-primary-rgb: 13, 107, 63;

    --karary-secondary: var(--brand-gold);
    --karary-secondary-dark: var(--brand-gold-hover);
    --karary-secondary-light: var(--brand-gold-light);
    --karary-secondary-subtle: #FAF8ED;
    --karary-secondary-rgb: 165, 154, 74;

    --karary-gold: var(--brand-gold);
    --karary-gold-hover: var(--brand-gold-hover);

    --karary-bg: var(--brand-background);
    --karary-surface: var(--brand-surface);
    --karary-text: var(--brand-text);
    --karary-text-muted: var(--brand-text-muted);
    --karary-border: var(--brand-border);
    --karary-border-focus: var(--brand-primary);

    --karary-success: var(--brand-success);
    --karary-success-subtle: #EDFBF4;
    --karary-warning: var(--brand-warning);
    --karary-warning-subtle: #FEF9EB;
    --karary-danger: var(--brand-danger);
    --karary-danger-subtle: #FDF2F2;
    --karary-info: var(--brand-info);
    --karary-info-subtle: #EDF7F2;

    /* 2.1 Elegant Accent Colors for Cards & Indicators */
    --karary-navy: #1F3A60;
    --karary-navy-light: #EEF4FA;
    --karary-green: #0D6B3F;
    --karary-green-dark: #07512F;
    --karary-green-light: #EDF7F2;
    --karary-emerald: #059669;
    --karary-emerald-light: #ECFDF5;
    --karary-gold: #C9A227;
    --karary-gold-light: #FEF9EB;
    --karary-amber: #D97706;
    --karary-amber-light: #FFFBEB;
    --karary-indigo: #4F46E5;
    --karary-indigo-light: #EEF2FF;
    --karary-blue: #2563EB;
    --karary-blue-light: #EFF6FF;
    --karary-purple: #7C3AED;
    --karary-purple-light: #FAF5FF;
    --karary-rose: #E11D48;
    --karary-rose-light: #FFF1F2;
    --karary-teal: #0D9488;
    --karary-teal-light: #F0FDFA;
    --karary-slate: #475569;
    --karary-slate-light: #F1F5F9;

    /* 3. Layout Dimensions & Shapes */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 78px;
    --topbar-height: 68px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
}

/* Base Typography & Global Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: var(--karary-bg);
    color: var(--karary-text);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    color: var(--karary-primary-dark);
    letter-spacing: -0.01em;
}

html[lang="en"], html[lang="en"] body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, 
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] .h1, html[lang="en"] .h2, html[lang="en"] .h3, 
html[lang="en"] .h4, html[lang="en"] .h5, html[lang="en"] .h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.font-monospace, code, kbd, samp, pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

a {
    color: var(--karary-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--karary-primary-dark);
}

/* Primary and Secondary Custom Utility Classes */
.text-karary-primary { color: var(--karary-primary) !important; }
.text-karary-dark { color: var(--karary-primary-dark) !important; }
.text-karary-light { color: var(--karary-primary-light) !important; }
.text-karary-gold { color: var(--karary-secondary) !important; }
.text-karary-muted { color: var(--karary-text-muted) !important; }

.bg-karary-primary { background-color: var(--karary-primary) !important; color: #FFFFFF; }
.bg-karary-dark { background-color: var(--karary-primary-dark) !important; color: #FFFFFF; }
.bg-karary-light { background-color: var(--karary-primary-light) !important; color: #FFFFFF; }
.bg-karary-gold { background-color: var(--karary-secondary) !important; color: #FFFFFF; }
.bg-karary-subtle { background-color: var(--karary-primary-subtle) !important; }
.bg-karary-gold-subtle { background-color: var(--karary-secondary-subtle) !important; }

.border-karary-gold { border-color: var(--karary-secondary) !important; }
.border-karary-primary { border-color: var(--karary-primary) !important; }
.border-karary { border-color: var(--karary-border) !important; }

/* Buttons */
.btn {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.15rem;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-primary {
    background-color: var(--karary-primary) !important;
    border-color: var(--karary-primary) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--karary-primary-dark) !important;
    border-color: var(--karary-primary-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(13, 107, 63, 0.25);
    transform: translateY(-1px);
}

.btn-karary-gold {
    background: var(--karary-gold) !important;
    border: 1px solid var(--brand-gold-hover) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(165, 154, 74, 0.25);
}

.btn-karary-gold:hover, .btn-karary-gold:focus, .btn-karary-gold:active {
    background: var(--brand-gold-hover) !important;
    border-color: var(--brand-gold-hover) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(165, 154, 74, 0.35);
    transform: translateY(-1px);
}

.btn-karary-outline {
    background-color: transparent !important;
    border: 1.5px solid var(--karary-secondary) !important;
    color: #FFFFFF !important;
}

.btn-karary-outline:hover {
    background-color: var(--karary-secondary) !important;
    border-color: var(--karary-secondary) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--karary-primary) !important;
    border-color: var(--karary-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--karary-primary) !important;
    border-color: var(--karary-primary) !important;
    color: #FFFFFF !important;
}

/* Cards & Containers */
.card, .card-custom {
    background-color: var(--karary-surface);
    border: 1px solid var(--karary-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 4px rgba(7, 81, 47, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 14px rgba(7, 81, 47, 0.07);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--karary-border);
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--karary-primary-dark);
}

/* Form Elements */
.form-control, .form-select {
    border: 1.5px solid var(--karary-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    color: var(--karary-text);
    background-color: var(--karary-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--karary-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 107, 63, 0.18);
    outline: 0;
}

.form-label {
    font-weight: 600;
    color: var(--karary-text);
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

/* Tables */
.table {
    color: var(--karary-text);
    margin-bottom: 0;
}

.table th,
.table th.text-muted,
.table th.text-secondary,
.table thead th,
.table thead th.text-muted,
.table thead th.text-secondary,
.table thead.table-light th,
.table thead.table-light th.text-muted,
.table-light th {
    font-weight: 700;
    color: #FFFFFF !important;
    background-color: var(--karary-primary-dark) !important;
    border-bottom: 2px solid var(--karary-border) !important;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
}

.table td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--karary-border);
    font-size: 0.92rem;
    background-color: var(--karary-surface);
}

.table-hover tbody tr:hover td {
    background-color: var(--karary-bg) !important;
}

/* Badges */
.badge {
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.4em 0.75em;
    border-radius: 50rem;
    letter-spacing: 0.02em;
}

.badge.bg-primary {
    background-color: var(--karary-primary) !important;
    color: #FFFFFF;
}

.badge-karary-gold {
    background-color: var(--karary-secondary-subtle);
    color: var(--karary-secondary-dark);
    border: 1px solid rgba(165, 154, 74, 0.35);
}

/* Verification Result Styling Components */
.verification-badge-verified {
    background-color: var(--karary-success-subtle);
    border: 2px solid var(--karary-success);
    color: var(--karary-primary-dark);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 14px rgba(25, 135, 84, 0.1);
}

.verification-badge-pending {
    background-color: #FFFBEB;
    border: 2px solid #C9A227;
    color: #92400E;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.1);
}

.verification-badge-invalid {
    background-color: var(--karary-danger-subtle);
    border: 2px solid var(--karary-danger);
    color: var(--karary-danger);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.1);
}

.karary-seal {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--karary-secondary-subtle) 0%, rgba(165, 154, 74, 0.15) 100%);
    border: 2px dashed var(--karary-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--karary-secondary);
    font-size: 1.75rem;
}

/* Custom Scrollbar for all views */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--karary-bg);
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

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

/* Step / Feature Workflow Cards with Green Hover & Golden Border */
.step-workflow-card {
    background-color: var(--karary-surface);
    border: 2px solid var(--karary-border);
    border-radius: var(--radius-lg);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.step-workflow-card:hover {
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%) !important;
    border-color: var(--karary-secondary) !important;
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(165, 154, 74, 0.18), 0 4px 10px rgba(13, 107, 63, 0.1) !important;
}

.step-workflow-card .step-icon-box {
    transition: all 0.35s ease;
}

.step-workflow-card:hover .step-icon-box {
    background-color: var(--karary-primary) !important;
    color: #FFFFFF !important;
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(13, 107, 63, 0.35);
}

.step-workflow-card .step-title {
    transition: color 0.3s ease;
}

.step-workflow-card:hover .step-title {
    color: var(--karary-primary) !important;
}

/* Pagination Styling (Karary University Theme) */
.pagination {
    margin-bottom: 0;
    gap: 4px;
    align-items: center;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
.pagination .page-link {
    border-radius: var(--radius-sm) !important;
    color: var(--karary-primary);
    border: 1px solid var(--karary-border);
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    font-size: 0.88rem;
    background-color: var(--karary-surface);
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background-color: var(--karary-primary-subtle);
    border-color: var(--karary-primary);
    color: var(--karary-primary-dark);
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background-color: var(--karary-primary) !important;
    border-color: var(--karary-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(13, 107, 63, 0.2);
}

.pagination .page-item.disabled .page-link {
    color: var(--karary-text-muted);
    background-color: #F8FAFC;
    border-color: var(--karary-border);
    cursor: not-allowed;
    opacity: 0.65;
}

/* Custom Utility Badges */
.bg-orange {
    background-color: #ff9800 !important;
    color: #212529 !important;
}

/* 4. Official Karary Gold (#C9A227) Component Styles */
.bg-karary-gold, .bg-gold-500, .bg-gold {
    background-color: #C9A227 !important;
    color: #FFFFFF !important;
}
.hover\:bg-karary-gold-hover:hover, .hover\:bg-gold-600:hover {
    background-color: #B08D20 !important;
}
.text-karary-gold, .text-gold-500, .text-gold {
    color: #C9A227 !important;
}
.border-karary-gold, .border-gold-500 {
    border-color: #C9A227 !important;
}

.btn-gold, .btn-karary-gold {
    background-color: #C9A227 !important;
    border: 1px solid #B08D20 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(201, 162, 39, 0.25);
    transition: all 0.2s ease-in-out;
}
.btn-gold:hover, .btn-karary-gold:hover,
.btn-gold:focus, .btn-karary-gold:focus,
.btn-gold:active, .btn-karary-gold:active {
    background-color: #B08D20 !important;
    border-color: #9E7D17 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.35);
    transform: translateY(-1px);
}

/* 5. Legacy Blue Elimination & Remapping to Karary Brand Colors (#0D6B3F / #C9A227) */
.bg-blue-900 { background-color: #0D6B3F !important; }
.hover\:bg-blue-800:hover { background-color: #07512F !important; }
.bg-blue-950 { background-color: #07512F !important; }
.bg-blue-800 { background-color: #07512F !important; }
.bg-blue-700 { background-color: #0D6B3F !important; }
.bg-blue-600 { background-color: #0D6B3F !important; }
.bg-blue-500 { background-color: #C9A227 !important; }
.bg-blue-100 { background-color: #D6EFE1 !important; }
.bg-blue-50 { background-color: #EDF7F2 !important; }

.text-blue-950 { color: #06452A !important; }
.text-blue-900 { color: #0D6B3F !important; }
.text-blue-800 { color: #07512F !important; }
.text-blue-700 { color: #07512F !important; }
.text-blue-600 { color: #0D6B3F !important; }
.text-blue-500 { color: #C9A227 !important; }
.text-blue-400 { color: #DFBE4B !important; }
.text-blue-300 { color: #DFBE4B !important; }
.text-blue-200 { color: #D6EFE1 !important; }

.border-blue-900 { border-color: #06452A !important; }
.border-blue-800 { border-color: #07512F !important; }
.border-blue-700 { border-color: #0D6B3F !important; }
.border-blue-600 { border-color: #0D6B3F !important; }
.border-blue-500 { border-color: #0D6B3F !important; }
.border-blue-400 { border-color: #DFBE4B !important; }
.border-blue-300 { border-color: #C9A227 !important; }
.border-blue-200 { border-color: #D9E2DD !important; }
.border-blue-100 { border-color: #EDF7F2 !important; }

.hover\:bg-blue-50:hover { background-color: #EDF7F2 !important; }
.hover\:bg-blue-100:hover { background-color: #D6EFE1 !important; }
.hover\:bg-blue-200:hover { background-color: #ADE0C6 !important; }
.hover\:bg-blue-700:hover { background-color: #07512F !important; }
.hover\:bg-blue-900:hover { background-color: #06452A !important; }
.hover\:text-blue-900:hover { color: #07512F !important; }
.hover\:text-blue-800:hover { color: #07512F !important; }
.hover\:text-blue-700:hover { color: #06452A !important; }
.hover\:border-blue-300:hover { border-color: #C9A227 !important; }

.focus\:ring-blue-600:focus { --tw-ring-color: #0D6B3F !important; border-color: #0D6B3F !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: #0D6B3F !important; border-color: #0D6B3F !important; }
.focus\:ring-blue-400:focus { --tw-ring-color: #0D6B3F !important; border-color: #0D6B3F !important; }

.from-blue-900 { --tw-gradient-from: #0D6B3F var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(13 107 63 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-blue-900 { --tw-gradient-to: #07512F var(--tw-gradient-to-position) !important; }
.from-blue-800 { --tw-gradient-from: #07512F var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(7 81 47 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-blue-800 { --tw-gradient-to: #06452A var(--tw-gradient-to-position) !important; }

/* ==========================================================================
   6. Unified Elegant Right-Side-Border KPI & Metric Cards Design Standard
   ========================================================================== */
.card-accent-navy, [data-accent="navy"] {
    border-right: 4px solid var(--karary-navy) !important;
}
[dir="ltr"] .card-accent-navy, [dir="ltr"] [data-accent="navy"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-navy) !important;
}

.card-accent-green, .card-accent-primary, [data-accent="green"], [data-accent="primary"] {
    border-right: 4px solid var(--karary-primary) !important;
}
[dir="ltr"] .card-accent-green, [dir="ltr"] .card-accent-primary, [dir="ltr"] [data-accent="green"], [dir="ltr"] [data-accent="primary"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-primary) !important;
}

.card-accent-dark, [data-accent="dark"] {
    border-right: 4px solid var(--karary-primary-dark) !important;
}
[dir="ltr"] .card-accent-dark, [dir="ltr"] [data-accent="dark"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-primary-dark) !important;
}

.card-accent-gold, .card-accent-secondary, [data-accent="gold"], [data-accent="secondary"] {
    border-right: 4px solid var(--karary-gold) !important;
}
[dir="ltr"] .card-accent-gold, [dir="ltr"] .card-accent-secondary, [dir="ltr"] [data-accent="gold"], [dir="ltr"] [data-accent="secondary"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-gold) !important;
}

.card-accent-emerald, [data-accent="emerald"] {
    border-right: 4px solid var(--karary-emerald) !important;
}
[dir="ltr"] .card-accent-emerald, [dir="ltr"] [data-accent="emerald"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-emerald) !important;
}

.card-accent-indigo, [data-accent="indigo"] {
    border-right: 4px solid var(--karary-indigo) !important;
}
[dir="ltr"] .card-accent-indigo, [dir="ltr"] [data-accent="indigo"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-indigo) !important;
}

.card-accent-blue, [data-accent="blue"] {
    border-right: 4px solid var(--karary-blue) !important;
}
[dir="ltr"] .card-accent-blue, [dir="ltr"] [data-accent="blue"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-blue) !important;
}

.card-accent-amber, [data-accent="amber"] {
    border-right: 4px solid var(--karary-amber) !important;
}
[dir="ltr"] .card-accent-amber, [dir="ltr"] [data-accent="amber"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-amber) !important;
}

.card-accent-purple, [data-accent="purple"] {
    border-right: 4px solid var(--karary-purple) !important;
}
[dir="ltr"] .card-accent-purple, [dir="ltr"] [data-accent="purple"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-purple) !important;
}

.card-accent-rose, [data-accent="rose"] {
    border-right: 4px solid var(--karary-rose) !important;
}
[dir="ltr"] .card-accent-rose, [dir="ltr"] [data-accent="rose"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-rose) !important;
}

.card-accent-teal, [data-accent="teal"] {
    border-right: 4px solid var(--karary-teal) !important;
}
[dir="ltr"] .card-accent-teal, [dir="ltr"] [data-accent="teal"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-teal) !important;
}

.card-accent-slate, [data-accent="slate"] {
    border-right: 4px solid var(--karary-slate) !important;
}
[dir="ltr"] .card-accent-slate, [dir="ltr"] [data-accent="slate"] {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--karary-slate) !important;
}