/* =============================================================================
   m-core.css — Reset, Utilities, Layout Shell
   ========================================================================== */

/* ─── Reset سبک (مخصوص بخش مدرن) ────────────────────────── */
.m-root *,
.m-root *::before,
.m-root *::after {
    box-sizing: border-box;
}

/* ─── Typography utilities ─────────────────────────────── */
.m-fs-xs   { font-size: var(--m-fs-xs); }
.m-fs-sm   { font-size: var(--m-fs-sm); }
.m-fs-base { font-size: var(--m-fs-base); }
.m-fs-lg   { font-size: var(--m-fs-lg); }
.m-fs-xl   { font-size: var(--m-fs-xl); }
.m-fs-2xl  { font-size: var(--m-fs-2xl); }
.m-fs-3xl  { font-size: var(--m-fs-3xl); }

.m-fw-normal   { font-weight: var(--m-fw-normal); }
.m-fw-medium   { font-weight: var(--m-fw-medium); }
.m-fw-semibold { font-weight: var(--m-fw-semibold); }
.m-fw-bold     { font-weight: var(--m-fw-bold); }

.m-text       { color: var(--m-text); }
.m-text-2     { color: var(--m-text-2); }
.m-text-muted { color: var(--m-text-muted); }
.m-text-faint { color: var(--m-text-faint); }

.m-text-gradient {
    background: var(--m-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.m-text-success { color: var(--m-success); }
.m-text-warning { color: var(--m-warning); }
.m-text-danger  { color: var(--m-danger); }
.m-text-info    { color: var(--m-info); }

.m-text-center  { text-align: center; }
.m-text-end     { text-align: end; }
.m-text-start   { text-align: start; }

.m-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Layout utilities ─────────────────────────────────── */
.m-flex      { display: flex; }
.m-iflex     { display: inline-flex; }
.m-block     { display: block; }
.m-iblock    { display: inline-block; }
.m-grid      { display: grid; }
.m-hidden    { display: none !important; }

.m-flex-col  { flex-direction: column; }
.m-flex-row  { flex-direction: row; }
.m-items-center  { align-items: center; }
.m-items-start   { align-items: flex-start; }
.m-items-end     { align-items: flex-end; }
.m-justify-center { justify-content: center; }
.m-justify-between { justify-content: space-between; }
.m-justify-start { justify-content: flex-start; }
.m-justify-end   { justify-content: flex-end; }
.m-flex-wrap     { flex-wrap: wrap; }
.m-flex-1        { flex: 1 1 0%; }
.m-flex-shrink-0 { flex-shrink: 0; }

.m-gap-1 { gap: var(--m-s-1); }
.m-gap-2 { gap: var(--m-s-2); }
.m-gap-3 { gap: var(--m-s-3); }
.m-gap-4 { gap: var(--m-s-4); }
.m-gap-5 { gap: var(--m-s-5); }
.m-gap-6 { gap: var(--m-s-6); }

/* margin & padding helpers (RTL-aware) */
.m-m-0  { margin: 0; }
.m-mt-0 { margin-top: 0; }
.m-mt-1 { margin-top: var(--m-s-1); }
.m-mt-2 { margin-top: var(--m-s-2); }
.m-mt-3 { margin-top: var(--m-s-3); }
.m-mt-4 { margin-top: var(--m-s-4); }
.m-mt-5 { margin-top: var(--m-s-5); }
.m-mt-6 { margin-top: var(--m-s-6); }
.m-mt-7 { margin-top: var(--m-s-7); }
.m-mt-8 { margin-top: var(--m-s-8); }
.m-mb-1 { margin-bottom: var(--m-s-1); }
.m-mb-2 { margin-bottom: var(--m-s-2); }
.m-mb-3 { margin-bottom: var(--m-s-3); }
.m-mb-4 { margin-bottom: var(--m-s-4); }
.m-mb-5 { margin-bottom: var(--m-s-5); }
.m-mb-6 { margin-bottom: var(--m-s-6); }

.m-p-0 { padding: 0; }
.m-p-2 { padding: var(--m-s-2); }
.m-p-3 { padding: var(--m-s-3); }
.m-p-4 { padding: var(--m-s-4); }
.m-p-5 { padding: var(--m-s-5); }
.m-p-6 { padding: var(--m-s-6); }

.m-w-full { width: 100%; }
.m-h-full { height: 100%; }
.m-max-w-full { max-width: 100%; }

/* ─── Round helpers ────────────────────────────────────── */
.m-r-sm  { border-radius: var(--m-r-sm); }
.m-r-md  { border-radius: var(--m-r-md); }
.m-r-lg  { border-radius: var(--m-r-lg); }
.m-r-xl  { border-radius: var(--m-r-xl); }
.m-r-full { border-radius: var(--m-r-full); }

/* ─── Scrollbar styling (تاریک) ────────────────────────── */
.m-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-2) transparent;
    -webkit-overflow-scrolling: touch;
}
.m-scroll-y::-webkit-scrollbar { width: 6px; }
.m-scroll-y::-webkit-scrollbar-track { background: transparent; }
.m-scroll-y::-webkit-scrollbar-thumb {
    background: var(--m-border-2);
    border-radius: 3px;
}
.m-scroll-y::-webkit-scrollbar-thumb:hover { background: var(--m-border-strong); }

.m-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.m-scroll-x::-webkit-scrollbar { display: none; }

/* ─── Animations ───────────────────────────────────────── */
@keyframes m-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes m-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes m-slide-down {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes m-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes m-sheet-down {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}
@keyframes m-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.4); }
    50%      { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
@keyframes m-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
@keyframes m-spin {
    to { transform: rotate(360deg); }
}

/* ─── Visibility helpers ───────────────────────────────── */
.m-only-mobile { display: none; }
.m-only-desktop { display: block; }

@media (max-width: 1199px) {
    .m-only-mobile  { display: block; }
    .m-only-desktop { display: none !important; }
    .m-only-mobile-flex { display: flex; }
    .m-only-mobile-iflex { display: inline-flex; }
}

/* ─── Focus visible (accessibility) ────────────────────── */
.m-focus-ring:focus-visible {
    outline: 2px solid var(--m-brand-400);
    outline-offset: 2px;
}

/* ─── Tap highlight removal ────────────────────────────── */
.m-tap-no-highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* ─── Loading skeleton ─────────────────────────────────── */
.m-skeleton {
    background: linear-gradient(
        90deg,
        var(--m-surface) 0%,
        var(--m-surface-2) 50%,
        var(--m-surface) 100%
    );
    background-size: 400px 100%;
    animation: m-shimmer 1.5s linear infinite;
    border-radius: var(--m-r-md);
}

/* ─── Divider ──────────────────────────────────────────── */
.m-divider {
    height: 1px;
    background: var(--m-border);
    margin: var(--m-s-4) 0;
    border: 0;
}

/* ─── Safe area paddings ───────────────────────────────── */
.m-safe-top    { padding-top: var(--m-safe-top); }
.m-safe-bottom { padding-bottom: var(--m-safe-bottom); }
.m-safe-x      { padding-left: var(--m-safe-left); padding-right: var(--m-safe-right); }

/* ─── Icon + text alignment ────────────────────────────── */
.m-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-s-2);
    line-height: 1;
}
.m-icon-text > svg,
.m-icon-text > img,
.m-icon-text__icon svg,
.m-icon-text__icon img {
    display: block;
    flex-shrink: 0;
}
.m-icon-text > span,
.m-icon-text__label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.m-icon-text-col {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}
.m-icon-text-col > svg,
.m-icon-text-col > img {
    display: block;
    flex-shrink: 0;
}
.m-icon-text-col > span,
.m-icon-text-col__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}