/**
 * Tabler Icons — Global Sizing & Compatibility
 * Sets a readable base size and contextual overrides
 * so icons are never invisible or too small.
 */

/* ===================================================
   SPINNER ANIMATION
   =================================================== */
@keyframes ti-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ti-spin,
.ti-loader {
    animation: ti-spin 1s linear infinite;
}

/* ===================================================
   BASE ICON SIZE
   The vendor tabler-icons.css sets NO font-size,
   so icons inherit tiny sizes (14px from .btn, etc.).
   This sets a readable default.
   =================================================== */
.ti {
    font-size: 1.25rem;        /* 20px — readable baseline */
    line-height: 1;
    vertical-align: -0.125em;  /* optical alignment with text */
    display: inline-block;
}

/* ===================================================
   CONTEXTUAL ICON SIZES
   Override per-context so icons scale with their UI.
   =================================================== */

/* ── Buttons ── */
.btn .ti,
.btn i.ti {
    font-size: 1.2rem;         /* 19.2px — comfortable in buttons */
    vertical-align: -0.1em;
}

.btn-sm .ti,
.btn-sm i.ti {
    font-size: 1.05rem;        /* 16.8px */
}

.btn-lg .ti,
.btn-lg i.ti {
    font-size: 1.4rem;         /* 22.4px */
}

.btn-xs .ti,
.btn-xs i.ti {
    font-size: 0.95rem;        /* 15.2px */
}

/* ── Navigation & Tabs ── */
.nav-link .ti,
.nav-tabs .nav-link .ti,
.nav-pills .nav-link .ti {
    font-size: 1.2rem;
}

/* ── Dropdown Items ── */
.dropdown-item .ti,
.dropdown-item i.ti {
    font-size: 1.15rem;        /* 18.4px */
    width: 22px;
    text-align: center;
}

/* ── Badges ── */
.badge .ti {
    font-size: 0.9em;          /* relative to badge text */
    vertical-align: -0.05em;
}

/* ── Alerts ── */
.alert .ti {
    font-size: 1.3rem;         /* 20.8px */
    vertical-align: -0.15em;
}

/* ── Breadcrumbs ── */
.breadcrumb-item .ti {
    font-size: 1rem;
}

/* ── Input Groups & Form ── */
.input-group-text .ti {
    font-size: 1.2rem;
}

/* ── Cards ── */
.card-header .ti,
.card-title .ti {
    font-size: 1.3rem;         /* 20.8px */
}

/* ── Headings (h1–h6) ── */
h1 .ti { font-size: 1.5em; }
h2 .ti { font-size: 1.4em; }
h3 .ti { font-size: 1.3em; }
h4 .ti { font-size: 1.2em; }
h5 .ti { font-size: 1.1em; }
h6 .ti { font-size: 1em; }

/* ── Accordion Headers ── */
.accordion-button .ti,
.default-according .card-header .ti {
    font-size: 1.25rem;
}

/* ── Table Cells ── */
td .ti,
th .ti {
    font-size: 1.15rem;        /* 18.4px */
}

/* ── Tooltips & Popovers ── */
.tooltip .ti,
.popover .ti {
    font-size: 1rem;
}

/* ── List Groups ── */
.list-group-item .ti {
    font-size: 1.2rem;
}

/* ===================================================
   EXPLICIT SIZE UTILITIES
   Use .ti-lg, .ti-xl etc. when you need a specific size
   =================================================== */
.ti-sm  { font-size: 1rem !important; }       /* 16px */
.ti-md  { font-size: 1.25rem !important; }    /* 20px (= base) */
.ti-lg  { font-size: 1.5rem !important; }     /* 24px */
.ti-xl  { font-size: 1.75rem !important; }    /* 28px */
.ti-2x  { font-size: 2em !important; }
.ti-3x  { font-size: 3em !important; }
.ti-4x  { font-size: 4em !important; }
.ti-5x  { font-size: 5em !important; }