/* ===============================================
   Responsive Design — Glass UI, Mobile & Tablet
================================================ */

/* الشريط الجانبي: أضيق فقط أيقونات */
@media (max-width: 900px) {
    body { padding-right: 45px !important; }
}

/* الشريط العلوي: استجابته وتعويض ارتفاعه يُداران في topbar.css + topbar.js
   (قياس ديناميكي للارتفاع) — لا قواعد ثابتة هنا لتفادي التعارض. */

/* الحاويات والبطاقات */
@media (max-width: 900px) {
    .container { width: 99%; padding: 0 2px; }
    .card, .card-glass, .info-box, .season-card,
    .year-title, .results-header, .moon-card, .export-options, .input-card {
        padding: 1.05rem 0.4rem;
        border-radius: 11px;
        font-size: 0.97em;
    }
}

/* جداول التقويم */
@media (max-width: 820px) {
    .calendar-container { padding: 6px 0 10px 0; }
    .calendar-table th,
    .calendar-table td {
        min-width: 32px;
        max-width: 32px;
        height: 28px;
        font-size: 0.89em;
    }
    .calendar-header { font-size: 0.97em; padding: 0.5em 0.1em; }
    .calendar-nav a { font-size: 0.95em; padding: 2px 3px; }
}

/* النماذج (input, textarea, .btn) */
@media (max-width: 800px) {
    input, select, textarea {
        font-size: 0.93em;
        padding: 0.7rem 0.6rem;
    }
    .btn, button, input[type="submit"], input[type="button"] {
        padding: 0.7rem 1.3rem;
        font-size: 0.98em;
        border-radius: 11px;
    }
}

@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0.7em; }
    label { font-size: 0.98em; }
    .card-mini, .info-mini { padding: 0.8rem 0.6rem; border-radius: 9px; }
}

/* تحسين القوائم والعناوين */
@media (max-width: 700px) {
    h1 { font-size: 1.41rem; }
    h2 { font-size: 1.19rem; }
    h3 { font-size: 1.01rem; }
}

/* دعم التمرير الأفقي للجداول الطويلة أو القوائم */
@media (max-width: 600px) {
    .calendar-container,
    .container { overflow-x: auto; }
}

/* تحسين استجابة البطاقات الزجاجية الصغيرة */
@media (max-width: 440px) {
    .card, .card-glass, .info-box, .season-card,
    .year-title, .results-header, .moon-card, .export-options, .input-card,
    .container {
        padding: 0.15rem 0.02rem;
        border-radius: 8px;
        font-size: 0.90em;
    }
    .calendar-container { padding: 2px 0 5px 0; }
}