/* หน้างานทะเบียนและประมวลผล (pages/registrar.php)
 * hero อยู่ใน page-hero.css · สถิติระดับการศึกษามี CSS ของตัวเองใน includes/level_stats_section.php
 * ลำดับหมวดคงตามโค้ดเดิม (เช่น .hover-lift ต้องอยู่หลัง .doc-card-item)
 */

/* ══ ลิงก์บริการด่วน + แถบตัวเลขท้ายหน้า ══════════════════════════ */
/* Gradient Quick Links */
.quick-link-gradient {
    border-radius: 16px;
    padding: 25px 20px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.quick-link-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.25) 55%, transparent 70%);
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    z-index: 1;
}

.quick-link-gradient:hover::before {
    left: 120%;
}

.quick-link-gradient:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
}

.ql-icon-glow {
    position: relative;
}

.ql-icon-glow i {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.quick-link-gradient:hover .ql-icon-glow i {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    transform: scale(1.15);
}

.ql-arrow {
    position: absolute;
    bottom: 12px;
    right: 16px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.quick-link-gradient:hover .ql-arrow {
    color: #ffd700;
    transform: translateX(5px);
}

.ql-blue {
    background: linear-gradient(135deg, #003366 0%, #0066cc 100%);
}

.ql-purple {
    background: linear-gradient(135deg, #5b21b6 0%, #8b5cf6 100%);
}

.ql-green {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}

.ql-orange {
    background: linear-gradient(135deg, #c2410c 0%, #f97316 100%);
}

.ql-red {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
}

/* Counter Section */
.counter-section-reg {
    background: linear-gradient(135deg, #003366 0%, #001a33 50%, #002244 100%);
}

.counter-card-reg {
    text-align: center;
    padding: 25px;
}

.counter-icon-reg {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #003366;
}

.counter-number-reg {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}

.counter-label-reg {
    color: #ffd700;
    font-weight: 600;
}

.counter-sublabel-reg {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* ══ ประกาศจากงานทะเบียน ═════════════════════════════════════ */
.doc-card-item {
    transition: all 0.25s ease;
}

.doc-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.min-width-0 {
    min-width: 0;
}

.pagination .page-link {
    border: none;
    color: #003366;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #003366, #0066cc);
    border: none;
}

.reg-search-box { max-width: 550px; }
.reg-search-box.narrow { max-width: 500px; }
.btn-navy-gradient { background: linear-gradient(135deg, #003366, #0066cc); border: none; }
.badge-xs { font-size: 0.65rem; }
.btn-h36 { height: 36px; display: inline-flex; align-items: center; }
.btn-circle-36 { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

/* ══ สถิติการออกเอกสาร ══════════════════════════════════════ */
.doc-stats-table {
    border-collapse: collapse;
}
.doc-stats-table thead th {
    border: 1px solid #e2e8f0;
    padding: 14px 12px;
    white-space: nowrap;
}
.doc-stats-table tbody td {
    border: 1px solid #e2e8f0;
    padding: 14px 12px;
    white-space: nowrap;
    background: #fff;
}
.doc-stats-table tbody tr:hover td {
    background: #f8fafc;
}
#doc-year-selector .doc-year-link:focus,
#doc-year-selector .doc-year-link.active {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}
#doc-stats-card {
    transition: box-shadow 0.3s ease;
}
#doc-stats-card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
}
#doc-stats-card.loading {
    opacity: 0.55;
    pointer-events: none;
}
.doc-charts {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.doc-chart-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    height: 100%;
}
.doc-chart-title {
    font-weight: 700;
    color: #003366;
    margin-bottom: 12px;
}
.doc-donut-center {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.doc-stats-header {
    background: linear-gradient(135deg, #003366 0%, #001a33 100%);
}
.doc-stats-table thead th {
    background: #eef4fb;
    color: #003366;
}
.doc-stats-table thead th.doc-th-no { width: 5%; }
.doc-stats-table thead th.doc-th-total {
    background: #003366;
    color: #fff;
}
.doc-total-row { background: #fff7ed; }
.doc-total-row td { color: #92400e; }
.doc-total-row td.doc-grand-total {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #003366;
}
.doc-grand-total small {
    color: #003366;
    font-size: 0.7rem;
}
.doc-chart-canvas { height: 320px; }
.doc-chart-canvas.short { height: 280px; }

/* ══ ระเบียบ / ปฏิทิน / ยูทิลิตีร่วมของหน้า ══════════════════════ */
.bg-soft-blue {
    background-color: #eef4fb;
}



.btn-blue {
    background-color: var(--npu-blue);
    color: white;
}

.btn-blue:hover {
    background-color: var(--npu-blue-dark);
    color: white;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.hover-lift {
    transition: all 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.transition-transform {
    transition: transform 0.2s ease;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-pills .nav-link {
    color: var(--npu-blue);
    background: rgba(0, 51, 102, 0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-pills .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.nav-pills .nav-link:hover::before {
    left: 100%;
}

.nav-pills .nav-link:hover {
    background: rgba(0, 51, 102, 0.1);
    border-color: rgba(0, 51, 102, 0.2);
    transform: translateY(-2px);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #003366 0%, #001a33 100%) !important;
    color: white !important;
    border-color: transparent;
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.3);
}

.nav-pills .nav-link.active::before {
    animation: shineEffect 2s infinite;
}

@keyframes shineEffect {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* Table Enhancements (ตารางระเบียบ: แถวแยกเป็นการ์ด) */
.table.border-separate {
    border-collapse: separate;
    border-spacing: 0 12px;
}

.rounded-start-4 {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.rounded-end-4 {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.reg-col-year { width: 120px; }
.reg-col-action { width: 150px; }
.reg-icon-box { width: 48px; height: 48px; }