/* =========================================================
   PREMIUM MODAL WITH GRADIENT BORDER + SOFT HEADER/FOOTER
   NOTE: Width untouched – appearance only
   ========================================================= */

/* ---------------------------------------------------------
   MODAL CONTENT (Gradient Border using layered backgrounds)
   --------------------------------------------------------- */
.modal-content {
    /* Trick: 2 backgrounds = border gradient + inner fill */
    background:
        linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.55),   /* indigo */
            rgba(14, 165, 233, 0.45),   /* sky */
            rgba(34, 197, 94, 0.35)     /* emerald */
        ) border-box,
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        ) padding-box;

    /* Border thickness */
    border: 3px solid transparent;

    /* Premium rounded corners */
    border-radius: 18px;

    /* Elevation */
    box-shadow:
        0 24px 50px rgba(15, 23, 42, 0.22),
        0 10px 24px rgba(15, 23, 42, 0.14);

    overflow: hidden;
}

/* ---------------------------------------------------------
   MODAL HEADER (Subtle gradient, not loud)
   --------------------------------------------------------- */
.modal-header {
    background: linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.95) 0%,
        rgba(241, 245, 249, 0.9) 100%
    );

    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 14px 18px;
}

/* Header title */
.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.3px;
}

/* Close button */
.modal-header .btn-close {
    opacity: 0.45;
    transition: all 0.2s ease;
}

.modal-header .btn-close:hover {
    opacity: 0.9;
    transform: rotate(90deg) scale(1.05);
}

/* ---------------------------------------------------------
   MODAL BODY
   --------------------------------------------------------- */
.modal-body {
    background: #ffffff;
    padding: 18px;
}

/* Inner sections (Year / Month panels) */
.modal-body .border {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    ) !important;

    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 4px 10px rgba(15, 23, 42, 0.06);
}

/* ---------------------------------------------------------
   MODAL FOOTER (Matches header elegance)
   --------------------------------------------------------- */
.modal-footer {
    background: linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.95) 0%,
        rgba(241, 245, 249, 0.9) 100%
    );

    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px 18px;
}

/* ---------------------------------------------------------
   FOOTER BUTTONS
   --------------------------------------------------------- */
.modal-footer .btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Primary (Print) button polish */
.modal-footer .btn-success {
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}

/* Secondary button */
.modal-footer .btn-outline-secondary {
    border-color: rgba(15, 23, 42, 0.25);
    color: #334155;
}