/*
  JRC-inspired (EU institutional) theme for shinydashboard
  ------------------------------------------------------------------
  Usage:
  1) Put this file into your app's www/ directory as: www/custom.css
  2) In ui.R add:
     dashboardBody(tags$head(tags$link(rel="stylesheet", type="text/css", href="custom.css")), ...)
*/

:root{
  --eu-blue: #004494;
  --eu-blue-dark: #003A73;
  --eu-blue-darker: #002B55;
  --eu-accent: #FFD617;          /* EU yellow (accent only) */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --text: #1F2937;
  --muted: #6B7280;
  --border: #D8DEE7;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --radius: 8px;
}

/* Base */
html, body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
}

.content{
  overflow-y: auto;
  padding: 18px;
}

.content-header{
  padding: 16px 18px 0 18px;
}

/* Layout widths */
.main-header .logo{ width: 280px; }
.main-sidebar{ width: 280px; }
.content-wrapper, .right-side, .main-footer{ margin-left: 280px; }

/* Header (top bar) */
.skin-blue .main-header .logo,
.skin-blue .main-header .navbar{
  background-color: var(--eu-blue);
}

.skin-blue .main-header .logo{
  font-weight: 600;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover{
  background-color: var(--eu-blue-dark);
}

/* Sidebar */
.skin-blue .main-sidebar{
  background-color: var(--eu-blue-darker);
}

.skin-blue .sidebar a{ color: rgba(255,255,255,.92); }
.skin-blue .sidebar a:hover{ color: #fff; }

.skin-blue .sidebar-menu > li.header{
  color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.12);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.skin-blue .sidebar-menu > li > a{
  border-left: 3px solid transparent;
  padding: 12px 14px;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a{
  background: rgba(255,255,255,.08);
  border-left-color: var(--eu-accent);
}

.skin-blue .sidebar-menu > li.active > a{
  font-weight: 600;
}

/* Content wrapper */
.content-wrapper{ background: var(--bg); }

/* Boxes / cards */
.box{
  border-top: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}

.box .box-header{
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  padding: 12px 14px;
}

.box .box-title{ font-weight: 600; }

.box .box-body{
  padding: 16px;
}

/* Box header colour harmonisation with an EU/JRC feel */
.box.box-primary > .box-header{ background: var(--eu-blue); color: #fff; }
.box.box-info > .box-header{ background: #0B7285; color: #fff; }
.box.box-success > .box-header{ background: #2F9E44; color: #fff; }
.box.box-warning > .box-header{ background: #F59F00; color: #111827; }
.box.box-danger > .box-header{ background: #E03131; color: #fff; }

/* Inputs */
.form-control{
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: none;
  min-height: 36px;
}

.form-control:focus{
  border-color: var(--eu-blue);
  box-shadow: 0 0 0 3px rgba(0,68,148,.12);
}

/* Buttons */
.btn{
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .2px;
}

.btn-primary{
  background: var(--eu-blue);
  border-color: var(--eu-blue);
}

.btn-primary:hover,
.btn-primary:focus{
  background: var(--eu-blue-dark);
  border-color: var(--eu-blue-dark);
}

/* ValueBoxes / InfoBoxes */
.small-box{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.info-box{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* DT (DataTables) look */
table.dataTable{
  border-collapse: collapse !important;
}

table.dataTable thead th{
  background: #EEF2F7;
  color: var(--text);
  border-bottom: 1px solid var(--border) !important;
}

table.dataTable tbody td{
  border-top: 1px solid #EEF2F7;
}

table.dataTable tbody tr:hover{
  background: #F2F7FF;
}

/* Tabs inside boxes */
.nav-tabs-custom{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.nav-tabs-custom > .nav-tabs > li.active{
  border-top-color: var(--eu-blue);
}

/* Minor polish */
.help-block{
  color: #4B5563;
  background: #F8FAFC;
  border-left: 3px solid #B6C5DA;
  padding: 8px 10px;
  margin: 8px 0 12px 0;
  line-height: 1.45;
}

.app-note,
.app-success,
.app-warning{
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 12px 0;
  line-height: 1.45;
}

.app-note{
  color: var(--text);
  background: #F8FAFC;
  border-left: 3px solid #6B8EAD;
}

.app-success{
  color: #14532D;
  background: #F0FDF4;
  border-left: 3px solid #2F9E44;
}

.app-warning{
  color: #713F12;
  background: #FFFBEB;
  border-left: 3px solid #F59F00;
}

/* Step 7: make the three boundary-model tasks visually distinct. */
.boundary-step-row{
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 14px;
}

.boundary-step-row > [class*="col-"]{
  display: flex;
}

.boundary-step{
  width: 100%;
  min-height: 100%;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.boundary-step h4{
  margin: -16px -16px 16px -16px;
  padding: 12px 14px;
  font-weight: 700;
}

.boundary-step-primary{
  background: #EAF2FC;
  border-color: #8EADD2;
}

.boundary-step-primary h4{
  background: var(--eu-blue);
  color: #FFFFFF;
}

.boundary-step-secondary{
  background: #E8F6F4;
  border-color: #79B8B5;
}

.boundary-step-secondary h4{
  background: #0B7285;
  color: #FFFFFF;
}

.boundary-step-options{
  background: #FFF3D8;
  border-color: #E6B552;
}

.boundary-step-options h4{
  background: #F59F00;
  color: #111827;
}

.boundary-step .help-block{
  background: rgba(255,255,255,.72);
}

.box p,
.box li{
  line-height: 1.5;
}

.dataTables_wrapper{
  overflow-x: auto;
}

.dataTables_wrapper .dt-buttons{
  margin-bottom: 8px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  margin-bottom: 8px;
}

table.dataTable{
  width: 100% !important;
}

table.dataTable thead th,
table.dataTable tbody td{
  vertical-align: middle;
}

.shiny-plot-output{
  max-width: 100%;
}

.selectize-control.multi .selectize-input > div{
  background: #E8F0FA;
  border: 1px solid #C5D3E6;
  color: var(--text);
}

.checkbox,
.radio{
  margin-top: 8px;
  margin-bottom: 8px;
}

.irs--shiny .irs-grid-text{
  color: var(--muted);
}
.irs--shiny .irs-bar{ background: var(--eu-blue) !important; }
.irs--shiny .irs-single{ background: var(--eu-blue) !important; }
.irs--shiny .irs-handle{ border-color: var(--eu-blue) !important; }

/* Mobile */
@media (max-width: 767px){
  .main-header .logo{ width: 100% !important; }
  .main-sidebar{ width: 230px; }
  .content-wrapper, .right-side, .main-footer{ margin-left: 0; }

  .boundary-step-row{
    display: block;
  }

  .boundary-step-row > [class*="col-"]{
    display: block;
    margin-bottom: 14px;
  }
}