/* ===================================================== Mobile full-page filter panels (global) Self-contained styles — drawer is moved to on open ===================================================== */ @media (max-width: 991.98px) { /* Overlays */ .filter-overlay, .project-filter-overlay, .task-filter-overlay, .rpt-filter-overlay, .ur-filter-overlay, body > .filter-overlay, body > .project-filter-overlay, body > .task-filter-overlay, body > .rpt-filter-overlay, body > .ur-filter-overlay { position: fixed !important; inset: 0 !important; z-index: 20040 !important; } /* ---- Shared design tokens (detached from page wrapper) ---- */ .rpt-filters-drawer, .ur-filters-drawer, body > .rpt-filters-drawer, body > .ur-filters-drawer, .projects-filters-drawer:not(#filters_box), body > .projects-filters-drawer:not(#filters_box), .filter-sidebar, body > .filter-sidebar, .board-list-page .filter-sidebar, .kanban-page .filter-sidebar, .notion-list-page .filter-sidebar { --mf-ink: #0f172a; --mf-muted: #64748b; --mf-border: rgba(148, 163, 184, 0.28); --mf-surface: #ffffff; --mf-surface-2: #f8fafc; --mf-soft: #f1f5f9; --mf-brand: #0284c7; --mf-focus-border: #7dd3fc; --mf-focus-ring: rgba(14, 165, 233, 0.14); --mf-btn-primary: linear-gradient(135deg, #0369a1 0%, #0ea5e9 55%, #38bdf8 100%); --mf-btn-primary-shadow: 0 6px 18px rgba(14, 165, 233, 0.28); --mf-ghost-border: rgba(148, 163, 184, 0.35); --mf-ghost-ink: #334155; --mf-ghost-hover-bg: #e0f2fe; } /* ---- Layout: generic filter sidebars ---- */ .filter-sidebar, body > .filter-sidebar, .board-list-page .filter-sidebar, .kanban-page .filter-sidebar, .notion-list-page .filter-sidebar { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 20050 !important; background: var(--mf-surface-2) !important; color: var(--mf-ink) !important; transform: translate3d(100%, 0, 0); visibility: hidden; pointer-events: none; transition: transform 0.28s ease, visibility 0.28s ease !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex !important; flex-direction: column; } .filter-sidebar.active, body > .filter-sidebar.active, .board-list-page .filter-sidebar.active, .kanban-page .filter-sidebar.active, .notion-list-page .filter-sidebar.active { transform: translate3d(0, 0, 0) !important; visibility: visible !important; pointer-events: auto !important; } .filter-sidebar-header { flex: 0 0 auto; padding: 1rem !important; padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; } .filter-sidebar-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem !important; } .filter-sidebar-footer { flex: 0 0 auto; padding: 1rem !important; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; } /* ---- Layout: reports / projects-style drawers ---- */ .rpt-filters-drawer, .ur-filters-drawer, body > .rpt-filters-drawer, body > .ur-filters-drawer, .projects-filters-drawer:not(#filters_box), body > .projects-filters-drawer:not(#filters_box) { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 20050 !important; background: var(--mf-surface-2) !important; color: var(--mf-ink) !important; font-family: 'IRANSans', Tahoma, sans-serif; transform: translate3d(100%, 0, 0); visibility: hidden; pointer-events: none; transition: transform 0.28s ease, visibility 0.28s ease !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex !important; flex-direction: column; } .rpt-filters-drawer.active, .ur-filters-drawer.active, body > .rpt-filters-drawer.active, body > .ur-filters-drawer.active, .projects-filters-drawer:not(#filters_box).active, body > .projects-filters-drawer:not(#filters_box).active { transform: translate3d(0, 0, 0) !important; visibility: visible !important; pointer-events: auto !important; } /* Mobile header */ .rpt-filters-drawer .project-filter-mobile-header, .ur-filters-drawer .project-filter-mobile-header, .projects-filters-drawer:not(#filters_box) .project-filter-mobile-header, body > .rpt-filters-drawer .project-filter-mobile-header, body > .ur-filters-drawer .project-filter-mobile-header { display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; flex: 0 0 auto; padding: 0.85rem 1rem; padding-top: calc(0.85rem + env(safe-area-inset-top, 0px)); background: var(--mf-surface) !important; border-bottom: 1px solid var(--mf-border); } .rpt-filters-drawer .project-filter-mobile-header strong, .ur-filters-drawer .project-filter-mobile-header strong, .projects-filters-drawer:not(#filters_box) .project-filter-mobile-header strong { font-size: 1rem; font-weight: 700; color: var(--mf-ink); } .rpt-filters-drawer .pf-btn-ghost, .ur-filters-drawer .pf-btn-ghost, .projects-filters-drawer:not(#filters_box) .pf-btn-ghost, .rpt-filters-drawer #closeRptFiltersSidebar, .ur-filters-drawer #closeUrFiltersSidebar, .projects-filters-drawer:not(#filters_box) #closeRptFiltersSidebar { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.35rem; border: 1px solid var(--mf-border) !important; border-radius: 10px !important; background: var(--mf-surface-2) !important; color: var(--mf-ghost-ink) !important; font-size: 0.84rem !important; font-weight: 600; padding: 0.45rem 0.75rem !important; min-height: 40px; box-shadow: none !important; cursor: pointer; text-decoration: none; } /* Filter panel card */ .rpt-filters-drawer .projects-filters-panel, .ur-filters-drawer .projects-filters-panel, .projects-filters-drawer:not(#filters_box) .projects-filters-panel, body > .rpt-filters-drawer .projects-filters-panel, body > .ur-filters-drawer .projects-filters-panel { flex: 1 1 auto; margin: 0.85rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--mf-border) !important; border-radius: 14px !important; background: var(--mf-surface) !important; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); overflow: hidden; } .rpt-filters-drawer .projects-filters-panel .tn-panel__head, .ur-filters-drawer .projects-filters-panel .tn-panel__head, .projects-filters-drawer:not(#filters_box) .projects-filters-panel .tn-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--mf-border); background: linear-gradient(180deg, var(--mf-surface), var(--mf-surface-2)); } .rpt-filters-drawer .projects-filters-panel .tn-panel__title, .ur-filters-drawer .projects-filters-panel .tn-panel__title, .projects-filters-drawer:not(#filters_box) .projects-filters-panel .tn-panel__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--mf-ink); display: inline-flex; align-items: center; gap: 0.4rem; } .rpt-filters-drawer .projects-filters-panel .tn-panel__body, .ur-filters-drawer .projects-filters-panel .tn-panel__body, .projects-filters-drawer:not(#filters_box) .projects-filters-panel .tn-panel__body { padding: 1rem !important; } /* Form fields */ .rpt-filters-drawer .pf-field-label, .ur-filters-drawer .pf-field-label, .projects-filters-drawer:not(#filters_box) .pf-field-label, .filter-sidebar .filter-label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--mf-muted) !important; margin-bottom: 0.75rem !important; line-height: 1.45; } .rpt-filters-drawer .form-group, .ur-filters-drawer .form-group, .projects-filters-drawer:not(#filters_box) .form-group, .filter-sidebar .filter-group { margin-bottom: 1.25rem !important; } .rpt-filters-drawer .form-group:not(.d-flex) .form-control, .rpt-filters-drawer .form-group:not(.d-flex) .select2-container, .ur-filters-drawer .form-group:not(.d-flex) .form-control, .ur-filters-drawer .form-group:not(.d-flex) .select2-container, .projects-filters-drawer:not(#filters_box) .form-group:not(.d-flex) .form-control, .projects-filters-drawer:not(#filters_box) .form-group:not(.d-flex) .select2-container { margin-top: 0.15rem; width: 100% !important; } .rpt-filters-drawer .form-control, .ur-filters-drawer .form-control, .projects-filters-drawer:not(#filters_box) .form-control, .filter-sidebar-body .form-control, .filter-sidebar-body .filter-select, .filter-sidebar-body .board-filter-input, .filter-sidebar-body .board-filter-select { min-height: 44px !important; font-size: 16px !important; border-radius: 12px !important; border: 1px solid var(--mf-border) !important; background: var(--mf-surface) !important; color: var(--mf-ink) !important; padding: 0.55rem 0.85rem !important; width: 100%; } .rpt-filters-drawer .form-control:focus, .ur-filters-drawer .form-control:focus, .projects-filters-drawer:not(#filters_box) .form-control:focus, .filter-sidebar-body .form-control:focus { border-color: var(--mf-focus-border) !important; box-shadow: 0 0 0 3px var(--mf-focus-ring) !important; outline: none; background: var(--mf-surface) !important; color: var(--mf-ink) !important; } .rpt-filters-drawer .select2-container, .ur-filters-drawer .select2-container, .projects-filters-drawer:not(#filters_box) .select2-container { width: 100% !important; } .rpt-filters-drawer .select2-container .select2-selection--single, .rpt-filters-drawer .select2-container .select2-selection--multiple, .ur-filters-drawer .select2-container .select2-selection--single, .ur-filters-drawer .select2-container .select2-selection--multiple, .projects-filters-drawer:not(#filters_box) .select2-container .select2-selection--single, .projects-filters-drawer:not(#filters_box) .select2-container .select2-selection--multiple, .filter-sidebar-body .select2-container .select2-selection--single, .filter-sidebar-body .select2-container .select2-selection--multiple { min-height: 44px !important; border-radius: 12px !important; border-color: var(--mf-border) !important; background: var(--mf-surface) !important; } .rpt-filters-drawer .select2-container--default .select2-selection--single .select2-selection__rendered, .ur-filters-drawer .select2-container--default .select2-selection--single .select2-selection__rendered, .projects-filters-drawer:not(#filters_box) .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mf-ink); line-height: 42px; } /* Actions */ .rpt-filters-drawer .projects-filter-actions, .ur-filters-drawer .projects-filter-actions, .projects-filters-drawer:not(#filters_box) .projects-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin-top: 1rem; padding-top: 0.35rem; } .rpt-filters-drawer .pf-btn-save, .ur-filters-drawer .pf-btn-save, .projects-filters-drawer:not(#filters_box) .pf-btn-save, .rpt-filters-drawer button.pf-btn-save, .ur-filters-drawer button.pf-btn-save, .projects-filters-drawer:not(#filters_box) button.pf-btn-save, .rpt-filters-drawer button[type="submit"], .ur-filters-drawer button[type="submit"], .projects-filters-drawer:not(#filters_box) button[type="submit"] { display: inline-flex !important; align-items: center; justify-content: center; flex: 1 1 auto; border: 0 !important; border-radius: 12px !important; padding: 0.7rem 1.1rem !important; min-height: 48px !important; background: var(--mf-btn-primary) !important; color: #fff !important; font-weight: 700 !important; font-size: 0.92rem !important; line-height: 1.2; cursor: pointer; box-shadow: var(--mf-btn-primary-shadow) !important; text-decoration: none !important; } .rpt-filters-drawer .projects-filter-clear, .ur-filters-drawer .projects-filter-clear, .projects-filters-drawer:not(#filters_box) .projects-filter-clear { flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none; cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--mf-muted) !important; text-decoration: none; padding: 0.5rem 0.65rem; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .rpt-filters-drawer .projects-filter-clear:hover, .ur-filters-drawer .projects-filter-clear:hover, .projects-filters-drawer:not(#filters_box) .projects-filter-clear:hover { color: var(--mf-brand) !important; text-decoration: underline; background: transparent; } .rpt-filters-drawer .tn-badge, .ur-filters-drawer .tn-badge, .projects-filters-drawer:not(#filters_box) .tn-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: 0.2rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--mf-soft); color: #475569; } } /* Dark mode — drawer on body has no .reports-page ancestor */ html.dark .rpt-filters-drawer, html.dark .ur-filters-drawer, html.dark body > .rpt-filters-drawer, html.dark body > .ur-filters-drawer, html.dark .projects-filters-drawer:not(#filters_box), html.dark body > .projects-filters-drawer:not(#filters_box), html.dark .filter-sidebar, html.dark body > .filter-sidebar { --mf-ink: #e8eaf2; --mf-muted: #9aa3b8; --mf-border: rgba(148, 163, 255, 0.14); --mf-surface: #151c2e; --mf-surface-2: #121a2b; --mf-soft: #1c2740; --mf-brand: #38bdf8; --mf-focus-border: #38bdf8; --mf-focus-ring: rgba(56, 189, 248, 0.18); --mf-ghost-border: rgba(148, 163, 255, 0.2); --mf-ghost-ink: #cbd5e1; --mf-ghost-hover-bg: rgba(14, 165, 233, 0.14); box-shadow: none !important; } html.dark .rpt-filters-drawer .projects-filters-panel, html.dark .ur-filters-drawer .projects-filters-panel, html.dark .projects-filters-drawer:not(#filters_box) .projects-filters-panel { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } html.dark .rpt-filters-drawer .tn-badge, html.dark .ur-filters-drawer .tn-badge, html.dark .projects-filters-drawer:not(#filters_box) .tn-badge { background: var(--mf-soft); color: var(--mf-muted); }