/**
 * PowerLink SaaS - Core Stylesheet
 * Integrates Cairo typography, functional UI transitions, print layouts, and skeleton loaders.
 */

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

/* ==========================================================================
   Batch 0 — Design Tokens (canonical PowerLink palette)
   SSoT: VISUAL_IDENTITY_GUIDE.md §4. Migrate inline hexes to var(--pl-*).
   ========================================================================== */
:root {
    /* Primary (brand green) */
    --pl-primary: #2E7D32;
    --pl-primary-rgb: 46, 125, 50;
    --pl-primary-hover: #1B5E20;
    --pl-primary-dark: #1B5E20;
    --pl-primary-soft: #E8F5E9;
    --pl-on-primary: #FFFFFF;

    /* Accent (blue) */
    --pl-accent: #1565C0;
    --pl-accent-rgb: 21, 101, 192;
    --pl-accent-dark: #0D47A1;
    --pl-accent-soft: #E3F2FD;

    /* Semantic (money: green=in, red=debt, amber=pending) */
    --pl-success: #2E7D32;
    --pl-danger: #D32F2F;
    --pl-danger-soft: #FFEBEE;
    --pl-warning: #F57C00;
    --pl-warning-soft: #FFF3E0;
    --pl-info: #0288D1;

    /* Neutral surfaces & text */
    --pl-bg: #F4F7F9;
    --pl-surface: #FFFFFF;
    --pl-card-bg: #FFFFFF;
    --pl-border: #E0E0E0;
    --pl-text-main: #263238;
    --pl-text-muted: #78909C;

    /* Type & shape */
    --pl-font: 'Cairo', sans-serif;
    --pl-radius: 16px;
    --pl-radius-pill: 50rem;
}

/* ==========================================================================
   Bootstrap 5.3 theme remap → PowerLink palette (no Sass rebuild needed)
   ========================================================================== */
:root {
    --bs-primary: var(--pl-primary);
    --bs-primary-rgb: var(--pl-primary-rgb);
    --bs-success: var(--pl-success);
    --bs-success-rgb: var(--pl-primary-rgb);
    --bs-danger: var(--pl-danger);
    --bs-danger-rgb: 211, 47, 47;
    --bs-warning: var(--pl-warning);
    --bs-warning-rgb: 245, 124, 0;
    --bs-info: var(--pl-info);
    --bs-body-bg: var(--pl-bg);
    --bs-body-color: var(--pl-text-main);
    --bs-border-color: var(--pl-border);
    --bs-body-font-family: var(--pl-font);
    --bs-border-radius: var(--pl-radius);
}

/* Buttons read their own component vars in 5.3 — pin the primary so
   .btn-primary matches the brand exactly even under utility classes. */
.btn-primary {
    --bs-btn-bg: var(--pl-primary);
    --bs-btn-border-color: var(--pl-primary);
    --bs-btn-hover-bg: var(--pl-primary-hover);
    --bs-btn-hover-border-color: var(--pl-primary-hover);
    --bs-btn-active-bg: var(--pl-primary-hover);
    --bs-btn-active-border-color: var(--pl-primary-hover);
}

body {
    font-family: var(--pl-font);
    background-color: var(--pl-bg); /* canonical cool-gray canvas */
}

/* Form Controls - Brand Focus */
.form-control:focus, .form-select:focus {
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
}

/* Checkboxes & switches: brand green when checked/focused. Bootstrap compiles a literal
   blue into .form-check-input:checked, so the --bs-primary remap never reaches it — pin it
   here so web switches/checkboxes match the brand (and the Android green switch). */
.form-check-input:checked {
    background-color: var(--pl-primary);
    border-color: var(--pl-primary);
}
.form-check-input:focus {
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
}

/* Light brand-green resting border so inputs are findable on white modals/cards
   (the default --pl-border gray is near-invisible on white). Focus deepens to solid green. */
.form-control, .form-select {
    border-color: rgba(var(--pl-primary-rgb), 0.40);
}

/* Sidebar Enhancements */
.sidebar-wrapper {
    z-index: 1000;
    background-color: var(--pl-surface);
}

.custom-nav-link {
    transition: all 0.3s ease;
    font-weight: 600;
}

.custom-nav-link:hover {
    background-color: var(--pl-primary-soft);
    border-radius: 8px;
    color: var(--pl-primary) !important;
}

/* Active sidebar item — premium pill with an RTL start-aligned accent bar.
   Pairs with the Bootstrap utility classes emitted by sidebar.js (#menu). */
.active-nav {
    position: relative;
    background-color: var(--pl-primary-soft) !important;
    color: var(--pl-primary) !important;
}
.active-nav::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: var(--pl-radius-pill);
    background-color: var(--pl-primary);
}

.nav-item i {
    width: 25px;
    text-align: center;
}

/* Universal Transition Class */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Print & PDF Export Directives
   ========================================================================== */
@media print {
    /* Hide navigational and interactive elements */
    .sidebar-wrapper, 
    button, 
    .btn, 
    .nav, 
    canvas, 
    select,
    .modal,
    .toast-container {
        display: none !important;
    }

    /* Reset background for ink optimization */
    body, .bg-light, .card {
        background-color: #ffffff !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Expand main content area to full width */
    .col.py-4.px-4 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Enforce rigid table borders for physical print */
    .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    .table th, .table td {
        border: 1px solid #000 !important;
        padding: 8px !important;
        color: #000 !important;
    }

    /* Hide functional "Actions" columns */
    .table th:last-child, 
    .table td:last-child {
        display: none !important;
    }
}

/* ==========================================================================
   Skeleton Loaders (Pulse Animation)
   ========================================================================== */
.skeleton {
    background-color: #e2e5e7;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1.2s ease infinite;
    border-radius: 6px;
    color: transparent !important; /* Hide original text while loading */
    display: inline-block;
}

@keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}

.skeleton-text {
    height: 24px;
    width: 120px;
}

/* ==========================================================================
   UI Animations
   ========================================================================== */
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}