/**
 * Urdu RTL Stylesheet (UPDATED)
 * Variable Fonts (WOFF2) - Self Hosted
 * Noto Nastaliq Urdu + Noto Naskh Arabic
 * Full RTL Support + Mobile Menu CSS Included
 */

/* ========================================
   FONT FACES - Self-hosted Variable Fonts
   Folder: assets/fonts/Urdu/
   IMPORTANT: File names are case-sensitive
   ======================================== */

@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('../fonts/Urdu/NotoNastaliqUrdu-VariableFont_wght.woff2') format('woff2');
    font-weight: 200 900; /* variable range */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('../fonts/Urdu/NotoNaskhArabic-VariableFont_wght.woff2') format('woff2');
    font-weight: 200 900; /* variable range */
    font-style: normal;
    font-display: swap;
}

/* ========================================
   GLOBAL RTL + FONT APPLICATION
   ======================================== */

html {
    direction: rtl;
}

body {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', Arial, sans-serif;
    direction: rtl;
    text-align: right;
    font-weight: 400;
}

/* Apply font + RTL to common elements */
h1, h2, h3, h4, h5, h6,
p, span, div, label,
input, select, textarea, button,
th, td, li {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', Arial, sans-serif;
    direction: rtl;
}

/* Links ko font mile, but LTR cheezen safe rahen */
a {
    font-family: inherit;
}

/* ========================================
   RTL LAYOUT ADJUSTMENTS
   ======================================== */

.float-left { float: right !important; }
.float-right { float: left !important; }

.text-left { text-align: right !important; }
.text-right { text-align: left !important; }

/* Margin/Padding RTL swaps (safe utilities) */
.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }

.ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }

.pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
.pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
.pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }

.pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
.pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
.pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }

/* ========================================
   FORMS RTL
   ======================================== */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    text-align: right;
    direction: rtl;
}

/* Select arrow RTL */
select {
    background-position: left 12px center;
    padding-left: 36px;
    padding-right: 12px;
}

/* Checkbox/Radio alignment */
input[type="checkbox"],
input[type="radio"] {
    margin-left: 8px;
    margin-right: 0;
}

/* ========================================
   TABLE RTL
   ======================================== */

table {
    direction: rtl;
}

th, td {
    text-align: right;
}

th.text-center, td.text-center { text-align: center; }
th.text-left, td.text-left { text-align: left; }

/* ========================================
   NAVIGATION RTL + DROPDOWN
   ======================================== */

.nav-links {
    direction: rtl;
}

.dropdown-menu {
    left: auto;
    right: 0;
}

/* Brand direction */
.brand {
    flex-direction: row-reverse;
}

.brand-title {
    text-align: right;
}

/* ========================================
   RESPONSIVE HEADER + MOBILE MENU
   (Works with app.js toggleMenu() adding/removing .active)
   ======================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
}

/* Mobile break */
@media (max-width: 940px) {
    .menu-toggle { display: block; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: rgba(10, 18, 38, 0.98);
        flex-direction: column;
        padding: 16px;
        border-bottom: 1px solid var(--card-border);
    }

    .nav-links.active { display: flex; }

    .nav-links a {
        padding: 12px 16px;
        border-radius: 8px;
        width: 100%;
        text-align: right;
    }

    .dropdown-menu {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding-right: 16px;
    }

    .nav-cta {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .nav-cta .btn { width: 100%; }
}

/* ========================================
   MODAL RTL
   ======================================== */

.modal { direction: rtl; text-align: right; }
.modal-header { flex-direction: row-reverse; }
.modal-close { margin-right: auto; margin-left: 0; }

/* ========================================
   CARDS & BUTTONS RTL
   ======================================== */

.card-header { flex-direction: row-reverse; }

.btn { direction: rtl; }
.btn svg,
.btn i {
    margin-left: 8px;
    margin-right: 0;
}

/* ========================================
   ALERTS / BADGES / PAGINATION RTL
   ======================================== */

.alert { text-align: right; direction: rtl; }
.badge { direction: rtl; }
.pagination { flex-direction: row-reverse; }

/* ========================================
   BREADCRUMB RTL
   ======================================== */

.breadcrumb { direction: rtl; }

.breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ========================================
   STATS/DASHBOARD RTL
   ======================================== */

.stat-card { text-align: right; }
.stats-grid { direction: rtl; }

/* ========================================
   FOOTER RTL
   ======================================== */

.footer-section {
    direction: rtl;
    text-align: right;
}

/* ========================================
   BUSINESS SUBTITLE STYLING
   ======================================== */

.business-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 4px;
    line-height: 1.4;
}

/* ========================================
   PRINT RTL
   ======================================== */

@media print {
    body { direction: rtl; }
    table { direction: rtl; }
    th, td { text-align: right; }
}

/* ========================================
   LTR DATA SAFETY (emails, numbers, codes)
   ======================================== */

.ltr-data,
.email-display,
.code-display,
.username-display {
    direction: ltr;
    display: inline-block;
    text-align: left;
    font-family: Arial, sans-serif; /* numbers readable */
}

/* Email inputs should be LTR */
input[type="email"] {
    direction: ltr;
    text-align: left;
}