/* ==========================================================================
   explore-fields.php — راهنمای رشته‌ها و شهرها
   --------------------------------------------------------------------------
   The project's Tailwind is a PREBUILT, JIT-scanned file (assets/css/vendor/
   tailwind.min.v3.4.css), not the play CDN: a utility that no existing page
   already uses is simply absent, and arbitrary values (text-[11px]) never
   compile. Rather than restrict this page's design to whatever other pages
   happened to need, the handful of pieces Tailwind cannot supply live here as
   plain CSS.

   Dark mode follows assets/css/dark-theme.css: it restyles standard utilities
   (.bg-white, .text-gray-*, .border-gray-200) globally, so the markup uses
   those wherever it can and only the classes below need their own html.dark
   rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Body text — Persian at Tailwind's leading-relaxed is cramped, and the
   build has no leading-7/leading-8 to reach for.
   -------------------------------------------------------------------------- */
.explore-lead {
    line-height: 2;
}

.explore-tiny {
    font-size: 11px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Filter chips — دوره‌ها on a detail page, رشته groups on the index.
   -------------------------------------------------------------------------- */
.explore-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.explore-chip:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.explore-chip.is-active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

.explore-chip.is-active span {
    color: rgba(255, 255, 255, .7);
}

html.dark .explore-chip {
    background: var(--bg-surface-dark-elevated);
    border-color: var(--border-dark);
    color: var(--text-secondary-dark);
}

html.dark .explore-chip:hover {
    background: var(--bg-surface-dark-hover);
}

html.dark .explore-chip.is-active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Inline badges — پرمتقاضی, راهنما دارد, دوره mix.
   -------------------------------------------------------------------------- */
.explore-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.5rem;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    vertical-align: middle;
}

.explore-badge-rose   { background: #ffe4e6; color: #be123c; }
.explore-badge-indigo { background: #e0e7ff; color: #4338ca; }
.explore-badge-emerald{ background: #d1fae5; color: #047857; }
.explore-badge-gray   { background: #f3f4f6; color: #4b5563; }

html.dark .explore-badge-rose   { background: rgba(244, 63, 94, .16);  color: #fda4af; }
html.dark .explore-badge-indigo { background: rgba(99, 102, 241, .18); color: #a5b4fc; }
html.dark .explore-badge-emerald{ background: rgba(16, 185, 129, .16); color: #6ee7b7; }
html.dark .explore-badge-gray   { background: rgba(255, 255, 255, .08); color: #cbd5e1; }

/* --------------------------------------------------------------------------
   Links inside cards and table cells. Tailwind's hover:text-indigo-600 is not
   in the build.
   -------------------------------------------------------------------------- */
.explore-link {
    color: inherit;
    transition: color .15s;
}

.explore-link:hover {
    color: #4f46e5;
}

html.dark .explore-link:hover {
    color: #a5b4fc;
}

/* --------------------------------------------------------------------------
   The 1–5 bars of a رشته writeup.
   -------------------------------------------------------------------------- */
.explore-axis {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.explore-axis + .explore-axis {
    margin-top: 0.6rem;
}

.explore-axis-label {
    width: 6.5rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.explore-axis-track {
    flex: 1;
    height: 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    overflow: hidden;
}

.explore-axis-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #4f46e5);
}

.explore-axis-value {
    width: 1.75rem;
    flex-shrink: 0;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
}

html.dark .explore-axis-label { color: var(--text-secondary-dark); }
html.dark .explore-axis-track { background: rgba(255, 255, 255, .08); }
html.dark .explore-axis-value { color: var(--text-primary-dark); }

/* --------------------------------------------------------------------------
   نقاط قوت / نکات قابل توجه of a شهر writeup. Written out per tone so the
   markup never builds a Tailwind class name by string concatenation — those
   would not exist in a scanned build.
   -------------------------------------------------------------------------- */
.explore-note {
    border-radius: 1rem;
    border: 1px solid;
    padding: 1rem;
}

.explore-note-title {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.explore-note-item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: #374151;
}

.explore-note-item + .explore-note-item {
    margin-top: 0.35rem;
}

.explore-note-item i {
    font-size: 0.7rem;
    margin-top: 0.45rem;
    flex-shrink: 0;
}

.explore-note-pros  { border-color: #a7f3d0; background: #ecfdf5; }
.explore-note-pros .explore-note-title,
.explore-note-pros .explore-note-item i { color: #047857; }

.explore-note-cons  { border-color: #fde68a; background: #fffbeb; }
.explore-note-cons .explore-note-title,
.explore-note-cons .explore-note-item i { color: #b45309; }

html.dark .explore-note-item { color: var(--text-primary-dark); }
html.dark .explore-note-pros { border-color: rgba(16, 185, 129, .3); background: rgba(16, 185, 129, .08); }
html.dark .explore-note-pros .explore-note-title,
html.dark .explore-note-pros .explore-note-item i { color: #6ee7b7; }
html.dark .explore-note-cons { border-color: rgba(245, 158, 11, .3); background: rgba(245, 158, 11, .08); }
html.dark .explore-note-cons .explore-note-title,
html.dark .explore-note-cons .explore-note-item i { color: #fcd34d; }

/* --------------------------------------------------------------------------
   شهر/دانشگاه hero — the admin-uploaded photo sits beside the heading
   instead of as a full-width banner above it. Photos come in whatever
   shape they were uploaded, so object-fit: contain inside a fixed box just
   shrinks a mismatched image to fit rather than cropping/zooming into it.
   -------------------------------------------------------------------------- */
.explore-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.explore-hero-media {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11rem;
    border-radius: 1rem;
    background: #f3f4f6;
    overflow: hidden;
}

.explore-hero-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.explore-hero-header {
    min-width: 0;
}

@media (min-width: 768px) {
    .explore-hero {
        flex-direction: row;
        align-items: stretch;
    }

    .explore-hero-media {
        width: 16rem;
        height: auto;
    }

    .explore-hero-header {
        flex: 1;
    }
}

html.dark .explore-hero-media {
    background: var(--bg-surface-dark-elevated);
}

.explore-accent {
    color: #6366f1;
}

html.dark .explore-accent {
    color: #a5b4fc;
}

/* --------------------------------------------------------------------------
   Index cards — one grid for رشته / شهر / دانشگاه / استان.
   -------------------------------------------------------------------------- */
.explore-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* explore-fields.php's bindFilter() hides a filtered-out card with the hidden
   attribute. Tailwind's preflight [hidden] rule and .explore-card above are
   both specificity 0,1,0, and this file loads after Tailwind — so without a
   rule that outranks the class, a hidden card keeps its display:block and the
   search box looks dead while it is in fact filtering. */
.explore-card[hidden] {
    display: none;
}

.explore-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .08);
    transform: translateY(-2px);
}

html.dark .explore-card {
    background: var(--bg-surface-dark);
    border-color: var(--border-dark);
}

html.dark .explore-card:hover {
    border-color: rgba(129, 140, 248, .45);
    box-shadow: none;
}

.explore-card h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: #111827;
}

.explore-card h3 i {
    flex-shrink: 0;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: #d1d5db;
}

.explore-card h3 .t {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.explore-card .sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

html.dark .explore-card h3   { color: var(--text-primary-dark); }
html.dark .explore-card h3 i { color: rgba(255, 255, 255, .25); }
html.dark .explore-card .sub { color: var(--text-secondary-dark); }

.explore-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: #6b7280;
}

html.dark .explore-card-meta {
    color: var(--text-secondary-dark);
}

.explore-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* A card that has action buttons (دانشگاه page's رشته cards) can't be one big
   <a> — an <a>/<button> can't nest inside another <a> — so it renders as a
   plain .explore-card <div> with the title block as its own inner link. */
.explore-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.explore-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid #f3f4f6;
}

.explore-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.6rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.explore-card-action:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

html.dark .explore-card-actions {
    border-top-color: var(--border-dark);
}

html.dark .explore-card-action {
    background: var(--bg-surface-dark-elevated);
    border-color: var(--border-dark);
    color: #a5b4fc;
}

html.dark .explore-card-action:hover {
    background: var(--bg-surface-dark-hover);
}

/* A card grid built with a $limit (city page's دانشگاه‌ها) hides the rest
   behind this class until the grid picks up .is-expanded — from the "نمایش
   بیشتر" card itself or, in explore-fields.php's bindFilter, from an active
   search, so a match past the limit is never stuck invisible. */
#exploreCards:not(.is-expanded) .explore-card-extra {
    display: none;
}

.explore-card-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    color: #4f46e5;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.explore-card-more:hover {
    background: #f3f4f6;
    border-color: #c7d2fe;
}

#exploreCards.is-expanded .explore-card-more {
    display: none;
}

html.dark .explore-card-more {
    background: var(--bg-surface-dark-elevated);
    border-color: var(--border-dark);
    color: #a5b4fc;
}

html.dark .explore-card-more:hover {
    background: var(--bg-surface-dark-hover);
}

/* --------------------------------------------------------------------------
   Tab bar. Sticks under the fixed header while a long list scrolls.
   -------------------------------------------------------------------------- */
.explore-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.explore-tabs::-webkit-scrollbar {
    display: none;
}

.explore-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.explore-tab:hover {
    background: #f3f4f6;
    color: #374151;
}

.explore-tab.is-active {
    background: #eef2ff;
    color: #4338ca;
}

html.dark .explore-tab { color: var(--text-secondary-dark); }
html.dark .explore-tab:hover { background: var(--bg-surface-dark-hover); color: var(--text-primary-dark); }
html.dark .explore-tab.is-active { background: rgba(99, 102, 241, .18); color: #a5b4fc; }

/* --------------------------------------------------------------------------
   The کدرشته‌محل table.

   Cell styling lives here rather than as utility classes on every <td>: a
   province page renders up to 830 rows, and repeating an eight-class list per
   cell was a third of the response. Dark mode has to be spelled out for the
   same reason — dark-theme.css restyles .text-gray-600 and friends, which the
   rows no longer carry.
   -------------------------------------------------------------------------- */
.explore-table {
    width: 100%;
    font-size: 0.875rem;
    white-space: nowrap;
    border-collapse: collapse;
}

.explore-table th {
    padding: 0.5rem 0.75rem;
    text-align: right;
    font-weight: 600;
    color: #6b7280;
    background: #f9fafb;
}

.explore-table td {
    padding: 0.5rem 0.75rem;
    text-align: right;
    color: #4b5563;
    border-top: 1px solid #f3f4f6;
}

.explore-table tbody tr:hover {
    background: #f9fafb;
}

.explore-table a {
    color: inherit;
    transition: color .15s;
}

.explore-table a:hover {
    color: #4f46e5;
}

/* Major name — the row's own heading. */
.explore-table a.s {
    font-weight: 600;
    color: #111827;
}

/* University names run to ~70 characters; truncate and let the page's JS put
   the full name in a title attribute rather than emitting it twice per row. */
.explore-table a.u {
    display: block;
    max-width: 17rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explore-table .r {
    font-weight: 700;
    color: #111827;
}

.explore-table .g {
    font-size: 0.75rem;
    color: #6b7280;
}

.explore-table .m {
    color: #d1d5db;
}

html.dark .explore-table th {
    background: var(--bg-surface-dark-elevated);
    color: var(--text-secondary-dark);
}

html.dark .explore-table td {
    color: var(--text-secondary-dark);
    border-top-color: var(--border-dark);
}

html.dark .explore-table tbody tr:hover {
    background: var(--bg-surface-dark-hover);
}

html.dark .explore-table a:hover { color: #a5b4fc; }
html.dark .explore-table a.s,
html.dark .explore-table .r     { color: var(--text-primary-dark); }
html.dark .explore-table .g     { color: var(--text-secondary-dark); }
html.dark .explore-table .m     { color: rgba(255, 255, 255, .25); }

/* Per-university header row when the codes table is grouped (city page).
   Each group is its own <tbody>, collapsed by default — a click (or Enter/
   space) on the toggle adds .is-expanded and reveals .explore-row below it.
   Collapsed-by-default is also what keeps this usable on a phone: a city
   with 40 universities opens as 40 short tappable rows, not one long table. */
.explore-table tbody.explore-group:not(.is-expanded) tr.explore-row {
    display: none;
}

.explore-table .explore-group-header td {
    padding: 0;
    background: #f5f5ff;
    white-space: normal;
}

.explore-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4338ca;
    cursor: pointer;
}

.explore-group-toggle:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
}

.explore-group-toggle .bi-chevron-down {
    flex-shrink: 0;
    font-size: 0.7rem;
    transition: transform .15s;
}

tbody.explore-group.is-expanded .explore-group-toggle .bi-chevron-down {
    transform: rotate(180deg);
}

.explore-group-toggle a {
    color: inherit;
}

.explore-group-count {
    flex-shrink: 0;
    margin-inline-start: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: #818cf8;
}

html.dark .explore-table .explore-group-header td {
    background: rgba(99, 102, 241, .12);
}

html.dark .explore-group-toggle {
    color: #a5b4fc;
}

html.dark .explore-group-count {
    color: #818cf8;
}

/* Touch target: the whole header row is tappable on mobile, not just the
   chevron, and university names wrap instead of forcing horizontal scroll
   just to read the collapsed list. */
@media (max-width: 767px) {
    .explore-group-toggle {
        padding: 0.85rem 0.75rem;
    }
}