/**
 * AHCF Salat Timings — Elementor widget CSS
 * Uses CSS custom properties emitted by the Elementor widget render() method.
 * Fallback values match the default preset so the widgets look correct even
 * on pages that don't use Elementor.
 *
 * @since 1.4.1
 */

/* ── Daily prayer times widget ─────────────────────────────────────── */

.ahcf-st-daily .xllentech_salat_widget {
    background: var(--ahcf-st-bg, rgba(0,0,0,0.28)) !important;
    backdrop-filter: blur(var(--ahcf-st-blur, 3px));
    -webkit-backdrop-filter: blur(var(--ahcf-st-blur, 3px));
    border-radius: 16px;
    padding: 25px;
    max-width: 420px;
    margin: 0 auto;
}

/* Strip any default table/widget styles */
.ahcf-st-daily .xllentech_salat_widget table,
.ahcf-st-daily .xllentech_salat_widget tbody,
.ahcf-st-daily .xllentech_salat_widget tr,
.ahcf-st-daily .xllentech_salat_widget td,
.ahcf-st-daily .xllentech_salat_widget th,
.ahcf-st-daily .xllentech_salat_widget div,
.ahcf-st-daily .xllentech_salat_widget span {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ahcf-st-daily .xllentech_salat_widget table {
    width: 100%;
    border-collapse: collapse;
}

/* Cells */
.ahcf-st-daily .xllentech_salat_widget td,
.ahcf-st-daily .xllentech_salat_widget th {
    color: var(--ahcf-st-name, #ffffff);
    font-family: Verdana, sans-serif;
    font-size: 16px;
    padding: 10px 8px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    text-align: left;
}

/* Prayer name column */
.ahcf-st-daily .xllentech_salat_widget td:first-child {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ahcf-st-name, #ffffff) !important;
}

/* Time column */
.ahcf-st-daily .xllentech_salat_widget td:last-child {
    text-align: right;
    font-weight: 800;
    font-size: 18px;
    color: var(--ahcf-st-time, #E9C522) !important;
}

/* Row dividers */
.ahcf-st-daily .xllentech_salat_widget tr:not(:last-child) td {
    border-bottom: 1px solid var(--ahcf-st-divider, rgba(255,255,255,0.12)) !important;
}

/* Widget title (h5 from the WP widget / ahcf-st-daily-title from shortcode) */
.ahcf-st-daily .xllentech_salat_widget h5,
.ahcf-st-daily .ahcf-st-daily-title {
    color: var(--ahcf-st-title, #E9C522) !important;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 18px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
}

/* Current prayer row — base styling only.
   Color and background are controlled entirely by the Elementor widget controls
   (Active Prayer Row — Background / Text) so they are NOT set here. */
.ahcf-st-daily .current-prayer-row td {
    border-radius: 6px;
}

/* Elementor widget controls set --ahcf-st-highlight-bg-user / --ahcf-st-highlight-fg-user
   on .ahcf-st-daily. [data-prayer] gives this rule higher specificity (0,3,1,1)
   than any user Custom CSS (max 0,2,0,1) so the variables always win. */
.ahcf-st-daily .current-prayer-row[data-prayer] td {
    background: var(--ahcf-st-highlight-bg-user, rgba(233,197,34,0.18)) !important;
    color:       var(--ahcf-st-highlight-fg-user, #ffffff) !important;
}

/* VIEW MONTHLY link */
.ahcf-st-daily .xllentech_salat_widget_link {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 8px;
    display: block;
}
.ahcf-st-daily .xllentech_salat_widget_link a {
    color: #E9C522;   /* default gold; overridden by Elementor Link Color control */
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
}
.ahcf-st-daily .xllentech_salat_widget_link a:hover {
    opacity: 1;
    text-decoration: none;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .ahcf-st-daily .xllentech_salat_widget {
        max-width: 92%;
        padding: 20px;
    }
    .ahcf-st-daily .xllentech_salat_widget h5,
    .ahcf-st-daily .ahcf-st-daily-title {
        font-size: 28px;
    }
    .ahcf-st-daily .xllentech_salat_widget td,
    .ahcf-st-daily .xllentech_salat_widget th {
        font-size: 15px;
        padding: 9px 6px;
    }
    .ahcf-st-daily .xllentech_salat_widget td:last-child {
        font-size: 16px;
    }
}

/* ── Unscoped rules — apply on shortcode pages AND inside Elementor widget ── */
/* These use plain selectors (no .ahcf-st-monthly scope) so they reach the
   [ahcf-salat-timings-monthly] shortcode on any page, not just the Elementor
   widget. The .ahcf-st-monthly scoped rules below override with CSS variables
   when the Elementor widget is present. */

.xst_monthly_table_Default .current-prayer-cell {
    background: #F4C430;
    color: #111827 !important;
    font-weight: 800;
    position: relative;
}
.xst_monthly_table_Default .current-prayer-cell::after {
    content: "Current";
    display: block;
    font-size: 10px;
    letter-spacing: 0.3px;
    margin-top: 2px;
    color: #111827;
    font-weight: 700;
}

/* data-label mobile accordion — already partially unscoped, made explicit here */
.xst_monthly_table_Default .mobile-prayer-card td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
}

/* ── Monthly timetable widget ───────────────────────────────────────── */
/* Color values are emitted by build_inline_style() as --ahcf-mn-TOKEN
   (intermediate vars) on the .ahcf-st-monthly wrapper inline style.
   Elementor controls write --ahcf-mn-TOKEN-user via render_type:'ui' selectors.
   This mirrors the daily widget's architecture exactly. */

/* Colors */
.ahcf-st-monthly .xst_monthly_table_Default              { background: var(--ahcf-mn-row-odd, #ffffff); }
.ahcf-st-monthly .xst_monthly_table_Default thead th     { background: var(--ahcf-mn-header-bg, #148F77) !important; color: var(--ahcf-mn-header-fg, #ffffff) !important; border-color: rgba(255,255,255,0.18); }
.ahcf-st-monthly .xst_monthly_table_Default tbody td     { color: var(--ahcf-mn-text, #1f2937) !important; border-bottom: 1px solid var(--ahcf-mn-border, #e5e7eb) !important; }
.ahcf-st-monthly .xst_monthly_table_Default tbody tr:nth-child(odd)  { background: var(--ahcf-mn-row-odd, #ffffff) !important; }
.ahcf-st-monthly .xst_monthly_table_Default tbody tr:nth-child(even) { background: var(--ahcf-mn-row-even, #f8fafc) !important; }
.ahcf-st-monthly .xst_monthly_table_Default tbody tr:hover            { background: var(--ahcf-mn-row-hover, #eef8f5) !important; }
.ahcf-st-monthly .xst_monthly_table_Default tbody tr.today-prayer-row,
.ahcf-st-monthly .xst_monthly_table_Default tbody tr.xst_present_day  { background: var(--ahcf-mn-today-bg, #fff7d6) !important; font-weight: bold; }
.ahcf-st-monthly .xst_monthly_table_Default tbody tr.today-prayer-row td { color: var(--ahcf-mn-today-fg, #111827) !important; }
.ahcf-st-monthly .xst_monthly_table_Default tbody td.current-prayer-cell { background: var(--ahcf-mn-current-bg, #F4C430) !important; color: var(--ahcf-mn-current-fg, #111827) !important; font-weight: 800; position: relative; }
.ahcf-st-monthly .current-prayer-cell::after                          { content: "Current"; display: block; font-size: 10px; letter-spacing: 0.3px; margin-top: 2px; color: var(--ahcf-mn-current-fg, #111827); font-weight: 700; }
/* ────────────────────────────────────────────────────────────────────────
   Nav buttons (<<, >>) — live inside .xllentech-salat-nav <th> cells
   COMPLETELY SEPARATE from print button styling to prevent cross-impact.
   ──────────────────────────────────────────────────────────────────────── */
.ahcf-st-monthly .xllentech-salat-nav input[type="submit"] {
    background: var(--ahcf-mn-nav-bg, #F4C430) !important;
    color: var(--ahcf-mn-nav-fg, #ffffff) !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    /* Constrain width so the button doesn't fill the entire <th> */
    width: auto;
    min-width: 60px;
    max-width: 100px;
    display: inline-block;
    transition: background 0.15s ease;
}
.ahcf-st-monthly .xllentech-salat-nav input[type="submit"]:hover {
    background: var(--ahcf-mn-nav-hover, #d9aa1f) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Print button — lives in its own <div> AFTER the <h2>, OUTSIDE the table.
   Independent from nav button styling.
   ──────────────────────────────────────────────────────────────────────── */
.ahcf-st-monthly .xst_print_button {
    /* Hidden by default; Elementor "Show Print Button" toggle reveals it */
    display: none;
    text-align: right;
    margin-bottom: 8px;
}
.ahcf-st-monthly .xst_print_button button {
    background: var(--ahcf-mn-nav-bg, #F4C430) !important;
    color: var(--ahcf-mn-nav-fg, #ffffff) !important;
    border: none !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
    transition: background 0.15s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.ahcf-st-monthly .xst_print_button button:hover,
.ahcf-st-monthly .xst_print_button button:focus,
.ahcf-st-monthly .xst_print_button button:active,
.ahcf-st-monthly .xst_print_button button:focus-visible {
    background: var(--ahcf-mn-nav-hover, #d9aa1f) !important;
    color: var(--ahcf-mn-nav-fg, #ffffff) !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Structure */
.ahcf-st-monthly > .xllentech_salat_timings {
    max-width: 1114px;
    margin: 10px auto 30px;
    padding: 10px;
}

/* Title defaults — overridden by Elementor Table Title controls */
.ahcf-st-monthly .xllentech_salat_timings h2 {
    text-align: center;
    font-size: 32px;
    margin: 0 0 20px;
    color: #0f172a;
    font-weight: 700;
}

/* Print instructions removed from PHP output; belt-and-suspenders hide */
.ahcf-st-monthly .xst_instructions { display: none; }
.ahcf-st-monthly .xst_monthly_table_Default {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    font-family: Arial, sans-serif;
}
.ahcf-st-monthly .xst_monthly_table_Default thead th {
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.ahcf-st-monthly .xst_monthly_table_Default tbody td {
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
}

/* data-label mobile accordion labels */
.ahcf-st-monthly .xllentech_salat_timings .mobile-prayer-card td[data-label]::before,
.xllentech_salat_timings .mobile-prayer-card td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    .ahcf-st-monthly > .xllentech_salat_timings {
        padding: 0;
        margin: 0 auto 20px;
        overflow-x: visible;
    }
    .ahcf-st-monthly .xst_monthly_table_Default {
        min-width: unset;
        width: 100%;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }
    .ahcf-st-monthly .xst_monthly_table_Default thead { display: none; }
    .ahcf-st-monthly .xst_monthly_table_Default,
    .ahcf-st-monthly .xst_monthly_table_Default tbody,
    .ahcf-st-monthly .xst_monthly_table_Default tr,
    .ahcf-st-monthly .xst_monthly_table_Default td { display: block; width: 100%; }
    .ahcf-st-monthly .mobile-prayer-card {
        background: var(--ahcf-mn-row-odd, #ffffff) !important;
        margin-bottom: 12px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        cursor: pointer;
    }
    .ahcf-st-monthly .mobile-card-header {
        background: var(--ahcf-mn-mobile-header-bg, #148F77) !important;
        color: var(--ahcf-mn-mobile-header-fg, #ffffff) !important;
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        font-weight: 700;
    }
    .ahcf-st-monthly .mobile-card-header strong,
    .ahcf-st-monthly .mobile-card-header span { color: var(--ahcf-mn-mobile-header-fg, #ffffff) !important; }
    .ahcf-st-monthly .mobile-prayer-card td {
        display: none;
        padding: 10px 16px;
        border-bottom: 1px solid var(--ahcf-mn-border, #e5e7eb);
        text-align: left;
        font-size: 14px;
        color: var(--ahcf-mn-text, #1f2937) !important;
        background: var(--ahcf-mn-row-odd, #ffffff) !important;
    }
    .ahcf-st-monthly .mobile-prayer-card td:first-child { display: block; padding: 0; border: none; }
    .ahcf-st-monthly .mobile-prayer-card.open td { display: flex; justify-content: space-between; }
    .ahcf-st-monthly .mobile-prayer-card.open td:first-child { display: block; }
    .ahcf-st-monthly .today-prayer-row .mobile-card-header {
        background: var(--ahcf-mn-today-header-bg, #F4C430) !important;
        color: var(--ahcf-mn-today-fg, #111827) !important;
    }
    .ahcf-st-monthly .today-prayer-row .mobile-card-header strong,
    .ahcf-st-monthly .today-prayer-row .mobile-card-header span { color: var(--ahcf-mn-today-fg, #111827) !important; }
    .ahcf-st-monthly .current-prayer-cell {
        background: var(--ahcf-mn-current-bg, #F4C430) !important;
        color: var(--ahcf-mn-current-fg, #111827) !important;
    }
}

/* ── Print styles ────────────────────────────────────────────────────── */
@media print {

    /* Standard US Letter paper, narrow margins for max usable area */
    @page { size: letter portrait; margin: 0.5in; }

    /* Preserve background colors where we DO want them (header row only) */
    * { -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important; }

    /* Force proper table layout — overrides the mobile block-display rules */
    .xst_monthly_table_Default                   { display: table !important; width: 100% !important; border-collapse: collapse !important; }
    .xst_monthly_table_Default thead             { display: table-header-group !important; }
    .xst_monthly_table_Default tbody             { display: table-row-group !important; }
    .xst_monthly_table_Default tr                { display: table-row !important; width: auto !important; }
    .xst_monthly_table_Default td,
    .xst_monthly_table_Default th               { display: table-cell !important; width: auto !important; padding: 6px 8px !important; font-size: 11pt !important; text-align: center !important; border: 1px solid rgba(0,0,0,0.15) !important; }
    .ahcf-st-monthly .xst_monthly_table_Default tbody td { color: #111 !important; background: transparent !important; }
    .ahcf-st-monthly .xst_monthly_table_Default tbody tr:nth-child(odd),
    .ahcf-st-monthly .xst_monthly_table_Default tbody tr:nth-child(even) { background: transparent !important; }

    /* Remove today row highlight — clean white background for print
       Higher specificity to beat the screen rules (which use a 0,3,0,2 selector) */
    .ahcf-st-monthly .xst_monthly_table_Default tbody tr.today-prayer-row,
    .ahcf-st-monthly .xst_monthly_table_Default tbody tr.xst_present_day { background: transparent !important; font-weight: normal !important; }
    .ahcf-st-monthly .xst_monthly_table_Default tbody tr.today-prayer-row td { color: #111 !important; font-weight: normal !important; }

    /* Remove current-prayer-cell highlight + "Current" label */
    .ahcf-st-monthly .xst_monthly_table_Default tbody td.current-prayer-cell { background: transparent !important; color: #111 !important; font-weight: normal !important; position: static !important; }
    .current-prayer-cell::after                  { content: none !important; display: none !important; }

    /* Hide mobile accordion header divs inside first td */
    .mobile-card-header                          { display: none !important; }

    /* Suppress data-label pseudo-elements (would double-label cells) */
    .xst_monthly_table_Default td[data-label]::before { content: none !important; }

    /* Header location bar — keep the teal colored band */
    .xst_monthly_table_Default thead tr.xllentech-salat-header th {
        background: var(--ahcf-mn-header-bg, #148F77) !important;
        color: var(--ahcf-mn-header-fg, #ffffff) !important;
        font-weight: 700 !important;
    }

    /* Hide nav forms; keep the month/year cell visible with header colors */
    .xst_monthly_table_Default tr.xllentech-salat-nav form { display: none !important; }
    .xst_monthly_table_Default tr.xllentech-salat-nav th {
        background: var(--ahcf-mn-header-bg, #148F77) !important;
        color: var(--ahcf-mn-header-fg, #ffffff) !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 12pt !important;
    }
    /* Collapse the two outer nav cells so month label spans full width */
    .xst_monthly_table_Default tr.xllentech-salat-nav th:first-child,
    .xst_monthly_table_Default tr.xllentech-salat-nav th:last-child { padding: 0 !important; width: 0 !important; overflow: hidden !important; }

    /* Hide interactive UI */
    .xst_print_button,
    .xst_instructions                            { display: none !important; }

    /* Clean wrapper and title */
    .xllentech_salat_timings                     { padding: 0 !important; margin: 0 !important; }
    .xllentech_salat_timings h2                  { text-align: center !important; font-size: 18pt !important; margin-bottom: 10px !important; color: #000 !important; }
}