/* =============================================================
   css/tools.css — Study Tools & Calculators styles
   eTutors Academy (etutors.pk)
   -------------------------------------------------------------
   Loaded ONLY on /resources/calculators pages (page-locally,
   right after common_style.php) — parallel to css/worksheets.css.

   Naming: every class here is prefixed  tl-  (tool). Site-wide
   classes (et-) live in etutors.css and are never defined here.
   Tools are interactive, not printable, so there are no @media
   print rules in this file.
============================================================= */

/* =============================================================
   1. TOOL-TYPE CHIPS  (links between sibling tools)
   Mirrors .wg-types in worksheets.css so both families match.
============================================================= */
.tl-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px 0; padding: 0; list-style: none; }
.tl-type {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px;
    border: 1.5px solid var(--et-border, #E5E7EB);
    background: #fff; color: var(--et-text, #1A1A2E);
    font-weight: 600; font-size: var(--et-text-sm, .875rem);
    text-decoration: none; transition: all .18s;
}
.tl-type:hover, .tl-type:focus { border-color: var(--et-teal, #0F7B6C); color: var(--et-teal, #0F7B6C); text-decoration: none; }
.tl-type.is-active { background: var(--et-teal, #0F7B6C); border-color: var(--et-teal, #0F7B6C); color: #fff; }
.tl-type.is-soon { opacity: .6; pointer-events: none; }
.tl-type .tl-type-soon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }


/* =============================================================
   2. TOOL PANEL  (the calculator card)
============================================================= */
.tl-panel {
    background: #fff; border: 1px solid var(--et-border, #E5E7EB);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .07);
    margin-bottom: 28px;
}
.tl-panel-head {
    background: var(--et-navy, #0D1B4B);
    padding: 20px 26px;
}
.tl-panel-head h2, .tl-panel-head h3 { margin: 0 0 3px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.tl-panel-head p  { margin: 0; color: rgba(255,255,255,.8); font-size: var(--et-text-sm, .875rem); }
.tl-panel-body { padding: 24px 26px 24px; }

.tl-panel .form-group { margin-bottom: 18px; }
.tl-panel label { font-weight: 600; color: var(--et-text, #1A1A2E); margin-bottom: 6px; }
.tl-panel .form-control { height: 44px; border-radius: 10px; }
.tl-field-label { display: block; font-weight: 700; color: var(--et-text, #1A1A2E); margin-bottom: 8px; }

/* Mode selector (radio pills) — mirrors .wg-checks */
.tl-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.tl-modes label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--et-border, #E5E7EB);
    background: #fff; font-weight: 600; margin: 0;
    font-size: var(--et-text-sm, .875rem); transition: all .18s;
}
.tl-modes label:hover { border-color: var(--et-teal-lt, #13A68F); }
.tl-modes input { margin: 0; }
.tl-modes label:has(input:checked) { border-color: var(--et-teal, #0F7B6C); background: #E9F6F3; color: var(--et-teal, #0F7B6C); font-weight: 700; }
/* Fallback for older browsers without :has() — JS also toggles .is-on */
.tl-modes label.is-on { border-color: var(--et-teal, #0F7B6C); background: #E9F6F3; color: var(--et-teal, #0F7B6C); font-weight: 700; }

.tl-divider { border: 0; border-top: 1px solid var(--et-border, #E5E7EB); margin: 22px 0; }
.tl-help { font-size: var(--et-text-sm, .875rem); color: var(--et-muted, #6B7280); margin: 14px 0 0; }


/* =============================================================
   3. SUBJECT ROWS  (repeatable marks rows)
============================================================= */
.tl-rows { margin-bottom: 6px; }
.tl-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 10px 12px; margin-bottom: 10px;
    border: 1px solid var(--et-border, #E5E7EB);
    border-radius: 12px; background: var(--et-cream, #FAFAF7);
}
.tl-row .tl-cell-subject { flex: 2 1 160px; }
.tl-row .tl-cell-num     { flex: 1 1 100px; }
.tl-row .tl-cell-pct {
    flex: 0 0 76px; text-align: right; font-weight: 700;
    color: var(--et-teal, #0F7B6C); font-size: var(--et-text-sm, .875rem);
    white-space: nowrap;
}
.tl-row input.form-control,
.tl-row select.form-control { height: 40px; margin: 0; padding-left: 8px; padding-right: 8px; }
.tl-row-remove {
    flex: 0 0 auto; border: none; background: transparent;
    color: var(--et-muted, #6B7280); font-size: 18px; line-height: 1;
    cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.tl-row-remove:hover { color: #C0392B; background: #FDECEA; }

.tl-add-row {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    border: 1.5px dashed var(--et-border, #E5E7EB);
    background: #fff; color: var(--et-text, #1A1A2E);
    font-weight: 600; font-size: var(--et-text-sm, .875rem); transition: all .18s;
}
.tl-add-row:hover { border-color: var(--et-teal, #0F7B6C); color: var(--et-teal, #0F7B6C); background: #E9F6F3; }


/* =============================================================
   4. RESULT CARD  (live output)
============================================================= */
.tl-result {
    border: 1.5px solid var(--et-teal, #0F7B6C);
    background: #E9F6F3; border-radius: 16px;
    padding: 22px 26px; text-align: center;
}
.tl-result-label {
    display: block; font-size: var(--et-text-sm, .875rem);
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--et-teal, #0F7B6C); margin-bottom: 6px;
}
.tl-result-value {
    font-size: 44px; font-weight: 800; line-height: 1.1;
    color: var(--et-navy, #0D1B4B);
    font-variant-numeric: tabular-nums;
}
.tl-result-sub { margin: 8px 0 0; color: var(--et-muted, #6B7280); font-size: var(--et-text-sm, .875rem); }
.tl-result.is-empty { border-style: dashed; background: #fff; }
.tl-result.is-empty .tl-result-value { color: var(--et-muted, #9CA3AF); font-size: 20px; font-weight: 600; }

/* Secondary stat pills under the big number */
.tl-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.tl-stat {
    background: #fff; border: 1px solid var(--et-border, #E5E7EB);
    border-radius: 10px; padding: 8px 14px;
    font-size: var(--et-text-sm, .875rem); color: var(--et-text, #1A1A2E);
}
.tl-stat strong { color: var(--et-navy, #0D1B4B); font-variant-numeric: tabular-nums; }


/* =============================================================
   4b. AGGREGATE ROWS  (obtained / total / weight columns)
   Used by the MDCAT/ECAT Aggregate Calculator, where the first
   cell is a fixed label (span) and the third input is the
   editable weightage.
============================================================= */
.tl-row span.tl-cell-subject { flex: 1 1 130px; font-size: var(--et-text-sm, .875rem); }
.tl-row .tl-wgt {
    border-color: var(--et-teal-lt, #13A68F);
    background: #F4FBF9;
    font-weight: 700;
}

/* Column headings above the component rows. Flex bases mirror .tl-row
   exactly (incl. its 12px side padding) so headings sit over their
   columns. Hidden on small screens where rows wrap to multiple lines
   and the input placeholders take over. */
.tl-rows-head {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 0 13px; margin-bottom: 8px;
    font-size: var(--et-text-xs, .75rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--et-muted, #6B7280);
}
.tl-rows-head .tl-cell-subject { flex: 1 1 130px; }
.tl-rows-head .tl-cell-num     { flex: 1 1 100px; }
.tl-rows-head .tl-cell-pct     { flex: 0 0 76px; text-align: right; }
/* Invisible spacer matching the ✕ remove button, so headings stay
   aligned on rows that end with a remove control. */
.tl-rows-head .tl-head-spacer  { flex: 0 0 30px; }

/* Ghost action button (e.g. Clear marks) — mirrors .wg-btn-ghost */
.tl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tl-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--et-border, #E5E7EB);
    background: #fff; color: var(--et-text, #1A1A2E);
    font-weight: 600; font-size: var(--et-text-sm, .875rem); transition: all .18s;
}
.tl-btn-ghost:hover { border-color: var(--et-teal, #0F7B6C); color: var(--et-teal, #0F7B6C); }

/* Inline warning banner (e.g. weightages not totalling 100%) */
.tl-warning {
    margin: 14px 0 0; padding: 12px 16px;
    border: 1.5px solid var(--et-gold, #E8A020);
    border-radius: 10px;
    background: #FDF6E9;
    color: #8A5A00;
    font-size: var(--et-text-sm, .875rem);
    font-weight: 600; line-height: 1.5;
}


/* =============================================================
   4c. TIMER DISPLAY  (Study Focus Timer)
   The card changes colour by phase: navy while focusing, teal
   during breaks — an at-a-glance signal of which phase is live.
============================================================= */
.tl-timer {
    border-radius: 16px; padding: 30px 26px 26px;
    text-align: center; color: #fff;
    background: var(--et-navy, #0D1B4B);
    transition: background .3s;
}
.tl-timer.is-break { background: var(--et-teal, #0F7B6C); }

.tl-timer-phase {
    display: inline-block; margin-bottom: 10px;
    padding: 5px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: var(--et-text-xs, .75rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.tl-timer-time {
    font-size: 76px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; margin-bottom: 20px;
}
/* Gentle pulse only while actually counting down */
.tl-timer.is-running .tl-timer-time { animation: tl-pulse 2s ease-in-out infinite; }
@keyframes tl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) {
    .tl-timer.is-running .tl-timer-time { animation: none; }
}

/* Progress bar — fills as the phase elapses */
.tl-progress {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, .18); margin-bottom: 22px;
}
.tl-progress-fill {
    height: 100%; width: 0;
    background: var(--et-gold, #E8A020);
    border-radius: 999px; transition: width .25s linear;
}
.tl-timer.is-break .tl-progress-fill { background: #fff; }

.tl-timer-controls {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; margin-bottom: 20px;
}
/* Ghost buttons sit on a dark card here, so invert them */
.tl-timer-controls .tl-btn-ghost {
    background: transparent; color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.tl-timer-controls .tl-btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff; color: #fff;
}
/* Stat pills inside the timer card */
.tl-timer .tl-stat {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.tl-timer .tl-stat strong { color: #fff; }

/* Solid action button (Start / Pause) */
.tl-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 30px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--et-gold, #E8A020);
    background: var(--et-gold, #E8A020); color: var(--et-navy, #0D1B4B);
    font-weight: 800; font-size: var(--et-text-base, 1rem);
    transition: all .18s;
}
.tl-btn-primary:hover { filter: brightness(1.06); }


/* =============================================================
   4d. GRADE TABLE  (Grade Calculator)
   A flex "table" rather than a real <table> so it reflows on
   phones without horizontal scrolling. The band matching the
   student's percentage gets .is-active.
============================================================= */
.tl-gtable {
    border: 1px solid var(--et-border, #E5E7EB);
    border-radius: 12px; overflow: hidden;
}
.tl-grow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--et-border, #E5E7EB);
    font-size: var(--et-text-sm, .875rem);
    transition: background .18s;
}
.tl-grow:first-child { border-top: 0; }
.tl-grow-head {
    background: var(--et-cream, #FAFAF7);
    font-size: var(--et-text-xs, .75rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--et-muted, #6B7280);
}
.tl-gcell-grade { flex: 0 0 70px; font-size: var(--et-text-base, 1rem); }
.tl-gcell-range { flex: 1 1 190px; color: var(--et-text, #1A1A2E); }
.tl-gcell-desc  { flex: 1 1 140px; color: var(--et-muted, #6B7280); }

/* The student's own band */
.tl-grow.is-active {
    background: #E9F6F3;
    box-shadow: inset 3px 0 0 var(--et-teal, #0F7B6C);
}
.tl-grow.is-active .tl-gcell-grade,
.tl-grow.is-active .tl-gcell-range { color: var(--et-teal, #0F7B6C); font-weight: 700; }

/* Editable minimums (Custom scheme) */
.tl-gtable input.tl-gmin {
    display: inline-block; width: 92px; height: 34px;
    margin-right: 8px; padding: 4px 8px;
    border-color: var(--et-teal-lt, #13A68F);
    background: #F4FBF9; font-weight: 700;
}
.tl-gmin-suffix { color: var(--et-muted, #6B7280); font-size: var(--et-text-sm, .875rem); }


/* =============================================================
   4e. COUNTDOWN CARD  (Exam Countdown)
   Navy while the exam is still far off; switches to gold inside
   the final week as a visual "start revising" cue.
============================================================= */
.tl-countdown {
    border-radius: 16px; padding: 26px 22px;
    text-align: center; color: #fff;
    background: var(--et-navy, #0D1B4B);
    transition: background .3s;
}
.tl-countdown.is-soon { background: #8A5A00; }

.tl-cd-title {
    display: block; margin-bottom: 16px;
    font-size: var(--et-text-lg, 1.125rem); font-weight: 800;
    letter-spacing: -.01em;
}
.tl-cd-segments { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tl-cd-seg {
    flex: 0 0 96px; padding: 12px 6px; border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
}
.tl-cd-num {
    display: block; font-size: 38px; font-weight: 800; line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.tl-cd-lab {
    display: block; margin-top: 4px;
    font-size: var(--et-text-xs, .75rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255, 255, 255, .75);
}
.tl-cd-empty { margin: 6px 0 0; color: rgba(255, 255, 255, .8); font-size: var(--et-text-sm, .875rem); }

.tl-countdown .tl-stats { margin-top: 18px; }
.tl-countdown .tl-stat {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.tl-countdown .tl-stat strong { color: #fff; }

/* Wider "time left" cell — "12d 04:33" needs more room than a % */
.tl-cell-left {
    flex: 0 0 110px; text-align: right; white-space: nowrap;
    font-weight: 700; color: var(--et-teal, #0F7B6C);
    font-size: var(--et-text-sm, .875rem); font-variant-numeric: tabular-nums;
}
.tl-rows-head .tl-cell-left { flex: 0 0 110px; font-weight: 700; color: var(--et-muted, #6B7280); }

/* Exams that have already happened */
.tl-row.is-past { opacity: .55; }
.tl-row.is-past .tl-cell-left { color: var(--et-muted, #6B7280); }

/* Quick-add name chips */
.tl-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-chip {
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--et-border, #E5E7EB);
    background: #fff; color: var(--et-text, #1A1A2E);
    font-weight: 600; font-size: var(--et-text-sm, .875rem); transition: all .18s;
}
.tl-chip:hover {
    border-color: var(--et-teal, #0F7B6C);
    background: #E9F6F3; color: var(--et-teal, #0F7B6C);
}


/* =============================================================
   5. SMALL SCREENS
============================================================= */
@media (max-width: 480px) {
    .tl-countdown { padding: 20px 14px; }
    .tl-cd-seg { flex: 0 0 68px; padding: 10px 4px; }
    .tl-cd-num { font-size: 26px; }
    .tl-grow { padding: 10px 12px; }
    .tl-gcell-grade { flex-basis: 52px; }
    .tl-gcell-desc  { flex-basis: 100%; }
    .tl-timer { padding: 24px 16px 20px; }
    .tl-timer-time { font-size: 54px; }
    .tl-timer-controls { gap: 8px; }
    .tl-btn-primary { padding: 10px 22px; }
    .tl-panel-body { padding: 18px 16px; }
    .tl-row { padding: 10px; }
    .tl-row .tl-cell-subject { flex-basis: 100%; }
    .tl-result-value { font-size: 36px; }
    .tl-rows-head { display: none; }
}