/* ═══════════════════════════════════════════════════════════
   新竹市教師帳號認證系統 — Custom Theme
   主色：靛青 Indigo #4361ee  ·  字型：Noto Sans TC
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 字型 ──────────────────────────────────────────────── */
body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
    font-size: 14.5px;
    color: #2d3748;
    background: #f5f6fa;
}

/* ── 2. 靛青主色 ──────────────────────────────────────────── */
:root {
    --ind:        #4361ee;
    --ind-dark:   #3448c5;
    --ind-light:  #eef0fd;
    --ind-border: #dde3f0;
    --side-bg:    #f7f8ff;
    --side-text:  #3d4966;
}

/* Bootstrap utility class 覆寫 */
.bg-primary                 { background-color: var(--ind) !important; }
.text-primary               { color: var(--ind) !important; }
.border-primary             { border-color: var(--ind) !important; }
.badge.bg-primary           { background-color: var(--ind) !important; }

.btn-primary {
    --bs-btn-bg:               var(--ind);
    --bs-btn-border-color:     var(--ind);
    --bs-btn-hover-bg:         var(--ind-dark);
    --bs-btn-hover-border-color: var(--ind-dark);
    --bs-btn-active-bg:        #2e3fad;
}
.btn-outline-primary {
    --bs-btn-color:            var(--ind);
    --bs-btn-border-color:     var(--ind);
    --bs-btn-hover-bg:         var(--ind);
    --bs-btn-hover-border-color: var(--ind);
    --bs-btn-active-bg:        var(--ind-dark);
}
a             { color: var(--ind); }
a:hover       { color: var(--ind-dark); }

/* ── 3. Layout ────────────────────────────────────────────── */
html, body    { overflow-x: hidden; }
body          { padding-top: 62px; }

/* ── 4. Navbar ────────────────────────────────────────────── */
.navbar.bg-primary {
    background-color: var(--ind) !important;
    box-shadow: 0 2px 10px rgba(67, 97, 238, 0.22);
    padding-top:    0.35rem;
    padding-bottom: 0.35rem;
}
.navbar-brand {
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.02em;
    color:          #fff !important;
}
.navbar .nav-link {
    font-size:   0.84rem;
    padding-left:  0.65rem !important;
    padding-right: 0.65rem !important;
    border-radius: 6px;
    transition:    background 0.14s;
}
.navbar .nav-link:hover {
    background: rgba(255,255,255,0.15);
}

/* ── 5. Sidebar ───────────────────────────────────────────── */
#sidebar.sidebar-offcanvas {
    background:   var(--side-bg);
    border-right: 1px solid var(--ind-border);
    min-height:   calc(100vh - 62px);
    padding-top:    0.5rem;
    padding-bottom: 2rem;
}

#sidebar .list-group { padding: 0 6px; }

#sidebar .list-group-item {
    background:      transparent !important;
    border:          none !important;
    border-radius:   7px !important;
    margin-bottom:   1px;
    padding:         0.45rem 0.85rem;
    color:           var(--side-text);
    font-size:       0.875rem;
    font-weight:     500;
    text-decoration: none;
    transition:      background 0.14s, color 0.14s;
}
#sidebar .list-group-item:hover {
    background: var(--ind-light) !important;
    color:      var(--ind);
}
#sidebar .list-group-item.active {
    background: var(--ind) !important;
    color:      #fff !important;
}
#sidebar .list-group-item.list-group-item-info {
    background:  #e6ecfb !important;
    color:       #243063;
    font-weight: 600;
    border-left: 3px solid var(--ind) !important;
}
#sidebar .list-group-item.list-group-item-info:hover {
    background: var(--ind) !important;
    color:      #fff !important;
}

/* 隱藏每個側欄項目的第二、三個 icon（保留第一個） */
#sidebar .list-group-item .bi ~ .bi { display: none !important; }

/* <p></p> 當分隔線使用 */
#sidebar .list-group > p {
    margin:     6px 10px;
    padding:    0;
    height:     0;
    border-top: 1px solid var(--ind-border);
    overflow:   hidden;
}

/* ── 6. Card ──────────────────────────────────────────────── */
.card {
    border:        1px solid #e4e8f7;
    border-radius: 10px;
    box-shadow:    0 1px 6px rgba(67, 97, 238, 0.07);
    margin-bottom: 1.2rem;
}
.card-header {
    border-radius: 9px 9px 0 0 !important;
    padding:       0.6rem 1rem;
    font-size:     0.88rem;
    font-weight:   600;
}
.card-body    { padding: 1.1rem; }

/* ── 7. Table ─────────────────────────────────────────────── */
.table thead th,
.table > thead > tr > th {
    background-color: #ececf8 !important;
    color:            #3d4966 !important;
    border-color:     var(--ind-border) !important;
    font-weight:      600;
    white-space:      nowrap;
    font-size:        0.84rem;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #f7f8ff;
}
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
    background-color: var(--ind-light) !important;
}

/* ── 8. Form ──────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #a5b4fc;
    box-shadow:   0 0 0 0.2rem rgba(67, 97, 238, 0.15);
}

/* ── 9. Button 微調 ───────────────────────────────────────── */
.btn    { font-weight: 500; }
.btn-sm { font-size:  0.8rem; }

/* ── 10. Badge ────────────────────────────────────────────── */
.badge { font-weight: 500; }

/* ── 11. Alert 微調 ───────────────────────────────────────── */
.alert { border-radius: 8px; }

/* ── 12. Footer ───────────────────────────────────────────── */
.panel.panel-default:last-of-type {
    margin-top:    2rem;
    background:    #f7f8ff !important;
    border:        none !important;
    border-top:    1px solid var(--ind-border) !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}
.panel-footer          { font-size: 0.82rem; color: #6b7280; }
.panel-footer a        { color: var(--ind); }

/* ── 13. 行動版側欄 offcanvas ─────────────────────────────── */
@media screen and (max-width: 575.98px) {
    .row-offcanvas                   { position: relative; transition: all .25s ease-out; }
    .row-offcanvas-left              { left: 0; }
    .row-offcanvas-left.active       { left: 50%; }
    .row-offcanvas-left .sidebar-offcanvas { left: -50%; }
    .sidebar-offcanvas               { position: absolute; top: 0; width: 50%; }
}


/* ═══════════════════════════════════════════════════════════
   BS3 → BS5 相容層
   ═══════════════════════════════════════════════════════════ */

.v-center        { display: inline-block; vertical-align: middle; float: none; }
.text-right      { text-align: right !important; }
.btn-block       { display: block !important; width: 100% !important; }
.center-block    { display: block; margin-left: auto; margin-right: auto; }
.table-titleCol  { width: 90px; text-align: right; }
.contanier-outer { background-color: #fff; }

/* control-label */
.control-label { padding-top: 7px; margin-bottom: 0; font-weight: 600; }
.form-horizontal .control-label { text-align: right; }
.form-horizontal .form-group {
    display: flex; flex-wrap: wrap; align-items: center;
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-left:  calc(var(--bs-gutter-x, 1.5rem) * -.5);
}
.form-horizontal .form-group > * {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
    box-sizing:    border-box;
}

/* Panel */
.panel {
    margin-bottom: 1.25rem; background: #fff;
    border:        1px solid #e4e8f7;
    border-radius: 10px;
    box-shadow:    0 1px 6px rgba(67, 97, 238, 0.06);
}
.panel-heading {
    padding:       .6rem 1rem;
    background:    #ececf8;
    border-bottom: 1px solid var(--ind-border);
    border-radius: 9px 9px 0 0;
    font-weight:   600;
}
.panel-body   { padding: 1rem; }
.panel-footer {
    padding:       .6rem 1rem;
    background:    #f7f8ff;
    border-top:    1px solid #e4e8f7;
    border-radius: 0 0 9px 9px;
}
.panel > .panel-default           { padding: .75rem 1rem; }
.panel-default > .panel-heading   { background: #ececf8; color: #3d4966; }
.panel-primary > .panel-heading   { background: var(--ind);  border-color: var(--ind-dark); color: #fff; }
.panel-success > .panel-heading   { background: #198754; border-color: #157347; color: #fff; }
.panel-info    > .panel-heading   { background: #0dcaf0; border-color: #0aa2c0; color: #000; }
.panel-warning > .panel-heading   { background: #ffc107; border-color: #d39e00; color: #000; }
.panel-danger  > .panel-heading   { background: #dc3545; border-color: #c82333; color: #fff; }

/* Well */
.well    { padding: 19px; margin-bottom: 1.25rem; background: #f7f8ff; border: 1px solid #e4e8ff; border-radius: 8px; }
.well-sm { padding:  9px; }
.well-lg { padding: 24px; }

/* Page-header */
.page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #e4e8f7; }

/* bs-callout */
.bs-callout { padding: 20px; border: 1px solid var(--ind-border); border-left: 5px solid var(--ind); border-radius: 6px; margin-bottom: 1.25rem; background: #fff; }
.bs-callout h4           { margin-top: 0; margin-bottom: 5px; }
.bs-callout-danger       { border-left-color: #dc3545; background: #fff8f8; }
.bs-callout-warning      { border-left-color: #ffc107; background: #fffdf5; }
.bs-callout-info         { border-left-color: #0dcaf0; background: #f4fbff; }

/* Nav-tabs */
.nav-tabs > li > a { display: block; padding: .5rem .9rem; color: #555; text-decoration: none; border: 1px solid transparent; border-radius: 6px 6px 0 0; background: #ececf8; margin-right: 2px; }
.nav-tabs > li > a:hover  { color: var(--ind); background: var(--ind-light); border-color: var(--ind-border) var(--ind-border) transparent; }
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav-tabs .nav-link.active { color: var(--ind) !important; background: #fff !important; border-color: var(--ind-border) var(--ind-border) #fff !important; font-weight: 600; }
.tab-pane        { display: none; }
.tab-pane.active { display: block; }
.tab-content     { border: 1px solid var(--ind-border); border-top: none; padding: 1rem; background: #fff; border-radius: 0 0 6px 6px; }