@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Anton';
    src: url('fonts/Anton/Anton-Regular.ttf') format('truetype');
}

body {
    background-color: var(--su-neutral);
    color: var(--su-black);
    font-size: 14px;
    font-family: Roboto, Helvetica;
    margin: 0;
    padding-bottom: 100px;
    margin: 10px;
}
@media (min-width: 992px) { 
    body {
        margin: 15px; /* Apply 15px margin for desktops */
    }
}
a {
    -webkit-touch-callout: none; /* Disable context menu on iOS */
    -webkit-user-select: none; /* Prevent selection on Safari */
    user-select: none; /* Prevent selection */
  }
  a {
    color: var(--su-black) !important;
  }

  a:hover {
    color: var(--su-black) !important;
    text-decoration: none; 
  }

  .nav-link.active {
    color: var(--su-black) !important; 
  }
  
  .btn.active {
    background-color: var(--su-black) !important; 
  }
  
  a.active {
    color: var(--su-black) !important; 
  }
  .btn-dark{
    color: var(--su-white) !important; 
  }
  .btn-dark:hover{
    color: var(--su-white) !important; 
  }
  .btn-danger{
    color: var(--su-white) !important; 
  }
  .btn-danger:hover{
    color: var(--su-white) !important; 
  }
.text-primary {
    background: linear-gradient(to right, var(--su-accent), var(--su-light)); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-danger{
    color: crimson;
}
.user-select-none {
    user-select: none !important;
    -webkit-user-select: none !important; /* Safari */
    -moz-user-select: none !important; /* Firefox */
    -ms-user-select: none !important; /* IE */
}

form {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px 20px 20px 20px;
    border-radius: 3px;
    border: 1px solid var(--su-light);
    /* box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; */
}
.btn-edit{
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5 {
    /* font-family: Anton, Helvetica; */
    color: var(--su-accent);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover {
    color: var(--su-dark);
    text-decoration: none;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
    color: var(--su-dark);
    text-decoration: none;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1.25em;
}

a,
a:hover {
    color: var(--su-black);
}

aside ul li a {
    display: block;
    text-decoration: none;
    color: var(--su-dark);
    font-weight: 700;
}

aside ul li a:hover {
    background-color: var(--su-light);
    transition: 0.2s ease;
}

aside ul li a.active {
    background-color: var(--su-light);
    color: var(--su-black);
}

aside ul li a i {
    font-size: 0.9em;
    margin-bottom: 0.1em;
}

aside ul li.list-group-item {
    /* font-weight: bold; */
    font-family: Anton, Helvetica;
    font-size: 1.4em;
    letter-spacing: 0.2px;
    background-color: transparent;
    border: 0 none;
}

aside ul li .su-link {
    font-weight: bold;
    background-color: transparent;
    border: 0 none;
}

.offcanvas-body ul li.list-group-item {
    /* font-weight: bold; */
    font-family: Anton, Helvetica;
    font-size: 1.4em;
    letter-spacing: 0.2px;
    background-color: transparent;
    border: 0 none;
}

.offcanvas-body ul li a {
    background-color: var(--su-dark);
    transition: 0.2s ease;
    display: block;
    text-decoration: none;
    color: var(--su-white);
    font-weight: 700;
}

.offcanvas-body ul li a:hover {
    background-color: var(--su-black);
    color: var(--su-white);
    transition: 0.2s ease;
}

.offcanvas-body ul li a.active {
    background-color: var(--su-black);
}

.offcanvas-body ul li a i {
    font-size: 0.9em;
    margin-bottom: 0.1em;
}

nav h1 {
    font-size: 2em;
    margin: 0;
    color: var(--su-white) !important;
}

nav h1 a {
    color: var(--su-white) !important;
}

nav h1 a:hover {
    color: var(--su-white) !important;
}

nav a {
    color: var(--su-white)!important;
    text-decoration: none;
}

nav a:hover {
    color: var(--su-white)!important;
}

.su-user {
    margin-top: -10px;
}

.su-bg-neutral {
    background-color: var(--su-neutral);
}
.su-bg-light {
    background-color: var(--su-light);
}

.su-bg-dark {
    background-color: var(--su-accent);
}

.su-text-light {
    color: var(--su-light);
}

.su-text-dark {
    color: var(--su-dark);
}

.su-full-height {
    min-height: 100vh;
}

.su-hide {
    display: none !important;
}
#user-nav {
    transition: 0.3s;
    margin-top: -25px;
    color: var(--su-light);
    top: 85px;
    right: 19px;
    z-index: 100;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    /* padding-bottom: 5px; */
}

#user-nav a {
    color: var(--su-light) !important;
}

#user-nav ul {
    display: inline-block;
}

#user-nav ul li {
    margin-bottom: 10px !important;
}

#user-nav ul li a {
    color: var(--su-light) !important;
    text-decoration: none;
    background-color: var(--su-dark);
    padding: 5px;
    border-radius: 4px;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

#user-nav ul li a:hover {
    background-color: var(--su-light);
    color: var(--su-dark) !important;


}

#su-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfect centering */
    z-index: 9999;
}

/* Hide the spinner by default (if .su-hide is not defined) */
#su-spinner.su-hide {
    display: none;
}



.border {
    border: 1px solid var(--su-light) !important;
}

.border-0 {
    border: 0 !important;
    /* Removes border */
}

.border-top {
    border-top: 1px solid var(--su-light) !important;
}

.border-end {
    border-right: 1px solid var(--su-light) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--su-light) !important;
}

.border-start {
    border-left: 1px solid var(--su-light) !important;
}

.menu {
    height: 40px !important;
    width: auto;
    cursor: pointer;
}

.hand {
    cursor: pointer;
}

.user {
    height: 20px;
    width: auto;
}

.check {
    height: 20px;
    width: auto;
}

.hi-user {
    font-weight: normal;
    font-size: 1rem;
    font-family: Roboto, Helvetica;
}

.grab {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.bg-toast {
    background-color: #136C43;
    color: #FFFFFF;
}
#toastContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050; /* Ensures it appears above other elements */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensures it stays centered */
    height: 100vh; /* Full screen height */
    pointer-events: none; /* Prevents clicks from affecting this area */
  }
  
  .toast {
    min-width: 250px;
    opacity: 1;
    pointer-events: auto; /* Allows interaction with the toast */
  }
  /* Overide classes */
/* .text-secondary{
    color:var(--su-accent) !important;
} */
th.gridjs-th {
    background-color: var(--su-light);
    color: var(--su-accent);
}

th.gridjs-th:hover {
    background-color: var(--su-light);
}

/* GridJS */

/* Checked (enabled) state - Black toggle with gray track */
.form-check-input:checked {
    background-color: #000 !important;
    /* Black toggle */
    border-color: #000 !important;
}

/* Change the track color when enabled */
.form-check-input:checked::before {
    background-color: #6c757d !important;
    /* Bootstrap gray */
}

/* Default: Table layout for larger screens */
.gridjs-container {
    display: block;
}

/* Target the last column in the Grid.js table* for desktop */
@media (min-width: 769px) {

    .gridjs-table td:last-child,
    .gridjs-table th:last-child {
        text-align: center !important;
        width: 80px;
    }
}

/* Mobile View: Convert table rows into cards and remove table styling */
@media (max-width: 768px) {

    /* Remove all borders and background except for <tr> */
    .gridjs-container,
    .gridjs-table,
    .gridjs-tbody,
    .gridjs-th,
    .gridjs-wrapper,
    .gridjs-td {
        background: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Hide table headers */
    .gridjs-thead {
        display: none !important;
    }

    /* Make tbody flexbox */
    .gridjs-tbody {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border: none !important;
    }

    /* Keep border only for row (tr), remove from other elements */
    .gridjs-tr {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
        width: 100%;
        margin-bottom: 10px;
        position: relative; /* Needed for absolute positioning of shadow */
    }
    
    .gridjs-tr::after {
        content: "";
        position: absolute;
        bottom: -5px; /* Adjust shadow position */
        left: 50%;
        width: 70%; /* Limit shadow width to 70% of the box */
        height: 10px; /* Adjust shadow height */
        background: rgba(0, 0, 0, 0.2); /* Shadow color */
        border-radius: 50%; /* Makes it smooth */
        transform: translateX(-50%); /* Center it */
        filter: blur(6px); /* Soft blur effect */
        z-index: -1;
    }
        .gridjs-tr label {
            font-size: 0.8rem;
            color: #838383;
            font-weight: normal;
            display: block;
        }

    /* Reduce vertical padding */
    .gridjs-td {
        padding: 3px 0 !important;
        border: none !important;
        background: none !important;
    }

    /* Hide the first column */
    .gridjs-td:first-child {
        display: none !important;
    }

    /* Bold the content of the first visible td (which is actually the second td) */
    .gridjs-td:nth-child(2) {
        font-weight: bold;
    }

    /* Add margin above gridjs-footer */
    .gridjs-footer {
        margin-top: 10px !important;
        /* Adjust as needed */
        border-radius: 8px;
    }

    /* Make buttons inside Grid.js match Bootstrap btn-lg */
    .gridjs-td .btn {
        padding: 5px 10px !important;
        /* Matches Bootstrap’s btn-lg */
        font-size: 1rem !important;
        /* Matches btn-lg text size */
    }

    .gridjs-td:last-child {
        display: flex;
        justify-content: flex-end;
    }


}

/* Mobile Table */
/* Desktop view */
@media (min-width: 769px) {
    #table.mobile-table .gridjs-table td:last-child,
    #table.mobile-table .gridjs-table th:last-child {
        text-align: center !important;
        width: 80px !important;
    }
}

/* Mobile View: Convert table rows into cards and only show columns 2 and 3 */
@media (max-width: 768px) {
    #table.mobile-table .gridjs-container,
    #table.mobile-table .gridjs-table,
    #table.mobile-table .gridjs-tbody,
    #table.mobile-table .gridjs-th,
    #table.mobile-table .gridjs-wrapper,
    #table.mobile-table .gridjs-td {
        background: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        
    }

    #table.mobile-table .gridjs-td div{
        padding:12px !important
    }
    #table.mobile-table .form-switch .form-check-input{
        margin-left: -0.5rem !important;
    }
    #table.mobile-table .gridjs-tr {
        display: flex !important;
        flex-direction: row !important;
        border-radius: 8px !important;
        padding: 10px !important;
        background: #fff !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        /* position: relative;  */
        /* Needed for absolute positioning of shadow */
    }

    #table.mobile-table .gridjs-thead {
        display: none !important;
    }

    #table.mobile-table .gridjs-tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        border: none !important;
    }

    #table.mobile-table .gridjs-tr {
        /* flex-direction: column !important; */
        border-radius: 8px !important;
        padding: 10px !important;
        background: #fff !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    #table.mobile-table .gridjs-tr label {
        font-size: 0.8rem !important;
        color: #838383 !important;
        font-weight: normal !important;
        display: block !important;
    }

    #table.mobile-table .gridjs-td {
        padding: 3px 0 !important;
        border: none !important;
        background: none !important;
    }

    #table.mobile-table .gridjs-td:not(:nth-child(2)):not(:nth-child(3)) {
        display: none !important;
    }

    #table.mobile-table .gridjs-td:nth-child(2) {
        font-weight: bold !important;
    }

    #table.mobile-table .gridjs-td:nth-child(3) {
        color: #444 !important;
    }
}

/* Mobile Table */


/* Mobile Menu */
.mobile-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    /* box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05); */
    padding: 12px 0;
    /* Increased for better tap area */
    z-index: 1050;
    /* Increased to avoid overlap issues */
    display: flex;
    /* Ensures proper alignment of menu items */
}
#offcanvasMobileMenu{
    z-index:1041 !important;
    border-top-left-radius: 40px; /* Increase for more rounding */
    border-top-right-radius: 40px;
    min-height: 80vh; /* Minimum height: Half the screen */
}
#offcanvasMobileMenu2{
    z-index:1041 !important;
    border-top-left-radius: 40px; /* Increase for more rounding */
    border-top-right-radius: 40px;
    min-height: 50vh; /* Minimum height: Half the screen */
}
#offcanvas-menu-list a{
    color: var(--su-white) !important;
}
#offcanvas-menu-list-fixed a{
    color: var(--su-white) !important;
}
/* Each Menu Item */
.mobile-menu .menu-item {
    flex: 1;
    text-align: center;
}

/* Menu Link */
.mobile-menu .menu-link {
    color: var(--su-mobile-menu, #6c757d);
    /* Fallback color if variable is undefined */
    font-size: 1.1rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    /* Ensures icon and text stack */
    align-items: center;
    /* Centers items */
    padding: 8px 0;
    /* Better spacing */
}

/* Menu Label */
.mobile-menu .menu-link div {
    font-size: 0.8rem;
    margin-top: 2px;
    /* Slight spacing between icon and text */
}

/* Active Link */
.mobile-menu .menu-link.active {
    color: #000;
    /* Highlight active icon */
}

/* Custom SVG Icons for Mobile Menu */
.menu-link i {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Home Icon */
.su-home {
    background-image: url('images/home.svg');
}

/* Menu Icon */
.su-menu {
    background-image: url('images/menu.svg');
}

/* Profile Icon */
.su-profile {
    background-image: url('images/user.svg');
}

/* Logout Icon */
.su-logout {
    background-image: url('images/logout.svg');
}

/* Mobile menu */
.menu-icon-box {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.menu-icon-box i {
    color: var(--su-black);

}

.menu-text {
    font-size: 0.8rem;
    color:var(--su-mobile-menu-text);
}
/* Custom CSS */
.img-thumbnail{
    width: 100px !important;
    height: auto !important;
}
.img-round{
    width: 100px !important;
    height: 100px !important;
    border-radius: 100px;
    object-fit: cover;
}

/* Mobile Native Form Fields */

@media (max-width: 767.98px) {
    .form-control {
      margin-top: 0.5rem;
      background-color: transparent;
      border: none;
      border-bottom: 1px solid #ced4da; /* light gray bottom border */
      border-radius: 0;
      box-shadow: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
  
    .form-control:focus {
      outline: none;
      border-bottom: 1px solid #495057; /* darker border on focus */
      box-shadow: 0 1px 0 0 #495057;
    }
  
    .form-control::placeholder {
      color: #adb5bd;
      opacity: 1;
    }
  
    .fade-label {
      opacity: 0;
      transition: opacity 0.3s ease;
      display: block;
      height: 0;
      overflow: hidden;
      font-size: 0.75rem;
      color: #6c757d;
      margin-bottom: 0.2rem;
    }
  
    .fade-label.visible {
      opacity: 1;
      height: auto;
    }
  }

  .date-picker{
        background-image: url('images/calendar.svg');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 24px 24px; /* Adjust to match your image size */
        padding-right: 30px; /* Leave space so text doesn't overlap the image */
  }