html {
    font-size: 14px;
    overflow-x: hidden; /* prevents any child from causing page-level horizontal scroll */
}

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

.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;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /*margin-bottom: 60px;*/
    background-color: #efefef;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* CUSTOM JNS */

/* Scheduling Appointment - Begin */
/* O calend�rio fica com uma borda de destaque e o fundo ligeiramente diferente */
.scheduling-mode #calendar {
    border: 2px solid #ffc107;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Destaque nas slots de tempo para convidar ao clique */
.scheduling-mode .fc-timegrid-slot:hover {
    background-color: rgba(255, 193, 7, 0.1) !important;
    cursor: crosshair;
}
/* Scheduling Appointment - End */

/* Dropdown do Utilizador - Ajuste Visual */
#userDropdown::after {
    display: none; /* Remove a seta para look moderno */
}

:root {
    --lightGreenLogo: #68A482;
    --darkGreenText: #0A391F;
    --lightGreenText: 6DA285;
}

/* #region ALL */

/* #region Sidebar & Layout Structure */

:root {
    --top-bar-height: 70px;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
}

/* O container principal DEVE ser d-flex para a sidebar empurrar o conte�do */
.main-admin-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Sidebar Wrapper */
.sidebar-wrapper {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    transition: all 0.3s ease-in-out;
    z-index: 1050;
    background-color: white;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Estilo quando colapsado (aplicado ao body via JS) */
body.collapsed .sidebar-wrapper {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
}

/* Ajuste do Conte�do Principal */
.content-wrapper {
    flex-grow: 1; /* Faz o conte�do ocupar todo o resto da largura */
    min-width: 0; /* Evita que tabelas/calend�rios quebrem o layout */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    background-color: #f8f9fa;
}

/* Esconder elementos no modo mini */
body.collapsed .sidebar-wrapper span,
body.collapsed .main-logo,
body.collapsed .sidebar-logo-container a span {
    display: none !important;
}

/* Centralizar ?cones no modo mini */
body.collapsed .nav-link {
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
}

    body.collapsed .nav-link i {
        margin: 0 !important;
        font-size: 1.25rem;
        width: 100%;
    }

/* Estado Padr?o: Esconde o logo pequeno */
.small-logo {
    display: none !important;
}

.main-logo {
    display: block;
}

/* Estado Colapsado */
body.collapsed .main-logo {
    display: none !important;
}

body.collapsed .small-logo {
    display: block !important;
    margin: 0 auto;
}

/* Ajuste do container do logo no modo colapsado */
body.collapsed .sidebar-logo-container {
    padding: 0 10px;
}

/* Garantir que o link do logo n�o quebre o layout */
.sidebar-logo-container a {
    text-decoration: none;
    overflow: hidden;
}

/* #endregion Sidebar */

/* #region Ajustes de Links e Hover */

header .nav-link {
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    color: var(--lightGreenLogo);
}

/* Estilo para o item ATIVO */
header .active-menu {
    background-color: #a4d3b8 !important;
    color: var(--darkGreenText) !important;
    font-weight: 600;
    border-left: 4px solid var(--darkGreenText) !important;
}

header .nav-link i {
    color: var(--darkGreenText);
    width: 25px;
    text-align: center;
}

/* Garante que o texto n�o ocupa espa�o nem cria overflow no modo colapsado */
body.collapsed .sidebar-wrapper span {
    display: none !important;
}

/* Estilo opcional para o Tooltip da Sidebar */
.sidebar-tooltip {
    --bs-tooltip-bg: var(--darkGreenText);
    --bs-tooltip-color: #fff;
}

/* Se quiser um efeito de hover simples sem Tooltip JS, use apenas o title nativo, 
   mas o Tooltip do Bootstrap (acima) fica visualmente muito melhor. */

/* Evita que a transi��o mostre texto cortado */
.sidebar-wrapper {
    overflow-x: hidden;
    white-space: nowrap;
}

/* Ajuste para que o �cone ocupe o centro no hover */
body.collapsed .nav-link:hover {
    background-color: #cbefd9;
    color: var(--darkGreenText) !important;
}

/* #endregion */

/* #region Topbar */

/* Ajuste para a Top Navbar ser fixa no topo do conte�do */
.sticky-top {
    z-index: 999; /* Abaixo do z-index da sidebar (1000) */
}

/* Estilo para o Dropdown do Utilizador */
#userDropdown::after {
    display: none; /* Remove a seta padr�o do Bootstrap para um look mais moderno */
}

.dropdown-item {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    transition: background 0.2s;
}

    .dropdown-item:hover {
        background-color: #f8f9fa;
    }

/* Avatar circular com sombra leve */
.rounded-circle.border {
    border-color: #dee2e6 !important;
}

/* #endregion Topbar */

/* #region Colors */

.text-primary {
    color: #375e49 !important;
}

.btn:hover {
    background-color: #2c553f;
}

.btn-primary {
    background-color: #2c553f;
}

.active > .page-link {
    background-color: #2c553f;
}

.card-header.green {
    background-color: #c6dccf;
}

.nav-link {
    color: var(--lightGreenLogo);
}

    .nav-link:focus, .nav-link:hover {
        color: var(--lightGreenLogo);
        text-shadow: 0 0 black;
    }

/* #endregion Colors */

/* #region Login */

.btnEye{
    border-color: rgb(222, 226, 230);
    border-width: 1px;
}
/* Define a altura total para o container de login */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center; /* Vertical center */
}

/* Estiliza a coluna da imagem lateral */
.login-image-sidebar {
    width: 400px;
    /*height: 100vh;*/
    /*object-fit: cover;*/
}

/* #endregion Login */

/* #region Datatables */

/* #region Toastr Customization */
#toast-container > .toast-success {
    background-color: var(--lightGreenLogo);
}
#toast-container > .toast-info {
    background-color: var(--darkGreenText);
}
/* #endregion */

.dataTables_paginate {
    justify-items: end;
}

.dataTables_length {
    padding-right: 1rem;
}

/* #endregion Datatables */

/* #endregion Select2 */

/* #region Calendar */
#calendar {
    max-width: 1100px;
    margin: 0 auto;
    min-height: 600px;
}
/* Customizing FullCalendar to match your clinic theme */
.fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: bold;
}

.fc .fc-button-primary {
    background-color: var(--lightGreenLogo);
    border-color: #446553;
}

.fc-col-header-cell a {
    color: var(--darkGreenText);
}
/* #endregion Calendar */

/* #endregion ALL */

/* =====================================================
   FILTER CARD COLLAPSE
   ===================================================== */

.filter-card-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}
.filter-card-header:hover {
    background-color: #e2e6ea !important;
}
.filter-chevron {
    flex-shrink: 0;
    color: #6c757d;
    transition: transform 0.25s ease;
}
.filter-card-header[aria-expanded="false"] .filter-chevron {
    transform: rotate(-90deg);
}

/* =====================================================
   RESPONSIVE — Global (all breakpoints)
   ===================================================== */

/* DataTables: always allow horizontal scroll when table overflows */
.dataTables_wrapper {
    /* overflow-x: auto; */
    -webkit-overflow-scrolling: touch;
}

/* Nav tabs: scroll horizontally instead of wrapping to second line */
.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px; /* prevents border-bottom from being clipped */
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { flex-shrink: 0; }
.nav-tabs .nav-link  { white-space: nowrap; }

/* =====================================================
   DESKTOP (≥ 992px)
   ===================================================== */
@media (min-width: 992px) {
    header .navbar .nav-item span { font-weight: bold; }

    #patientTab button,
    #recordTabs button { padding: 10px 15px !important; }

    #patientTab button i,
    #recordTabs button i { display: inline; padding-right: 5px; }
}

/* =====================================================
   TABLET (768px – 991px) — sidebar visible, less space
   ===================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Calendar slightly shorter on tablet */
    #calendar { min-height: 450px !important; }

    /* Tighter card padding */
    .card-body  { padding: 0.875rem; }
    .card-header { padding: 0.625rem 0.875rem; }
}

/* =====================================================
   MOBILE (< 768px) — sidebar becomes offcanvas drawer
   ===================================================== */
@media (max-width: 767.98px) {

    /* header only wraps the offcanvas sidebar on mobile — collapse to zero so it
       takes no space in the flex row (the sidebar itself is position:fixed). */
    header {
        width: 0;
        min-width: 0;
        overflow: visible; /* must not clip the fixed offcanvas drawer */
    }

    /* Topbar: switch from sticky to fixed.
       position:sticky is broken by overflow-x:clip on the parent <main>;
       fixed keeps the bar always visible even when the page scrolls. */
    .content-wrapper .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 60px !important;
        z-index: 1020;
    }

    /* Push content down so it starts below the fixed topbar */
    .content-wrapper > .p-2 {
        padding-top: calc(60px + 0.5rem) !important;
        padding-left:  0.5rem !important;
        padding-right: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Page section headings */
    h2.text-primary.fw-bold,
    h2.fw-bold { font-size: 1.2rem; }

    /* Card padding reduction */
    .card-body  { padding: 0.75rem !important; }
    .card-header { padding: 0.6rem 0.75rem !important; }

    /* Card-header rows that contain a title + badge: allow wrap */
    .card-header > .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.25rem; }

    /* Page-header pattern (h2 + back-button row) */
    .container > .d-flex.justify-content-between.align-items-center,
    .col-12   > .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Notification bell dropdown: prevent overflow on narrow phones */
    #globalPendingDropdownBtn + .dropdown-menu {
        min-width: 260px !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* FullCalendar: reduce height and allow toolbar to wrap */
    #calendar { min-height: 380px !important; }
    .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
    }
    .fc-toolbar-chunk { display: flex; align-items: center; gap: 0.25rem; }
    .fc-toolbar-title  { font-size: 1rem !important; }
    .fc .fc-button     { padding: 0.2rem 0.5rem !important; font-size: 0.8rem !important; }

    /* Touch-friendly targets for buttons and inputs */
    .btn:not(.btn-event-edit):not(.fc-button):not(.fc-button-primary):not(.btn-link) {
        min-height: 40px;
    }
    input.form-control,
    .form-select { min-height: 42px; }

    /* DataTables controls: stack and fill width on mobile */
    .dataTables_length,
    .dataTables_filter  { float: none !important; width: 100% !important; }
    .dataTables_filter  { margin-top: 0.5rem; }
    .dataTables_filter input { width: 100% !important; }
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Login page is self-contained (Layout=null), handled by its own inline CSS */
}

/* =====================================================
   MOBILE SMALL (< 576px) — extra tightening
   ===================================================== */
@media (max-width: 575.98px) {
    html { font-size: 13px; }

    /* Container edges */
    .container,
    .container-fluid { padding-inline: 0.625rem; }

    /* Row gutters */
    .row.g-4 { --bs-gutter-y: 0.875rem; }
    .row.g-3 { --bs-gutter-y: 0.625rem; }

    /* Page-header rows: always wrap on very small screens */
    .d-flex.justify-content-between.align-items-center.mb-2,
    .d-flex.justify-content-between.align-items-center.mb-3,
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Form action area: stack buttons vertically */
    .mt-4.pt-3.border-top {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .mt-4.pt-3.border-top .btn { width: 100%; }

    /* Calendar: further reduction */
    #calendar { min-height: 300px !important; }

    /* Kiosk signature canvas area */
    .signature-container { min-height: 180px; }
}





/* #region TESTING FULLCALENDAR - BEGIN */

/* Style the Initials Circle */
.user-initials-circle {
    background-color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Style the Quick Edit Button */
.btn-event-edit {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #333;
    transition: all 0.2s ease;
}

    .btn-event-edit:hover {
        background: #fff;
        transform: scale(1.1);
    }

/* Ensure the FullCalendar internal container doesn't cut off our custom flex */
.fc-event-main {
    height: 100% !important;
}

.fc-event-main-frame {
    height: 100% !important;
}

.fc-timegrid-event .fc-event-main {
    padding: 0px;
}

.fc-v-event {
    border-color: lightgray;
}

/* #endregion TESTING FULLCALENDAR - BEGIN */