/* =========================================================
EcoTrack CORE STYLE
Fleet, weighing and waste collection operations
desarrollado por Ing. Jesús Ojeda Rapa (Exor)
========================================================= */

/* =========================================================
ECOTRACK DESIGN TOKENS
========================================================= */

:root{

/* PRIMARY */
--madi-primary:#16885f;
--madi-primary-dark:#0f6f4c;
--madi-primary-soft:rgba(22,136,95,0.12);
--madi-primary-light:rgba(22,136,95,0.06);

/* SUCCESS */
--madi-success:#198754;
--madi-success-soft:rgba(25,135,84,0.1);

/* WARNING */
--madi-warning:#ffc107;
--madi-warning-soft:rgba(255,193,7,0.1);

/* DANGER */
--madi-danger:#dc3545;
--madi-danger-soft:rgba(220,53,69,0.1);

/* INFO */
--madi-info:#0b7fab;
--madi-info-soft:rgba(11,127,171,0.1);

--madi-bg:#f8f9fa;

--madi-border:#e5e7eb;

--madi-text:#2f2f3a;
--madi-text-muted:#8a8fa3;

}

.brand-mark{
align-items:center;
background:var(--madi-primary-soft);
border:1px solid rgba(22,136,95,.18);
border-radius:8px;
color:var(--madi-primary);
display:inline-flex;
height:34px;
justify-content:center;
width:34px;
}

.brand-name{
color:#173f35;
font-weight:700;
letter-spacing:0;
}



/* =========================================================
BASE
========================================================= */

body{
background:var(--madi-bg);
color:var(--madi-text);
font-size:14px;
}

a{
text-decoration:none;
}

iframe{
background:#fff;
}

.madi-tab-iframe{
width:100%;
min-height:520px;
border:0;
display:block;
}


/* =========================================================
NAVBAR
========================================================= */

.navbar{
background:#fff;
border-bottom:1px solid var(--madi-border);
margin-bottom:0;
}

.navbar-brand{
font-weight:600;
color:var(--madi-primary);
}

/* hamburger */

.navbar-toggler{
border:none;
}

.navbar-toggler:focus{
box-shadow:none;
}

.navbar-toggler-icon{

filter:
invert(34%)
sepia(18%)
saturate(1400%)
hue-rotate(205deg)
brightness(95%)
contrast(92%);

}


/* =========================================================
MENU DROPDOWN
========================================================= */

.dropdown-menu{
border:1px solid var(--madi-border);
box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

.dropdown-item{
font-size:14px;
}

.dropdown-item:hover{
background:var(--madi-primary-light);
color:var(--madi-primary);
}


/* =========================================================
TABS ENGINE
========================================================= */

#madi-tabs-list{

border-bottom:1px solid var(--madi-border);

overflow-x:auto;

white-space:nowrap;

margin-top:0;

}

#madi-tabs-list .nav-link{

border:none;

color:#6c757d;

font-weight:500;

padding:.6rem 1rem;

}

#madi-tabs-list .nav-link.active{

color:var(--madi-primary);

font-weight:600;

border-top:4px solid var(--madi-primary);

}

/* scroll bar */

#madi-tabs-list::-webkit-scrollbar{
height:6px;
}

#madi-tabs-list::-webkit-scrollbar-thumb{
background:#dcdcdc;
border-radius:4px;
}


/* TAB CLOSE BUTTON */

#madi-tabs-list .btn-close{
transform:scale(.7);
opacity:.5;
}

#madi-tabs-list .btn-close:hover{
opacity:1;
}


/* =========================================================
TAB CONTENT
========================================================= */

.tab-content{
background:#fff;
}

#madi-tabs-content > .tab-pane{
width:100%;
}

#madi-tabs-content > .tab-pane.active{
display:block;
}


/* =========================================================
BUTTONS
========================================================= */

.btn-primary{

background:var(--madi-primary);
color:#fff;

border:none;

}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{

background:var(--madi-primary-dark);
color:#fff;
border-color:var(--madi-primary-dark);

}

.btn-module{

border:1px solid var(--madi-border);

background:#fff;

}

.btn-module:hover{

background:#f8f9fa;

}


/* =========================================================
CARDS
========================================================= */

.card{

border:1px solid var(--madi-border);

border-radius:6px;

}


/* =========================================================
MODULE BASE LAYOUT
========================================================= */

.module-wrapper{

padding:15px;

}


/* module header */

.module-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;

}

.module-title{

font-size:1.3rem;

font-weight:600;

}

.module-title i{

color:var(--madi-primary);

}


/* =========================================================
FILTER PANELS
========================================================= */

.module-filters{

background:#fff;

border:1px solid var(--madi-border);

padding:12px;

border-radius:6px;

margin-bottom:15px;

}


/* =========================================================
DATATABLES STYLE
========================================================= */

.table thead{

background:#f8f9fa;

text-transform:uppercase;

font-size:11px;

letter-spacing:.05em;

}


/* =========================================================
STATUS BADGES
========================================================= */

.status-pill{

background:rgba(94,96,169,0.1);

color:var(--madi-primary);

padding:4px 12px;

border-radius:20px;

font-size:12px;

font-weight:600;

}


/* =========================================================
DASHBOARD CARDS
========================================================= */

.dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:15px;

margin-bottom:20px;

}

.dashboard-card{

background:#fff;

border:1px solid var(--madi-border);

border-radius:6px;

padding:16px;

display:flex;

justify-content:space-between;

align-items:center;

}

.dashboard-card-title{

font-size:12px;

text-transform:uppercase;

letter-spacing:.05em;

color:var(--madi-text-muted);

}

.dashboard-card-value{

font-size:1.6rem;

font-weight:600;

}

.dashboard-card-icon{

font-size:1.8rem;

color:var(--madi-primary);

}


/* =========================================================
ALERT SYSTEM
========================================================= */

.madi-alert{

padding:12px;

border-radius:6px;

border:1px solid var(--madi-border);

background:#fff;

margin-bottom:15px;

}

.madi-alert-info{

border-left:4px solid #0dcaf0;

}

.madi-alert-success{

border-left:4px solid #198754;

}

.madi-alert-warning{

border-left:4px solid #ffc107;

}

.madi-alert-danger{

border-left:4px solid #dc3545;

}


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

@media (max-width:768px){

.module-title{
font-size:1.1rem;
}

.dashboard-card{
flex-direction:column;
align-items:flex-start;
gap:6px;
}

}


/* =========================================================
MADI WINDOW ENGINE
========================================================= */

.madi-window-overlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,.35);

display:flex;
align-items:center;
justify-content:center;

z-index:2000;

}

.madi-window{

background:#fff;

border-radius:6px;

border:1px solid var(--madi-border);

width:900px;
max-width:95%;

max-height:90vh;

display:flex;
flex-direction:column;

box-shadow:0 10px 30px rgba(0,0,0,.15);

overflow:hidden;

}

.madi-window-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 14px;

border-bottom:1px solid var(--madi-border);

font-weight:600;

}

.madi-window-body{

padding:15px;

overflow:auto;

flex:1;

}

.madi-window-close{

cursor:pointer;

font-size:1.2rem;

opacity:.6;

}

.madi-window-close:hover{

opacity:1;

}


/* =========================================================
MOBILE FULLSCREEN WINDOW
========================================================= */

@media (max-width:768px){

.madi-window{

width:100%;
height:100%;

max-height:100%;

border-radius:0;

}

.madi-window-body{

padding:12px;

}

}


.pipeline {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.pipeline-step {
    text-align:center;
    flex:1;
    position:relative;
}

.pipeline-circle {
    width:40px;
    height:40px;
    border-radius:50%;
    background:#dee2e6;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-weight:bold;
}

.pipeline-label {
    margin-top:8px;
    font-size:12px;
}

/* estados */
.pipeline-active .pipeline-circle {
    background:#0d6efd;
    color:#fff;
}

.pipeline-complete .pipeline-circle {
    background:#198754;
    color:#fff;
}

.pipeline-error .pipeline-circle {
    background:#dc3545;
    color:#fff;
}

.pipeline-active .pipeline-circle {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}


/* =========================================================
DATATABLES MADI THEME
========================================================= */

/* HEADER */
table.dataTable thead th {
    background: rgba(94,96,169,0.08);
    color: var(--madi-text);
    border-bottom: 2px solid var(--madi-primary);
    font-weight: 600;
}

/* SORT ICONS */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    color: var(--madi-primary) !important;
    opacity: 1;
}

/* HOVER HEADER */
table.dataTable thead th:hover {
    background: rgba(94,96,169,0.12);
}

/* ROWS ZEBRA */
table.dataTable tbody tr:nth-child(even) {
    background: #fbfbfd;
}

/* ROW HOVER */
table.dataTable tbody tr:hover {
    background: rgba(94,96,169,0.05);
}

/* CELLS */
table.dataTable tbody td {
    vertical-align: middle;
    border-color: var(--madi-border);
}

/* PAGINATION */
.dataTables_wrapper .dataTables_paginate .page-link {
    color: var(--madi-primary);
    border: 1px solid var(--madi-border);
    margin: 0 2px;
    border-radius: 6px;
}

/* ACTIVE PAGE */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--madi-primary);
    border-color: var(--madi-primary);
    color: #fff;
}

/* HOVER PAGE */
.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: rgba(94,96,169,0.1);
    color: var(--madi-primary);
}

/* DISABLED */
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: #aaa;
}

/* SEARCH INPUT */
.dataTables_filter input {
    border-radius: 6px;
    border: 1px solid var(--madi-border);
    padding: 4px 8px;
}

.dataTables_filter input:focus {
    border-color: var(--madi-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(94,96,169,0.15);
}

/* LENGTH SELECT */
.dataTables_length select {
    border-radius: 6px;
    border: 1px solid var(--madi-border);
}

.dataTables_length select:focus {
    border-color: var(--madi-primary);
    box-shadow: 0 0 0 2px rgba(94,96,169,0.15);
}

/* INFO TEXT */
.dataTables_info {
    color: var(--madi-text-muted);
    font-size: 12px;
}


table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    color: var(--madi-primary) !important;
}


/* =========================================================
BADGES SYSTEM
========================================================= */

.madi-badge{
display:inline-block;
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* variantes */
.madi-badge-primary{
background:var(--madi-primary-soft);
color:var(--madi-primary);
}

.madi-badge-success{
background:var(--madi-success-soft);
color:var(--madi-success);
}

.madi-badge-warning{
background:var(--madi-warning-soft);
color:#856404;
}

.madi-badge-danger{
background:var(--madi-danger-soft);
color:var(--madi-danger);
}

.madi-badge-info{
background:var(--madi-info-soft);
color:#055160;
}

/* =========================================================
FORM INPUTS
========================================================= */

.form-control,
.form-select{

border-radius:6px;
border:1px solid var(--madi-border);
font-size:14px;

}

.form-control:focus,
.form-select:focus{

border-color:var(--madi-primary);
box-shadow:0 0 0 2px rgba(94,96,169,0.15);
outline:none;

}

/* labels */
.form-label{
font-size:12px;
color:var(--madi-text-muted);
margin-bottom:4px;
}


/* separación más limpia */
table.dataTable tbody tr{
border-bottom:1px solid #f1f2f6;
}

/* texto más limpio */
table.dataTable td{
font-size:13px;
}


/* =========================================================
CARD SYSTEM
========================================================= */

.madi-card{

background:#fff;
border:1px solid var(--madi-border);
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.03);

}

.madi-card-header{

font-weight:600;
padding:10px 14px;
border-bottom:1px solid var(--madi-border);

}

.madi-card-body{

padding:14px;

}


.madi-alert{
border-left:4px solid;
padding:12px;
border-radius:6px;
background:#fff;
font-size:13px;
}

.madi-alert-success{
border-color:var(--madi-success);
}

.madi-alert-warning{
border-color:var(--madi-warning);
}

.madi-alert-danger{
border-color:var(--madi-danger);
}

.dropdown-submenu{
position:relative;
}

.dropdown-submenu > .submenu-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:.75rem;
}

.submenu-caret{
font-size:.72rem;
opacity:.7;
}

.dropdown-submenu-menu{
display:none;
margin-top:-.35rem;
}

.dropdown-submenu.submenu-open > .dropdown-submenu-menu{
display:block;
}

@media (min-width: 992px){
.dropdown-submenu-menu{
position:absolute;
top:0;
left:100%;
min-width:240px;
margin-left:.15rem;
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:.75rem;
box-shadow:0 16px 32px rgba(15,23,42,.12);
padding:.45rem 0;
}

.dropdown-menu{
padding:.45rem 0;
border-radius:.85rem;
box-shadow:0 16px 32px rgba(15,23,42,.12);
border:1px solid rgba(0,0,0,.08);
}
}

@media (max-width: 991.98px){
.navbar-collapse,
.navbar-nav,
.navbar .dropdown-menu{
overflow:visible !important;
}

.navbar .dropdown-menu{
position:static !important;
transform:none !important;
float:none;
width:100%;
left:auto !important;
top:auto !important;
min-width:0;
margin-top:.35rem;
border-radius:.85rem;
box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.navbar .nav-item.dropdown{
width:100%;
}

.navbar .nav-item.dropdown > .nav-link.dropdown-toggle{
display:flex;
align-items:center;
justify-content:space-between;
}

.dropdown-submenu{
padding-left:.25rem;
}

.dropdown-submenu-menu{
position:static !important;
left:auto !important;
top:auto !important;
width:100%;
min-width:0;
border:0;
box-shadow:none;
margin-top:0;
padding:.25rem 0 .2rem .85rem;
}

.dropdown-submenu.submenu-open > .dropdown-submenu-menu,
.dropdown-submenu-menu.show{
display:block !important;
}

.dropdown-submenu-menu .dropdown-item{
white-space:normal;
border-left:2px solid rgba(94,96,169,.14);
padding-left:.9rem;
}

.dropdown-submenu > .submenu-toggle{
border-radius:.6rem;
}

.dropdown-submenu.submenu-open > .submenu-toggle{
background:rgba(94,96,169,.08);
color:var(--madi-primary);
}

.dropdown-submenu .submenu-caret{
transition:transform .18s ease;
}

.dropdown-submenu.submenu-open .submenu-caret{
transform:rotate(90deg);
}
}

/* =========================================================
MADI ALERT MODAL
========================================================= */

.madi-alert-modal-overlay{
position:fixed;
inset:0;
background:rgba(17,24,39,.42);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
z-index:2300;
}

.madi-alert-modal{
width:min(520px,100%);
background:#fff;
border:1px solid var(--madi-border);
border-radius:18px;
box-shadow:0 18px 50px rgba(15,23,42,.18);
overflow:hidden;
}

.madi-alert-modal-success{
border-top:4px solid #198754;
}

.madi-alert-modal-danger{
border-top:4px solid #dc3545;
}

.madi-alert-modal-warning{
border-top:4px solid #ffc107;
}

.madi-alert-modal-info{
border-top:4px solid #0dcaf0;
}

.madi-alert-modal-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px 12px;
border-bottom:1px solid var(--madi-border);
}

.madi-alert-modal-kicker{
font-size:.8rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:#5E60A9;
}

.madi-alert-modal-close{
border:0;
background:transparent;
font-size:1.6rem;
line-height:1;
opacity:.55;
cursor:pointer;
}

.madi-alert-modal-close:hover{
opacity:1;
}

.madi-alert-modal-body{
padding:18px 20px;
font-size:.98rem;
color:#1f2937;
}

.madi-alert-modal-footer{
display:flex;
justify-content:flex-end;
padding:0 20px 18px;
}

@media (max-width:768px){
.madi-alert-modal-overlay{
padding:0;
}

.madi-alert-modal{
width:100%;
height:100%;
border-radius:0;
display:flex;
flex-direction:column;
}

.madi-alert-modal-body{
flex:1;
overflow:auto;
padding:20px 16px;
}

.madi-alert-modal-header,
.madi-alert-modal-footer{
padding-left:16px;
padding-right:16px;
}
}


.madi-alert{
border-left:4px solid;
padding:12px;
border-radius:6px;
background:#fff;
font-size:13px;
}

.madi-alert-success{
border-color:var(--madi-success);
}

.madi-alert-warning{
border-color:var(--madi-warning);
}

.madi-alert-danger{
border-color:var(--madi-danger);
}