/* 
 * Saudi Calendar App WordPress Plugin Stylesheet
 * Custom container-query rules to fix responsiveness and layout issues across mobile and desktop.
 */

/* ==========================================================================
   COMMON RULES & LAYOUT RESET
   ========================================================================== */

/* Universal Container Styling & Container Query Registry */
.calendar-app-shortcode {
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    clear: both !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    font-family: 'Vazirmatn', 'Cairo', sans-serif !important;
    
    /* Register as a CSS Container to allow responsive queries based on its actual width */
    container-type: inline-size !important;
    container-name: calendar-container !important;
}

/* Ensure React root elements and DOM tree never collapse inside WordPress flex/grid columns */
#calendar-root {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

#calendar-root > div,
#app-root-frame {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

#app-main-content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 0 !important;
}

/* Hide the main app header completely to allow clean integration inside WordPress templates */
#app-header,
#brand-logo-trigger {
    display: none !important;
}

/* Reset layout container max widths */
.calendar-app-shortcode.calendar-app-shortcode--full {
    max-width: 1250px !important;
}
.calendar-app-shortcode.calendar-app-shortcode--converter {
    max-width: 500px !important;
}
.calendar-app-shortcode.calendar-app-shortcode--today {
    max-width: 800px !important;
}
.calendar-app-shortcode.calendar-app-shortcode--content {
    max-width: 1100px !important;
}

.calendar-app-shortcode--full,
.calendar-app-shortcode--content,
.calendar-app-shortcode--today,
.calendar-app-shortcode--converter {
    display: block !important;
    clear: both !important;
    padding: 12px !important;
}


/* ==========================================================================
   DEFAULT COMPACT STYLES (Under 650px Actual Container Width)
   ========================================================================== */

/* Compact padding inside the main workspace card for narrow container contexts */
#calendar-workspace {
    padding: 10px !important;
    border-radius: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure a strict 7-column layout and avoid collapses */
#month-days-container,
#weekday-cols-header {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#month-days-container {
    grid-auto-rows: auto !important;
}

/* Custom portrait styling for day cells in compact container views */
#month-days-container button[id^="day-cell-"],
#month-days-container div[id^="day-cell-empty-"] {
    min-height: 52px !important;
    aspect-ratio: 1 / 1.35 !important; /* Fixed elegant portrait aspect ratio so elements stack perfectly */
    height: auto !important;
    padding: 5px 3px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

/* Weekday columns header (e.g., Sat, Sun, Mon) font optimization */
#weekday-cols-header > div {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* Main Hijri numbers size inside active cells */
#month-days-container button[id^="day-cell-"] span.font-mono.font-extrabold {
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Compact spacing */
#month-days-container button[id^="day-cell-"] .mt-1 {
    margin-top: 1px !important;
}

/* Gregorian alternative dates layout at bottom of cell */
#month-days-container button[id^="day-cell-"] span.text-slate-400,
#month-days-container button[id^="day-cell-"] div.font-mono span,
#month-days-container button[id^="day-cell-"] span[class*="text-sky-"] {
    font-size: 8px !important;
    line-height: 1 !important;
}

/* Letter 'W' label and holiday dots formatting */
#month-days-container button[id^="day-cell-"] span.text-amber-500\/80,
#month-days-container button[id^="day-cell-"] span[class*="text-amber-"] {
    font-size: 7.5px !important;
}

#month-days-container button[id^="day-cell-"] div.bg-rose-500 {
    width: 4px !important;
    height: 4px !important;
}


/* ==========================================================================
   NAVIGATION ARROWS & VIEW SWITCH BUTTONS STYLE POLISH
   ========================================================================== */

/* Navigation navigation toolbar packing with clean margins */
#calendar-header-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    width: 100% !important;
}

#calendar-navigation {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    justify-content: space-between !important;
}

/* 1. Header Title Text and Subtitle Spacing */
#calendar-months-indicator {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: right !important; /* Beautiful RTL alignment */
    min-width: 0 !important;
}

#calendar-months-indicator h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #1e293b !important; /* Luxurious deep charcoal slate text */
    letter-spacing: -0.01em !important;
}
.dark #calendar-months-indicator h2 {
    color: #f8fafc !important;
}

#calendar-months-indicator > div {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0d9488 !important; /* Pure emerald/teal color for secondary text */
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

/* 2. Navigation Next & Prev Buttons Pill-Design Overrides */
#nav-arrows-group {
    border: 2px solid #cbd5e1 !important; /* Modern slate-300 borders instead of default heavy dark outline */
    border-radius: 9999px !important; /* Elegant perfect pill capsule */
    background-color: #ffffff !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.dark #nav-arrows-group {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: #0c0c0e !important;
}

#nav-arrows-group button {
    border-radius: 9999px !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #475569 !important; /* Neutral dark slate */
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dark #nav-arrows-group button {
    color: #cbd5e1 !important;
}

#nav-arrows-group button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
.dark #nav-arrows-group button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* 3. Navigation View Selection Segmented Control Polish */
#views-segmented-controls {
    border: 2px solid #cbd5e1 !important; /* Clean modern slate-300 borders */
    border-radius: 9999px !important; /* Smooth capsule container */
    background-color: #ffffff !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
}
.dark #views-segmented-controls {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: #0c0c0e !important;
}

#views-segmented-controls button {
    border-radius: 9999px !important; /* Beautiful rounded capsule pills for options */
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #64748b !important; /* Slate gray text for inactive choices */
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dark #views-segmented-controls button {
    color: #94a3b8 !important;
}

#views-segmented-controls button:hover {
    color: #0f172a !important;
}
.dark #views-segmented-controls button:hover {
    color: #ffffff !important;
}

/* Active tab state styled as a beautiful solid teal pill */
#views-segmented-controls button.bg-teal-600,
#views-segmented-controls button.bg-emerald-600,
#views-segmented-controls button[class*="bg-teal"],
#views-segmented-controls button[class*="bg-emerald"],
#views-segmented-controls button[class*="text-zinc-100"] {
    background-color: #009688 !important; /* High contrast custom Persian teal */
    color: #ffffff !important;
    box-shadow: 0 4px 10px -2px rgba(0, 150, 136, 0.3) !important;
}
.dark #views-segmented-controls button[class*="bg-teal"],
.dark #views-segmented-controls button[class*="bg-emerald"] {
    background-color: #009688 !important;
    color: #ffffff !important;
}

/* 4. REQUIREMENT: Hide "عرض اليوم" (Day view) button entirely */
#view-trigger-day {
    display: none !important;
}


/* ==========================================================================
   WORKSPACE & SIDEBAR LAYOUT (Based on Container Query Context, NOT Viewport)
   ========================================================================== */

#workspace-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}

#main-calendar-grid-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

#sidebar-widgets-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* If the actual available container layout is wide block (>= 900px), align side-by-side */
@container calendar-container (min-width: 900px) {
    #workspace-layout {
        flex-direction: row !important;
        align-items: start !important;
        flex-wrap: nowrap !important;
    }
    
    #main-calendar-grid-section {
        flex: 1 1 0% !important;
        width: auto !important;
        max-width: none !important;
    }
    
    #sidebar-widgets-section {
        width: 384px !important;
        min-width: 384px !important;
        max-width: 384px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
}


/* ==========================================================================
   DESKTOP STYLES (Enforced ONLY if Available Container Width >= 650px)
   ========================================================================== */
@container calendar-container (min-width: 650px) {
    /* Spacious workspace sizing */
    #calendar-workspace {
        padding: 24px !important;
        border-radius: 20px !important;
    }

    #month-days-container,
    #weekday-cols-header {
        gap: 8px !important;
    }

    /* Balanced aspect ratio for day cells on widescreen */
    #month-days-container button[id^="day-cell-"],
    #month-days-container div[id^="day-cell-empty-"] {
        aspect-ratio: 1.25 / 1 !important; /* Elegant widescreen square aspect ratio */
        min-height: 80px !important;
        max-height: 120px !important; /* Cap maximum height per cell */
        height: auto !important;
        padding: 12px 10px !important;
        border-radius: 12px !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #month-days-container button[id^="day-cell-"]:hover {
        transform: translateY(-2.5px) !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        border-color: rgba(148, 163, 184, 0.5) !important;
    }

    /* Desktop weekday font size */
    #weekday-cols-header > div {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* Beautiful bold Hijri typography with dynamic responsive scaling */
    #calendar-months-indicator h2 {
        font-size: 32px !important; /* Prominent headlines for desktop views */
    }

    #calendar-months-indicator > div {
        font-size: 13px !important;
    }

    #month-days-container button[id^="day-cell-"] span.font-mono.font-extrabold {
        font-size: 18px !important;
        font-weight: 800 !important;
    }

    /* Gregorian output sizes */
    #month-days-container button[id^="day-cell-"] span.text-slate-400,
    #month-days-container button[id^="day-cell-"] div.font-mono span,
    #month-days-container button[id^="day-cell-"] span[class*="text-sky-"] {
        font-size: 11px !important;
    }

    /* Header toolbar widescreen layout */
    #calendar-header-toolbar {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-bottom: 20px !important;
        width: 100% !important;
    }

    #calendar-navigation {
        width: auto !important;
        justify-content: flex-start !important;
    }
}


/* ==========================================================================
   REFERENCE INFO BOXES GRIDS (Based on Container Queries)
   ========================================================================== */

#reference-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    margin-top: 36px !important; /* Elegant spacing to prevent overlap with the calendar grid above */
}

@container calendar-container (min-width: 768px) {
    #reference-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@container calendar-container (min-width: 1000px) {
    #reference-info-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ==========================================================================
   TODAY CLOCK SHORTCODE OVERRIDES (saudi_calendar_today_clock)
   ========================================================================== */

/* Hide previous & next day navigation arrows container completely */
.calendar-app-shortcode--today #nav-arrows-group {
    display: none !important;
}

/* Hide month and week views option selector completely */
.calendar-app-shortcode--today #views-segmented-controls,
.calendar-app-shortcode--today #calendar-views-group {
    display: none !important;
}

/* Ensure the header text and current date layout look centered and clean */
.calendar-app-shortcode--today #calendar-header-toolbar {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.dark .calendar-app-shortcode--today #calendar-header-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.calendar-app-shortcode--today #calendar-navigation {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.calendar-app-shortcode--today #calendar-months-indicator {
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
}

.calendar-app-shortcode--today #calendar-months-indicator > div {
    justify-content: center !important;
}

/* ==========================================================================
   SELECTED COUNTRY BADGE STYLING (Green Border Accent)
   ========================================================================== */

#country-name-badge {
    background-color: #f0fdf4 !important; /* Extremely soft pristine green background */
    color: #15803d !important; /* Rich emerald dark text for high legibility */
    border: 2px solid #22c55e !important; /* Perfect vibrant green border requested */
    border-radius: 9999px !important; /* Beautiful rounded pill/capsule shape */
    padding: 3.5px 12px !important; /* Comfy padding that wraps the text beautifully */
    font-size: 10.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.08) !important;
    margin-top: 2px !important;
}

.dark #country-name-badge {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #4ade80 !important;
    border-color: #22c55e !important;
    box-shadow: none !important;
}

/* ==========================================================================
   DATE CONVERTER SPAACING FIX (Remove extra blank vertical space)
   ========================================================================== */
#date-converter-panel,
.calendar-app-shortcode--converter,
.calendar-app-shortcode--converter #calendar-root,
.calendar-app-shortcode--converter #app-root-frame,
.calendar-app-shortcode--converter #app-main-content {
    align-self: start !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
}

/* Collapse the HTML/Body height & bottom paddings when rendering the standalone converter card to make it fit-fit */
.calendar-app-shortcode--converter-wrap,
body:has(.calendar-app-shortcode--converter),
html:has(.calendar-app-shortcode--converter) {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 4px !important;
}

/* Ensure week start alert elements are inline on mobile as requested */
#week-start-alert {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}