@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Syne:wght@600;700;800&display=swap');
@import "tailwindcss";
@import "./nawa-design-system.css";

@theme {
    --color-primary-50: #f3f0fa;
    --color-primary-100: #e6def5;
    --color-primary-200: #d0bde9;
    --color-primary-300: #b598dd;
    --color-primary-400: #966ecf;
    --color-primary-500: #6d3ec4;
    --color-primary-600: #5d2db0;
    --color-primary-700: #4c1db0;
    --color-primary-800: #3e1596;
    --color-primary-900: #310b82;
    --color-primary-950: #1a0545;

    --color-dzgreen-50: #f3f0fa;
    --color-dzgreen-100: #e6def5;
    --color-dzgreen-200: #d0bde9;
    --color-dzgreen-300: #b598dd;
    --color-dzgreen-400: #966ecf;
    --color-dzgreen-500: #6d3ec4;
    --color-dzgreen-600: #5d2db0;
    --color-dzgreen-700: #4c1db0;
    --color-dzgreen-800: #3e1596;
    --color-dzgreen-900: #310b82;
    --color-dzgreen-950: #1a0545;

    --color-accent-50: #fff9e6;
    --color-accent-100: #ffefcc;
    --color-accent-200: #ffdf99;
    --color-accent-300: #ffcd57;
    --color-accent-400: #ffbe26;
    --color-accent-500: #eeb32a;
    --color-accent-600: #d69e1f;
    --color-accent-700: #b38217;
    --color-accent-800: #8f6716;
    --color-accent-900: #735316;
    --color-accent-950: #45300a;

    --font-sans: "Tajawal", "sans-serif";
}

/* دفتر الأستاذ - Custom Styles */
/* This file provides additional styles beyond Tailwind CSS */

/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* RTL specific adjustments */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* Input fields focus state */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px #6d3ec4;
}

/* Table striped rows */
.table-striped tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark .table-striped tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 0.5cm !important;
    }

    /* Aggressive Print Hiding Strategy */
    body * {
        visibility: hidden;
    }

    #print-area, #print-area * {
        visibility: visible;
    }

    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 11pt !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #root,
    #root > div,
    main {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        background: white !important;
        overflow: visible !important;
    }

    .print-area {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    table, figure, .break-inside-avoid {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .page-break-before {
        page-break-before: always;
        break-before: page;
    }

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
        break-after: avoid;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    th, td {
        border-color: #cbd5e1 !important;
    }

    .shadow-md, .shadow-sm, .shadow-lg, .shadow-\[0_4px_24px_rgba\(31\,12\,97\,0\.1\)\] {
        box-shadow: none !important;
    }
}