/* Importă fonturile și iconițele din 'open-iconic-bootstrap' pentru utilizarea iconițelor în interfața web.
   Această importare permite accesul la o varietate de iconițe pentru îmbunătățirea vizuală a interfeței utilizator. */
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Setează familia de fonturi pentru întregul document HTML.
   'Helvetica Neue', Helvetica, Arial, sans-serif sunt fonturi lizibile și populare, oferind un aspect curat și profesionist. */
html, body {
    font-family: inherit;
}

/* Clasa 'a, .btn-link': Stilizează linkurile și butoanele cu aspect de link.
   - 'color: #0366d6' setează o nuanță de albastru pentru text, indicând interactivitatea elementelor. */
a, .btn-link {
    color: #0366d6;
}

/* Clasa '.btn-primary': Definește stilul butoanelor primare.
   - 'color: #fff' asigură că textul este alb pentru contrast.
   - 'background-color' și 'border-color' folosesc o nuanță de albastru pentru a evidenția butoanele ca elemente importante de interacțiune. */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* padding-top for .content is now defined in info-ags-original.css */

/* Clasa '.valid.modified:not([type=checkbox])': Stilizează câmpurile de formular valide și modificate, excluzând checkbox-urile.
   - 'outline: 1px solid #26b050' adaugă un contur verde pentru a indica validitatea datelor. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

/* Clasa '.invalid': Stilizează câmpurile invalide cu un contur roșu.
   - 'outline: 1px solid red' servește ca un semnal vizual al erorilor sau problemelor în formular. */
.invalid {
    outline: 1px solid red;
}

/* Clasa '.validation-message': Personalizează mesajele de validare cu culoarea roșie.
   - 'color: red' folosește o culoare universală pentru a indica erorile sau problemele. */
.validation-message {
    color: red;
}

/* Clasa '#blazor-error-ui': Definește stilurile pentru interfața de eroare în aplicații Blazor.
   - 'background' setează culoarea de fundal.
   - 'box-shadow' adaugă o umbră pentru a evidenția interfața.
   - 'display: none' asigură că interfața de eroare este ascunsă implicit.
   - 'position: fixed', 'width: 100%', și alte proprietăți de poziționare asigură că interfața de eroare este vizibilă indiferent de scroll. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Clasa '#blazor-error-ui .dismiss': Stilizează butonul de închidere din interfața de eroare Blazor.
   - 'cursor: pointer' indică faptul că elementul este interactiv.
   - 'position: absolute' și alte proprietăți de poziționare plasează butonul în locația dorită. */
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Clasa '.add-margin-button': Oferă un spațiu mic în jurul butoanelor pentru a îmbunătăți aspectul și ușurința de interacțiune.
   - 'margin: 4px' adaugă un spațiu uniform în jurul butoanelor. */
.add-margin-button {
    margin: 4px;
}

/* Clasa '.btnSmall': Stilizează butoanele mai mici, ajustând dimensiunile pentru un aspect proporțional.
   - 'height: 24px', 'padding: 0px 10px', și 'margin: 0px 10px' definesc dimensiunea și spațiul din jurul butoanelor mici. */
.btnSmall {
    height: 24px;
    padding: 0px 10px;
    margin: 0px 10px;
}

/* Clasa 'img.resize-portret': Stilizează imaginile de tip portret pentru a avea dimensiuni uniforme.
   - 'width: 170px' și 'height: 170px' asigură că imaginile portret sunt pătrate și au dimensiuni egale. */
img.resize-portret {
    width: 170px;
    height: 170px;
}

/* Clasa '.AddBtnMarginRight': Adaugă o margine în partea dreaptă și jos a butoanelor.
   - 'margin-right: 8px' și 'margin-bottom: 8px' creează spațiu între butoane și alte elemente, îmbunătățind aspectul general. */
.AddBtnMarginRight {
    margin-right: 8px;
    margin-bottom: 8px;
}

/* Clasa '#sidebar-wrapper': Definește stilurile pentru bara laterală.
   - 'width: 240px' și 'min-height: 100vh' stabilesc dimensiunea barei laterale.
   - 'margin-left: -15rem' și proprietățile de tranziție controlează modul în care bara laterală apare și dispare. */
#sidebar-wrapper {
    width: 240px;
    min-height: 100vh;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

/* Clasa '#sidebar-wrapper .sidebar-heading': Stilizează titlul din bara laterală.
   - 'padding: 0.875rem 1.25rem' și 'font-size: 1.2rem' definesc aspectul și dimensiunea titlului. */
#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

/* Clasa '#sidebar-wrapper .list-group': Setează lățimea grupului de liste din bara laterală.
   - 'width: 15rem' asigură că grupul de liste se potrivește în bara laterală. */
#sidebar-wrapper .list-group {
    width: 15rem;
}

/* Clasele '.list-group-item.active' și variantele sale: Personalizează elementele listei active.
   - 'color: white' și 'background-color: #a593c2' schimbă culoarea textului și a fundalului pentru a evidenția elementul activ.
   - 'border-color: #a593c2' și 'font-weight: bold' completează aspectul pentru a atrage atenția asupra elementului selectat. */
.list-group-item.active, .list-group-item.active:active, .list-group-item.active:focus, .list-group-item.active:visited {
    color: white;
    background-color: #a593c2 !important;
    border-color: #a593c2;
    font-weight: bold;
}

/* Clasa '.title': Stabilește stilul pentru titluri.
   - 'color: white' și 'padding-left: 25px' asigură că titlurile sunt vizibile și bine poziționate. */
.title {
    color: white;
    padding-left: 25px;
}


#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

/* Media queries pentru ajustarea stilurilor în funcție de lățimea ecranului.
   - La ecrane cu lățimea de minim 768px, bara laterală este vizibilă și conținutul ocupă restul spațiului disponibil.
   - În modul 'toggled', bara laterală este ascunsă pentru a permite conținutului să ocupe întreaga lățime. */
@media (min-width: 768px) {

}

/* Clasa '.page-title': Stilizează titlurile paginilor.
   - 'color: #a593c2' și 'font-size: 28px' asigură că titlurile sunt proeminente și ușor de citit. */
.page-title {
    color: #a593c2;
    font-size: 28px;
}
.customTextarea-SingleLine{
    box-sizing: border-box;
    padding-bottom: 50px;
    overflow: auto;
    width: 100%;
    border: 2px solid #007BFF; /* bordură solidă de culoare albastră */
    border-radius: 10px; /* colțuri rotunjite */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* umbră ușoară pentru un efect 3D */
    transition: border-color 0.3s ease; /* tranziție pentru hover */
    height: 30px;
}

.customTextarea {
    box-sizing: border-box;
    padding-bottom: 50px;
    overflow: auto;
    width: 100%;
    height: 300px;
    border: 2px solid #007BFF; /* bordură solidă de culoare albastră */
    border-radius: 10px; /* colțuri rotunjite */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* umbră ușoară pentru un efect 3D */
    transition: border-color 0.3s ease; /* tranziție pentru hover */
}

.customTextarea:hover {
    border-color: #0056b3; /* schimbă culoarea bordurii la hover */
}

.customTextarea-SingleLine:hover {
    border-color: #0056b3; /* schimbă culoarea bordurii la hover */
}


.hr-sm {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px;
    border-top: 1px solid rgb(26, 2, 2);
}


.quick-add-btn {
    font-size: 36px;
    position: fixed;
    right: 30px;
    bottom: 30px;
}
/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 15%;
}

.column-1 {
    float: left;
    width: 23%;
    margin :10px;

}
.text-box{
    width: 200px;
}

.input-text-smallWidth{
    width: 65px;
    height: 23px;
}
.column-2 {
    float: left;
    width: 30%;
    margin :10px;

}

.column-to-right {
    float: right;

}
.column-3 {
    float: left;
    width: 50%;
    margin :10px;

}

.employee-detail, .employee-edit {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.6);
}

.employee-detail .form-group {
    margin-bottom: 0;
}

.employee-detail-img {
    width: 150px;
    height: auto;
}

.track-order-map {
    width: 350px;
    height: 500px;
    flex-shrink: 0;
}

.edit-btn {
    background-color: #23cfa7;
    border-color: #23cfa7;
    color: #fff;
}

.edit-btn:hover, .edit-btn:active {
    color: #fff;
    background-color: #a593c2;
    border-color: #a593c2;
}

.edit-outline-btn {
    border-color: #23cfa7;
}

.edit-outline-btn:hover, .edit-outline-btn:active {
    color: #fff;
    background-color: #a593c2 !important;
    border-color: #a593c2 !important;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.alert {
    padding: 0.5rem 0.6rem;
    margin-bottom: 0;
}

.rounded-circle {
    border-radius: 50% !important;
}

/* Stil opțional pentru a personaliza și mai mult butoanele */
.btn-outline-primary {
    color: #007bff; /* Schimbă culoarea textului */
    border-color: #007bff; /* Schimbă culoarea bordurii */
}

.btn-outline-primary:hover {
    background-color: #007bff; /* Schimbă culoarea de fundal la hover */
    color: white; /* Schimbă culoarea textului la hover */
}

/* Stil pentru butonul activ */
.btn-check:checked + .btn {
    background-color: #007bff;
    color: white;
}


.completed-task {
    background-color: #d3f9d8; /* O culoare distinctivă pentru task-urile finalizate */
    color: #495057; /* O culoare pentru text care să contrasteze cu fundalul */
    /* Poti adăuga și alte stiluri, cum ar fi stiluri pentru link-uri */
}
.completed-link {
    text-decoration: line-through; /* Tăierea textului pentru a indica finalizarea */
    color: #6c757d; /* O culoare mai deschisă pentru text */
}
 
.text-center {
    text-align: center; /* Centrează titlul */
}

.modal-body {
    overflow-y: auto; /* Permite defilarea dacă conținutul este prea lung */
}

.table-header {
    background-color: #007bff; /* Schimbă culoarea de fundal pentru antet */
    color: white; /* Textul antetului în culoare albă */
}

.table-btn {
    margin: 0 5px; /* Spațiere între butoane */
    /* Adaugă alte stiluri necesare */
}


.preview-button {
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.preview-button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.preview-button:focus {
    outline: none;
}

.modal-header .btn-close,
.modal-header .btn-close-ags {
    position: absolute; /* Poziționează absolut în cadrul părintelui */
    top: 0;             /* Aliniază la partea de sus */
    right: 0;           /* Aliniază la marginea din dreapta */
    margin: 1rem;       /* Adaugă un spațiu uniform */
}