@font-face {
    font-family: 'BYekanProject';
    src: url('../fonts/BYekan.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,
body,
button,
input,
textarea,
select,
option,
table,
th,
td,
a,
label,
div,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        'BYekanProject',
        Tahoma,
        Arial,
        sans-serif !important;
}
/* ======================================================================
   Global Mobile Safety Layer
   فقط CSS/ظاهر؛ بدون تغییر در PHP، JavaScript یا ساختار داده
   ====================================================================== */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .container,
    .container-fluid,
    .wrap,
    .page,
    .users-wrap,
    .guest-wrap,
    .home-shell {
        max-width: 100% !important;
    }

    .row {
        --bs-gutter-x: 1rem;
        max-width: 100%;
    }

    [class*="col-"] {
        min-width: 0;
    }

    .d-flex,
    .topbar,
    .hero-top,
    .head,
    .actions,
    .top-actions,
    .hero-actions {
        min-width: 0;
    }

    .btn,
    .btnx,
    .top-btn,
    .hero-btn {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Dashboard timeline: no forced desktop width on mobile */
    .timeline-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .timeline-inner {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .timeline-box,
    .selected-panel,
    .cardx,
    .card,
    .panel,
    .hero,
    .today-banner,
    .next-card,
    .google-panel,
    .route-box {
        max-width: 100%;
    }

    .meeting-title,
    .meeting-meta,
    .next-title,
    .next-info,
    .card-title,
    .card-subtitle,
    .user-name,
    .user-extra {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Home page fixed controls */
    .welcome-clock-tools input,
    .clock-alarm input {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .welcome-clock .clock-date {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* ======================================================================
   Mobile tables: تبدیل جدول‌های مدیریتی به کارت، بدون اسکرول افقی صفحه
   ====================================================================== */
@media (max-width: 700px) {
    .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .table-wrap > table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .table-wrap > table > thead {
        display: none !important;
    }

    .table-wrap > table > tbody,
    .table-wrap > table > tbody > tr,
    .table-wrap > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .table-wrap > table > tbody > tr {
        margin: 0 0 12px !important;
        padding: 8px 10px !important;
        border: 1px solid #e7ecf4 !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    .table-wrap > table > tbody > tr:last-child {
        margin-bottom: 0 !important;
    }

    .table-wrap > table > tbody > tr > td {
        min-width: 0 !important;
        padding: 8px 4px !important;
        border-bottom: 1px solid #edf1f6 !important;
        text-align: right !important;
        vertical-align: top !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .table-wrap > table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    /* Meeting list */
    .table-wrap > table.table-hover > tbody > tr > td {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    .table-wrap > table.table-hover > tbody > tr > td::before {
        font-weight: 800;
        color: #64748b;
        white-space: normal;
    }

    .table-wrap > table.table-hover > tbody > tr > td:nth-child(1)::before { content: "انتخاب"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(2)::before { content: "ردیف"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(3)::before { content: "جلسه"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(4)::before { content: "تاریخ"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(5)::before { content: "ساعت"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(6)::before { content: "مکان"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(7)::before { content: "وضعیت"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(8)::before { content: "مهمان"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(9)::before { content: "Google"; }
    .table-wrap > table.table-hover > tbody > tr > td:nth-child(10)::before { content: "عملیات"; }

    /* Users list */
    .table-wrap > table.table:not(.table-hover) > tbody > tr > td {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    .table-wrap > table.table:not(.table-hover) > tbody > tr > td::before {
        font-weight: 800;
        color: #64748b;
    }

    .table-wrap > table.table:not(.table-hover) > tbody > tr > td:nth-child(1)::before { content: "نام"; }
    .table-wrap > table.table:not(.table-hover) > tbody > tr > td:nth-child(2)::before { content: "ایمیل"; }
    .table-wrap > table.table:not(.table-hover) > tbody > tr > td:nth-child(3)::before { content: "نقش"; }
    .table-wrap > table.table:not(.table-hover) > tbody > tr > td:nth-child(4)::before { content: "وضعیت"; }
    .table-wrap > table.table:not(.table-hover) > tbody > tr > td:nth-child(5)::before { content: "تاریخ ایجاد"; }
    .table-wrap > table.table:not(.table-hover) > tbody > tr > td:nth-child(6)::before { content: "عملیات"; }

    .table-wrap .row-actions {
        min-width: 0 !important;
        width: 100% !important;
    }

    .table-wrap .row-actions .btn,
    .table-wrap .row-actions .btnx {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* ======================================================================
   Unified Project Button System — visual-only layer
   Shared by pages that load assets/css/main.css. Keeps native semantics,
   existing handlers, links, form submission and validation unchanged.
   ====================================================================== */
:root {
    --ui-btn-radius: 12px;
    --ui-btn-shadow: 0 3px 9px rgba(15, 23, 42, .09);
    --ui-btn-shadow-hover: 0 7px 16px rgba(15, 23, 42, .15);
    --ui-btn-primary: #2563eb;
    --ui-btn-primary-hover: #1d4ed8;
    --ui-btn-success: #15803d;
    --ui-btn-success-hover: #166534;
    --ui-btn-danger: #dc2626;
    --ui-btn-danger-hover: #b91c1c;
    --ui-btn-warning: #b45309;
    --ui-btn-neutral: #475569;
    --ui-btn-neutral-hover: #334155;
    --ui-btn-info: #0e7490;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"], .btn-group > .btn, .actions a, .actions button, .top-actions a, .top-actions button) {
    font-family: 'BYekanProject', 'B Yekan', BYekan, Tahoma, Arial, sans-serif !important;
    border-radius: var(--ui-btn-radius) !important;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"]) {
    box-shadow: var(--ui-btn-shadow);
    min-height: 36px;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"]):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    box-shadow: var(--ui-btn-shadow-hover);
    filter: brightness(.97);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"]):not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"]):focus-visible {
    outline: 3px solid rgba(59, 130, 246, .35) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12), var(--ui-btn-shadow) !important;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"]):is(:disabled, .disabled, [aria-disabled="true"]) {
    opacity: .55;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

/* Consistent semantic palette for common Bootstrap and project classes. */
:where(.btn-primary, .btnx.primary, .btn.primary, .button.primary) { background-color: var(--ui-btn-primary); border-color: var(--ui-btn-primary); color: #fff; }
:where(.btn-success, .btnx.success, .btn.green, .btn-success, .button.success) { background-color: var(--ui-btn-success); border-color: var(--ui-btn-success); color: #fff; }
:where(.btn-danger, .btnx.danger, .btn.red, .button.danger, .btn-delete) { background-color: var(--ui-btn-danger); border-color: var(--ui-btn-danger); color: #fff; }
:where(.btn-warning, .btnx.warning, .button.warning) { background-color: var(--ui-btn-warning); border-color: var(--ui-btn-warning); color: #fff; }
:where(.btn-secondary, .btnx.secondary, .btn.neutral, .button.secondary) { background-color: var(--ui-btn-neutral); border-color: var(--ui-btn-neutral); color: #fff; }
:where(.btn-info, .btnx.info, .button.info) { background-color: var(--ui-btn-info); border-color: var(--ui-btn-info); color: #fff; }

/* Small-screen actions wrap instead of overflowing their parent. */
.actions, .top-actions, .btn-toolbar, .button-row, .row-actions {
    gap: 8px;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    :where(.actions, .top-actions, .btn-toolbar, .button-row, .row-actions) > :where(button, .btn, .btnx, a.button) {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
@media (prefers-reduced-motion: reduce) {
    :where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .btnx, .button, a.button, [role="button"]) { transition: none !important; }
}