/* ==========================================================
   TestSeriesPoint — Mock Test Listing (category-wise redesign)
   Fonts expected: Poppins (display), Inter (body), IBM Plex Mono (data)
   loaded via <link> tags in job_quiz.blade.php @push('styles')
   ========================================================== */

:root{
    --tsp-ink:      #0F1F3D;
    --tsp-indigo:   #1E3A8A;
    --tsp-teal:     #0F766E;
    --tsp-amber:    #B45309;
    --tsp-violet:   #7C3AED;
    --tsp-sky:      #0369A1;
    --tsp-crimson:  #B91C1C;
    --tsp-paper:    #F6F7FB;
    --tsp-slate:    #64748B;
    --tsp-line:     #E6E9F2;
    --tsp-success:  #16A34A;

    --tsp-font-display: 'Poppins', 'Segoe UI', sans-serif;
    --tsp-font-body:    'Inter', 'Segoe UI', sans-serif;
    --tsp-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    --tsp-radius: 14px;
    --tsp-shadow: 0 2px 10px rgba(15, 31, 61, .06);
    --tsp-shadow-hover: 0 14px 32px rgba(15, 31, 61, .14);
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------
   Page header / hero
--------------------------------------------------------- */
.tsp-page-header{
    background: var(--tsp-ink);
    padding: 2.75rem 0 2.25rem;
    color: #fff;
}

.tsp-page-header--user{
    background:
        radial-gradient(circle at 15% 20%, rgba(245,166,35,.16), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(124,58,237,.18), transparent 50%),
        linear-gradient(135deg, #0F1F3D 0%, #142B54 60%, #14306a 100%);
}

.tsp-breadcrumb-bar{
    font-family: var(--tsp-font-body);
    font-size: .82rem;
    opacity: .7;
    margin-bottom: .9rem;
}
.tsp-breadcrumb-bar a{ color: #fff; text-decoration: none; }
.tsp-breadcrumb-bar a:hover{ text-decoration: underline; }
.tsp-breadcrumb-bar span{ margin: 0 .35rem; }

.tsp-page-header h1{
    font-family: var(--tsp-font-display);
    font-weight: 800;
    font-size: clamp(1.55rem, 3.2vw, 2.35rem);
    letter-spacing: -.01em;
    margin-bottom: .5rem;
}

.tsp-page-header p{
    font-family: var(--tsp-font-body);
    font-size: .98rem;
    color: #C9D2EA;
    max-width: 640px;
    margin-bottom: 0;
}

.tsp-hero-search{
    margin-top: 1.4rem;
    max-width: 520px;
    position: relative;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .68rem 1.1rem;
    backdrop-filter: blur(6px);
    transition: border-color .18s ease, background .18s ease;
}
.tsp-hero-search:focus-within{
    border-color: rgba(245,166,35,.7);
    background: rgba(255,255,255,.12);
}
.tsp-hero-search svg{ width: 17px; height: 17px; flex-shrink: 0; color: #C9D2EA; }
.tsp-hero-search input{
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-family: var(--tsp-font-body);
    font-size: .92rem;
    width: 100%;
}
.tsp-hero-search input::placeholder{ color: #93A0C4; }

/* ---------------------------------------------------------
   Category filter chip bar
--------------------------------------------------------- */
.tsp-catbar-wrap{
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--tsp-line);
    margin: 0 -1px 1.6rem;
    padding: .1rem 0;
}

.tsp-catbar{
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    padding: .85rem .25rem;
    scrollbar-width: thin;
}
.tsp-catbar::-webkit-scrollbar{ height: 5px; }
.tsp-catbar::-webkit-scrollbar-thumb{ background: var(--tsp-line); border-radius: 10px; }

.tsp-catchip{
    --chip-accent: var(--tsp-indigo);
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--tsp-font-body);
    font-weight: 600;
    font-size: .84rem;
    color: var(--tsp-ink);
    background: var(--tsp-paper);
    border: 1px solid var(--tsp-line);
    border-radius: 999px;
    padding: .5rem 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.tsp-catchip span{
    font-family: var(--tsp-font-mono);
    font-size: .74rem;
    font-weight: 600;
    background: rgba(15,31,61,.06);
    border-radius: 999px;
    padding: .05rem .45rem;
}
.tsp-catchip:hover{
    border-color: var(--chip-accent);
    color: var(--chip-accent);
    transform: translateY(-1px);
}
.tsp-catchip.is-active{
    background: var(--tsp-ink);
    border-color: var(--tsp-ink);
    color: #fff;
}
.tsp-catchip.is-active span{ background: rgba(255,255,255,.18); color: #fff; }

/* ---------------------------------------------------------
   Category section heading
--------------------------------------------------------- */
.tsp-category-block{
    --cat-accent: var(--tsp-indigo);
    margin-bottom: 2.4rem;
    scroll-margin-top: 5.5rem;
}

.tsp-category-heading{
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid var(--tsp-line);
}

.tsp-cat-icon{
    --cat-accent: var(--tsp-indigo);
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cat-accent) 12%, white);
    color: var(--cat-accent);
}
.tsp-cat-icon svg{ width: 19px; height: 19px; }

.tsp-category-heading h2{
    font-family: var(--tsp-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--tsp-ink);
    margin: 0;
    flex: 1;
}

.tsp-cat-count{
    font-family: var(--tsp-font-mono);
    font-size: .78rem;
    font-weight: 500;
    color: var(--tsp-slate);
    background: var(--tsp-paper);
    border: 1px solid var(--tsp-line);
    border-radius: 999px;
    padding: .3rem .7rem;
}

/* ---------------------------------------------------------
   Card grid
--------------------------------------------------------- */
.tsp-quiz-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
}

.tsp-quiz-card{
    --card-accent: var(--tsp-indigo);
    position: relative;
    background: #fff;
    border: 1px solid var(--tsp-line);
    border-radius: var(--tsp-radius);
    box-shadow: var(--tsp-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tsp-quiz-card::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--card-accent);
}
.tsp-quiz-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--tsp-shadow-hover);
    border-color: var(--card-accent);
}

/* Signature element: rotated "official seal" stamp badge */
.tsp-cat-stamp{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    font-family: var(--tsp-font-mono);
    font-weight: 600;
    font-size: .62rem;
    letter-spacing: .04em;
    color: var(--card-accent);
    border: 1.5px dashed var(--card-accent);
    border-radius: 999px;
    padding: .3rem .55rem;
    transform: rotate(6deg);
    background: color-mix(in srgb, var(--card-accent) 6%, white);
    line-height: 1;
}

.tsp-qcard-header{
    padding: 1.3rem 1.25rem .9rem;
    padding-right: 4.2rem; /* keep clear of the stamp badge */
}
.tsp-qcard-header h3{
    font-family: var(--tsp-font-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--tsp-ink);
    margin: 0 0 .3rem;
}
.tsp-qcard-header span{
    font-family: var(--tsp-font-body);
    font-size: .84rem;
    color: var(--tsp-slate);
    display: block;
    line-height: 1.4;
}

.tsp-qcard-meta{
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: .3rem 1.25rem 1.1rem;
    border-bottom: 1px solid var(--tsp-line);
    flex: 1;
}

/* Numeric facts (Total Questions / Duration) — compact icon+value pills,
   never truncate, always legible at a glance */
.tsp-qcard-stats{
    display: flex !important;
    gap: .6rem;
    flex-wrap: wrap;
}
.tsp-qstat{
    display: flex !important;
    align-items: center !important;
    gap: .45rem;
    background: var(--tsp-paper);
    border: 1px solid var(--tsp-line);
    border-radius: 10px;
    padding: .45rem .7rem;
    flex: 1;
    min-width: 108px;
}
.tsp-qstat svg{
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    color: var(--card-accent, var(--tsp-indigo));
}
.tsp-qstat-txt{ display: flex !important; flex-direction: column; gap: .05rem; min-width: 0; }
.tsp-qstat b{
    display: block;
    font-family: var(--tsp-font-mono);
    font-size: .92rem;
    font-weight: 700;
    color: var(--tsp-ink);
    line-height: 1.15;
}
.tsp-qstat span{
    display: block;
    font-family: var(--tsp-font-body);
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tsp-slate);
}

/* Text facts (Quiz Details / Question Set) — allowed to wrap up to 2 lines
   instead of silently getting cut off with ellipsis on long subject lists */
.tsp-qcard-meta-item{
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.tsp-qcard-meta-item strong{
    font-family: var(--tsp-font-body);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tsp-slate);
}
.tsp-qcard-meta-val{
    font-family: var(--tsp-font-body);
    font-size: .84rem;
    font-weight: 600;
    color: var(--tsp-ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Start / End date — single icon row, no wasted grid cell */
.tsp-qcard-dates{
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--tsp-font-body);
    font-size: .78rem;
    color: var(--tsp-slate);
}
.tsp-qcard-dates svg{ width: 14px !important; height: 14px !important; flex-shrink: 0; color: var(--tsp-slate); }
.tsp-qcard-dates b{ color: var(--tsp-ink); font-weight: 600; }

.tsp-qcard-footer{
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   Badges (shared with admin table too)
--------------------------------------------------------- */
.tsp-badge{
    font-family: var(--tsp-font-body);
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .3rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.tsp-badge-attempted{ background: rgba(22,163,74,.1); color: var(--tsp-success); }
.tsp-badge-published{ background: rgba(30,58,138,.1); color: var(--tsp-indigo); }
.tsp-badge-soon{ background: rgba(180,83,9,.1); color: var(--tsp-amber); }

/* Buttons — keep existing tsp-btn contract, just refine visuals */
.tsp-btn{
    font-family: var(--tsp-font-body);
    font-weight: 600;
    font-size: .85rem;
    border-radius: 10px;
    padding: .55rem 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tsp-btn:hover{ transform: translateY(-1px); }
/* FIX: button SVG icons (Add Exam Type / Add Exam Name / Add Quiz etc.)
   had no fill/stroke rule, so they inherited default SVG fill="black"
   and rendered as solid filled circles instead of outline icons. */
.tsp-btn svg{
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.tsp-btn-success{ background: var(--tsp-success); color: #fff; }
.tsp-btn-success:hover{ background: #128a3e; color: #fff; }
.tsp-btn-primary{ background: var(--tsp-indigo); color: #fff; }
.tsp-btn-primary:hover{ background: #16306f; color: #fff; }
.tsp-btn-warning{ background: var(--tsp-amber); color: #fff; }
.tsp-btn-danger{ background: #fff; color: var(--tsp-crimson); border-color: var(--tsp-crimson); }
.tsp-btn-outline{ background: #fff; color: var(--tsp-ink); border-color: var(--tsp-line); }

/* ---------------------------------------------------------
   FIX: the admin table view (/admin/mock-tests) used the
   classes below throughout the markup, but none of them had
   any CSS at all — .tsp-card, .tsp-card-head, .tsp-table,
   .tsp-action-group/.tsp-action-btn and .tsp-pagination were
   completely unstyled, so the page rendered as a bare,
   broken-looking HTML table. Adding the missing styles here,
   using the same design tokens as the rest of this file.
--------------------------------------------------------- */
.tsp-card{
    background: #fff;
    border: 1px solid var(--tsp-line);
    border-radius: var(--tsp-radius);
    box-shadow: var(--tsp-shadow);
    overflow: hidden;
}

.tsp-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--tsp-line);
    background: var(--tsp-paper);
}
.tsp-card-head-title{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--tsp-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tsp-ink);
}
.tsp-card-head-title svg{
    width: 19px; height: 19px;
    stroke: var(--tsp-indigo);
    fill: none;
    stroke-width: 2;
}
.tsp-head-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

/* Admin data table */
.tsp-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tsp-table{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tsp-font-body);
    font-size: .86rem;
}
.tsp-table thead tr{ background: var(--tsp-paper); }
.tsp-table thead th{
    text-align: left;
    padding: .85rem 1rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tsp-slate);
    border-bottom: 1px solid var(--tsp-line);
    white-space: nowrap;
}
.tsp-table tbody tr{ border-bottom: 1px solid var(--tsp-line); transition: background .13s ease; }
.tsp-table tbody tr:last-child{ border-bottom: none; }
.tsp-table tbody tr:hover{ background: var(--tsp-paper); }
.tsp-table td{
    padding: .85rem 1rem;
    color: var(--tsp-ink);
    vertical-align: middle;
    line-height: 1.45;
}
.tsp-table td.sr{
    color: var(--tsp-slate);
    font-family: var(--tsp-font-mono);
    font-size: .8rem;
}

/* Row action buttons (Delete / Edit / Attempt / Result / etc.) */
.tsp-action-group{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.tsp-action-btn{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--tsp-font-body);
    font-size: .75rem;
    font-weight: 600;
    padding: .38rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--tsp-line);
    background: #fff;
    color: var(--tsp-ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.tsp-action-btn svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.tsp-action-btn:hover{ transform: translateY(-1px); }
.tsp-ab-primary{ background: rgba(30,58,138,.08); border-color: rgba(30,58,138,.25); color: var(--tsp-indigo); }
.tsp-ab-primary:hover{ background: var(--tsp-indigo); color: #fff; }
.tsp-ab-success{ background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); color: var(--tsp-success); }
.tsp-ab-success:hover{ background: var(--tsp-success); color: #fff; }
.tsp-ab-warning{ background: rgba(180,83,9,.1); border-color: rgba(180,83,9,.3); color: var(--tsp-amber); }
.tsp-ab-warning:hover{ background: var(--tsp-amber); color: #fff; }
.tsp-ab-danger{ background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.28); color: var(--tsp-crimson); }
.tsp-ab-danger:hover{ background: var(--tsp-crimson); color: #fff; }
.tsp-ab-muted{ background: var(--tsp-paper); border-color: var(--tsp-line); color: var(--tsp-slate); cursor: default; }

/* Pagination */
.tsp-pagination{
    display: flex;
    justify-content: flex-end;
    padding: 1.1rem 1.4rem;
}

/* ---------------------------------------------------------
   Empty state
--------------------------------------------------------- */
.tsp-empty{
    text-align: center;
    color: var(--tsp-slate);
    font-family: var(--tsp-font-body);
}
.tsp-empty svg{
    width: 44px; height: 44px;
    stroke: var(--tsp-line);
    fill: none;
    stroke-width: 1.5;
    margin-bottom: .9rem;
}
.tsp-empty h4{
    font-family: var(--tsp-font-display);
    font-weight: 700;
    color: var(--tsp-ink);
    margin-bottom: .3rem;
}

/* ---------------------------------------------------------
   Filtering states (JS toggles these via [hidden])
--------------------------------------------------------- */
.tsp-quiz-card[hidden],
.tsp-category-block[hidden]{ display: none !important; }

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 640px){
    .tsp-page-header{ padding: 2rem 0 1.75rem; }
    .tsp-qcard-meta{ gap: .7rem; }
    .tsp-category-heading h2{ font-size: 1.05rem; }
    .tsp-cat-icon{ width: 34px; height: 34px; }
    .tsp-card-head{ flex-direction: column; align-items: flex-start; }
    .tsp-head-actions{ width: 100%; }
    .tsp-head-actions .tsp-btn{ flex: 1; justify-content: center; }
    .tsp-table{ min-width: 900px; } /* keeps columns legible; .tsp-table-wrap scrolls horizontally */
}

@media (max-width: 420px){
    .tsp-quiz-grid{ grid-template-columns: 1fr; }
    .tsp-qstat{ min-width: 0; }
}