/* ═══════════════════════════════════════════════════════════════

   SAYARATECH — Modern Professional Stylesheet

   Soft colors, smooth animations, RTL-ready

   ═══════════════════════════════════════════════════════════════ */



/* ─── Base Reset ─── */

html, body {

    font-family: 'Inter', 'Noto Kufi Arabic', 'Helvetica Neue', sans-serif;

    margin: 0; padding: 0;

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ─── RTL Support ─── */

[dir="rtl"] body { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; }

[dir="rtl"] .mud-drawer { right: 0; left: auto; }

/* Swap physical margin classes in RTL */

[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 4px !important; }

[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 8px !important; }

[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 12px !important; }

[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 16px !important; }

[dir="rtl"] .ml-12 { margin-left: 0 !important; margin-right: 48px !important; }

[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 4px !important; }

[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 8px !important; }

[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 12px !important; }

[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 16px !important; }



/* ─── RTL: MudBlazor comprehensive input fix ─── */



/* Force entire input control to RTL */

[dir="rtl"] .mud-input-control {

    direction: rtl !important;

}



/* Label: move to right side */

[dir="rtl"] .mud-input-control .mud-input-label,

[dir="rtl"] .mud-input-label,

[dir="rtl"] .mud-input-label-outlined,

[dir="rtl"] .mud-input-label-inputcontrol {

    left: auto !important;

    right: 0 !important;

    transform-origin: top right !important;

    text-align: right !important;

}



/* Outlined label: offset from right border */

[dir="rtl"] .mud-input-control-input-container > .mud-input-label-outlined,

[dir="rtl"] .mud-input-label.mud-input-label-outlined {

    right: 14px !important;

    left: auto !important;

}



/* Shrunk (floating) label position fix */

[dir="rtl"] .mud-input-label-outlined.mud-input-label-shrink {

    right: 12px !important;

    left: auto !important;

    transform-origin: top right !important;

}



/* Notch/legend for outlined: flip to right */

[dir="rtl"] .mud-input-outlined .mud-notchedoutline,

[dir="rtl"] .mud-notchedoutline {

    direction: rtl !important;

}

[dir="rtl"] .mud-notchedoutline legend,

[dir="rtl"] .mud-input-outlined .mud-notchedoutline legend {

    text-align: right !important;

    margin-left: 0 !important;

    margin-right: 10px !important;

    float: right !important;

}



/* Fieldset: flip the notch gap to the right */

[dir="rtl"] fieldset.mud-notchedoutline {

    padding-left: 8px !important;

    padding-right: 0 !important;

}



/* Input text: right aligned */

[dir="rtl"] .mud-input,

[dir="rtl"] .mud-input-slot,

[dir="rtl"] .mud-input > input,

[dir="rtl"] .mud-input > textarea {

    text-align: right !important;

    direction: rtl !important;

}



/* Outlined input padding: flip */

[dir="rtl"] .mud-input-outlined .mud-input-slot,

[dir="rtl"] .mud-input-outlined > input {

    padding-right: 14px !important;

    padding-left: 14px !important;

}



/* Adornments: flip sides */

[dir="rtl"] .mud-input-adornment-start {

    margin-right: 0 !important;

    margin-left: 8px !important;

}

[dir="rtl"] .mud-input-adornment-end {

    margin-left: 0 !important;

    margin-right: 8px !important;

}



/* Helper text & validation */

[dir="rtl"] .mud-input-helper-text {

    direction: rtl !important;

    text-align: right !important;

}

[dir="rtl"] .mud-input-error .mud-input-helper-text {

    text-align: right !important;

}



/* Counter text */

[dir="rtl"] .mud-input-control .mud-input-helper-text .mud-input-count {

    direction: ltr !important;

}



/* Select dropdown arrow */

[dir="rtl"] .mud-select .mud-input-adornment-end,

[dir="rtl"] .mud-select .mud-input-control .mud-input-adornment-end {

    margin-left: 0 !important;

    margin-right: auto !important;

}



/* Select: flip the icon to the left side */

[dir="rtl"] .mud-select .mud-input > .mud-input-slot {

    padding-right: 14px !important;

    padding-left: 32px !important;

}

[dir="rtl"] .mud-select .mud-input-adornment-end {

    position: absolute !important;

    left: 8px !important;

    right: auto !important;

}



/* Select list items in dropdown */

[dir="rtl"] .mud-list-item {

    direction: rtl !important;

    text-align: right !important;

}

[dir="rtl"] .mud-list-item .mud-list-item-text {

    text-align: right !important;

}



/* Flex row: browser natively reverses flex-direction:row when dir="rtl" is set.

   Do NOT set row-reverse here — that would double-reverse back to LTR order. */



/* Stack spacing: browser handles margin direction via dir="rtl" */



/* MudSpacer needs no change, but buttons with StartIcon */

[dir="rtl"] .mud-button-icon-start {

    margin-left: 8px !important;

    margin-right: -4px !important;

}



/* Checkbox / Switch labels: browser natively handles flex reversal via dir="rtl" */



/* Dialog */

[dir="rtl"] .mud-dialog-title {

    direction: rtl !important;

    text-align: right !important;

}

[dir="rtl"] .mud-dialog-actions {

    direction: rtl !important;

}

[dir="rtl"] .mud-dialog-content {

    direction: rtl !important;

}



/* Table */

[dir="rtl"] .mud-table-cell {

    text-align: right !important;

}

[dir="rtl"] .mud-table-head .mud-table-cell {

    text-align: right !important;

}



/* NumericField spinner buttons */

[dir="rtl"] .mud-input-numeric .mud-input-adornment-end {

    margin-left: 0 !important;

    margin-right: 4px !important;

}



/* DatePicker icon */

[dir="rtl"] .mud-picker .mud-input-adornment-end {

    margin-left: 0 !important;

    margin-right: auto !important;

}



/* ─── Sayaratech Card Component ─── */

.syt-card {

    border-radius: 16px !important;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;

    border: 1px solid rgba(0, 0, 0, 0.04);

    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    overflow: hidden;

    position: relative;

}

.syt-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);

    opacity: 0;

    transition: opacity 0.3s ease;

}

.syt-card:hover::before { opacity: 1; }



/* ─── KPI Card Variants ─── */

.syt-kpi {

    border-radius: 16px !important;

    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05) !important;

    border: none;

    transition: all 0.35s ease;

    position: relative;

    overflow: hidden;

}

.syt-kpi::after {

    content: '';

    position: absolute;

    top: -50%; right: -50%;

    width: 100%; height: 200%;

    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 60%);

    pointer-events: none;

}

.syt-kpi.kpi-blue    { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }

.syt-kpi.kpi-amber   { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #fff; }

.syt-kpi.kpi-emerald  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: #fff; }

.syt-kpi.kpi-rose     { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); color: #5a3e42; }

.syt-kpi.kpi-indigo   { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }



/* ─── Gradient Accent Bar (replaces sharp left border) ─── */

.syt-accent-bar {

    border-radius: 16px !important;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;

    position: relative;

    overflow: hidden;

    border: none;

}

.syt-accent-bar::before {

    content: '';

    position: absolute;

    top: 0; left: 0; bottom: 0;

    width: 4px;

    border-radius: 4px 0 0 4px;

}

[dir="rtl"] .syt-accent-bar::before { left: auto; right: 0; border-radius: 0 4px 4px 0; }

.syt-accent-bar.accent-indigo::before  { background: linear-gradient(180deg, #6366f1, #818cf8); }

.syt-accent-bar.accent-amber::before   { background: linear-gradient(180deg, #f59e0b, #fbbf24); }

.syt-accent-bar.accent-emerald::before { background: linear-gradient(180deg, #10b981, #34d399); }

.syt-accent-bar.accent-teal::before    { background: linear-gradient(180deg, #14b8a6, #5eead4); }



/* ─── Tables ─── */

.mud-table-row { cursor: pointer; }

.mud-table-head .mud-table-cell {

    font-weight: 600 !important;

    text-transform: uppercase;

    font-size: 0.7rem !important;

    letter-spacing: 0.5px;

    color: #94a3b8 !important;

    padding: 12px 16px !important;

}

.mud-table-body .mud-table-cell {

    padding: 10px 16px !important;

}

.mud-table-container {

    border-radius: 12px;

}

.mud-table-sort-label .mud-button-root {

    font-weight: 600 !important;

    text-transform: uppercase;

    font-size: 0.7rem !important;

    letter-spacing: 0.5px;

    color: #94a3b8 !important;

}

.mud-table-sort-label .mud-table-sort-label-icon {

    opacity: 0.4;

    transition: opacity 0.2s ease;

}

.mud-table-sort-label:hover .mud-table-sort-label-icon {

    opacity: 1;

}



/* ─── Section Headers ─── */

.syt-section-title {

    font-weight: 700;

    font-size: 1.5rem;

    color: #1e293b;

    letter-spacing: -0.02em;

}

.syt-section-subtitle {

    font-size: 0.875rem;

    color: #94a3b8;

    letter-spacing: 0;

}



/* ─── Chip / Badge Soft Styles ─── */

.syt-chip-soft {

    border-radius: 20px !important;

    font-weight: 500;

    font-size: 0.75rem;

}



/* ─── Custom Scrollbar ─── */

::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

::-webkit-scrollbar-thumb:hover { background: #94a3b8; }



/* ─── Ripple Effect ─── */

.syt-ripple { position: relative; overflow: hidden; }

.syt-ripple-wave {

    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.25);

    transform: scale(0);

    animation: syt-ripple-anim 0.6s ease-out;

    pointer-events: none;

}

@keyframes syt-ripple-anim {

    to { transform: scale(4); opacity: 0; }

}



/* ─── Page Transition ─── */

.syt-page-enter {

    animation: sytFadeUp 0.45s ease-out forwards;

}

@keyframes sytFadeUp {

    from { opacity: 0; transform: translateY(16px); }

    to   { opacity: 1; transform: none; }

}



/* ─── Drawer Styling ─── */

.mud-nav-link {

    border-radius: 10px !important;

    margin: 2px 8px !important;

    transition: all 0.2s ease !important;

}

.mud-nav-link.active {

    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08)) !important;

}



/* ─── Language Toggle Button ─── */

.syt-lang-btn {

    border-radius: 20px;

    padding: 4px 12px;

    font-size: 0.8rem;

    font-weight: 600;

    border: 1.5px solid rgba(255, 255, 255, 0.3);

    background: rgba(255, 255, 255, 0.1);

    color: inherit;

    cursor: pointer;

    transition: all 0.25s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}

.syt-lang-btn:hover {

    background: rgba(255, 255, 255, 0.2);

    border-color: rgba(255, 255, 255, 0.5);

}



/* ─── Avatar Soft Shadow ─── */

.mud-avatar { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }



/* ─── Shimmer Loading ─── */

.syt-shimmer {

    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);

    background-size: 200% 100%;

    animation: shimmer 1.5s ease-in-out infinite;

    border-radius: 8px;

}

@keyframes shimmer {

    0% { background-position: 200% 0; }

    100% { background-position: -200% 0; }

}



/* ─── Dark Mode Adjustments ─── */

.mud-theme-dark .syt-card {

    border-color: rgba(255, 255, 255, 0.06);

    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;

}

.mud-theme-dark .syt-section-title { color: #e2e8f0; }

.mud-theme-dark .syt-section-subtitle { color: #64748b; }

.mud-theme-dark .mud-table-head .mud-table-cell { color: #64748b !important; }



/* ─── Professional Dialog ─── */

.mud-dialog {

    border-radius: 16px !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),

                0 0 0 1px rgba(0, 0, 0, 0.03) !important;

    overflow: hidden;

}

.mud-dialog-title {

    display: flex !important;

    align-items: center !important;

    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);

    border-bottom: 1px solid rgba(99, 102, 241, 0.1);

    padding: 14px 24px !important;

}

.mud-dialog-content { padding: 24px !important; }

.mud-dialog-actions {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    background: linear-gradient(to right, #f8fafc, #f1f5f9);

    border-top: 1px solid rgba(0, 0, 0, 0.06);

    padding: 12px 24px !important;

    gap: 10px !important;

}



/* Dark mode dialogs */

.mud-theme-dark .mud-dialog {

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),

                0 0 0 1px rgba(255, 255, 255, 0.04) !important;

}

.mud-theme-dark .mud-dialog-title {

    background: linear-gradient(135deg, #1e293b 0%, #1e1b4b 100%);

    border-bottom-color: rgba(129, 140, 248, 0.12);

}

.mud-theme-dark .mud-dialog-actions {

    background: linear-gradient(to right, #1e293b, #1a1f35);

    border-top-color: rgba(255, 255, 255, 0.06);

}



/* Dialog title row — always inline */

.syt-dlg-title {

    display: flex !important;

    align-items: center !important;

    gap: 10px;

    flex: 1 1 auto;

    min-width: 0;

}

.syt-dlg-title .mud-typography { font-weight: 700; }



/* Dialog action buttons — no uppercase, rounded */

.mud-dialog-actions .mud-button-root {

    text-transform: none !important;

    border-radius: 10px !important;

    font-weight: 600 !important;

    letter-spacing: 0 !important;

    padding: 6px 20px !important;

    font-size: 0.875rem !important;

}



/* Delete confirmation body */

.syt-delete-body {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    padding: 20px 8px 8px;

}

.syt-delete-icon {

    width: 64px; height: 64px;

    border-radius: 50%;

    background: linear-gradient(135deg, #fef2f2, #fee2e2);

    display: flex; align-items: center; justify-content: center;

    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15);

}

.mud-theme-dark .syt-delete-icon {

    background: linear-gradient(135deg, #2d1b1b, #3b1c1c);

    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);

}



/* Warning body (reset password etc.) */

.syt-warn-body {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    padding: 20px 8px 8px;

}

.syt-warn-icon {

    width: 64px; height: 64px;

    border-radius: 50%;

    background: linear-gradient(135deg, #fffbeb, #fef3c7);

    display: flex; align-items: center; justify-content: center;

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);

}

.mud-theme-dark .syt-warn-icon {

    background: linear-gradient(135deg, #2d2611, #3b3015);

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);

}



/* ─── Blazor defaults ─── */

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid #e50000; }

.validation-message { color: #e50000; }

.blazor-error-boundary {

    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;

    padding: 1rem 1rem 1rem 3.7rem; color: white;

}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }