Screen {
    layout: vertical;
    background: $primary-background-darken-3;
    align: center middle;
    hatch: right $secondary-background-darken-3;
}

.EditEntryScreen-sub-header {
    layout: horizontal;
    background: $primary-darken-1;
    height: 1;
    padding: 0 1;
    align: center middle;
    width: 100%;
}

.EditEntryScreen-diary-info {
    width: auto;
    color: $text-muted;
    margin-right: 2;
}

.EditEntryScreen-entry-info {
    width: auto;
    color: $text;
    margin-right: 1;
}

.EditEntryScreen-spacer {
    width: 1fr;
}

.EditEntryScreen-status-indicator {
    width: auto;
    padding: 0 1;
    content-align: center middle;
}

.EditEntryScreen-status-indicator.saved {
    background: #2E8B57; /* SeaGreen */
    color: $text;
}

.EditEntryScreen-status-indicator.not-saved {
    background: #B22222; /* FireBrick */
    color: $text;
}

.EditEntryScreen-status-indicator.new {
    background: #4682B4; /* SteelBlue */
    color: $text;
}

.EditEntryScreen-status-indicator.read-only {
    background: #696969; /* DimGray */
    color: $text-muted;
}

.EditEntryScreen-main-container {
    background: bisque;
    margin: 0;
}

.EditEntryScreen-text-entry {
    width: 100%;
    height: 1fr;
    border: none;
}

AboutScreen {
    align: center middle;
}

#AboutScreen_AboutContainer {
    align: center middle;
    width: 85%;
    height: 95%;
    border: thick $primary;
    background: $surface;
    margin: 1;
}

#AboutScreen_AboutContainer TextArea {
    align: center middle;
    width: 100%;
    height: 55%;
    margin: 2;
    padding: 1;
}

#AboutScreen_SubContainer {
    align: center middle;
    height: 45%;
    padding: 1 1;
    margin: 1 1;
}

#AboutScreen_AboutTitle {
    color: $accent;
    text-style: bold;
    text-align: center;
    margin-bottom: 1;
}

#AboutScreen_AboutVersion {
    color: $warning;
    text-style: italic;
    text-align: center;
    margin-bottom: 1;
}

#AboutScreen_AboutContent {
    text-align: center;
    margin-bottom: 1;
}

#AboutScreen_AboutContact,
#AboutScreen_AboutAuthor {
    color: $text-muted;
    text-align: center;
    margin-bottom: 1;
}

#AboutScreen_AboutLicense {
    height: 60%;
}

/* Main container - distributing vertical space */
.DiaryListScreen-DiaryListContainer {
    height: 1fr;
    width: 100%;
    layout: vertical;
    align: center top; /* Aligns at the top to follow the wireframe */
    padding: 2 4; /* More space on the sides */
    background: $surface; /* Removing aquamarine to keep it cleaner */
}

/* Diary list - main area as in the wireframe */
.DiaryListScreen-DiaryListOptions {
    border: round $primary-lighten-2;
    background: $surface;
    width: 75%; /* Generous width as in the wireframe */
    height: 60%; /* Occupies available space */
    margin: 2 0; /* Vertical margin to separate from other elements */
}

.DiaryListScreen-DiaryListOptions:focus {
    border: round $primary;
}

/* Button container - right below the list */
.DiaryListScreen-ButtonsGrid {
    layout: horizontal;
    align: center middle;
    width: 75%; /* Same width as the diary list */
    height: 20%; /* Increasing height to fit button text */
}

/* Individual buttons - ensuring space for text */
.DiaryListScreen-NewDiaryButton,
.DiaryListScreen-EditDiaryButton,
.DiaryListScreen-OpenDiaryButton {
    margin: 0 1 1 0; /* Space between buttons */
    height: 1fr;
    width: 1fr;
    border: round grey;
    text-align: center;
    content-align: center middle;
}

/* Tips - using the correct class */
.DiaryListScreen-DiaryListTips {
    width: 100%; /* Full width when using dock */
    height: auto;
    text-style: italic;
    text-align: center; /* Centers text within the element */
    color: $text-muted;
    dock: bottom; /* Sticks to the bottom of the screen */
    margin: 0 1;
}

/* Generic styles that haven't changed */
.option-list--option-highlighted {
    background: $primary-darken-2;
}

.option-list--option-selected {
    text-style: bold;
    background: $primary;
}

Header {
    background: $primary;
    color: $text;
}

Footer {
    background: $primary;
    color: $text;
}

Screen.-modal {
    background: rgba(0, 0, 0, 0.7); /* Darkens the background screen underneath */
    align: center middle; /* Centers the content (your modal) that is in this modal screen */
}

/* Style for the new diary modal dialog */
.NewDiaryModal-dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}

.NewDiaryModal-title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.NewDiaryModal-label {
    margin-bottom: 1;
}

.NewDiaryModal-name-input {
    width: 1fr;
    margin-bottom: 2;
}

.NewDiaryModal-buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.NewDiaryModal-buttons Button {
    margin: 0 1;
    width: 1fr;
}

/* Additional classes for NewDiaryModal */
.NewDiaryModal-Dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}

.NewDiaryModal-Title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.NewDiaryModal-NameInput {
    width: 1fr;
    margin-bottom: 2;
}

.NewDiaryModal-ButtonsContainer {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.NewDiaryModal-CreateDiaryButton,
.NewDiaryModal-CancelButton {
    margin: 0 1;
    width: 1fr;
}

/* Style for the edit diary modal dialog */
.EditDiaryModal-dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $warning;
    padding: 2 4;
    align: center middle;
}

.EditDiaryModal-title {
    text-align: center;
    text-style: bold;
    color: $warning;
    margin-bottom: 1;
}

.EditDiaryModal-label {
    margin-bottom: 1;
}

.EditDiaryModal-name-input {
    width: 1fr;
    margin-bottom: 2;
}

.EditDiaryModal-buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.EditDiaryModal-buttons Button {
    margin: 0 1;
    width: 1fr;
}

/* Additional classes for EditDiaryModal */
.EditDiaryModal-Dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $warning;
    padding: 2 4;
    align: center middle;
}

.EditDiaryModal-Title {
    text-align: center;
    text-style: bold;
    color: $warning;
    margin-bottom: 1;
}

.EditDiaryModal-NameInput {
    width: 1fr;
    margin-bottom: 2;
}

.EditDiaryModal-ButtonsContainer {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.EditDiaryModal-SaveButton,
.EditDiaryModal-CancelButton {
    margin: 0 1;
    width: 1fr;
}

/* Style for the rename entry modal dialog */
.RenameEntryModal-dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}

.RenameEntryModal-title {
    text-align: center;
    text-style: bold;
    color: $accent;
    margin-bottom: 1;
}

.RenameEntryModal-name-input {
    width: 1fr;
    margin-bottom: 2;
}

.RenameEntryModal-buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.RenameEntryModal-save-button,
.RenameEntryModal-cancel-button {
    margin: 0 1;
    width: 1fr;
}

.EditEntryScreen-sidebar{
    background: $primary-darken-1;
    width: 45%;
}
.EditEntryScreen-sidebar-title {
    text-align: center;
    text-style: bold;
    color: $accent;
    padding: 1;
    border-bottom: solid $accent;
    margin-bottom: 1;
}

.EditEntryScreen-sidebar-content {
    height: 1fr;
    layout: vertical;
    margin-left: 1;
    margin-right: 1;

}

.EditEntryScreen-sidebar-photo-list {
    height: 2fr; /* Pega o espaço restante disponível */
    min-height: 5; /* Garante altura mínima para não sumir */
    border: solid $accent;
    margin-bottom: 1;
    overflow-y: auto; /* Adiciona scroll vertical se necessário */
}

.EditEntryScreen-sidebar-photo-info {
    height: 1fr;
    max-height: 15; /* Limita altura máxima */
    min-height: 13;
    padding: 1;
    border: solid $warning;
    margin-bottom: 1;
    background: $surface-darken-1;
    overflow-y: auto; /* Adiciona scroll se exceder max-height */
}

.EditEntryScreen-sidebar-help {
    height: 1fr;
    max-height: 10; /* Altura máxima menor que info */
    min-height: 8; /* Altura mínima menor */
    border: solid $success;
    padding: 1;
    background: $surface-darken-1;
    text-style: italic;
    overflow-y: auto; /* Adiciona scroll se exceder max-height */
}

/* Photo Modal Styles */
.modal-dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}

.modal-title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.modal-label {
    margin-bottom: 1;
    color: $text;
}

.modal-input {
    width: 1fr;
    margin-bottom: 2;
}

.modal-buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.modal-button {
    margin: 0 1;
    width: 1fr;
}

/* AddPhotoModal styles */
.AddPhotoModal-Dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}
.AddPhotoModal-Title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}
.AddPhotoModal-Label {
    margin-bottom: 1;
    color: $text;
}
.AddPhotoModal-Input {
    width: 1fr;
    margin-bottom: 2;
}
.AddPhotoModal-Buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}
.AddPhotoModal-Button {
    margin: 0 1;
    width: 1fr;
}

/* EditPhotoModal styles */
.EditPhotoModal-Dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}
.EditPhotoModal-Title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}
.EditPhotoModal-Label {
    margin-bottom: 1;
    color: $text;
}
.EditPhotoModal-Input {
    width: 1fr;
    margin-bottom: 2;
}
.EditPhotoModal-Buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}
.EditPhotoModal-Button {
    margin: 0 1;
    width: 1fr;
}

/* FilePickerModal styles */
.FilePickerModal-Dialog {
    layout: vertical;
    width: 80%;
    height: 80%;
    background: $surface;
    border: thick $accent;
    padding: 2 4;
    align: center middle;
}

.FilePickerModal-Title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.FilePickerModal-Buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}

.FilePickerModal-Button {
    margin: 0 1;
    width: 1fr;
}

/* DirectoryTree specific styles */
#directory-tree {
    height: 1fr;
    border: solid $accent;
    margin: 1;
}

/* ConfirmDeleteModal styles */
.ConfirmDeleteModal-Dialog {
    layout: vertical;
    width: 60%;
    height: auto;
    background: $surface;
    border: thick $error;
    padding: 2 4;
    align: center middle;
}
.ConfirmDeleteModal-Title {
    text-align: center;
    text-style: bold;
    color: $error;
    margin-bottom: 1;
}
.ConfirmDeleteModal-Message {
    text-align: center;
    color: $text;
    margin-bottom: 1;
}
.ConfirmDeleteModal-Warning {
    text-align: center;
    color: $warning;
    text-style: italic;
    margin-bottom: 2;
}
.ConfirmDeleteModal-Buttons {
    width: 1fr;
    height: auto;
    align: center middle;
    padding-top: 1;
}
.ConfirmDeleteModal-Button {
    margin: 0 1;
    width: 1fr;
}

.DeleteYesConfirmationModal-DeleteModalContainer,
.DeleteDiaryModal-MainContainer {
    align: center middle;
    layout: vertical;
    margin: 2;
    padding: 2;
    background: $primary-background;
    height: auto;
    width: auto;
    min-width: 80%;
    max-width: 95%;
    border: solid $primary;
}

/* Labels de texto */
.DeleteYesConfirmationModal-DeleteModalContainer > Label,
.DeleteDiaryModal-MainContainer > Label {
    margin: 1 0;
    padding: 0 1;
    color: $error;
    text-align: center;
    width: 100%;
}

/* Input fields */
.DeleteYesConfirmationModal-DeleteModalContainer > Input,
.DeleteDiaryModal-MainContainer > Input {
    margin: 1 0;
    width: 100%;
    height: 3;
}

/* Container dos botões */
.DeleteYesConfirmationModal-DeleteButtonContainer,
.DeleteDiaryModal-ButtonContainer {
    layout: horizontal;
    align: center middle;
    margin: 2 0 0 0;
    height: auto;
    width: 100%;
    padding: 0;
}

/* Botões individuais */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button,
.DeleteDiaryModal-ButtonContainer > Button {
    width: 45%;
    margin: 0 1;
    height: 3;
}

/* Botão de delete (primeiro botão) */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button:first-child,
.DeleteDiaryModal-ButtonContainer > Button:first-child {
    background: $error-darken-1;
}

/* Botão de cancel */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button:last-child,
.DeleteDiaryModal-ButtonContainer > Button:last-child {
    background: $surface;
}

/* Estados disabled para botões de delete */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button:first-child:disabled,
.DeleteDiaryModal-ButtonContainer > Button:first-child:disabled {
    background: $surface-lighten-1;
    color: $text-muted;
}

/* Espaçamento específico para labels secundários */
#DeleteYesConfirmationModal-SecondHeadText {
    margin: 1 0;
    padding: 0 1;
    color: $warning;
    text-align: center;
    text-style: italic;
}




.Data_Container{
    width: 100%;
    layout: grid;
    grid-size: 2 1; /* 2 colunas, 1 linha */
    height:auto;


}

.Button_Container{
    width: 100%;
    layout: grid;
    grid-size: 2 2;
    height: auto;


}


.DiarySettingsScreen-DeleteDiaryButtonContainer{
    grid-size: 2 1;
    padding: 0 1;
    content-align: center middle;
    padding-bottom:1;

}

.DiarySettingsScreen-DeleteAllEntriesButtonContainer{

    margin:0;
    padding: 0 1;
    height:auto;
    padding-bottom:1;


}

.DiarySettingsScreen-DeleteAllPhotosButtonContainer{
        margin:0;
    padding: 0 1;
    height:auto;
    padding-bottom:1;

}
.DiarySettingsScreen-DeleteAllPhotosButtonContainer > Label,
.DiarySettingsScreen-DeleteAllEntriesButtonContainer > Label{
color: $error-lighten-3;
padding:1;

}

.DiarySettingsScreen-BackupDiaryButtonContainer{
margin:0;
padding:0 1;
padding-bottom:1

}

.DiarySettingsScreen-BackupDiaryButtonContainer > Label{
padding:1;
color: $success-darken-1;
}

.DiarySettingsScreen-BackupDiaryButtonContainer > Button{
    background: $success;
}

.DiarySettingsScreen-DeleteDiaryButtonContainer > Label{
    color: $error-lighten-3;
    content-align: left middle;
    padding:1



}

.DiarySettingsScreen-DeleteAllPhotosButtonContainer > Button,
.DiarySettingsScreen-DeleteAllEntriesButtonContainer > Button,
.DiarySettingsScreen-DeleteDiaryButtonContainer Button{

    background: $error;

    }

.DiarySettingsScreen-MainContainer{

    align: center top;
    layout: vertical;
    margin:1;
    padding:1;
    background: $primary-background


}

.DiarySettingsScreen-DiaryInfoContainer{

    padding:1 2;
    border:round grey;
    height:auto;
    width: 90%;
    padding-bottom: 0;
}

.DiarySettingsScreen-ButtonContainer{
    height:auto;
    layout: grid;
    grid-size: 3 1;
    grid-gutter:2;
    dock:bottom;
}

.DiarySettingsScreen-ButtonContainer > Button:first-child {

    margin-left:2

}

.DiarySettingsScreen-ButtonContainer > Button:last-child {

    margin-right:2

}

.DiarySettingsScreen-ButtonContainer > Button {
    width: 100%;



}


#DiarySettingsScreen-DiaryPhotoCountContainer > Static:first-child,
#DiarySettingsScreen-DiaryEntryCountContainer > Static:first-child,
#DiarySettingsScreen-DiaryNameContainer >  Static:first-child{

    text-align: left;

    padding: 0 1;
    padding-bottom:1

}



#DiarySettingsScreen-DiaryPhotoCountContainer > Static:last-child,
#DiarySettingsScreen-DiaryEntryCountContainer > Static:last-child,
#DiarySettingsScreen-DiaryNameContainer >  Static:last-child{

    text-align: right;
    padding:0 1

}

.DiarySettingsScreen-SetAutoOpenToThisDiaryContainer > Checkbox{

    margin:0;
    padding:1;
    background: $primary-background;
    border:none;



}

.DiarySettingsScreen-SetAutoOpenToThisDiaryContainer-Not-Saved-Label{
    text-style:bold;
    color:$warning-lighten-2;

}

.DiarySettingsScreen-DiaryDengerZoneContainer{
    border: round $error-darken-1;
    width: 90%;
    padding: 0 1;
    height: auto;
    padding-bottom: 0;
}