/* duty/assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

html, body {
    font-family: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f0f4fc;
    color: #0f172a;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: -0.01em;
}

/* Summary & Details Styling (Hide native triangle marker) */
summary::-webkit-details-marker {
    display: none;
}
summary {
    list-style: none;
}

/* Guard against modal overlay collisions & enforce hidden display */
.hidden {
    display: none !important;
}

/* Minimal Luxury Typography */
h1, h2, h3, h4, .font-heading {
    letter-spacing: -0.02em;
}

/* Template Toggle Buttons (Finger-friendly min-h-48px) */
.template-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    user-select: none;
    text-align: left;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
}

.template-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
}

.template-btn.is-active {
    border-color: #059669 !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    font-weight: 600;
    box-shadow: 0 2px 8px -1px rgba(16, 185, 129, 0.25);
}

.template-btn.is-problem {
    border-color: #fed7aa;
    background: #fffaf5;
    color: #9a3412;
}

.template-btn.is-problem.is-active {
    border-color: #ea580c !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
    box-shadow: 0 2px 8px -1px rgba(234, 88, 12, 0.25);
}

/* Teacher Selection Pills */
.teacher-pill {
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.teacher-pill:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.teacher-pill.is-selected {
    border-color: #0d9488 !important;
    background: #f0fdfa !important;
    color: #0f766e !important;
    box-shadow: 0 2px 6px -1px rgba(13, 148, 136, 0.2);
}

/* Photo Checklist Guide Pills */
.photo-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.8);
    color: #475569;
}

.photo-guide-pill.is-done {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

/* Smooth Entrance & Micro-Animations */
.fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseSoft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.96); }
}

.pulse-soft {
    animation: pulseSoft 2.4s infinite ease-in-out;
}

/* Premium Glass & Card Effects */
.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.premium-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-card:hover {
    box-shadow: 0 12px 28px -4px rgba(79, 70, 229, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
}

.hero-mesh {
    background: #ffffff !important;
    background: linear-gradient(180deg, var(--day-glow-soft, rgba(254, 243, 199, 0.45)) 0%, #ffffff 135px) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 10px 32px -8px var(--day-glow, rgba(245, 158, 11, 0.15)), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.45s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.hero-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--day-bar-gradient, linear-gradient(90deg, #d97706, #f59e0b, #fbbf24));
    transition: background 0.45s ease;
    z-index: 10;
}

.hero-ambient-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    border-radius: 9999px;
    background: var(--day-primary, #f59e0b);
    opacity: 0.12;
    filter: blur(52px);
    pointer-events: none;
    transition: background 0.45s ease;
}

.active-day-pill {
    background: var(--day-bar-gradient, linear-gradient(135deg, #d97706, #f59e0b)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px -2px var(--day-glow, rgba(245, 158, 11, 0.4)) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.active-day-pill * {
    color: #ffffff !important;
}

/* ท่า 18: Shimmer Sweep for Top Accent Bar */
.shimmer-sweep-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 35%;
    height: 6px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 100%
    );
    animation: shimmerSweepHero 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 15;
}

@keyframes shimmerSweepHero {
    0% {
        left: -130%;
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    45% {
        left: 230%;
        opacity: 0.9;
    }
    46%, 100% {
        left: 230%;
        opacity: 0;
    }
}

/* ท่า 10: 3D Tilt for Hero Card */
.hero-mesh.tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* =====================================================
   DYNAMIC DAY-OF-WEEK THEMES (CLEAN STUDIO LIGHT MODE)
   1. จันทร์ (Amber Gold)
   2. อังคาร (Rose Blossom)
   3. พุธ (Fresh Emerald)
   4. พฤหัสบดี (Radiant Tangerine)
   5. ศุกร์ (Ocean Sky Blue)
   6. เสาร์ (Royal Lavender / Velvet Violet)
   7. อาทิตย์ (Coral Ruby Crimson)
   ===================================================== */
:root, [data-duty-day="1"], [data-duty-day="monday"] {
    --day-primary: #f59e0b; /* Amber Gold */
    --day-primary-light: #fde047;
    --day-primary-dark: #d97706;
    --day-glow: rgba(245, 158, 11, 0.28);
    --day-glow-soft: rgba(254, 243, 199, 0.45);
    --day-border: rgba(245, 158, 11, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
}

[data-duty-day="2"], [data-duty-day="tuesday"] {
    --day-primary: #ec4899; /* Rose Pink */
    --day-primary-light: #f9a8d4;
    --day-primary-dark: #db2777;
    --day-glow: rgba(236, 72, 153, 0.28);
    --day-glow-soft: rgba(253, 242, 248, 0.45);
    --day-border: rgba(236, 72, 153, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #be185d 0%, #db2777 50%, #ec4899 100%);
}

[data-duty-day="3"], [data-duty-day="wednesday"] {
    --day-primary: #10b981; /* Fresh Emerald Green */
    --day-primary-light: #6ee7b7;
    --day-primary-dark: #059669;
    --day-glow: rgba(16, 185, 129, 0.28);
    --day-glow-soft: rgba(209, 250, 229, 0.45);
    --day-border: rgba(16, 185, 129, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #047857 0%, #059669 50%, #10b981 100%);
}

[data-duty-day="4"], [data-duty-day="thursday"] {
    --day-primary: #f97316; /* Warm Tangerine Orange */
    --day-primary-light: #fed7aa;
    --day-primary-dark: #ea580c;
    --day-glow: rgba(249, 115, 22, 0.28);
    --day-glow-soft: rgba(255, 237, 213, 0.45);
    --day-border: rgba(249, 115, 22, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #c2410c 0%, #ea580c 50%, #f97316 100%);
}

[data-duty-day="5"], [data-duty-day="friday"] {
    --day-primary: #0ea5e9; /* Ocean Sky Blue */
    --day-primary-light: #bae6fd;
    --day-primary-dark: #0284c7;
    --day-glow: rgba(14, 165, 233, 0.28);
    --day-glow-soft: rgba(224, 242, 254, 0.45);
    --day-border: rgba(14, 165, 233, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%);
}

[data-duty-day="6"], [data-duty-day="saturday"] {
    --day-primary: #8b5cf6; /* Royal Lavender / Velvet Violet */
    --day-primary-light: #ddd6fe;
    --day-primary-dark: #7c3aed;
    --day-glow: rgba(139, 92, 246, 0.28);
    --day-glow-soft: rgba(243, 232, 255, 0.45);
    --day-border: rgba(139, 92, 246, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%);
}

[data-duty-day="7"], [data-duty-day="0"], [data-duty-day="sunday"] {
    --day-primary: #f43f5e; /* Coral Ruby Crimson */
    --day-primary-light: #fecdd3;
    --day-primary-dark: #e11d48;
    --day-glow: rgba(244, 63, 94, 0.28);
    --day-glow-soft: rgba(255, 228, 230, 0.45);
    --day-border: rgba(244, 63, 94, 0.35);
    --day-bar-gradient: linear-gradient(90deg, #be123c 0%, #e11d48 50%, #f43f5e 100%);
}

/* Duty Point Cards Ambient Day Accent */
.duty-point-card {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.duty-point-card:hover {
    border-color: var(--day-border) !important;
    box-shadow: 0 12px 28px -4px var(--day-glow), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
    transform: translateY(-2px);
}

/* Floating Glass Bottom Nav in Duty Log (Matching SIS style) */
nav.fixed.bottom-0 {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(226, 232, 240, 0.5) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Official Report Paper Styling (Desktop & Print A4, Mobile Fluid without horizontal scroll) */
.official-report-paper {
    font-family: 'Sarabun', sans-serif;
    background: #ffffff;
    color: #000000;
    line-height: 1.55;
    font-size: 15px;
    width: 100%;
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 18mm 18mm 18mm 22mm;
    box-sizing: border-box;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.official-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 16px;
    font-size: 14.5px;
    table-layout: fixed;
}

.official-table th,
.official-table td {
    border: 1px solid #000000;
    padding: 8px 10px;
    vertical-align: top;
    color: #000000;
    overflow-wrap: break-word;
    word-break: break-word;
}

.official-table th {
    font-weight: 700;
    text-align: center;
    background-color: #ffffff;
}

.official-table thead {
    display: table-header-group;
}

.official-table tfoot {
    display: table-footer-group;
}

.official-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
}

.official-signature-block {
    page-break-inside: avoid;
    break-inside: avoid;
}

.signature-img-blend {
    mix-blend-mode: multiply;
    filter: contrast(1.15);
    background: transparent !important;
}

.official-photo-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.official-photo-grid img {
    width: 100%;
    max-width: 210px;
    max-height: 160px;
    object-fit: cover;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    display: block;
}

.page-break-before {
    page-break-before: always;
    break-before: page;
}

/* Document Wrapper for Official Paper */
.paper-scroll-wrapper {
    width: 100%;
    overflow: visible;
    position: relative;
    border-radius: 18px;
}

/* Touch Pan & Scrollbar Utilities */
.touch-pan-x {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile Screen Adaptation for Official Paper (Fits 100% Screen Width, ZERO Horizontal Scroll!) */
@media screen and (max-width: 767px) {
    .official-report-paper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 16px 10px !important;
        font-size: 12.5px !important;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
        margin: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }

    .official-table {
        width: 100% !important;
        font-size: 11px !important;
        table-layout: fixed !important;
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }

    .official-table th,
    .official-table td {
        padding: 4px 3px !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .official-photo-grid {
        gap: 4px !important;
    }

    .official-photo-grid img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }

    .official-signature-block {
        margin-top: 16px !important;
        font-size: 11px !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    .official-signature-block img {
        height: 36px !important;
        max-width: 110px !important;
    }

    /* Prevent auto-zoom on input focus in iOS */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
        font-size: 16px !important;
    }
}

/* Print Media Queries (Always Crisp A4 Portrait) */
@media print {
    @page {
        size: A4 portrait;
        margin: 14mm 14mm 14mm 18mm;
    }

    html, body {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body * {
        visibility: hidden;
    }

    #printable-report-area,
    #printable-report-area * {
        visibility: visible;
    }

    .paper-scroll-wrapper {
        overflow: visible !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #printable-report-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .official-report-paper {
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .official-table {
        font-size: 14.5px !important;
    }

    .official-table thead {
        display: table-header-group !important;
    }

    .official-table th,
    .official-table td {
        padding: 8px 10px !important;
    }

    .official-table tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .official-signature-block {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .signature-img-blend {
        mix-blend-mode: multiply !important;
        filter: contrast(1.15) !important;
        background: transparent !important;
    }

    .no-print {
        display: none !important;
    }
}


/* =====================================================
   ท่า 23: แถบไฮไลท์สไลด์ตามนิ้ว (Liquid Sliding Segmented Tabs)
   ===================================================== */
#week-tabs-track {
    position: relative;
    background: rgba(241, 245, 249, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.03);
    padding: 4px;
    min-height: 58px;
}

#liquid-day-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    height: calc(100% - 8px);
    border-radius: 17px;
    background: var(--day-bar-gradient, linear-gradient(135deg, #d97706, #f59e0b));
    box-shadow: 0 4px 14px -2px var(--day-glow, rgba(245, 158, 11, 0.38));
    pointer-events: none;
    z-index: 1;
    transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.32s ease,
                box-shadow 0.32s ease,
                opacity 0.25s ease;
    will-change: left, width;
}

.day-tab-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 17px;
    height: 100%;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.day-tab-btn:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.6);
}

.day-tab-btn:active {
    transform: scale(0.96);
}

/* Automatic CSS color styling for Active vs Inactive Tabs */
.day-tab-btn .tab-title {
    color: #1e293b;
    font-weight: 800;
    transition: color 0.2s ease;
}

.day-tab-btn.is-active .tab-title {
    color: #ffffff !important;
    font-weight: 900;
}

.day-tab-btn .tab-sub {
    color: #64748b;
    font-weight: 600;
    transition: color 0.2s ease;
}

.day-tab-btn.is-active .tab-sub {
    color: rgba(255, 255, 255, 0.95) !important;
}


/* =====================================================
   STUDIO MOTION ENGINE (ท่า 1, 10, 17, 18, 19, 20)
   ===================================================== */

/* ท่า 1: แถวสไลด์เรียงคิว (Stagger Cascade Entrance) */
.stagger-in {
    opacity: 0;
    animation: staggerCascade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--stagger-i, 0) * 55ms);
}

@keyframes staggerCascade {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ท่า 10: 3D Tilt & Ambient Depth */
.tilt-card-subtle {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease;
}

/* ท่า 17: ปุ่มเด้งดึ๋งนุ่มนวล (Tactile Click) */
.tactile-btn {
    transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, filter 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tactile-btn:active {
    transform: scale(0.94);
}

.tactile-btn:hover {
    transform: translateY(-1px);
}

/* ท่า 18: แสงสีเงินกวาดผ่านปุ่ม (Shimmer Sweep) */
.shimmer-btn {
    position: relative;
    overflow: hidden;
}

.shimmer-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transform: rotate(25deg);
    animation: shimmerSweepBtn 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

@keyframes shimmerSweepBtn {
    0% { left: -120%; }
    18% { left: 180%; }
    100% { left: 180%; }
}

/* ท่า 19: ตราประทับกระแทกหนักแน่น (Official Executive Stamp) */
.official-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.02em;
    border: 2px solid;
    transform: rotate(-6deg);
    user-select: none;
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.22);
}

.official-stamp.stamp-director {
    color: #047857;
    border-color: #059669;
    background: rgba(236, 253, 245, 0.95);
    text-shadow: 0 0 1px rgba(5, 150, 105, 0.3);
}

.official-stamp.stamp-deputy {
    color: #0f766e;
    border-color: #0d9488;
    background: rgba(240, 253, 250, 0.95);
    text-shadow: 0 0 1px rgba(13, 148, 136, 0.3);
}

.stamp-impact {
    animation: stampSlam 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes stampSlam {
    0% {
        opacity: 0;
        transform: scale(2.8) rotate(-22deg);
        filter: blur(4px);
    }
    65% {
        opacity: 1;
        transform: scale(0.92) rotate(-5deg);
        filter: blur(0);
    }
    85% {
        transform: scale(1.05) rotate(-7deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(-6deg);
    }
}

/* Modal Spring In Animation */
.modal-spring {
    animation: modalSpringIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalSpringIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Image Hover Zoom & Glare in Photo Grids */
.duty-photo-thumb {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.duty-photo-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -3px rgba(15, 23, 42, 0.1);
}

.duty-photo-thumb img {
    transition: transform 0.35s ease;
}

.duty-photo-thumb:hover img {
    transform: scale(1.04);
}