/* =========================================================
   SHARED COMPONENTS
   cards / alerts / badges / tables / forms / states
========================================================= */

/* =========================================================
   CARD SURFACES
========================================================= */

.card,
.content-card,
.info-card,
.dashboard-card,
.settings-card,
.result-card,
.team-card,
.upload-card,
.announcement-card,
.evaluation-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),
               box-shadow var(--transition),
               border-color var(--transition);
}

.content-header,
.card-header,
.section-header,
.team-header,
.announcement-header,
.result-header,
.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    flex-wrap:wrap;
}

.card-header-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:var(--primary-light);
    color:var(--primary);
    font-size:1rem;
    flex-shrink:0;
}

.page-title h1,
.page-header h1{
    font-size:var(--heading-1);
    margin-bottom:4px;
}

.page-title p,
.page-header p{
    color:var(--text-muted);
    font-size:var(--body-sm);
}

/* =========================================================
   ALERTS
========================================================= */

.alert,
.student-alert,
.evaluator-notice,
.auth-error,
.error,
.success{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 18px;
    border-radius:var(--radius-sm);
    font-size:var(--body-sm);
    font-weight:500;
    line-height:1.55;
    border:1px solid transparent;
    margin-bottom:var(--space-md);
}

.alert i,
.student-alert i,
.auth-error i,
.evaluator-notice i{
    font-size:1rem;
    margin-top:2px;
    flex-shrink:0;
}

.alert-success,
.success{
    background:var(--success-light);
    color:var(--success);
    border-color:rgba(14,138,69,.2);
}

.alert-error,
.auth-error,
.error{
    background:var(--danger-light);
    color:var(--danger);
    border-color:rgba(198,40,40,.2);
}

.alert-info,
.evaluator-notice{
    background:var(--info-light);
    color:var(--info);
    border-color:rgba(10,111,191,.2);
}

.warning{
    background:var(--warning-light);
    color:var(--warning);
    border-color:rgba(180,105,14,.2);
}

/* =========================================================
   BADGES / PILLS
========================================================= */

.status,
.status-badge,
.status-pill,
.priority-badge,
.team-code,
.admin-eyebrow,
.auth-eyebrow,
.panel-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:var(--radius-pill);
    font-size:var(--caption);
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.4;
    white-space:nowrap;
}

.status-badge,
.status-pill,
.status{
    background:var(--surface-sunken);
    color:var(--text-light);
    border:1px solid var(--border);
}

.status-open,
.status-badge.green,
.status.green,
.status-pill.green{
    background:var(--success-light);
    color:var(--success);
    border-color:rgba(14,138,69,.22);
}

.status-badge.blue,
.status.blue,
.status-pill.blue{
    background:var(--info-light);
    color:var(--info);
    border-color:rgba(10,111,191,.22);
}

.status-badge.orange,
.status.orange,
.pending{
    background:var(--warning-light);
    color:var(--warning);
    border-color:rgba(180,105,14,.22);
}

.status-badge.purple,
.status.purple{
    background:#F0EDFD;
    color:var(--secondary);
    border-color:rgba(91,75,225,.2);
}

.priority-badge{
    text-transform:uppercase;
    letter-spacing:var(--tracking-wide);
    font-size:.6875rem;
    background:var(--surface-sunken);
    color:var(--text-muted);
}

.team-code{
    font-family:var(--font-mono);
    background:var(--background-deep);
    color:#fff;
    letter-spacing:.05em;
}

.admin-eyebrow,
.auth-eyebrow,
.panel-label{
    text-transform:uppercase;
    letter-spacing:var(--tracking-wide);
    font-size:.6875rem;
    color:var(--primary);
    background:var(--primary-light);
}

/* =========================================================
   FORMS
========================================================= */

.form-group{
    margin-bottom:var(--space-md);
}

.form-grid,
.form-row,
.input-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:var(--space-sm) var(--space-md);
}

label{
    display:block;
    font-size:var(--body-sm);
    font-weight:600;
    color:var(--text-strong);
    margin-bottom:8px;
    letter-spacing:var(--tracking-snug);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea{
    width:100%;
    height:var(--input-height);
    padding:0 16px;
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:var(--body-sm);
    color:var(--text-strong);
    transition:border-color var(--transition),
               box-shadow var(--transition),
               background var(--transition);
    appearance:none;
    -webkit-appearance:none;
}

textarea{
    height:auto;
    min-height:130px;
    padding:14px 16px;
    line-height:1.6;
    resize:vertical;
}

input[type="file"]{
    padding:12px 16px;
    height:auto;
    cursor:pointer;
}

select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:42px;
    cursor:pointer;
}

input::placeholder,
textarea::placeholder{
    color:var(--text-faint);
}

input:hover,
select:hover,
textarea:hover{
    border-color:var(--text-faint);
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(10,90,224,.12);
    background:var(--surface);
}

input:disabled,
select:disabled,
textarea:disabled{
    background:var(--surface-sunken);
    color:var(--text-faint);
    cursor:not-allowed;
}

.input-wrap,
.input-box{
    position:relative;
    display:flex;
    align-items:center;
}

.input-wrap > i,
.input-box > i{
    position:absolute;
    left:16px;
    font-size:.9rem;
    color:var(--text-faint);
    pointer-events:none;
    transition:color var(--transition);
}

.input-wrap input,
.input-box input{
    padding-left:44px;
}

.input-wrap:focus-within > i,
.input-box:focus-within > i{
    color:var(--primary);
}

.password-toggle{
    position:absolute;
    right:8px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-xs);
    color:var(--text-faint);
    transition:all var(--transition);
}

.password-toggle:hover{
    color:var(--primary);
    background:var(--primary-light);
}

.form-note,
.field-note,
.terms{
    font-size:var(--caption);
    color:var(--text-muted);
    line-height:1.55;
}

.field-note{
    margin-top:6px;
}

/* =========================================================
   CHOICE CHIPS  (account type / login type)
========================================================= */

.type-selector,
.login-types,
.toggle-group{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:10px;
}

.type-selector label,
.login-types label,
.toggle-group label{
    margin:0;
    cursor:pointer;
}

.type-selector input[type="radio"],
.login-types input[type="radio"],
.toggle-group input[type="radio"]{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.type-selector label > span,
.login-types label > span,
.toggle-group label > span,
.type-option{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:82px;
    padding:14px 10px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
    font-size:var(--caption);
    font-weight:600;
    color:var(--text-light);
    text-align:center;
    transition:all var(--transition);
}

.type-selector label > span i,
.login-types label > span i,
.toggle-group label > span i{
    font-size:1.15rem;
    color:var(--text-faint);
    transition:color var(--transition);
}

.type-selector label:hover > span,
.login-types label:hover > span{
    border-color:var(--primary);
    background:var(--primary-soft);
    transform:translateY(-2px);
}

.type-selector input:checked + span,
.login-types input:checked + span,
.toggle-group input:checked + span{
    border-color:var(--primary);
    background:var(--primary-light);
    color:var(--primary-dark);
    box-shadow:0 0 0 3px rgba(10,90,224,.1);
}

.type-selector input:checked + span i,
.login-types input:checked + span i,
.toggle-group input:checked + span i{
    color:var(--primary);
}

/* Checkbox switches used on the settings page */

input[type="checkbox"]{
    width:20px;
    height:20px;
    accent-color:var(--primary);
    cursor:pointer;
}

/* =========================================================
   TABLES
========================================================= */

.table-container,
.admin-table-wrapper{
    width:100%;
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}

table.admin-table,
.table-container table{
    width:100%;
    min-width:640px;
    font-size:var(--body-sm);
}

.admin-table thead th,
.table-container thead th{
    position:sticky;
    top:0;
    background:var(--surface-light);
    padding:14px 18px;
    text-align:left;
    font-size:.6875rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:var(--tracking-wide);
    color:var(--text-muted);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.admin-table tbody td,
.table-container tbody td{
    padding:16px 18px;
    border-bottom:1px solid var(--border-soft);
    color:var(--text-light);
    vertical-align:middle;
}

.admin-table tbody tr:last-child td,
.table-container tbody tr:last-child td{
    border-bottom:none;
}

.admin-table tbody tr{
    transition:background var(--transition);
}

.admin-table tbody tr:hover,
.table-container tbody tr:hover{
    background:var(--primary-soft);
}

.admin-table td strong{
    color:var(--text-strong);
    font-weight:600;
}

.empty-cell{
    text-align:center;
    padding:var(--space-2xl) var(--space-md) !important;
    color:var(--text-muted);
}

/* =========================================================
   ACTION BUTTONS IN TABLES
========================================================= */

.action-btn,
.quick-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    height:36px;
    padding:0 14px;
    border-radius:var(--radius-pill);
    font-size:var(--caption);
    font-weight:600;
    background:var(--surface-light);
    color:var(--text-strong);
    border:1px solid var(--border);
    transition:all var(--transition);
}

.action-btn:hover,
.quick-action:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    transform:translateY(-1px);
}

/* =========================================================
   EMPTY STATES
========================================================= */

.empty-state,
.empty-dashboard,
.admin-empty,
.student-empty,
.empty-announcement{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:var(--space-2xl) var(--space-md);
    gap:10px;
}

.empty-icon,
.student-empty-icon{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--surface-light);
    color:var(--text-faint);
    font-size:1.4rem;
    margin-bottom:6px;
}

.empty-state h3,
.empty-dashboard h3,
.student-empty h3{
    font-size:var(--heading-3);
    color:var(--text-strong);
}

.empty-state p,
.empty-dashboard p,
.student-empty p,
.admin-empty p{
    color:var(--text-muted);
    font-size:var(--body-sm);
    max-width:400px;
}

/* =========================================================
   PROGRESS
========================================================= */

.progress-box{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.progress-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:var(--caption);
    font-weight:600;
    color:var(--text-muted);
}

.progress-bar{
    height:8px;
    width:100%;
    background:var(--surface-sunken);
    border-radius:var(--radius-pill);
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:var(--gradient-primary);
    border-radius:var(--radius-pill);
    transition:width .8s var(--ease-out);
}

/* =========================================================
   BREADCRUMBS / PAGINATION
========================================================= */

.breadcrumbs,
.admin-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--caption);
    color:var(--text-muted);
    margin-bottom:var(--space-sm);
    flex-wrap:wrap;
}

.breadcrumbs a,
.admin-breadcrumb a{
    color:var(--text-muted);
    transition:color var(--transition);
}

.breadcrumbs a:hover,
.admin-breadcrumb a:hover{
    color:var(--primary);
}

/* =========================================================
   TABLE SEARCH + FILTER BAR
========================================================= */

.table-filters{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:var(--space-md);
}

.filter-search{
    position:relative;
    display:flex;
    align-items:center;
    flex:1 1 280px;
    min-width:0;
}

.filter-search > i{
    position:absolute;
    left:16px;
    font-size:.85rem;
    color:var(--text-faint);
    pointer-events:none;
}

.filter-search input{
    width:100%;
    height:var(--button-height-sm);
    padding:0 16px 0 44px;
    border-radius:var(--radius-pill);
}

/*
    The page themes set their own padding on every text input
    (.admin-body input[type="text"], .dashboard-body input[…]),
    which is specific enough to win and would pull the text back
    under the magnifying glass. These selectors carry one more
    class than those rules, so the room for the icon is kept
    whichever stylesheet loads last.
*/

.table-filters .filter-search input[type="text"],
.table-filters .filter-search input[type="search"]{
    padding-left:44px;
}

.table-filters select{
    width:auto;
    min-width:170px;
    height:var(--button-height-sm);
    padding:0 38px 0 16px;
    border-radius:var(--radius-pill);
    background-position:right 14px center;
}

.table-filters .action-btn{
    flex-shrink:0;
}

/* A form used purely to hold one button in a page header */

.page-header-action{
    display:flex;
    justify-content:flex-end;
    margin-bottom:var(--space-sm);
}

/* Several buttons sharing one table cell */

.row-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.row-actions form{
    display:inline-flex;
}

/* =========================================================
   PAGINATION
========================================================= */

.pagination-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    flex-wrap:wrap;
    margin-top:var(--space-md);
}

.pagination-count{
    color:var(--text-muted);
    font-weight:500;
}

.page-gap{
    padding:0 4px;
    color:var(--text-faint);
    font-weight:600;
}

.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:0;
    flex-wrap:wrap;
}

.page-btn{
    min-width:40px;
    height:40px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-xs);
    border:1px solid var(--border);
    background:var(--surface);
    font-size:var(--body-sm);
    font-weight:600;
    color:var(--text-light);
    transition:all var(--transition);
}

.page-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.page-btn.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

/* =========================================================
   ERROR PAGES
========================================================= */

/* Same pairing as the auth pages: deep blue ground, one
   white card carrying the message. */

.error-page{
    position:relative;
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:var(--space-xl) var(--space-md);
    overflow:hidden;
    font-family:var(--font-sans);
    background:
        radial-gradient(880px 520px at 50% -6%,rgba(37,110,255,.16),transparent 62%),
        var(--gradient-ink-flat);
}

.error-page::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(150,183,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(150,183,255,.05) 1px,transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 74%);
    mask-image:radial-gradient(circle at 50% 40%,#000,transparent 74%);
    pointer-events:none;
}

.error-card{
    position:relative;
    width:100%;
    max-width:520px;
    background:var(--surface);
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-ink),var(--shadow-inset);
    padding:clamp(32px,6vw,56px);
    text-align:center;
}

.error-icon{
    width:76px;
    height:76px;
    margin:0 auto var(--space-md);
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--primary-light);
    color:var(--primary);
    font-size:1.75rem;
}

.error-card h1{
    font-size:clamp(3rem,9vw,4.5rem);
    line-height:1;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:var(--space-xs);
}

.error-card h2{
    font-size:var(--heading-2);
    margin-bottom:var(--space-xs);
}

.error-card p{
    color:var(--text-muted);
    margin-bottom:var(--space-md);
}

.error-card small{
    display:block;
    padding:12px 16px;
    background:var(--surface-light);
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    margin-bottom:var(--space-md);
    text-align:left;
}

.error-card ul{
    text-align:left;
    margin-bottom:var(--space-md);
    display:flex;
    flex-direction:column;
    gap:8px;
}

.error-card ul li{
    padding:10px 14px;
    background:var(--danger-light);
    border-radius:var(--radius-xs);
    font-size:var(--body-sm);
    color:var(--danger);
}