@charset "utf-8";
/* ==========================================================================
   臺北市教育局 國中小魔術方塊競賽報名系統
   共用樣式表 — Default.aspx / Data.aspx / Info.aspx 三頁共用
   自足樣式，不依賴任何 CDN，外部網路被封鎖時仍可正常顯示。
   ========================================================================== */

/* --- 設計變數 ---------------------------------------------------------- */
:root {
    --mc-primary: #2563eb;
    --mc-primary-dark: #1d4ed8;
    --mc-primary-darker: #1e3a8a;
    --mc-primary-soft: #eff6ff;

    --mc-text: #0f172a;
    --mc-text-muted: #64748b;
    --mc-text-invert: #ffffff;

    --mc-bg: #f1f5f9;
    --mc-surface: #ffffff;
    --mc-border: #e2e8f0;
    --mc-border-strong: #cbd5e1;

    --mc-success: #15803d;
    --mc-success-soft: #f0fdf4;
    --mc-danger: #b91c1c;
    --mc-danger-soft: #fef2f2;
    --mc-warning: #b45309;
    --mc-warning-soft: #fffbeb;

    --mc-radius: 10px;
    --mc-radius-sm: 6px;
    --mc-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
    --mc-shadow-lg: 0 4px 6px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .10);

    --mc-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體",
               system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- 基礎 -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--mc-bg);
    color: var(--mc-text);
    font-family: var(--mc-font);
    font-size: 16px;
    line-height: 1.65;
    /* 中文標點與英數混排時字距更自然 */
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; }

a { color: var(--mc-primary-dark); }
a:hover { color: var(--mc-primary-darker); }

/* --- 版面骨架 ---------------------------------------------------------- */
.mc-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mc-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

.mc-main--narrow { max-width: 520px; padding-top: 48px; }

/* 置中於整個視窗（登入頁專用） */
.mc-main--center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 48px;
}

/* --- 頁首 -------------------------------------------------------------- */
.mc-header {
    background: var(--mc-primary-darker);
    color: var(--mc-text-invert);
    box-shadow: var(--mc-shadow);
}

/* 魔術方塊六色識別條 */
.mc-header__stripe {
    height: 4px;
    display: flex;
}
.mc-header__stripe i {
    flex: 1;
    display: block;
}
.mc-header__stripe i:nth-child(1) { background: #ffffff; }
.mc-header__stripe i:nth-child(2) { background: #e11d48; }
.mc-header__stripe i:nth-child(3) { background: #2563eb; }
.mc-header__stripe i:nth-child(4) { background: #ea580c; }
.mc-header__stripe i:nth-child(5) { background: #16a34a; }
.mc-header__stripe i:nth-child(6) { background: #facc15; }

.mc-header__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mc-header__title { font-size: 1.45rem; letter-spacing: .01em; }

.mc-header__subtitle {
    font-size: .85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .78);
    margin-top: 2px;
}

.mc-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 頁首上的次要連結／按鈕 */
.mc-header__link {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: var(--mc-radius-sm);
    color: #ffffff;
    text-decoration: none;
    font-size: .875rem;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.mc-header__link:hover {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

/* --- 卡片 -------------------------------------------------------------- */
.mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
    margin-bottom: 20px;
    overflow: hidden;

    /* 卡片主題色，由下方修飾類別覆寫；未指定時維持原本的淡灰藍 */
    --mc-card-tint: #fbfdff;
    --mc-card-line: var(--mc-border);
    --mc-card-accent: var(--mc-border-strong);
    --mc-card-ink: var(--mc-text);
}

.mc-card--elevated { box-shadow: var(--mc-shadow-lg); }

/* 標題列色系 —— 色票取自頁首的魔術方塊識別條，全站只用這四色。
   同一頁的各區塊分色，讓老師與承辦人掃過去就能分辨段落；跨頁面則同色同義：
   藍＝主要作業、綠＝聯絡資料、琥珀＝帳號安全、玫瑰＝不可逆的管理操作。 */
.mc-card--blue  { --mc-card-tint: #eff6ff; --mc-card-line: #bfdbfe; --mc-card-accent: #2563eb; --mc-card-ink: #1e40af; }
.mc-card--green { --mc-card-tint: #f0fdf4; --mc-card-line: #bbf7d0; --mc-card-accent: #16a34a; --mc-card-ink: #15803d; }
.mc-card--amber { --mc-card-tint: #fffbeb; --mc-card-line: #fde68a; --mc-card-accent: #ea580c; --mc-card-ink: #b45309; }
.mc-card--rose  { --mc-card-tint: #fff1f2; --mc-card-line: #fecdd3; --mc-card-accent: #e11d48; --mc-card-ink: #be123c; }

.mc-card__header {
    padding: 16px 22px;
    background: var(--mc-card-tint);
    border-bottom: 1px solid var(--mc-card-line);
    /* 頂端主題色條：卡片是 overflow:hidden，inset 陰影會順著圓角一起裁切 */
    box-shadow: inset 0 3px 0 var(--mc-card-accent);
}

.mc-card__title { font-size: 1rem; color: var(--mc-card-ink); }

.mc-card__hint {
    font-size: .85rem;
    color: var(--mc-text-muted);
    font-weight: 400;
    margin-top: 3px;
}

.mc-card__body { padding: 22px; }

.mc-card__footer {
    padding: 16px 22px;
    border-top: 1px solid var(--mc-border);
    background: #fbfdff;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- 表單 -------------------------------------------------------------- */
.mc-field { margin-bottom: 18px; }
.mc-field:last-child { margin-bottom: 0; }

.mc-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.mc-label__optional {
    font-weight: 400;
    color: var(--mc-text-muted);
    font-size: .8rem;
    margin-left: 4px;
}

/* ASP.NET TextBox / DropDownList 渲染出的原生元素 */
.mc-input {
    display: block;
    width: 100%;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mc-text);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.mc-input:focus {
    outline: none;
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.mc-input:disabled,
.mc-input[disabled] {
    background: #f8fafc;
    color: var(--mc-text-muted);
    cursor: not-allowed;
}
.mc-input::placeholder { color: #94a3b8; }

select.mc-input {
    cursor: pointer;
    /* 讓 select 高度與 input 一致 */
    height: calc(1.5em + 20px + 2px);
}

/* 代碼、數字類欄位用等寬字並加大字距，避免看錯 */
.mc-input--code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

/* 輸入框 + 按鈕並排 */
.mc-input-group { display: flex; gap: 8px; align-items: stretch; }
.mc-input-group .mc-input { flex: 1; min-width: 0; }

.mc-help {
    font-size: .8rem;
    color: var(--mc-text-muted);
    margin-top: 6px;
}

/* 雙欄表單，窄螢幕自動疊成單欄 */
.mc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* --- 按鈕 -------------------------------------------------------------- */
.mc-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--mc-radius-sm);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.mc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}
.mc-btn:disabled,
.mc-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.mc-btn--primary {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
    color: #ffffff;
}
.mc-btn--primary:hover:not([disabled]) {
    background: var(--mc-primary-dark);
    border-color: var(--mc-primary-dark);
    color: #ffffff;
}

.mc-btn--secondary {
    background: var(--mc-surface);
    border-color: var(--mc-border-strong);
    color: #334155;
}
.mc-btn--secondary:hover:not([disabled]) {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--mc-text);
}

.mc-btn--success {
    background: var(--mc-success);
    border-color: var(--mc-success);
    color: #ffffff;
}
.mc-btn--success:hover:not([disabled]) { background: #166534; border-color: #166534; }

.mc-btn--danger {
    background: var(--mc-danger);
    border-color: var(--mc-danger);
    color: #ffffff;
}
.mc-btn--danger:hover:not([disabled]) { background: #991b1b; border-color: #991b1b; }

.mc-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mc-primary-dark);
}
.mc-btn--ghost:hover:not([disabled]) { background: var(--mc-primary-soft); }

.mc-btn--lg { padding: 12px 26px; font-size: 1.05rem; }
.mc-btn--sm { padding: 6px 13px; font-size: .85rem; }
.mc-btn--block { display: block; width: 100%; }

/* 分段切換（國小／國中） */
.mc-segment { display: inline-flex; gap: 0; }
.mc-segment .mc-btn { border-radius: 0; margin-left: -1px; }
.mc-segment .mc-btn:first-child { border-radius: var(--mc-radius-sm) 0 0 var(--mc-radius-sm); margin-left: 0; }
.mc-segment .mc-btn:last-child { border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0; }
/* 目前選中的分頁 */
.mc-segment .is-active {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
    color: #ffffff;
    position: relative;
    z-index: 1;
}

/* --- 訊息列 ------------------------------------------------------------ */
/* ASP.NET Label 沒有文字時會渲染成空的 <span>，用 :empty 讓它完全不佔版面 */
.mc-alert {
    display: block;
    padding: 11px 15px;
    border-radius: var(--mc-radius-sm);
    border: 1px solid transparent;
    font-size: .9rem;
    margin-top: 14px;
}
.mc-alert:empty { display: none; }

.mc-alert--info    { background: var(--mc-primary-soft); border-color: #bfdbfe; color: #1e40af; }
.mc-alert--success { background: var(--mc-success-soft); border-color: #bbf7d0; color: var(--mc-success); }
.mc-alert--danger  { background: var(--mc-danger-soft);  border-color: #fecaca; color: var(--mc-danger); }
.mc-alert--warning { background: var(--mc-warning-soft); border-color: #fde68a; color: var(--mc-warning); }

/* --- 資訊列（唯讀欄位） ------------------------------------------------ */
.mc-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--mc-border);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    overflow: hidden;
}
.mc-summary__item { background: var(--mc-surface); padding: 14px 18px; }
.mc-summary__label {
    font-size: .78rem;
    color: var(--mc-text-muted);
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.mc-summary__value { font-size: 1.05rem; font-weight: 600; }
.mc-summary__value--code { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* --- 統計數字 ---------------------------------------------------------- */
.mc-stat { display: flex; align-items: baseline; gap: 8px; }
.mc-stat__number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mc-primary-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.mc-stat__unit { font-size: .95rem; color: var(--mc-text-muted); }

/* --- 表格 / GridView --------------------------------------------------- */
/* GridView 會渲染成 <table>，寬表格需要能水平捲動而不撐破版面 */
.mc-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 長名單（全市數百筆）限制高度並固定表頭，
   避免表格把頁面其他卡片擠到很下面，捲動時也看得到欄位名稱。
   註：GridView 不會渲染 <thead>，表頭 th 直接位於第一個 <tr>，故選擇器不加 thead。
   GridView 會內嵌 border-collapse:collapse，此時 sticky 元素的 border 不會跟著固定，
   因此下緣改用 box-shadow 繪製。 */
.mc-table-wrap--scroll {
    max-height: 62vh;
    overflow-y: auto;
}
.mc-table-wrap--scroll .mc-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--mc-border-strong);
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    background: var(--mc-surface);
}

.mc-table th,
.mc-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--mc-border);
    vertical-align: middle;
}

.mc-table th {
    background: #f8fafc;
    font-weight: 600;
    font-size: .85rem;
    color: #475569;
    letter-spacing: .03em;
    white-space: nowrap;
    border-bottom: 1px solid var(--mc-border-strong);
}

/* 可排序表頭：AllowSorting 會把 HeaderText 包成 __doPostBack 連結，
   不覆寫的話會套到全站的藍色連結樣式，表頭看起來像冒出一排超連結。 */
.mc-table th a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.mc-table th a:hover,
.mc-table th a:focus-visible {
    color: var(--mc-primary);
    text-decoration: underline;
}

/* 目前排序中的欄位標記（▲升序／▼降序） */
.mc-sort {
    margin-left: 4px;
    color: var(--mc-primary);
    font-size: .8em;
}

.mc-table tr:last-child td { border-bottom: none; }
.mc-table tbody tr:hover td { background: #f8fbff; }

/* 表格內的輸入框不要撐太寬 */
.mc-table .mc-input { min-width: 120px; }

/* 表格內的操作按鈕組 */
.mc-table__actions { white-space: nowrap; display: flex; gap: 6px; }

/* 空白欄位提示 */
.mc-empty-cell {
    color: #94a3b8;
    font-size: .875rem;
}

/* ASP.NET Label 空值時渲染成空 <span>，以 :empty 補上「尚未填寫」提示，
   讓承辦人一眼看出哪幾格還沒填，不需另外寫程式判斷。 */
.mc-cell-value:empty::after {
    content: "尚未填寫";
    color: #94a3b8;
    font-size: .875rem;
}

/* GridView 無資料時的訊息 */
.mc-table-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mc-text-muted);
}

/* --- 步驟指示 ---------------------------------------------------------- */
.mc-step {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.mc-step__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mc-primary);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mc-step__text { font-size: .875rem; font-weight: 600; color: #334155; }

/* 尚未輪到的步驟 */
.mc-step--pending .mc-step__num { background: var(--mc-border-strong); }
.mc-step--pending .mc-step__text { color: var(--mc-text-muted); }

/* --- 頁尾 -------------------------------------------------------------- */
.mc-footer {
    flex-shrink: 0;
    padding: 20px;
    text-align: center;
    font-size: .82rem;
    color: var(--mc-text-muted);
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface);
}

/* --- 工具類 ------------------------------------------------------------ */
.mc-divider { height: 1px; background: var(--mc-border); margin: 22px 0; border: 0; }
.mc-mt-0 { margin-top: 0; }
.mc-mb-0 { margin-bottom: 0; }
.mc-text-muted { color: var(--mc-text-muted); }
.mc-nowrap { white-space: nowrap; }
.mc-spacer { flex: 1 1 auto; }

/* 只給螢幕閱讀器看的文字 */
.mc-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 響應式 ------------------------------------------------------------ */
@media (max-width: 720px) {
    body { font-size: 15px; }
    .mc-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .mc-header__inner { padding: 13px 16px; }
    .mc-header__title { font-size: 1.15rem; }
    .mc-main { padding: 20px 14px 40px; }
    .mc-main--narrow { padding-top: 24px; }
    .mc-card__body { padding: 18px; }
    .mc-card__header, .mc-card__footer { padding: 14px 18px; }
    .mc-card__footer .mc-btn { flex: 1 1 auto; }
    .mc-input-group { flex-wrap: wrap; }
    .mc-input-group .mc-btn { flex: 1 0 auto; }
}

/* --- 列印 -------------------------------------------------------------- */
@media print {
    body { background: #ffffff; }
    .mc-header__actions,
    .mc-card__footer,
    .mc-btn { display: none !important; }
    .mc-card { box-shadow: none; border-color: #999; }
}