/* =============================================================
   ARADEL FINANCIAL KEY FIGURES
   File: /wp-content/mu-plugins/assets/aradel-fkf.css
   Scoped entirely to .ar-fkf — zero conflicts with other components
   Font: Nunito Sans (inherits from site)
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   TOKENS (local to module)
───────────────────────────────────────────────────────────── */
.ar-fkf {
    --fkf-font:            'Nunito Sans', sans-serif;

    /* Brand */
    --fkf-red:             #C1000F;
    --fkf-red-active:      #B2000F;
    --fkf-blue:            #01303A;

    /* Tab pills */
    --fkf-tab-active-bg:   #ECB0B5;
    --fkf-tab-idle-bg:     #D9E0E1;
    --fkf-tab-text:        #000000;

    /* Toggle icons */
    --fkf-icon-active:     #B2000F;
    --fkf-icon-idle:       #A8A5A5;

    /* Container */
    --fkf-border:          1px solid #5E5E5E;
    --fkf-radius:          8px;
    --fkf-radius-lg:       20px;

    /* Table */
    --fkf-tbl-head-bg:     #ECB0B5;
    --fkf-tbl-divider:     #e0e0e0;
    --fkf-tbl-font-val:    16px;
    --fkf-tbl-font-head:   16px;

    /* Spacing */
    --fkf-pad-h:           40px;
    --fkf-pad-v:           32px;
    --fkf-gap:             24px;

    /* Timing */
    --fkf-ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --fkf-dur:             0.25s;
}


/* ─────────────────────────────────────────────────────────────
   SECTION WRAPPER  — matches site padding rhythm
   Place [ar_financial_key_figures] inside a Bricks section.
   .ar-fkf-section is output by the shortcode wrapper div;
   the inner .ar-fkf is the bordered card.
───────────────────────────────────────────────────────────── */
.ar-fkf-section {
    max-width:     1440px;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  112px;
    padding-right: 112px;
    padding-bottom: 96px;
    box-sizing:    border-box;
}

@media (max-width: 1024px) {
    .ar-fkf-section {
        padding-left:  64px;
        padding-right: 64px;
        padding-bottom: 72px;
    }
}

@media (max-width: 768px) {
    .ar-fkf-section {
        padding-left:  24px;
        padding-right: 24px;
        padding-bottom: 48px;
    }
}

/* ─────────────────────────────────────────────────────────────
   OUTER WRAPPER  (bordered card)
───────────────────────────────────────────────────────────── */
.ar-fkf {
    font-family:    var(--fkf-font);
    font-size:      16px;
    color:          #1a1a1a;
    background:     #ffffff;
    border:         var(--fkf-border);
    border-radius:  var(--fkf-radius);
    padding:        var(--fkf-pad-v) var(--fkf-pad-h);
    box-sizing:     border-box;
    position:       relative;
    /* overflow: hidden removed — it clips ApexCharts bar edges at card boundary */
}

.ar-fkf__no-data {
    font-size:  15px;
    color:      #666;
    padding:    24px 0;
    margin:     0;
}


/* ─────────────────────────────────────────────────────────────
   MAIN TABS
───────────────────────────────────────────────────────────── */
.ar-fkf__tabs {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
    margin-bottom:         28px;
}

.ar-fkf__tab {
    /* Reset */
    -webkit-appearance: none;
    appearance:         none;
    border:             none;
    cursor:             pointer;
    outline:            none;

    /* Pill shape */
    display:            flex;
    align-items:        center;
    justify-content:    center;
    padding:            14px 20px;
    border-radius:      var(--fkf-radius-lg);
    background:         var(--fkf-tab-idle-bg);

    /* Typography */
    font-family:        var(--fkf-font);
    font-size:          15px;
    font-weight:        700;
    letter-spacing:     1.2px;
    text-transform:     uppercase;
    color:              var(--fkf-tab-text);
    line-height:        1.2;

    transition:         background var(--fkf-dur) var(--fkf-ease),
                        transform  var(--fkf-dur) var(--fkf-ease);
}

.ar-fkf__tab:hover:not(.ar-fkf__tab--active) {
    background: color-mix(in srgb, var(--fkf-tab-idle-bg) 80%, #000 20%);
}

.ar-fkf__tab--active {
    background: var(--fkf-tab-active-bg);
}

.ar-fkf__tab:focus-visible {
    outline:        2px solid var(--fkf-red);
    outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
   CONTENT PANELS
───────────────────────────────────────────────────────────── */
.ar-fkf__panel {
    display: block;
}

.ar-fkf__panel[hidden] {
    display: none;
}


/* ─────────────────────────────────────────────────────────────
   TOOLBAR  (sub-tabs + view toggle row)
───────────────────────────────────────────────────────────── */
.ar-fkf__toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   20px;
    flex-wrap:       wrap;
}

/* Panel label (Balance Sheet / Cash Flow — no sub-tabs) */
.ar-fkf__panel-label {
    font-family:    var(--fkf-font);
    font-size:      18px;
    font-weight:    600;
    color:          #1a1a1a;
    letter-spacing: 0.01em;
}


/* ─────────────────────────────────────────────────────────────
   SUB-TABS  (Income Statement / Revenue Breakdown)
───────────────────────────────────────────────────────────── */
.ar-fkf__subtabs {
    display:  flex;
    gap:      8px;
    flex-wrap: wrap;
}

.ar-fkf__subtab {
    /* Reset */
    -webkit-appearance: none;
    appearance:         none;
    border:             none;
    cursor:             pointer;
    outline:            none;

    padding:        8px 20px;
    border-radius:  var(--fkf-radius-lg);
    background:     transparent;
    border:         2px solid transparent;

    font-family:    var(--fkf-font);
    font-size:      14px;
    font-weight:    600;
    letter-spacing: 0.5px;
    color:          #555;

    transition: color       var(--fkf-dur) var(--fkf-ease),
                border-color var(--fkf-dur) var(--fkf-ease),
                background  var(--fkf-dur) var(--fkf-ease);
}

.ar-fkf__subtab:hover:not(.ar-fkf__subtab--active) {
    color:            var(--fkf-blue);
    border-color:     var(--fkf-tab-divider, #D9E0E1);
    background:       #f5f5f5;
}

.ar-fkf__subtab--active {
    color:        var(--fkf-red);
    border-color: var(--fkf-red);
    background:   #fff5f5;
}

.ar-fkf__subtab:focus-visible {
    outline:        2px solid var(--fkf-red);
    outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
   VIEW TOGGLE  (graph / table icons)
───────────────────────────────────────────────────────────── */
.ar-fkf__view-toggle {
    display:    flex;
    gap:        6px;
    flex-shrink: 0;
}

.ar-fkf__view-btn {
    /* Reset */
    -webkit-appearance: none;
    appearance:         none;
    border:             none;
    cursor:             pointer;
    outline:            none;

    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   8px;
    background:      #f0f0f0;
    color:           var(--fkf-icon-idle);

    transition: color       var(--fkf-dur) var(--fkf-ease),
                background  var(--fkf-dur) var(--fkf-ease);
}

.ar-fkf__view-btn svg {
    display: block;
    fill:    currentColor;
}

.ar-fkf__view-btn:hover:not(.ar-fkf__view-btn--active) {
    color:      #666;
    background: #e4e4e4;
}

.ar-fkf__view-btn--active {
    color:      var(--fkf-icon-active);
    background: #fce8e8;
}

.ar-fkf__view-btn:focus-visible {
    outline:        2px solid var(--fkf-red);
    outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
   SUB-PANELS
───────────────────────────────────────────────────────────── */
.ar-fkf__subpanel {
    display: block;
}

.ar-fkf__subpanel[hidden] {
    display: none;
}


/* ─────────────────────────────────────────────────────────────
   CHART CONTAINER
───────────────────────────────────────────────────────────── */
.ar-fkf__chart-wrap {
    width:         100%;
    position:      relative;
    margin-bottom: 0;
    min-height:    360px;
}

.ar-fkf__chart-wrap[hidden] {
    display: none;
}

.ar-fkf__chart {
    width:  100%;
    min-height: 360px;
}

/* ApexCharts override — ensure no overflow clipping */
.ar-fkf__chart .apexcharts-canvas {
    overflow: visible;
}

/* Tooltip style override to match Aradel palette */
.ar-fkf__chart .apexcharts-tooltip {
    font-family:   var(--fkf-font) !important;
    font-size:     13px !important;
    border:        1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow:    0 4px 16px rgba(0,0,0,0.10) !important;
}

.ar-fkf__chart .apexcharts-tooltip-title {
    font-weight:     700 !important;
    background:      #f7f7f7 !important;
    border-bottom:   1px solid #e8e8e8 !important;
    padding:         7px 12px !important;
    font-size:       13px !important;
}

.ar-fkf__chart .apexcharts-tooltip-series-group {
    padding: 5px 12px !important;
}

/* X-axis label style */
.ar-fkf__chart .apexcharts-xaxis-label text {
    font-family: var(--fkf-font) !important;
    font-size:   13px !important;
    fill:        #555 !important;
}

/* Y-axis label style */
.ar-fkf__chart .apexcharts-yaxis-label text {
    font-family: var(--fkf-font) !important;
    font-size:   12px !important;
    fill:        #888 !important;
}

/* Legend text */
.ar-fkf .apexcharts-legend-text {
    font-family: var(--fkf-font) !important;
    font-size:   13px !important;
    color:       #333 !important;
}

/* Total Assets hover handled natively by ApexCharts via markers.hover config */


/* ─────────────────────────────────────────────────────────────
   TABLE WRAPPER  (horizontal scroll + sticky first col)
───────────────────────────────────────────────────────────── */
.ar-fkf__table-wrap {
    width:         100%;
    margin-bottom: 0;
}

.ar-fkf__table-wrap[hidden] {
    display: none;
}

.ar-fkf__tbl-scroll-wrap {
    width:      100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* Subtle scroll indicator shadow on right */
    background:
        linear-gradient(to right,  #fff 20px, transparent 20px),
        linear-gradient(to left,   #fff 20px, transparent 20px) 100% 0,
        radial-gradient(ellipse at left,  rgba(0,0,0,0.08) 0%, transparent 70%),
        radial-gradient(ellipse at right, rgba(0,0,0,0.08) 0%, transparent 70%) 100% 0;
    background-repeat: no-repeat;
    background-color:  #fff;
    background-size:   20px 100%, 20px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}


/* ─────────────────────────────────────────────────────────────
   TABLE
───────────────────────────────────────────────────────────── */
.ar-fkf__tbl {
    width:           100%;
    min-width:       560px;
    border-collapse: collapse;
    border-spacing:  0;
    font-family:     var(--fkf-font);
    font-size:       var(--fkf-tbl-font-val);
    table-layout:    auto;
}

/* Column widths */
.ar-fkf__col-label {
    width: 280px;
    min-width: 220px;
}

.ar-fkf__col-year {
    min-width: 110px;
}

/* ── Head row ── */
.ar-fkf__tbl-head-row {
    background: var(--fkf-tbl-head-bg);
}

.ar-fkf__tbl-th {
    font-family:     var(--fkf-font);
    font-size:       var(--fkf-tbl-font-head);
    font-weight:     700;
    color:           #1a1a1a;
    padding:         14px 16px;
    text-align:      left;
    white-space:     nowrap;
    border:          none;
}

.ar-fkf__tbl-th--year {
    text-align: right;
}

/* Sticky first column header */
.ar-fkf__tbl-th--label {
    position:   sticky;
    left:       0;
    z-index:    2;
    background: var(--fkf-tbl-head-bg);
}

/* ── Body rows ── */
.ar-fkf__tbl-row {
    border-bottom: 1px solid var(--fkf-tbl-divider);
    transition:    background var(--fkf-dur) var(--fkf-ease);
}

.ar-fkf__tbl-row:last-child {
    border-bottom: none;
}

.ar-fkf__tbl-row:hover {
    background: #fafafa;
}

.ar-fkf__tbl-td {
    font-family: var(--fkf-font);
    font-size:   var(--fkf-tbl-font-val);
    color:       #1a1a1a;
    padding:     16px 16px;
    border:      none;
    vertical-align: middle;
}

/* ── Label cell ── */
.ar-fkf__tbl-td--label {
    font-weight:  700;
    white-space:  nowrap;
    position:     sticky;
    left:         0;
    background:   #fff;
    z-index:      1;
    display:      flex;
    align-items:  center;
    gap:          10px;
    min-width:    220px;

    /* Keep sticky bg in sync with row hover */
    transition:   background var(--fkf-dur) var(--fkf-ease);
}

.ar-fkf__tbl-row:hover .ar-fkf__tbl-td--label {
    background: #fafafa;
}

/* Colour dot next to label */
.ar-fkf__row-dot {
    display:       inline-block;
    flex-shrink:   0;
    width:         10px;
    height:        10px;
    border-radius: 50%;
}

/* ── Value cells ── */
.ar-fkf__tbl-td--val {
    text-align: right;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* ── Null dash ── */
.ar-fkf__tbl-null {
    color:       #bbb;
    font-weight: 400;
}

/* ── Hidden year column (via JS year filter) ── */
.ar-fkf__tbl th.ar-fkf__year-hidden,
.ar-fkf__tbl td.ar-fkf__year-hidden {
    display: none;
}


/* ─────────────────────────────────────────────────────────────
   FILTERS AREA
───────────────────────────────────────────────────────────── */
.ar-fkf__filters {
    margin-top:     28px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.ar-fkf__filter-row {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px 16px;
    align-items: center;
}

/* Hide category filter row when disabled (table view) */
.ar-fkf__filter-row--categories.ar-fkf--cats-hidden {
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ── Filter item (label wrapper) ── */
.ar-fkf__filter-item {
    display:     flex;
    align-items: center;
    gap:         7px;
    cursor:      pointer;
    user-select: none;
    line-height: 1;
}

/* ── Checkbox ── */
.ar-fkf__checkbox {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           18px;
    height:          18px;
    border-radius:   4px;
    border:          2px solid var(--cb-color, #C1000F);
    background:      transparent;
    flex-shrink:     0;
    cursor:          pointer;
    transition:      background var(--fkf-dur) var(--fkf-ease),
                     border-color var(--fkf-dur) var(--fkf-ease);
    position:        relative;
}

.ar-fkf__checkbox--checked {
    background: var(--cb-color, #C1000F);
}

.ar-fkf__check-icon {
    display:    block;
    width:      10px;
    height:     10px;
    color:      #fff;
    opacity:    0;
    transition: opacity var(--fkf-dur) var(--fkf-ease);
    pointer-events: none;
}

.ar-fkf__checkbox--checked .ar-fkf__check-icon {
    opacity: 1;
}

/* Focus ring on keyboard nav */
.ar-fkf__checkbox:focus-visible {
    outline:        2px solid var(--cb-color, #C1000F);
    outline-offset: 2px;
}

/* ── Filter label text ── */
.ar-fkf__filter-label {
    font-family: var(--fkf-font);
    font-size:   14px;
    font-weight: 500;
    color:       #333;
    line-height: 1.3;
}

/* "All" checkbox uses red as its colour */
.ar-fkf__checkbox--all {
    --cb-color: #C1000F;
}


/* ─────────────────────────────────────────────────────────────
   EXPORT BAR
───────────────────────────────────────────────────────────── */
.ar-fkf__export-bar {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             16px;
    margin-top:      24px;
    padding-top:     20px;
    border-top:      1px solid #ebebeb;
    flex-wrap:       wrap;
}

/* Notes */
.ar-fkf__notes {
    flex:       1;
    min-width:  0;
}

.ar-fkf__note {
    font-size:  13px;
    color:      #777;
    margin:     0 0 4px;
    line-height: 1.4;
}

.ar-fkf__note:last-child {
    margin-bottom: 0;
}

/* Export icon buttons */
.ar-fkf__export-icons {
    display:     flex;
    gap:         8px;
    flex-shrink: 0;
    flex-wrap:   wrap;
    justify-content: flex-end;
}

.ar-fkf__export-btn {
    /* Reset */
    -webkit-appearance: none;
    appearance:         none;
    border:             none;
    cursor:             pointer;
    outline:            none;

    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    padding:         8px 12px;
    border-radius:   8px;
    background:      #f4f4f4;
    color:           #555;

    font-family:     var(--fkf-font);
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.4px;
    text-transform:  uppercase;
    line-height:     1;

    min-width:       52px;

    transition: color       var(--fkf-dur) var(--fkf-ease),
                background  var(--fkf-dur) var(--fkf-ease);
}

.ar-fkf__export-btn svg {
    display: block;
    flex-shrink: 0;
}

.ar-fkf__export-btn:hover {
    background: var(--fkf-tab-active-bg);
    color:      var(--fkf-blue);
}

.ar-fkf__export-btn:active {
    transform: scale(0.96);
}

.ar-fkf__export-btn:focus-visible {
    outline:        2px solid var(--fkf-red);
    outline-offset: 2px;
}

/* Loading state during export */
.ar-fkf__export-btn[aria-busy="true"] {
    opacity:        0.6;
    pointer-events: none;
    cursor:         wait;
}


/* ─────────────────────────────────────────────────────────────
   EXPORT WRAPPER  (hidden — captured by html2canvas)
───────────────────────────────────────────────────────────── */
.ar-fkf__export-wrapper {
    position:    absolute;
    left:        -9999px;
    top:         0;
    width:       900px;
    padding:     32px 40px;
    background:  #fff;
    font-family: var(--fkf-font);
    box-sizing:  border-box;
}

.ar-fkf__export-header {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--fkf-tbl-head-bg);
    padding-bottom: 14px;
}

.ar-fkf__export-title {
    font-size:   22px;
    font-weight: 700;
    color:       #1a1a1a;
    margin:      0 0 4px;
}

.ar-fkf__export-unit {
    font-size:  13px;
    color:      #777;
    margin:     0;
}

.ar-fkf__export-chart-slot {
    margin-bottom: 24px;
}

.ar-fkf__export-chart-slot img {
    width:  100%;
    height: auto;
    display: block;
}

.ar-fkf__export-table-slot {
    margin-bottom: 20px;
    font-size:     13px;
}

/* Make export table more compact */
.ar-fkf__export-table-slot .ar-fkf__tbl {
    font-size: 12px;
    min-width: unset;
}

.ar-fkf__export-table-slot .ar-fkf__tbl-th,
.ar-fkf__export-table-slot .ar-fkf__tbl-td {
    padding: 8px 10px;
}

/* Disable sticky in export (no scroll context) */
.ar-fkf__export-table-slot .ar-fkf__tbl-th--label,
.ar-fkf__export-table-slot .ar-fkf__tbl-td--label {
    position: static;
}

.ar-fkf__export-filter-summary {
    font-size:  12px;
    color:      #555;
    padding-top: 12px;
    border-top: 1px solid #ebebeb;
}

.ar-fkf__export-filter-summary p {
    margin: 0 0 4px;
}


/* ─────────────────────────────────────────────────────────────
   PRINT STYLES
───────────────────────────────────────────────────────────── */
@media print {
    /* Hide everything except the export wrapper */
    body > * {
        display: none !important;
    }

    .ar-fkf__print-frame {
        display:  block !important;
        position: static !important;
        left:     auto !important;
        width:    100% !important;
        padding:  20px !important;
    }

    /* Prevent page break inside table rows */
    .ar-fkf__tbl-row {
        page-break-inside: avoid;
    }
}


/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ar-fkf__tab,
    .ar-fkf__subtab,
    .ar-fkf__view-btn,
    .ar-fkf__checkbox,
    .ar-fkf__check-icon,
    .ar-fkf__export-btn,
    .ar-fkf__tbl-row {
        transition: none !important;
    }


}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET  (≤ 1024px)
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ar-fkf {
        --fkf-pad-h: 28px;
        --fkf-pad-v: 28px;
    }

    .ar-fkf__tabs {
        gap: 8px;
    }

    .ar-fkf__tab {
        font-size:      13px;
        letter-spacing: 0.9px;
        padding:        12px 14px;
    }

    .ar-fkf__col-label {
        width:     220px;
        min-width: 180px;
    }
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE  (≤ 768px)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ar-fkf {
        --fkf-pad-h:      20px;
        --fkf-pad-v:      20px;
        --fkf-tbl-font-val:  14px;
        --fkf-tbl-font-head: 14px;
    }

    /* Tabs stack to 1 column on very small screens */
    .ar-fkf__tabs {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ar-fkf__tab {
        font-size:  13px;
        padding:    12px 16px;
    }

    .ar-fkf__toolbar {
        gap: 10px;
    }

    .ar-fkf__subtabs {
        flex-wrap: wrap;
        gap:       6px;
    }

    .ar-fkf__subtab {
        font-size: 13px;
        padding:   7px 14px;
    }

    /* Chart height reduction on mobile */
    .ar-fkf__chart-wrap,
    .ar-fkf__chart {
        min-height: 280px;
    }

    /* Table font */
    .ar-fkf__tbl {
        font-size: 13px;
    }

    .ar-fkf__tbl-th,
    .ar-fkf__tbl-td {
        padding: 11px 10px;
    }

    .ar-fkf__col-label {
        width:     180px;
        min-width: 160px;
    }

    /* Export bar stacks */
    .ar-fkf__export-bar {
        flex-direction: column;
        align-items:    flex-start;
    }

    .ar-fkf__export-icons {
        justify-content: flex-start;
    }

    /* Filters wrap tighter */
    .ar-fkf__filter-row {
        gap: 8px 12px;
    }

    .ar-fkf__filter-label {
        font-size: 13px;
    }
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ar-fkf {
        --fkf-pad-h: 14px;
    }

    .ar-fkf__tab {
        font-size:      12px;
        letter-spacing: 0.6px;
        padding:        11px 12px;
    }

    .ar-fkf__export-btn {
        padding:  7px 8px;
        min-width: 44px;
        font-size: 10px;
    }

    /* X-axis label rotation handled by ApexCharts config,
       but guard min-height here so chart doesn't collapse */
    .ar-fkf__chart-wrap,
    .ar-fkf__chart {
        min-height: 240px;
    }
}