:root {
    --font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --preto: #01011d;
    --preto-hover: #171733;
    --color-focus-ring: rgb(1 1 29 / 35%);
    --color-background: #f0f0f0;
    --color-dashboard-background: #f7f7f7;
    --color-surface: #ffffff;
    --color-surface-muted: #fafafa;
    --color-text: var(--preto);
    --color-dashboard-text: #15243b;
    --cinza-menus: #787891;
    --color-border: #e3e3e3;
    --color-border-light: #e8e8e8;
    --color-border-subtle: #ededed;
    --color-navigation-active: #f0f0f2;
    --color-navigation-fill: #dfe5f5;
    --color-accent: #d50036;
    --color-success: #1f9d6b;
    --color-info: #2f6fe4;
    --color-info-soft: #eaf1fe;
    --color-info-border: rgb(47 111 228 / 20%);
    --color-success-soft: #e3f6ee;
    --color-success-border: rgb(31 157 107 / 20%);
    --color-violet: #5b54d6;
    --color-violet-soft: #ecebfd;
    --color-violet-border: rgb(91 84 214 / 20%);
    --color-warning: #c98a0c;
    --color-warning-soft: #fbf1da;
    --color-warning-border: rgb(201 138 12 / 20%);
    --color-auth-hero: #f51c17;
    --color-validation-border: #f5aeb5;
    --color-validation-background: #f8d7da;
    --color-validation-text: #842029;
    --color-shadow: rgb(1 1 29 / 20%);
    --border-radius-md: 0.3rem;
    --border-radius-input: 8px;
    --border-radius-button: 8px;
    --button-padding-top: 9px;
    --button-padding-right: 16px;
    --button-padding-bottom: 9px;
    --button-padding-left: 12px;
    --button-gap: 6px;
    --button-font-size: 15px;
    --button-font-weight: 500;
    --button-height: 40px;
    --font-size-breadcrumb: 12px;
    --font-size-filter-label: 14px;
    --font-size-filter-control: 13px;
    --font-size-table-heading: 15px;
    --font-size-table-cell: 14px;
    --font-weight-table-heading: 600;
    --font-weight-table-cell: 400;
    --page-heading-spacing: 22px;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-synthesis: style;
}

.auth-language-picker {
    position: fixed;
    z-index: 30;
    top: 16px;
    right: 16px;
}

.auth-language-picker .header-language {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--cinza-menus);
    font-size: 12px;
}

.auth-language-picker .language-picker-menu {
    position: absolute;
    z-index: 30;
    top: 100%;
    right: 0;
    display: grid;
    min-width: 58px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 8px 18px rgb(1 1 29 / 12%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.auth-language-picker .language-picker-menu::before {
    position: absolute;
    top: -6px;
    right: 0;
    left: 0;
    height: 6px;
    content: '';
}

.auth-language-picker:hover .language-picker-menu,
.auth-language-picker:focus-within .language-picker-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.auth-language-picker .language-picker-menu form { margin: 0; }

.auth-language-picker .language-picker-menu button {
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--color-dashboard-text);
    font-size: 12px;
    text-align: left;
}

.auth-language-picker .language-picker-menu button:hover,
.auth-language-picker .language-picker-menu button:focus-visible,
.auth-language-picker .language-picker-menu button.is-active {
    background: var(--color-navigation-active);
    color: var(--color-accent);
}

.app-page {
    width: 100%;
}

.dashboard-skeleton-line,
.dashboard-skeleton-card {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(90deg, #ededf0 25%, #f7f7f8 50%, #ededf0 75%);
    background-size: 200% 100%;
    animation: dashboard-skeleton 1.25s linear infinite;
}

.dashboard-skeleton-line { width:min(280px, 70%); height:16px; }
.dashboard-skeleton-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.dashboard-skeleton-card { min-height:142px; border-radius:16px; }
.dashboard-skeleton-card.is-featured { min-height:372px; }
.dashboard-skeleton-card.is-wide { grid-column:1 / -1; min-height:276px; }
.dashboard-async-error { padding:24px; border:1px solid var(--color-validation-border); border-radius:16px; background:var(--color-surface); color:var(--color-accent); }
@keyframes dashboard-skeleton { to { background-position:-200% 0; } }
@media(max-width:767.98px){.dashboard-skeleton-grid{grid-template-columns:1fr}.dashboard-skeleton-card.is-wide{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.dashboard-skeleton-line,.dashboard-skeleton-card{animation:none}}

.app-page-heading {
    margin-bottom: var(--page-heading-spacing);
}

.app-page-heading .add-button {
    margin-left: auto;
    min-height: 40px;
    padding: 8px 16px;
    gap: 6px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

.datatable-filter-panel {
    margin-bottom: 18px;
}

.datatable-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.datatable-filter-field label {
    display: block;
    height: 25px;
    margin-bottom: 6px;
    color: var(--preto);
    font-size: var(--font-size-filter-label);
    font-weight: 500;
}

.datatable-filter-field .form-control,
.datatable-filter-field .form-select {
    min-height: 44px;
    font-size: var(--font-size-filter-control);
}

.datatable-filter-field .SumoSelect > .CaptionCont {
    min-height: 44px;
}

.datatable-search-input {
    position: relative;
}

.datatable-search-input input {
    padding-right: 36px;
}

.datatable-search-input input::placeholder {
    font-size: 13px;
}

.datatable-search-input img {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

.datatable-filter-submit {
    height: 40px;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: -0.02em;
}

.datatable-active-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.datatable-active-filters span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    padding: 0 12px;
    border: 1px solid var(--cinza-menus);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--cinza-menus);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.datatable-active-filters span a {
    color: var(--cinza-menus);
    text-decoration: none;
}

.datatable-filter-remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cinza-menus);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.datatable-clear-filters {
    min-height: 25px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--cinza-menus);
    color: var(--color-surface);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.datatable-clear-filters:hover,
.datatable-clear-filters:focus,
.datatable-clear-filters:focus-visible {
    border: 1px solid var(--cinza-menus);
    background: var(--color-surface);
    color: var(--cinza-menus);
    outline: none;
}

.photo-upload-spacer {
    display: block;
    width: 100%;
    height: 24px;
}

.photo-upload {
    position: relative;
    display: flex;
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-dashboard-background);
    color: var(--preto);
    font-size: 12px;
    cursor: pointer;
}

.photo-upload:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

.photo-upload:hover .photo-upload-icon,
.photo-upload:focus-visible .photo-upload-icon {
    background: var(--preto);
}

.photo-upload:hover .photo-upload-icon img,
.photo-upload:focus-visible .photo-upload-icon img {
    filter: brightness(0) invert(1);
}

.photo-upload.has-photo {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.photo-upload.has-photo .photo-preview {
    opacity: 0;
}

.photo-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.photo-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: contain;
    opacity: 0;
}

.list-photo-preview{position:relative;display:inline-block;height:50px}
.list-photo-large{position:absolute;z-index:40;top:50%;left:58px;display:block;width:200px;height:200px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);box-shadow:0 8px 20px rgb(1 1 29 / 20%);object-fit:cover;opacity:0;pointer-events:none;transform:translateY(-50%) scale(.96);transition:opacity 160ms ease,transform 160ms ease}
.list-photo-preview:hover .list-photo-large{opacity:1;transform:translateY(-50%) scale(1)}

.photo-change {
    position: absolute;
    right: 8px;
    bottom: 8px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--preto);
    color: var(--color-surface);
    font-size: 10px;
    cursor: pointer;
}

.photo-actions { position:absolute; top:8px; right:8px; display:flex; gap:8px; z-index:2; }
.photo-edit, .photo-remove { display:grid; width:40px; height:40px; place-items:center; padding:0; border:0; border-radius:8px; cursor:pointer; transition:transform 160ms ease, box-shadow 160ms ease; }
.photo-edit { background:var(--preto); }
.photo-remove { background:var(--color-accent); }
.photo-edit:hover, .photo-remove:hover { transform:scale(1.06); box-shadow:0 5px 12px rgba(0, 0, 0, .22); }
.photo-edit:focus-visible, .photo-remove:focus-visible { outline:2px solid var(--preto); outline-offset:2px; }
.photo-edit img, .photo-remove img { width:auto; height:16px; max-width:16px; filter:brightness(0) invert(1); }

.photo-upload-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-border);
    font-size: 24px;
    line-height: 1;
    transition: background-color 160ms ease;
}

.photo-upload-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 160ms ease;
}

label {
    cursor: pointer;
}

.SumoSelect {
    display: block;
    width: 100% !important;
    color: var(--preto);
    font-size: 12px;
}

.SumoSelect > .CaptionCont {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-input) !important;
    background: var(--color-surface) !important;
    box-shadow: none;
}

.SumoSelect > .CaptionCont > span {
    padding-right: 20px;
    line-height: 24px;
}

.SumoSelect > .CaptionCont > span.placeholder {
    display: block;
    min-height: 0;
    vertical-align: baseline;
    cursor: default;
    background: transparent;
    opacity: 1;
    color: var(--cinza-menus);
    font-style: normal;
}

.SumoSelect .select-all.partial > span i,
.SumoSelect .select-all.selected > span i,
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
    background-color: var(--color-success);
}

.SumoSelect .search-txt {
    height: 40px;
    padding: .5rem .75rem !important;
    color: var(--preto);
    font-family: inherit;
    font-size: 12px !important;
    line-height: 24px;
}

.SumoSelect .search-txt::placeholder {
    color: var(--cinza-menus);
    font-size: 12px;
}

.SumoSelect > .optWrapper > .options li.opt {
    font-size: 14px;
}

.SumoSelect > .CaptionCont > label {
    width: 34px;
}

.SumoSelect > .CaptionCont > label > i {
    width: 16px;
    height: 16px;
    border: 0;
    background: #6c6c85;
    -webkit-mask: url('../images/icons/down.svg') center / 16px 16px no-repeat;
    mask: url('../images/icons/down.svg') center / 16px 16px no-repeat;
}

.SumoSelect.open > .CaptionCont {
    border-color: var(--preto) !important;
    box-shadow: 0 0 0 .2rem var(--color-focus-ring);
}

.SumoSelect > .optWrapper {
    top: calc(100% + 4px);
    z-index: 20;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-input);
    box-shadow: 0 8px 18px rgb(1 1 29 / 12%);
}

.SumoSelect > .optWrapper > .options li.opt {
    min-height: 36px;
    padding: 8px 12px;
    color: var(--preto);
    font-size: 12px;
}

.SumoSelect > .optWrapper > .options li.opt:hover {
    background: var(--color-navigation-active);
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
}

.app-table th {
    padding: 0 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--preto);
    font-family: var(--font-family-base);
    font-size: var(--font-size-table-heading);
    font-weight: var(--font-weight-table-heading);
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
}

.app-table thead th {
    cursor: pointer;
}

.app-table thead .dt-column-order {
    display: none !important;
}

table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: none;
}

.app-table.dataTable thead > tr > th {
    padding: 0 10px 20px;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.app-table.dataTable {
    margin-top: 0 !important;
}

div.dt-container div.dt-layout-row {
    margin: 0;
}

.app-table.dataTable thead th,
.app-table.dataTable tbody td:not(.dt-empty):not([colspan]):not(.student-row-actions):not(.library-actions):not(.document-actions):not(.notification-row-actions):not(.message-row-actions):not(.school-class-actions):not(.teacher-row-actions) {
    text-align: left !important;
}

.app-table.dataTable thead th:last-child:empty {
    text-align: right !important;
}

.app-table.dataTable thead .table-sort img {
    opacity: .35;
    transition: opacity 160ms ease, filter 160ms ease;
}

.app-table.dataTable thead th.dt-ordering-asc,
.app-table.dataTable thead th.dt-ordering-desc {
    font-weight: 700 !important;
}

.app-table.dataTable thead th.dt-ordering-asc .table-sort img:first-child,
.app-table.dataTable thead th.dt-ordering-desc .table-sort img:last-child {
    opacity: 1;
    filter: brightness(0);
}

.app-table.dataTable thead th.dt-ordering-asc .table-sort img:last-child,
.app-table.dataTable thead th.dt-ordering-desc .table-sort img:first-child {
    opacity: .12;
}

.app-table.dataTable tbody > tr > td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.app-table td {
    height: 66px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--preto);
    font-family: var(--font-family-base);
    font-size: var(--font-size-table-cell);
    font-weight: var(--font-weight-table-cell);
    line-height: 22px;
}

.app-table td.dt-empty {
    text-align: center !important;
}

.app-table-card {
    overflow: visible;
    border-radius: 16px;
    box-shadow: 0 5px 8px rgb(0 0 0 / 5%);
}

.app-table-card > .table-responsive {
    padding: 24px 20px 0;
}

.app-table tbody tr:hover {
    background: var(--color-border);
}

/* Keep overflow actions anchored to the right edge of list action columns. */
.app-table.dataTable .student-row-actions,
.app-table.dataTable .library-actions,
.app-table.dataTable .document-actions,
.app-table.dataTable .notification-row-actions,
.app-table.dataTable .message-row-actions,
.app-table.dataTable .school-class-actions,
.app-table.dataTable .teacher-row-actions {
    text-align: right !important;
}

.app-table .student-row-action-menu-wrapper,
.app-table .library-row-action-menu-wrapper,
.app-table .document-action-menu-wrapper {
    margin-left: auto;
}

.app-table .library-row-action-stack {
    align-items: flex-end;
}

/* Show the overflow action boundary together with the hovered list row. */
.app-table tbody tr:hover .student-row-action-menu-wrapper > .student-row-action-toggle,
.app-table tbody tr:hover .library-row-action-menu-wrapper > .library-row-action-toggle,
.app-table tbody tr:hover .document-action-menu-wrapper > .document-action-menu-toggle,
.app-table tbody tr:hover .notification-row-actions > button,
.app-table tbody tr:hover .message-row-actions > button,
.app-table tbody tr:hover .school-class-actions > button,
.app-table tbody tr:hover .school-class-actions > a,
.app-table tbody tr:hover .teacher-row-actions > a,
.summary-card:hover .summary-action-button {
    border: 1px solid var(--preto) !important;
}

.app-table.dataTable {
    border-bottom: 1px solid var(--color-border-light) !important;
}

.app-table.dataTable {
    visibility: hidden;
}

.app-table.dataTable.is-datatables-ready {
    visibility: visible;
}

.table-responsive:has(> .app-table.dataTable:not(.is-datatables-ready)) {
    position: relative;
}

.table-responsive:has(> .app-table.dataTable:not(.is-datatables-ready))::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: var(--cinza-menus);
    content: 'A carregar...';
    font-size: 13px;
}

.app-table-loading-card.is-loading .table-responsive {
    position: relative;
    min-height: 180px;
}

.app-table-loading-card.is-loading .table-responsive::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: var(--cinza-menus);
    content: 'A carregar...';
    font-size: 13px;
}

.app-table-loading-card.is-loading .app-table {
    visibility: hidden;
}

.app-table.dataTable tbody tr:last-child > * {
    border-bottom-color: var(--color-border-light) !important;
}

.table-sort {
    display: inline-flex;
    width: 15px;
    margin-left: 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    vertical-align: middle;
}

.table-sort img {
    display: block;
    width: 13px;
    height: 8px;
}

.app-pagination-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 14px 24px;
}

.app-per-page,
.app-go-page {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--preto);
    font-size: 14px;
    white-space: nowrap;
}

.app-per-page select,
.app-go-page input {
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--preto);
    font-size: 13px;
}

.app-per-page select {
    min-width: 170px;
    padding: 0 10px;
}

.app-go-page input {
    width: 72px;
    padding: 0 8px;
}

.app-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.app-pagination a,
.app-pagination span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    color: var(--preto);
    font-size: 13px;
    text-decoration: none;
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.app-pagination a.is-current {
    border-color: var(--preto);
}

.app-pagination a:hover,
.app-pagination a:focus,
.app-pagination a:focus-visible {
    border-color: var(--preto);
    background: var(--preto);
    color: var(--color-surface);
    outline: none;
}

.app-pagination a:hover img,
.app-pagination a:focus img,
.app-pagination a:focus-visible img {
    filter: brightness(0) invert(1);
}

.app-pagination a img {
    transition: filter 240ms ease;
}

.app-pagination .is-disabled {
    color: var(--color-border);
}

.app-pagination img {
    width: 13px;
    height: 13px;
}

.app-pagination img.is-previous {
    transform: rotate(180deg);
}

@media (max-width: 1000px) {
    .app-pagination-bar {
        flex-wrap: wrap;
    }

    .app-pagination {
        margin-left: 0;
    }
}

@media (max-width: 700px) {
    .app-pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (min-width: 1600px) {
    .col-xxxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxxl-12 { flex: 0 0 auto; width: 100%; }
    .offset-xxxl-4 { margin-left: 33.33333333%; }
}

@media (max-width: 1000px) {
    .datatable-filter-form {
        grid-template-columns: repeat(2, 1fr);
    }

    .datatable-filter-submit {
        grid-column: span 2;
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .datatable-filter-form {
        grid-template-columns: 1fr;
    }

    .datatable-filter-submit {
        grid-column: auto;
    }
}

.page-title {
    margin: 0;
    color: var(--preto);
    font-family: var(--font-family-base);
    font-size: 26px;
    font-weight: 700;
    line-height: 100%;
}

.panel-title {
    margin: 0 0 22px;
    color: var(--preto);
    font-size: 17px;
    font-weight: 700;
    line-height: 100%;
}

.panel-title + .panel-description {
    margin-top: 0;
    margin-bottom: 22px;
}

.app-card:has(> .panel-title + .panel-description) > .panel-title {
    margin-bottom: 10px;
}

.panel-description {
    color: var(--cinza-menus);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
}

.form-subtitle {
    margin: 0;
    color: var(--preto);
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
}

.app-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgb(1 1 29 / 4%);
}

.app-card .form-check-label {
    font-size: 14px;
}

.form-section {
    margin-bottom: 16px;
    padding: 24px;
}

.form-section .row.g-3 {
    --bs-gutter-y: 20px;
}

.page-heading {
    margin-bottom: 20px;
}

.form-page {
    padding-bottom: 90px;
}

.form-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 264px;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 30px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface);
    box-shadow: 0 -3px 10px rgb(1 1 29 / 6%);
}

.dashboard-shell.is-sidebar-collapsed .form-actions {
    left: 72px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 24px;
}

.detail-item small {
    display: block;
    margin-bottom: 5px;
    color: var(--cinza-menus);
    font-size: 11px;
}

.detail-item strong {
    font-size: 13px;
    font-weight: 500;
}

.ajax-feedback:empty {
    display: none;
}

.ajax-feedback {
    margin-bottom: 18px;
}

.autocomplete-field {
    position: relative;
}

.autocomplete-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 20;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 4px 12px rgb(1 1 29 / 12%);
}

.autocomplete-suggestion {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: var(--color-surface);
    color: var(--preto);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.autocomplete-suggestion:hover {
    background: var(--color-navigation-active);
}

.autocomplete-suggestion-new {
    border-top: 1px solid var(--color-border-light);
    color: var(--cinza-menus);
}

.btn {
    height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
    border-radius: var(--border-radius-button);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: 100%;
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

button,
[role="button"] {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.btn:focus,
.btn:focus-visible,
.btn:active {
    outline: 0;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.btn img {
    transition: filter 240ms ease;
}

.btn-primary {
    --bs-btn-bg: var(--preto);
    --bs-btn-border-color: var(--preto);
    --bs-btn-disabled-bg: var(--preto);
    --bs-btn-disabled-border-color: var(--preto);
    --bs-btn-disabled-color: var(--color-surface);
    --bs-btn-focus-shadow-rgb: 1, 1, 29;
    border-color: var(--preto);
    background-color: var(--preto);
    color: var(--color-surface);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary.is-loading {
    border-color: var(--preto) !important;
    background-color: var(--preto) !important;
    color: var(--color-surface) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
    border-color: var(--preto);
    background-color: var(--color-surface);
    color: var(--preto);
}

.btn-primary:active {
    background-color: var(--color-surface) !important;
    color: var(--preto) !important;
}

.btn-primary img {
    filter: brightness(0) invert(1);
}

.btn-primary:hover img,
.btn-primary:focus img,
.btn-primary:focus-visible img,
.btn-primary:active img {
    filter: brightness(0);
}

.btn-light {
    border: 1px solid var(--preto);
    background-color: var(--color-surface);
    color: var(--preto);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:focus-visible,
.btn-light:active {
    border-color: var(--preto);
    background-color: var(--preto);
    color: var(--color-surface);
}

.form-actions .btn-primary:hover,
.form-actions .btn-primary:focus,
.form-actions .btn-primary:focus-visible,
.form-actions .btn-primary:active {
    border-color: var(--preto);
    background-color: var(--color-surface) !important;
    color: var(--preto) !important;
}

.form-actions .btn-primary:not(.is-saved):not(:disabled):hover,
.form-actions .btn-primary:not(.is-saved):not(:disabled):focus,
.form-actions .btn-primary:not(.is-saved):not(:disabled):focus-visible,
.form-actions .btn-primary:not(.is-saved):not(:disabled):active {
    border-color: var(--color-success) !important;
    background-color: var(--color-success) !important;
    color: var(--color-surface) !important;
}

.form-actions .btn-primary:not(.is-saved):not(:disabled):hover img,
.form-actions .btn-primary:not(.is-saved):not(:disabled):focus img,
.form-actions .btn-primary:not(.is-saved):not(:disabled):focus-visible img,
.form-actions .btn-primary:not(.is-saved):not(:disabled):active img {
    filter: brightness(0) invert(1);
}

.form-actions .btn-primary.is-saved,
.form-actions .btn-primary.is-saved:disabled {
    border-color: var(--color-border) !important;
    background-color: var(--color-border) !important;
    color: var(--cinza-menus) !important;
    box-shadow: none !important;
    cursor: default;
}

.form-actions .btn.is-saved .button-save-icon {
    display: inline-block;
    filter: invert(50%) sepia(12%) saturate(954%) hue-rotate(201deg) brightness(92%) contrast(88%) !important;
    opacity: 1;
}

.form-actions .btn.is-saved .button-loader {
    display: none;
}

.form-actions .btn-light:hover,
.form-actions .btn-light:focus,
.form-actions .btn-light:focus-visible,
.form-actions .btn-light:active {
    border-color: var(--preto);
    background-color: var(--preto) !important;
    color: var(--color-surface) !important;
}

.btn-light:active {
    background-color: var(--preto) !important;
    color: var(--color-surface) !important;
}

.btn-light:hover .button-icon,
.btn-light:focus .button-icon,
.btn-light:focus-visible .button-icon,
.btn-light:active .button-icon {
    filter: brightness(0) invert(1);
}

/* Shared button palette. The numeric names keep the visual language consistent
 * while allowing each action colour to be selected without page-specific CSS. */
.btn1,
.btn2,
.btn3,
.btn4,
.btn5,
.btn6 {
    --button-bg: var(--preto);
    --button-fg: var(--color-surface);
    --button-hover-bg: var(--color-surface);
    --button-hover-fg: var(--preto);
    --button-border: var(--preto);
    --button-hover-border: var(--preto);
    box-sizing: border-box;
    border: 1px solid var(--button-border);
    border-radius: var(--border-radius-button);
    background: var(--button-bg);
    overflow: hidden;
    color: var(--button-fg);
}

.btn1 img,
.btn2:hover img,
.btn2:focus img,
.btn2:focus-visible img,
.btn2:active img {
    filter: brightness(0) invert(1);
}

.btn1:hover img,
.btn1:focus img,
.btn1:focus-visible img,
.btn1:active img {
    filter: brightness(0);
}

.btn2 img {
    filter: brightness(0);
}

.btn1:hover,
.btn1:focus,
.btn1:focus-visible,
.btn1:active,
.btn2:hover,
.btn2:focus,
.btn2:focus-visible,
.btn2:active,
.btn3:hover,
.btn3:focus,
.btn3:focus-visible,
.btn3:active,
.btn4:hover,
.btn4:focus,
.btn4:focus-visible,
.btn4:active,
.btn5:hover,
.btn5:focus,
.btn5:focus-visible,
.btn5:active,
.btn6:hover,
.btn6:focus,
.btn6:focus-visible,
.btn6:active {
    border-color: var(--button-hover-border);
    background: var(--button-hover-bg);
    color: var(--button-hover-fg);
}

.btn2 {
    --button-bg: var(--color-surface);
    --button-fg: var(--preto);
    --button-hover-bg: var(--preto);
    --button-hover-fg: var(--color-surface);
}

.btn3 {
    --button-bg: var(--color-accent);
    --button-fg: var(--color-surface);
    --button-hover-bg: var(--color-surface);
    --button-hover-fg: var(--color-accent);
    --button-border: var(--color-accent);
    --button-hover-border: var(--color-accent);
}

.btn3 img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.btn3:hover img,
.btn3:focus img,
.btn3:focus-visible img,
.btn3:active img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(3540%) hue-rotate(339deg) brightness(91%) contrast(103%) !important;
}

.btn4 {
    --button-bg: #fff0f3;
    --button-fg: var(--color-accent);
    --button-hover-bg: var(--color-accent);
    --button-hover-fg: var(--color-surface);
    --button-border: #f2b7c2;
    --button-hover-border: var(--color-accent);
}

.btn5 {
    --button-bg: var(--color-success);
    --button-fg: var(--color-surface);
    --button-hover-bg: var(--color-surface);
    --button-hover-fg: var(--color-success);
    --button-border: var(--color-success);
    --button-hover-border: var(--color-success);
}

.btn6 {
    --button-bg: var(--cinza-menus);
    --button-fg: var(--color-surface);
    --button-hover-bg: var(--color-surface);
    --button-hover-fg: var(--cinza-menus);
    --button-border: var(--cinza-menus);
    --button-hover-border: var(--cinza-menus);
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

}

.button-icon {
    transition: filter 260ms ease;
}

.button-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

.button-loader {
    display: none;
}

.form-actions .btn.is-loading .button-save-icon,
.form-actions .btn:disabled:not(.is-saved) .button-save-icon {
    display: none;
}

.form-actions .btn.is-loading .button-loader,
.form-actions .btn:disabled:not(.is-saved) .button-loader {
    display: inline-block;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    color: var(--preto);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
}

.form-control,
.form-select {
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-input);
    color: var(--preto);
    font-size: 14px;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4 6L8 10L12 6' fill='none' stroke='%236c6c85' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3e%3c/svg%3e");
}

input[type="date"],
input[type="time"] {
    accent-color: var(--preto);
    color: var(--preto);
    -webkit-text-fill-color: var(--preto);
}

/* Safari applies its blue system tint to native date/time segments unless the
   WebKit text fill is explicitly set. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
    color: var(--preto);
    -webkit-text-fill-color: var(--preto);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--preto);
    box-shadow: none;
}

.form-control::placeholder {
    font-size: 14px;
}

/* Mantém as setas dos filtros visualmente centradas com o texto. */
.datatable-filter-field .form-select {
    background-position: right 0.75rem calc(50% + 2px);
}

.datatable-filter-field .SumoSelect > .CaptionCont > label > i {
    top: 14px;
    transform: none;
}

.form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0;
    margin-right: 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.form-check-input:checked {
    border-color: var(--color-accent);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.7 19.7'%3E%3Cpath fill='%23d50036' d='M6.6 17.1c-.3 0-.6-.1-.8-.3L.3 11.2c-.4-.4-.4-1.1 0-1.6.4-.4 1.1-.4 1.5 0l4.7 4.7L17.9 3c.4-.4 1.1-.4 1.5 0 .4.4.4 1.1 0 1.6L7.3 16.8c-.2.2-.5.3-.8.3Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
    background-image: none;
    appearance: none;
}

.form-check-input[type="radio"]:checked {
    border-color: var(--color-accent);
    background-color: var(--color-surface);
    background-image: radial-gradient(circle, var(--color-accent) 0 5px, transparent 6px);
    background-position: center;
}

textarea.form-control {
    min-height: 100px;
}

/* Fundo consistente para todos os modais e confirmações. */
.modal-backdrop.show,
.offcanvas-backdrop.show {
    background-color: #000;
    opacity: .78;
}

.alertify .ajs-dimmer {
    background-color: #000;
    opacity: .78;
}

@media (max-width: 900px) {
    .detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Alertify: confirmações com o mesmo padrão dos modais da aplicação. */
.alertify-notifier .ajs-message {
    overflow: hidden;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgb(1 1 29 / 12%);
}

.alertify-notifier .ajs-message.ajs-success {
    border: 1px solid #CFEDE1;
    background: #E3F6EE;
    color: #1F9D6B;
}

.alertify-notifier .ajs-message.ajs-error {
    border: 1px solid #F7CFD9;
    background: #FBE6EB;
    color: #D50036;
}

.ajs-dialog {
    width: min(440px, calc(100vw - 32px));
    font-family: var(--font-family-base) !important;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border) !important;
    border-radius: 10px;
    background: var(--color-surface) !important;
    box-shadow: 0 12px 35px rgb(0 0 0 / 25%);
}

.ajs-header {
    padding: 24px 52px 8px 28px;
    border: 0 !important;
    background: var(--color-surface) !important;
    color: var(--preto) !important;
    font-family: var(--font-family-base) !important;
    font-size: 17px;
    font-weight: 700;
}

.ajs-close {
    top: 16px;
    right: 18px;
    width: 24px;
    height: 24px;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--cinza-menus) !important;
    font-size: 18px;
    line-height: 24px;
    transition: background-color 180ms ease, color 180ms ease;
}

.ajs-close:hover,
.ajs-close:focus,
.ajs-close:active {
    background: var(--color-surface-muted) !important;
    color: var(--preto) !important;
}

.ajs-body {
    padding: 0;
    border: 0 !important;
    background: var(--color-surface) !important;
    color: var(--preto) !important;
    font-family: var(--font-family-base) !important;
    font-size: 14px;
    line-height: 1.45;
}

.ajs-content {
    padding: 0 !important;
}

.ajs-footer {
    padding: 0 28px 24px;
    border: 0 !important;
    background: var(--color-surface) !important;
}

.ajs-footer .ajs-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 16px;
}

.ajs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--preto) !important;
    border-radius: 8px;
    background: var(--color-surface) !important;
    color: var(--preto) !important;
    font-family: var(--font-family-base) !important;
    font-size: 15px;
    font-weight: 500;
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.ajs-button::before {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    content: "";
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.ajs-button.ajs-ok::before {
    mask-image: url("/images/icons/v.svg");
    -webkit-mask-image: url("/images/icons/v.svg");
}

.ajs-button.ajs-cancel::before,
.ajs-button:not(.ajs-ok)::before {
    mask-image: url("/images/icons/x.svg");
    -webkit-mask-image: url("/images/icons/x.svg");
}

.ajs-button.ajs-cancel:hover,
.ajs-button.ajs-cancel:focus,
.ajs-button.ajs-cancel:active,
.ajs-button:not(.ajs-ok):hover,
.ajs-button:not(.ajs-ok):focus,
.ajs-button:not(.ajs-ok):active {
    border-color: var(--preto) !important;
    background: var(--preto) !important;
    color: var(--color-surface) !important;
}

.ajs-button.ajs-ok {
    border-color: var(--preto) !important;
    background-color: var(--preto) !important;
    color: var(--color-surface) !important;
}

.ajs-button.ajs-ok:hover,
.ajs-button.ajs-ok:focus,
.ajs-button.ajs-ok:active {
    border-color: var(--preto) !important;
    background-color: var(--color-surface) !important;
    color: var(--preto) !important;
}

/*
 * Tipografia comum das páginas de listagem.
 *
 * As páginas podem continuar a ter regras próprias para a sua grelha e para
 * os seus componentes, mas os textos estruturais devem partir destas regras.
 */
.app-page .page-title {
    margin-top: 0;
    color: var(--preto);
    font-size: 26px;
    font-weight: 700;
    line-height: 31px;
}

body .dashboard-main section.app-page > .app-page-heading {
    margin-bottom: var(--page-heading-spacing) !important;
}

.app-page .datatable-filter-panel .datatable-filter-field > label {
    color: var(--preto);
    font-size: var(--font-size-filter-label);
    font-weight: 500;
    line-height: 18px;
}

.app-page .datatable-filter-panel .datatable-filter-field .form-control,
.app-page .datatable-filter-panel .datatable-filter-field .form-select,
.app-page .datatable-filter-panel .datatable-filter-field .SumoSelect > .CaptionCont > span {
    font-size: var(--font-size-filter-control);
    font-weight: 400;
}

.app-page .datatable-filter-panel .library-filter-check,
.app-page .datatable-filter-panel .library-filter-check > span {
    color: var(--preto);
    font-family: var(--font-family-base);
    font-size: var(--font-size-filter-control);
    font-weight: 400;
    line-height: 18px;
}

.app-page table,
.app-page table th,
.app-page table td {
    font-family: var(--font-family-base);
}

.app-page .student-attendance-table {
    font-family: var(--font-family-base);
}

.dashboard-main .app-page .app-table {
    font-family: var(--font-family-base);
}

.dashboard-main .app-page .app-table thead > tr > th,
.dashboard-main .app-page .app-table thead > tr > td,
.dashboard-main .app-page .app-table tfoot > tr > th,
.dashboard-main .app-page .app-table tfoot > tr > td {
    color: var(--preto);
    font-size: var(--font-size-table-heading) !important;
    font-weight: var(--font-weight-table-heading) !important;
    line-height: 18px;
}

.dashboard-main .app-page .app-table tbody > tr > td,
.dashboard-main .app-page .app-table tfoot > tr > td {
    color: var(--preto);
    font-size: 13px !important;
    font-weight: var(--font-weight-table-cell) !important;
    line-height: 22px;
}

.app-page .documents-breadcrumbs {
    font-family: var(--font-family-base);
    font-size: var(--font-size-breadcrumb);
    font-weight: 400;
    line-height: 18px;
}
/* Campos de seleção ativos: bordo e visto pretos. */
.form-check-input[type="checkbox"]:checked{
    border-color:var(--preto);
    background-color:var(--color-surface);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.7 19.7'%3E%3Cpath fill='%2301011D' d='M6.6 17.1c-.3 0-.6-.1-.8-.3L.3 11.2c-.4-.4-.4-1.1 0-1.6.4-.4 1.1-.4 1.5 0l4.7 4.7L17.9 3c.4-.4 1.1-.4 1.5 0 .4.4.4 1.1 0 1.6L7.3 16.8c-.2.2-.5.3-.8.3Z'/%3E%3C/svg%3E");
}
/* Ações no fim da linha acompanham a cor do hover da respetiva tabela. */
.app-table tbody tr:hover .student-row-action-menu-wrapper > .student-row-action-toggle,
.app-table tbody tr:hover .library-row-action-menu-wrapper > .library-row-action-toggle,
.app-table tbody tr:hover .notification-row-actions > button,
.app-table tbody tr:hover .message-row-actions > button,
.app-table tbody tr:hover .school-class-actions > button,
.app-table tbody tr:hover .school-class-actions > a,
.app-table tbody tr:hover .teacher-row-actions > a{
    border:1px solid var(--color-border)!important;
}