:root{
  --bg-main:#0f1720;
  --bg-sidebar:#121a23;
  --bg-card:#243242;

  --text-main:#ffffff;
  --text-soft:#d7e3ee;
  --text-muted:#b6c5d4;

  --primary:#44a3db;
  --primary-hover:#5bb4e8;
  --primary-dark: #2d84b7;

  --border-color: #44a3db;

  --success: #28c76f;
  --warning: #ffb020;
  --danger: #ea5455;
}

body{
  background:#0f1720;
  color:#fff;
}

.card{
  background:var(--bg-card);
  color:var(--text-main);
  border: 1px solid rgba(68,163,219,.20);
  border-radius: 1rem;
  overflow: hidden;
}

.card-title{
  color:var(--text-main);
}

.btn-primary{
  background:#44a3db;
  border-color:#44a3db;
}

.btn-primary:hover{
  background:#5bb4e8;
  border-color:#5bb4e8;
}

.form-control{
  background:#121a23;
  border:1px solid #355066;
  color:#fff;
}

.form-control:focus{
  background:#121a23;
  color:#fff;
  border-color:#44a3db;
  box-shadow:0 0 0 .2rem rgba(68,163,219,.25);
}

.alert{
  border-radius:.75rem;
  border-width:1px;
}

.alert-success{
  background:#123524;
  color:#8ff0b5;
  border-color:#28c76f;
}

.alert-danger{
  background:#3b1d23;
  color:#ff9ea8;
  border-color:#ea5455;
}

.alert-warning{
  background:#3a2d12;
  color:#ffd37a;
  border-color:#ffb020;
}

.alert-info{
  background:#102d3a;
  color:#8fd8ff;
  border-color:#44a3db;
}

.login-card{
  max-width:420px;
  margin:auto;
  overflow:hidden;
}

.login-header{
  background:var(--bg-sidebar);
  border-bottom:2px solid var(--primary);
  color:var(--text-main);
  padding:1.5rem;
}

.login-header h3{
  color:var(--text-main);
}

.login-header small{
  color:#c9d6e2 !important;
}

label{
  color: var(--text-soft);
  margin-bottom: .35rem;
}

.text-muted-custom{
  color: var(--text-muted) !important;
}

.stat-title{
  color:var(--text-muted);
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.stat-value{
  color:#fff;
  font-weight:700;
}

.login-logo{
  width:250px;
  height:auto;
}

.sidebar-logo{
  width:150px;
  height:auto;
}

.footer{
  border-top:1px solid rgba(68,163,219,.2);
  background:var(--bg-sidebar);
}

.sidebar{
  width:250px;
  min-width: 250px;
  max-width: 250px;
  min-height:100vh;
  flex-shrink: 0;

  background:var(--bg-sidebar);
  border-right:2px solid var(--border-color);

  display:flex;
  flex-direction:column;
}

.sidebar .nav-link{
  color:var(--text-soft);
  padding:.75rem 1rem;
  border-radius:.5rem;
  margin-bottom:.25rem;
  border-left:4px solid transparent;
  transition:.2s;
}

.sidebar .nav-link:hover{
  background:#243242;
  color:#fff;
}

.sidebar .nav-link.active{
  background:rgba(68,163,219,.15);
  border-left-color:var(--primary);
  color:#fff;
  font-weight:600;
}

.sidebar .nav-link i{
  width:20px;
  margin-right:.5rem;
}

.sidebar .nav-link.active i{
  color:var(--primary);
}

.sidebar-heading{
  color:var(--primary);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  margin-top:1.5rem;
  margin-bottom:.5rem;
}

.sidebar-menu {
  flex:1;
  overflow-y: auto;
}

.user-panel{
  padding:1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(68,163,219,.15);
  border-radius:.75rem;
}

/* DATATABLES */

.dataTables_wrapper{
  color:var(--text-soft);
}

table.dataTable{
  color:var(--text-main);
  border-color:#355066;
}

table.dataTable thead th{
  background:var(--bg-sidebar);
  color:var(--text-main);
  border-color:#355066 !important;
}

table.dataTable tbody td{
  background:var(--bg-card);
  color:var(--text-main);
  border-color:#355066 !important;
}

table.dataTable tbody tr:hover td{
  background:#2c3e50;
}

.dataTables_length select,
.dataTables_filter input{
  background:var(--bg-sidebar) !important;
  color:#fff !important;
  border:1px solid #355066 !important;
}

.dataTables_info{
  color:var(--text-soft) !important;
}

.page-link{
  background:var(--bg-sidebar);
  border-color:#355066;
  color:var(--text-soft);
}

.page-link:hover{
  background:var(--primary-dark);
  border-color:var(--primary);
  color:#fff;
}

.page-item.active .page-link{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.page-item.disabled .page-link{
  background:var(--bg-sidebar);
  color:#6c7a89;
  border-color:#355066;
}

.item-thumb{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #355066;
}

.img-thumbnail{
  background: var(--bg-sidebar);
  border: 1px solid #355066;
  border-radius: .75rem;
}

.item-image {
    height: 220px;
    object-fit: contain;
}

.item-image-placeholder {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card {
    height: 100%;
}

#sidebarOverlay{
  display:none;
}

@media (max-width: 991.98px){

  .sidebar{

    position:fixed;

    top:0;
    left:-280px;

    width:280px;
    height:100vh;

    z-index:1045;

    transition:left .3s ease;
  }

  .sidebar.show{
    left:0;
  }

  #sidebarOverlay.show{

    display:block;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    z-index:1040;
  }

}

@media (min-width: 992px){

  #sidebarToggle{
    display:none;
  }

}

/* =========================
   MODAL
   ========================= */

.modal-content{
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid rgba(68,163,219,.25);
    border-radius: 1rem;
    box-shadow: 0 15px 35px rgba(0,0,0,.45);
}

.modal-header{
    background: var(--bg-sidebar);
    border-bottom: 1px solid rgba(68,163,219,.20);
}

.modal-header .modal-title{
    color: var(--text-main);
    font-weight: 600;
}

.modal-body{
    background: var(--bg-card);
}

.modal-footer{
    background: var(--bg-sidebar);
    border-top: 1px solid rgba(68,163,219,.20);
}

.modal .btn-close{
    filter: invert(1) grayscale(100%);
    opacity: .8;
}

.modal .btn-close:hover{
    opacity: 1;
}

/* INPUT GROUP */

.input-group-text{
    background: var(--bg-sidebar);
    color: var(--text-soft);
    border: 1px solid #355066;
}

.input-group .btn{
    border-color:#355066;
}

.input-group .btn:hover{
    border-color:var(--primary);
}

.form-control[readonly]{
    background:#1b2632;
    color:var(--text-soft);
}

.modal-content{
    border-top:4px solid var(--primary);
}

.cart-item{
    background:#252b3a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:15px;
    margin-bottom:12px;
}

.cart-item:hover{
    border-color:var(--bs-primary);
}

.cart-summary{
    background:#1f2430;
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
}

#cartCanvas .offcanvas-header{
    border-bottom:1px solid rgba(255,255,255,.08);
}

#cartCanvas .offcanvas-body{
    background:#202634;
}

#cartCanvas .form-control{
    background:#2a3040;
    border-color:#40485d;
    color:#fff;
}

#cartCanvas .btn-outline-secondary{
    border-color:#49566f;
    color:#ddd;
}

#cartCanvas .btn-outline-secondary:hover{
    background:#3b4457;
}

#cartCanvas {
    background: #202634;
    color: #fff;
}

.cart-qty{
    max-width:70px;
}

/* ==========================================================
   DEKKA REPORT STYLE
   ========================================================== */

.report-paper{
    max-width: 1100px;
    margin: 20px auto;
    background: #fff;
    color: #222;
    border: 1px solid #bbb;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    padding: 24px;
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: .92rem;
}

.report-title{
    text-align:center;
    font-size:1.7rem;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:4px;
    text-transform:uppercase;
}

.report-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:20px;
}

.report-header{
    width:100%;
    border-collapse:collapse;
    margin-bottom:20px;
}

.report-header td{
    padding:3px 0;
    vertical-align:top;
}

.report-header td:first-child{
    width:130px;
    font-weight:bold;
}

.report-header td:nth-child(2){
    width:20px;
}

.report-section{
    border-top:2px solid #333;
    border-bottom:2px solid #333;
    padding:10px 0;
    margin:18px 0;
}

.report-label{
    font-weight:bold;
    margin-bottom:5px;
}

.report-notes{
    white-space:pre-wrap;
    min-height:40px;
}

.report-table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

.report-table thead th{
    border-top:2px solid #222;
    border-bottom:2px solid #222;
    padding:8px 6px;
    font-weight:bold;
    background:#f7f7f7;
}

.report-table tbody td{
    padding:7px 6px;
    border-bottom:1px solid #ddd;
}

.report-table tfoot td{
    padding:8px 6px;
    border-top:2px solid #222;
    font-weight:bold;
}

.report-right{
    text-align:right;
}

.report-center{
    text-align:center;
}

.report-status{
    display:inline-block;
    padding:4px 10px;
    border:1px solid #444;
    font-weight:bold;
    letter-spacing:1px;
    background:#eee;
}

.report-summary{
    width:320px;
    margin-left:auto;
    margin-top:20px;
    border:1px solid #999;
}

.report-summary td{
    padding:7px 10px;
}

.report-summary tr:last-child{
    border-top:2px solid #222;
    font-weight:bold;
    font-size:1rem;
}

@media print{

    body{
        background:#fff !important;
    }

    .navbar,
    .sidebar,
    .btn,
    .breadcrumb,
    .page-header{
        display:none !important;
    }

    .report-paper{
        margin:0;
        padding:0;
        border:none;
        box-shadow:none;
        max-width:none;
    }

}

@media(max-width:768px){

    .report-paper{
        margin:0;
        border:none;
        box-shadow:none;
        padding:12px;
    }

    .report-header td:first-child{
        width:95px;
    }

    .report-summary{
        width:100%;
    }

}