/* Alert */
.alert-custom {
    background-color: #166BA8;
    color: white;
    border: 3px solid #fff200;
}


/* Buttons */
.button-green {
    background-color: #bfffd6;
    border: 3px solid #66aa84
}

    .button-green:hover {
        background-color: #ADFFB7;
        border-color: #66aa84;
    }

.button-sky-blue {
    background-color: #c2e2f9;
    border: 3px solid #4D64B8;
}

    .button-sky-blue:hover {
        background-color: #99d6f5;
        border-color: #4D64B8;
    }

.button-sky-blue-save-green {
    background-color: #c2e2f9;
    border: 3px solid #4D64B8;
}

    .button-sky-blue-save-green:hover {
        background-color: lightgreen;
        border-color: #4D64B8;
    }

.btn-clear-signature {
    background-color: #a3d8f0;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

    .btn-clear-signature:hover {
        background-color: #91D0ED;
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    }

    .btn-clear-signature:active {
        background-color: #7FC9EB;
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    }

.button-red {
    background-color: #FC8181;
    border: 3px solid #AB5252;
}

    .button-red:hover {
        background-color: #FC7474;
        border-color: #AB5252
    }


/* Divs */
.div-form-box {
    background-color: #ccefff;
    border: 2px solid #007acc;
    border-radius: 5px;
    max-width: 100%;
}

.info-box {
    background-color: #d4f0ff;
    border: 1px solid #007acc;
    border-radius: 5px;
    max-width: 100%;
    padding: 20px;
    animation: bounce-top 1s ease-in-out;
}

@-webkit-keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        animation-timing-function: ease-in;
    }

    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        animation-timing-function: ease-in;
    }

    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.div-blur {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px) contrast(1.2) saturate(1);
    -webkit-backdrop-filter: blur(20px) contrast(1.4) saturate(1.6); /* Safari */
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 12px 15px rgba(0,0,0,0.4);
}


/* Fileset and legend */
.fieldset-sky-blue {
    border: 1px solid midnightblue;
    padding: 1.5rem 1rem 1rem 1rem;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    background-color: #d3e7ff;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.legend-sky-blue {
    width: auto;
    padding: 0rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: steelblue;
}


/* Forms */
.form-floating > label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* hr */
.hr-blue {
    border: 3px solid #4D64B8;
    opacity: 1;
    margin: 20px 0;
  }

.hr-sky-blue {
    border: 3px solid #9ed0ef;
    opacity: 1;
    margin: 20px 0;
}


/*Images*/
img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}


/* Select */
.select-sky-blue {
    background-color: #ffffff;
    color: #333;
}

    .select-sky-blue option:checked {
        background-color: #b3e5ff;
        color: #000;
    }


/* Signature */
.signature-pad {
    width: 100%;
    height: 220px;
    border: 1px solid #a4d4f8;
    touch-action: none; /* prevents accidental scrolling on mobile devices */
    background-color: aliceblue;
}

.signature-container {
    margin-bottom: 1rem;
}

.signature-image {
    max-height: 100px;
    display: block;
    margin: 0 auto; /* centers the image horizontally */
}


/* Tables */
/* Tables container */
.table-container {
    width: 100%;
    overflow-x: auto;
}

    .table-container table {
        width: 100%;
        min-width: 600px;
        table-layout: auto;
    }


/* Tables general style */
table.table {
    border: 2px solid black;
    border-collapse: collapse; 
    text-align: center;
    word-wrap: break-word;
}

.td-reason {
    word-wrap: break-word;
    max-width: 200px;
}


/* Headers */
table.table thead th {
        position: sticky;
        top: 0; /* stick header */
        background-color: #c8dbff;
        color: midnightblue;
        padding: 0.75rem;
        text-align: center;
    }

/* Alternating rows */
table.table tbody tr:nth-child(odd) {
        background-color: #DDF1F9;
    }

table.table tbody tr:nth-child(even) {
        background-color: #d4effc;
    }

/* Hover row */
table.table tbody tr:hover {
    background-color: #bde1f5;
}

/* DataTables text color */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    color: midnightblue;
}

/* Margin controls DataTables*/
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 20px;
}

.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    margin-top: 20px;
}

/* Pagination buttons: Current and hover for enabled buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
        margin: 0 10px;
        padding: 5px;
        border-radius: 4px;
        background-color: #DDF1F9;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
        border-color: #4D64B8;
    }

.dataTables_wrapper .dataTables_paginate a.paginate_button:hover:not(.disabled) {
        background: #D4EEFF;
        border-color: #83CAEB;
        color: midnightblue !important;
        box-shadow: none;
    }

/* Remove top border from DataTables */
.dataTables_wrapper .dataTables_scrollHead {
    border-top: none;
}

/* Scrollbar for table body */
.dataTables_scrollBody::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
    background: #dceeff;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: #90CEF5;
    border-radius: 5px;
    border: 2px solid #f0f9fe;
}

    .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
        background-color: #99d6f5;
    }



/* ==================== Helpers ====================*/
.full-height-center {
    min-height: calc(100vh - 200px); /* nav + footer */
    display: flex;
    flex-direction: column;
    justify-content: center;
}