html {
    position: relative;
    min-height: 100%;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    html {
        font-size: 0.9rem;
    }
}

body {
    margin-bottom: 60px;
    /*font-family: 'Times New Roman';*/
    color: #4f3f3f;
    background-color: #f8f9fa;
}

.btn {
    box-shadow: 0 4px 8px #4f3f3f;
    border-radius: 5px;
}

.btn-no-shadow {
    box-shadow: none;
    border-radius: 5px;
}

/*for logout button*/
.btn-link {
    box-shadow: none;
}

.btn:hover {
    transform: translateY(1px);
    box-shadow: 0 4px 8px #8a7c7c;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


.btn-info, .btn-primary, btn-secondary, .btn-success, .btn-danger {
    color: white;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.image-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Change to desired color */
    mix-blend-mode: multiply;
    pointer-events: none;
}


.card {
    box-shadow: 0 4px 4px grey; /*Extreme shadow 
        [if u use this then uncomment below customCard shadow] 
        : 0 0 40px rgba(8,7,16,0.6);*/
    border-radius: 10px;
}

#customCard {
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#customCard:hover {
    transform: translateY(1px);
    font-weight: bolder;
    box-shadow: none;
}


.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 10px;
}

#horizontal {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add box shadow */
    max-height: 700px;
    overflow: auto;
    padding: 0px 0px 0px 0px;
}

#typewriting {
    text-align: center;
    color: #4386f1;
    __margin: 10px 0px 10px 0px;
    __padding: 5px 5px 5px 5px;
    font-family: 'Franklin Gothic';
    font-weight: bold;
    text-transform: uppercase;
}

#myAnchor {
    text-decoration: none;
    __color: #9a1f1f;
}

#customAnchor {
    text-decoration: none;
    color: black;
}

    #customAnchor:hover {
        color: lightseagreen !important;
    }


/*.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }*/

/* Hover Dropdown color */
/*.nav-link:hover {
    -webkit-text-fill-color: lightseagreen;*/
/*-webkit-text-fill-color: midnightblue;*/
/*}

.nav-link {
    font-family: Bahnschrift SemiBold;
}

@keyframes MenuTransform {
    0% {
        transform: scaleY(0);*/ /* Start with vertical scaling of 0 (hidden) */
/*}

    100% {
        transform: scaleY(1);*/ /* End with vertical scaling of 1 (original size) */
/*}
}

@media screen and (min-width: 831px) {
    ul.navbar-nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
        animation: MenuTransform 0.3s;
        background-color: #e4cdea;
        border-radius: 10px;
    }

    ul.navbar-nav li.dropdown-submenu:hover > ul.dropdown-menu {
        display: block;
        animation: MenuTransform 0.3s;
        background-color: #e4cdea;
        border-radius: 10px;
    }
}

@media screen and (max-width: 830px) {
    ul.navbar-nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
        animation: MenuTransform 0.3s;
        background-color: #e4cdea;
        border-radius: 10px;
        width: 50%;
    }

    ul.navbar-nav li.dropdown-submenu:hover > ul.dropdown-menu {
        display: block;
        animation: MenuTransform 0.3s;
        background-color: #e4cdea;
        border-radius: 10px;
        width: 50%;
    }
}*/

/* Report Menu */
.reportmenu-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reportmenu-item {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.reportmenu-item.selected {
    __background-color: #cce5ff; /* Change the background color as desired */
    background-color: darkblue;
    color: white;
}


#customRow {
    margin-bottom: 10px;
}

.fa-trash:hover {
    color: red;
}

.fa-edit:hover,
.fa-info:hover,
.fa-chart-line:hover {
    color: #b64ae1;
}



.flex-button {
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    font-size: 1rem;
}

.flex-button.right {
    float: right;
}

.flex-button.left {
    float: left;
}

#menuTopIcons{
    font-size: 1.2rem;
}

/* ==========================================================================
   Modern CRUD Form Layer
   ========================================================================== */

/* Page-level form shell — replaces the old col-md-6 left-aligned look */
.crud-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.crud-shell--narrow { max-width: 640px; }
.crud-shell--wide { max-width: 1200px; }

/* Modern card overrides */
.crud-shell .card,
.form-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(67, 134, 241, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: #ffffff;
}

.crud-shell .card-header,
.form-card .card-header {
    background: linear-gradient(135deg, #4386f1 0%, #2563eb 100%);
    color: #ffffff;
    border-bottom: none;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.crud-shell .card-header h6,
.crud-shell .card-header h5,
.form-card .card-header h6,
.form-card .card-header h5 {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.crud-shell .card-header .card-header-icon {
    font-size: 1.05rem;
    opacity: 0.9;
}

.crud-shell .card-body,
.form-card .card-body {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
}

/* Floating-label inputs — modern look */
.crud-shell .form-floating > .form-control,
.crud-shell .form-floating > .form-select,
.form-card .form-floating > .form-control,
.form-card .form-floating > .form-select {
    border-radius: 10px;
    border: 1px solid #d8dee8;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fbfcfe;
}

.crud-shell .form-floating > .form-control:focus,
.crud-shell .form-floating > .form-select:focus,
.form-card .form-floating > .form-control:focus,
.form-card .form-floating > .form-select:focus {
    border-color: #4386f1;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(67, 134, 241, 0.18);
}

.crud-shell .form-floating > label,
.form-card .form-floating > label {
    color: #7a8699;
    font-weight: 500;
}

/* Wrapper grid — stronger gutter & breathing room */
.crud-shell .wrapper,
.form-card .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.1rem;
    margin-bottom: 1rem;
}

/* Action button bar */
.crud-shell .form-group:last-child,
.form-card .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid #eef0f5;
}

/* Buttons — softer, modern */
.crud-shell .btn,
.form-card .btn {
    border-radius: 10px;
    padding: 0.5rem 1.1rem;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.crud-shell .btn-primary,
.form-card .btn-primary {
    background: linear-gradient(135deg, #4386f1 0%, #2563eb 100%);
    border: none;
}

.crud-shell .btn-primary:hover,
.form-card .btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
}

.crud-shell .btn-dark,
.form-card .btn-dark {
    background: #2d3748;
    border: none;
}

.crud-shell .btn-danger,
.form-card .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
}

/* Validation */
.crud-shell .text-danger,
.form-card .text-danger {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    display: inline-block;
}

.crud-shell .field-validation-error,
.form-card .field-validation-error {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    border-left: 3px solid #dc2626;
}

/* Page title above the card */
.crud-shell .crud-title {
    text-align: center;
    color: #2563eb;
    font-family: 'Franklin Gothic', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
    font-size: 1.35rem;
}

/* Details / Delete page — definition list */
.detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem 1.5rem;
    margin: 0;
}

.detail-list .detail-item {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.9rem;
    background: #f7f9fc;
    border: 1px solid #eef0f5;
    border-radius: 10px;
    border-left: 3px solid #4386f1;
}

.detail-list .detail-item dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a8699;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.detail-list .detail-item dd {
    margin: 0;
    color: #2d3748;
    font-weight: 500;
    word-break: break-word;
}

/* Delete-confirmation banner */
.delete-warning {
    background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
    color: #991b1b;
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}

/* Backwards-compat: legacy .row > .col-md-6 forms get auto-centered & widened */
main .container-fluid > .row > .col-md-6:only-child {
    flex: 0 0 auto;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

/* ==========================================================================
   Mobile Responsiveness Layer
   Breakpoints:
     - <= 991px (tablet & below)  : sidebar collapsed, tighter paddings
     - <= 767px (phone landscape) : single-col forms, stacked filters
     - <= 575px (phone portrait)  : full-width buttons, smaller fonts
   ========================================================================== */

/* Tablet & below (<=991px) */
@media (max-width: 991.98px) {
    /* Reduce big container padding */
    main .container-fluid {
        padding: 1rem !important;
    }

    .crud-shell {
        max-width: 100%;
        padding: 0;
    }

    .crud-shell .card-body,
    .form-card .card-body {
        padding: 1.1rem 1rem 0.85rem 1rem;
    }

    .crud-shell .card-header,
    .form-card .card-header {
        padding: 0.7rem 1rem;
    }

    .crud-shell .crud-title {
        font-size: 1.15rem;
        margin-bottom: 0.85rem;
    }

    /* Topnav: shrink brand text */
    #topNavbar .navbar-brand.custom-color {
        font-size: 0.85rem;
    }

    #topNavbar .navbar-brand.custom-color img {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Phone landscape & below (<=767px) */
@media (max-width: 767.98px) {
    html { font-size: 0.88rem; }

    main .container-fluid {
        padding: 0.75rem !important;
    }

    /* Force form-floating field rows to single column on phones */
    .crud-shell .wrapper,
    .form-card .wrapper {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Detail list: single column */
    .detail-list {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    /* Tighter floating-label heights */
    .crud-shell .form-floating > .form-control,
    .crud-shell .form-floating > .form-select,
    .form-card .form-floating > .form-control,
    .form-card .form-floating > .form-select {
        font-size: 0.92rem;
    }

    /* Card paddings */
    .crud-shell .card-body,
    .form-card .card-body {
        padding: 1rem 0.85rem 0.75rem 0.85rem;
    }

    /* Page heading */
    #typewriting,
    .crud-shell .crud-title {
        font-size: 1.05rem;
    }

    /* INDEX pages: stack the filter row that uses .flex-button left/right floats */
    .flex-button.left,
    .flex-button.right {
        float: none !important;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }

    .flex-button.right {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .flex-button.right .col-md-2 {
        width: auto;
    }

    /* Index search/filter inputs: full-width */
    .flex-button.right input,
    .flex-button.right select,
    .flex-button.right .form-control {
        width: 100%;
        min-width: 0;
    }

    /* Tables: enable horizontal scroll wrapper */
    #horizontal {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
    }

    .table-gray,
    .table-blue,
    .table-purple {
        min-width: 600px;
    }

    .table-gray td,
    .table-gray th,
    .table-blue td,
    .table-blue th,
    .table-purple td,
    .table-purple th {
        padding: 6px 5px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* DataTables responsive */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: left !important;
        margin-bottom: 0.5rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0.25rem;
        width: 100%;
        max-width: 200px;
    }

    /* Topnav: hide search input on small screens (already d-none d-md-*); shrink action buttons */
    #menuTopIcons .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

    #menuTopIcons .btn span,
    #menuTopIcons .btn:not(.btn-icon-only) > *:not(.fa):not(.fas):not(.far) {
        /* Keep visible by default */
    }

    /* Footer: stack the two columns */
    footer .d-flex {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    /* Toast / TempData banner sizing */
    .text-center span[style*="font-size:medium"] {
        font-size: 0.85rem !important;
    }
}

/* Phone portrait (<=575px) */
@media (max-width: 575.98px) {
    main .container-fluid {
        padding: 0.5rem !important;
    }

    /* Make submit/back buttons stack & full-width */
    .crud-shell .form-group:last-child,
    .form-card .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .crud-shell .form-group:last-child .btn,
    .crud-shell .form-group:last-child a.btn,
    .form-card .form-actions .btn,
    .form-card .form-actions a.btn {
        width: 100%;
        justify-content: center;
    }

    /* Delete page: keep buttons stacked the same way */
    .crud-shell--narrow form .btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 0.4rem;
    }

    .crud-shell--narrow form a.btn {
        margin-bottom: 0;
    }

    /* Card padding even tighter */
    .crud-shell .card-body,
    .form-card .card-body {
        padding: 0.85rem 0.7rem 0.7rem 0.7rem;
    }

    .crud-shell .card-header,
    .form-card .card-header {
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
    }

    .crud-shell .card-header h6,
    .form-card .card-header h6 {
        font-size: 0.8rem;
    }

    /* Topnav: hide brand text, keep logo */
    #topNavbar .navbar-brand.custom-color span {
        display: none;
    }

    /* Topnav: hide button labels, show icons only */
    #menuTopIcons .btn {
        padding: 0.3rem 0.45rem;
    }

    #menuTopIcons .btn .fa,
    #menuTopIcons .btn .fas,
    #menuTopIcons .btn .far {
        margin: 0;
    }

    #menuTopIcons form button {
        font-size: 0;
    }

    #menuTopIcons form button .fa,
    #menuTopIcons form button .fas {
        font-size: 1rem;
    }

    /* TempData banner */
    .text-center span[style*="font-size:medium"] {
        font-size: 0.78rem !important;
        display: inline-block;
        padding: 0.3rem 0.5rem;
    }

    /* Pagination bar: smaller buttons */
    .pagination .page-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.8rem;
    }

    /* Detail items: tighter padding */
    .detail-list .detail-item {
        padding: 0.55rem 0.75rem;
    }

    .detail-list .detail-item dt {
        font-size: 0.65rem;
    }

    .detail-list .detail-item dd {
        font-size: 0.88rem;
    }
}

/* Ensure top-nav stays usable when the side menu is overlay-mode on small screens */
@media (max-width: 991.98px) {
    .sb-sidenav-toggled #layoutSidenav_nav {
        transform: translateX(0);
    }

    #layoutSidenav_content {
        margin-left: 0 !important;
        width: 100%;
    }
}