* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 25%;
    min-width: 250px;
    min-height: 100vh;
    background: #0b3c66;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
}


.content{
    flex:1;
    min-width:0;
    padding:25px;
    background:#f4f7fb;
}

.menu{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    transition: .3s;
}

.menu a:hover {
    background: rgba(255,255,255,.15);
}

.dashboard-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-box {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;

    box-shadow: 0 2px 8px rgba(0,0,0,.1);

    transition: all .25s ease;
}

.stat-box:hover {
    transform: translateY(-3px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #1e88e5;
    margin-bottom: 10px;
}

.content h1 {
    margin-top: 0;
    margin-bottom: 30px;
}

.menu a.active{
    background:#1e88e5;
    font-weight:bold;
}

.version {
    margin-top: auto;
    padding-top: 20px;
    font-size: 11px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    color: rgba(255,255,255,0.55);
    letter-spacing: 1px;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    box-sizing: border-box;
}

button {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background: #1e88e5;
    color: white;
    cursor: pointer;
}

button:hover {
    background: #1565c0;
}

#appointmentsList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appointment {
    background: #f8fbff;
    border: 1px solid #d6e7f7;
    border-left: 5px solid #1e88e5;
    border-radius: 10px;

    padding: 15px;
    margin-bottom: 12px;

    transition: all .25s ease;
    cursor: pointer;
}

.appointment:hover {
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    border-left-color: #1565c0;
}

.appointment strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    color: #0b3c66;
}

.appointment .date {
    color: #777;
    font-size: 14px;
}

.appointment .phone {
    color: #777;
	font-size: 13px;
    margin-top: 4px;
}

.phone-link,
.phone-link:visited {
    text-decoration: none;
    color: inherit;
}

.btn-map,
.btn-map:visited {
    text-decoration: none;
}

.appointment .address {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

.appointment .city {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

.appointment .postal_code {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

.appointment .notes {
    color: #777;
    font-size: 13px;
    margin-top: 8px;
    padding-top:8px;
    border-top:1px solid #e5e5e5;
}

.appointments-table {
    width: 100%;
    border-collapse: collapse;
}

.appointments-table th,
.appointments-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.appointments-table th {
    background: #f3f6f9;
}

.appointments-table tr:hover {
    background: #f9fbfd;
}

#appointmentsNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

#appointmentsNavigation span{
    cursor:pointer;
    user-select:none;
}

#appointmentCounter{
    font-weight:600;
}

.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.toolbar input{
    width: 300px;
    height: 50px;
}

.toolbar .btn-primary{
    width: auto;
    height: 50px;
    padding: 0 18px;
    flex: none;
}

.status{
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.status.pending{
    background:#fff3cd;
    color:#856404;
}

.status.completed{
    background:#d4edda;
    color:#155724;
}

.btn-edit{
    color:#1e88e5;
    text-decoration:none;
    margin-right:10px;
}

.btn-delete{
    color:#dc3545;
    text-decoration:none;
}

.appointments-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:12px;
    overflow:hidden;
}

.appointments-table td,
.appointments-table th{
    padding:14px 16px;
}

.appointments-table tr:hover{
    background:#f8fbff;
}

.form-actions{
    display:flex;
    gap:12px;
    margin-top:15px;
}

.form-actions button{
    flex:1;
}

.btn-cancel {
    background: #dc3545;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cancel:hover {
    background: #bb2d3b;
}

.btn-cancel:active {
    background: #a52834;
}

.calendar-main .dashboard-card{
    width:100%;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(70px,1fr));
    gap:8px;
    width:100%;
}

.calendar-day-link{
    min-width:0;
    text-decoration:none;
    color:inherit;
}

.calendar-day{
    width:100%;
    min-height:120px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    background:white;
    overflow:hidden;
}

.calendar-header{
    font-weight:700;
    text-align:center;
    padding:10px;
}

.calendar-title{
    position:relative;
    font-size:24px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.calendar-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:nowrap;
}

.calendar-btn{
    text-decoration:none;
    padding:8px 14px;
    background:#1e88e5;
    color:white;
    border-radius:6px;
}

.calendar-btn:hover{
    background:#1565c0;
}

#calendarYear{
    margin-left:10px;
    padding:4px 8px;
}

.calendar-day-link:hover .calendar-day{
    border-color:#1e88e5;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.calendar-title-button{
    background:none;
    border:none;
    color:#000;
    font-size:24px;
    font-weight:700;
    cursor:pointer;
    padding:0;

    user-select:none;
    -webkit-user-select:none;
}

.calendar-title-button:focus{
    outline:none;
}

.calendar-title-button:hover{
    background:none;
}

.calendar-year-hidden{
    display:none;
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:120px !important;
    margin-top:6px;
    z-index:100;
}

.calendar-dropdown{
    position:relative;
}

.calendar-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    z-index:1000;
}

.calendar-menu a{
    display:block;
    padding:8px 12px;

    font-size:14px;
    font-weight:400;

    color:#333;
    text-decoration:none;

    text-align:left;
}

.calendar-menu a:hover{
    background:#f4f7fb;
}

#yearMenu{
    width:max-content;
    min-width:85px;
}

#monthMenu{
    width:max-content;
    min-width:140px;
}

.details-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.details-header h3{
    margin:0;
}

.day-number{
    font-weight:bold;
    margin-bottom:8px;
}

.empty{
    background:transparent;
    border:none;
}

.appointment-dot{
    font-size:11px;
    padding:4px;
    border-radius:4px;
    margin-bottom:4px;
    color:white;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.past{
    background:#e53935;
}

.today{
    background:#43a047;
}

.future{
    background:#1e88e5;
}

.calendar-selected-day{
    background:white;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:
        0 2px 8px rgba(0,0,0,.10);

}

.appointments-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;

}

.appointment-widgets{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));
    gap:15px;

}

.appointment-widget{
    background:#f8fbff;
    border:1px solid #d6e7f7;
    border-left:5px solid #1e88e5;
    border-radius:10px;
    padding:15px;
    transition:.25s ease;

}

.appointment-widget:hover{
    transform:translateY(-3px);
    box-shadow:
        0 6px 18px rgba(0,0,0,.12);

}

.appointment-widget strong{
    display:block;
    margin-bottom:10px;
    color:#0b3c66;
    font-size:18px;

}

.appointment-widget div{
    color:#666;
    font-size:13px;
    margin-top:4px;

}

/* =========================================
   CUSTOMERS
========================================= */
.customer-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.customer-card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.customer-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,.12);

}

.customer-name{
    font-size:18px;
    font-weight:700;
    color:#0b3c66;
    margin-bottom:10px;

}

.customer-phone{
    font-size:14px;
    color:#555;
    margin-bottom:6px;
}

.customer-city{
    font-size:14px;
    color:#777;
}

.customer-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(3px);
    justify-content:center;
    align-items:center;
    z-index:2000;
}

.customer-modal-content{
    width:650px;
    max-width:90vw;
    background:#fff;
    border-radius:12px;
    padding:25px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.customer-modal-content h3{
    margin-top:0;
    margin-bottom:20px;
}

.customer-modal-content p{
    margin:12px 0;
}

.customer-modal-content{
    display:flex;
    flex-direction:column;
}

.detail-actions{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

.detail-actions button{
    width:120px;

}

.customer-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
	gap:15px;
}

.customer-toolbar h1{
    margin:0;
}

.customer-toolbar button{
    width:auto;
    margin:0;
}

#customerSearch{
    max-width:350px;
    margin:0;
}

.history-item{
    padding:10px 0;
    border-bottom:1px solid #ddd;
    font-size:14px;
    color:#555;

}

.history-item:last-child{
    border-bottom:none;

}

#appointmentHistory{
    margin-top:5px;

}

.equipment-item{
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
}

#equipmentNavigation{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-top:15px;

}

#equipmentNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;

}

#equipmentCounter{
    min-width:60px;
    text-align:center;

}

#equipmentNavigation span {
    cursor: pointer;
    user-select: none;
}

#equipmentList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
	margin-top:0;
}

#equipmentNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}
	
#equipmentNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    margin-top:25px;
}

.equipment-buttons{
    display:flex;
    gap:15px;
    margin-top:10px;
}

.equipment-buttons button{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    width:auto !important;
    flex:none;
    box-shadow:none;

}

.equipment-buttons button:hover{
    background:none;

}

.edit-equipment{
    color:#1e88e5;
    font-weight:600;
}

.delete-equipment{
    color:#dc3545 !important;
    font-weight:600;
}

#addEquipmentButton{
    background:none;
    border:none;
    padding:0;
    color:#1e88e5;
    font-weight:600;
    cursor:pointer;
    box-shadow:none;
    margin-bottom:5px;
}

#addEquipmentButton:hover{
    background:none;
    color:#1565c0;
}

.warranty-active{
    color:#155724;
    background:#d4edda;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.warranty-expired{
    color:#721c24;
    background:#f8d7da;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

/* =========================================
   TECHNICIANS
========================================= */
.technicians-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.btn-toggle,
.btn-toggle:visited {
    color: #1e88e5;
    text-decoration: none;
}

.card-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    align-items: center;
}

.card-actions a {
    text-decoration: none;
}

.btn-edit,
.btn-edit:visited {
    color: #1e88e5;
}

.btn-warning,
.btn-warning:visited {
    color: #ff9800;
}

.btn-delete,
.btn-delete:visited {
    color: #f44336;
}

.card-actions a:hover {
    opacity: 0.8;
}

.toolbar .btn-primary{
    width:auto;
    height:50px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    flex:none;
}

.card-actions form {
    margin: 0;
}

.card-actions button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* =========================================
   TOAST NOTIFICATIONS
========================================= */
#toastContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 280px;
    padding: 12px 18px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: toastIn 0.3s ease;
}

.toast-success {
    background: #43a047;
}

.toast-error {
    background: #e53935;
}

.toast-warning {
    background: #fb8c00;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform:
            translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SETTINGS MENU/SUBMENU
========================================= */

.submenu{
    display:none;
    margin-left:15px;
}

.submenu a{
    font-size:14px;
    padding:10px 12px;
    opacity:.9;
}

.submenu.open{
    display:block;
}

.settings-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.settings-apply{
    padding:10px 28px;
    border:3px solid #c7c7c7;
    border-radius:14px;
    background:transparent;
    color:#999;
    font-size:18px;
    font-weight:600;
    cursor:default;
    transition:.25s ease;
    user-select:none;
	line-height:1;
}

.settings-apply.active{
    border-color:#4c52d9;
    color:#4c52d9;
    cursor:pointer;
}

.settings-apply.active:hover{
    background:rgba(76,82,217,.08);
}

.submenu-active{
    background:#1e88e5 !important;
    font-weight:600;
    border-radius:6px;
    opacity:1 !important;
}

.submenu-child {
    padding-left: 35px !important;
}

#basicSettingsForm{
    max-width:700px;
}

.settings-tip{
    margin:15px 0;
    padding:12px;
    background:#f4f7fb;
    border-left:4px solid #1e88e5;
    border-radius:6px;
    font-size:14px;
}

/* =========================================
   INSTALLER
========================================= */
.installer-body{
    background:#f4f7fb;
    font-family:"Segoe UI",sans-serif;
}

.installer-wrapper{
    max-width:700px;
    margin:40px auto;
    padding:20px;
}

.installer-card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    margin-bottom:20px;
}

.installer-actions{
    display:flex;
    justify-content:center;
    margin-top:20px;
}

.installer-actions button{
    width:220px;
}

.installer-card label{
    display:block;
    margin-top:12px;
    margin-bottom:6px;
}

.installer-card input,
.installer-card select{
    width:100%;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1400px){

    .customer-grid{

        grid-template-columns:
            repeat(3,1fr);

    }

}

@media(max-width:1100px){

    .customer-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media(max-width:768px){

    .wrapper{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
    }

    .content{
        width:100%;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    .calendar-grid{
        overflow-x:auto;
    }

    .customer-grid{

        grid-template-columns:1fr;

    }

    #equipmentList {
        grid-template-columns: 1fr;
    }

    .technicians-grid{
        grid-template-columns: 1fr !important;

    }

}