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

.btn{

    height:44px;

    padding:0 18px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:var(--transition);

}

.btn:active{

    transform:scale(.98);

}

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;

}

.btn.secondary{

    background:white;

    color:var(--primary);

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

}

.btn.success{

    background:var(--success);

}

.btn.danger{

    background:var(--danger);

}

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

input,
select{

    width:100%;

    height:44px;

    padding:0 12px;

    border-radius:10px;

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

    background:white;

}

input:focus,
select:focus{

    border-color:var(--primary);

}

/* ==========================================================
   TABLE
   ========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    background:white;

}

thead th{

    position:sticky;

    top:0;

    z-index:20;

    background:var(--primary);

    color:white;

}

th,
td{

    border-bottom:1px solid #ECECEC;

    text-align:center;

    padding:6px;

    height:var(--row-height);

}

th:first-child,
td:first-child{

    position:sticky;

    left:0;

    background:white;

    z-index:10;

    width:var(--name-column-width);

    min-width:var(--name-column-width);

    max-width:var(--name-column-width);

}

thead th:first-child{

    background:var(--primary);

    z-index:30;

}

.active-date-cell{

    background:#FFF8E1;

}

/* ==========================================================
   TABLE INPUT
   ========================================================== */

td input{

    width:100%;

    height:36px;

    padding:0;

    margin:0;

    box-sizing:border-box;

    border:none;

    text-align:center;

    background:transparent;

}

td input[type="number"]{

    min-width:0;

}

td input:focus:not(.modified-input){

    background:#FFFDE7;

}

/* ==========================================================
   MENU SHEET
   ========================================================== */

.bottom-sheet{

    position:fixed;

    left:0;

    right:0;

    bottom:-100%;

    background:white;

    border-radius:18px 18px 0 0;

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

    transition:.3s;

    z-index:4000;

    padding:18px;

}

.bottom-sheet.show{

    bottom:0;

}

.bottom-sheet button{

    width:100%;

    margin:8px 0;

}

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

.card{

    background:white;

    border-radius:12px;

    box-shadow:var(--shadow);

    padding:16px;

}

/* ==========================================================
   SPINNER
   ========================================================== */

.spinner{

    width:22px;

    height:22px;

    border-radius:50%;

    border:3px solid #DDD;

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}



/* ==========================================================
   ACTIVE ROW
   ========================================================== */

tr.active-input-row td{

    background:#BBDEFB !important;

    transition:background .15s;

}


/* ==========================================================
   MODIFIED CELL
   ========================================================== */

input.modified-input{

    background:#FFE082 !important;

    border:2px solid #FFB300;

}


/* ==========================================================
   DIFFERENCE STATUS
   ========================================================== */

.difference-negative{

    background:#FFCDD2 !important;

    color:#B71C1C;

    font-weight:600;

}

.difference-positive{

    background:#FFF9C4 !important;

    color:#F57F17;

    font-weight:600;

}

.difference-zero{

    background:#C8E6C9 !important;

    color:#1B5E20;

    font-weight:600;

}