/* ===================================================================
** - Document: style.css
** - Auteur  : Ed de Heus
** - version : 1.0
** - info    : Styling voor tools.eddeheus.nl (zelfde huisstijl als home.eddeheus.nl)
** ===================================================================
*/

/* DEFAULT VARIABLES */
:root {
  /* fonts */
  --font-family                   : 'Poppins', sans-serif;

  /* colors */
  --primary-color                 : #2b4381;
  --primary-hover-color           : #19294b;
  --body-text-color               : #030303;
  --body-background-color         : #f0f2f5;

  /* navigatiebar */
  --navbar-background-color       : #f8f9fa;
  --navbar-item-hover-background  : rgba( 43, 67, 129, 0.15 );

  /* buttons */
  --button-background-color       : #2b4381;
  --button-background-color-hover : #19294b;
  --button-text-color             : #ffffff;
}

/* -------- */
/* ALGEMEEN */
/* -------- */
body {
  background-color: var( --body-background-color );
  font-family     : var( --font-family );
  color           : var( --body-text-color );
  margin          : 0;
  padding-top     : 60px;
}
.container {
  max-width: 1200px;
}
h1, h2 {
  color      : var( --primary-color );
  font-weight: 600;
}
.page-lead {
  color        : #6c757d;
  margin-bottom: 2rem;
}

/* ------------------ */
/* Navigatiebar - TOP */
/* ------------------ */
.navbar {
  background-color: var( --navbar-background-color );
  box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar .navbar-brand {
  color      : var( --primary-color );
  font-weight: 600;
}
.navbar .navbar-brand:hover {
  color: var( --primary-hover-color );
}
.navbar .navbar-icon {
  margin-right: 8px;
}
.navbar .nav-link {
  color         : #424242 !important;
  transition    : color 0.3s ease;
  position      : relative;
  display       : inline-block;
  padding-bottom: 5px;
}
.navbar .nav-link:hover {
  color: var( --primary-color ) !important;
}
.navbar .nav-link::after {
  content         : "";
  position        : absolute;
  left            : 0;
  bottom          : 0;
  height          : 2px;
  width           : 0;
  background-color: var( --primary-color );
  transition      : width 0.3s ease;
  transform       : translateY( 5px );
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after {
  width: 100%;
}
.navbar-toggler {
  background-color: transparent;
  border          : 2px solid var( --primary-color );
}
.navbar-toggler:focus {
  outline   : none;
  box-shadow: 0 0 0 0.25rem rgba(43, 67, 129, 0.25);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232b4381' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
@media (max-width: 991px) {
  .navbar-collapse {
    border-top: 1px solid var(--navbar-background-color);
    margin-top: 0.5rem;
    padding-top: 0.25rem;
  }
  .navbar .nav-link {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
}

/* --------- */
/* DASHBOARD */
/* --------- */
.dashboard .card {
  background-color: #ffffff;
  border          : none;
  border-radius   : 12px;
  box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.1);
  transition      : transform 0.3s ease, box-shadow 0.3s ease;
}
.dashboard .card:hover {
  transform : translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.dashboard .card-icon {
  color        : var( --primary-color );
  font-size    : 2.75rem;
  margin-bottom: 1rem;
}
.dashboard .card-title {
  color        : #424242;
  font-weight  : 500;
  margin-bottom: 0.5rem;
}
.dashboard .card-text {
  color    : #6c757d;
  font-size: 0.9rem;
}

/* --------- */
/* TOOL PAGE */
/* --------- */
.tool-page .card {
  border       : none;
  border-radius: 12px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tool-page .card-header {
  background-color: var( --primary-color );
  color           : #ffffff;
  border-radius   : 12px 12px 0 0;
  font-weight     : 500;
}
.tool-page .form-control, .tool-page .form-select {
  border-radius: 8px;
}
.tool-page .form-control:focus, .tool-page .form-select:focus {
  border-color: var( --primary-color );
  box-shadow  : 0 0 0 0.2rem rgba(43, 67, 129, 0.25);
}
.tool-page .result-block {
  background-color: #f8f9fa;
  border          : 1px solid #e9ecef;
  border-radius   : 8px;
  padding         : 1rem;
  font-family     : 'Courier New', monospace;
  font-size       : 0.85rem;
  white-space     : pre-wrap;
  word-break      : break-word;
}
.tool-page .table {
  font-size: 0.9rem;
}
.tool-page .breadcrumb a {
  color: var( --primary-color );
  text-decoration: none;
}

/* ------- */
/* BUTTONS */
/* ------- */
.btn {
  border-radius: 8px;
  font-weight  : 500;
  transition   : background-color 0.3s ease, transform 0.2s ease;
}
.btn-standard {
  background-color: var( --button-background-color );
  border-color    : var( --button-background-color );
  color           : var( --button-text-color );
}
.btn-standard:hover, .btn-standard:focus {
  background-color: var( --button-background-color-hover );
  border-color    : var( --button-background-color-hover );
  color           : var( --button-text-color );
}