/*
Table of Index 

  --Genral
  --aligns
  --dropdown animation
  --header
  --mini sidebar
  --main content
  --page footer
  --Metis Menu
  --order offcanvas
  --utilities
  --alerts
  --authentication
  --switcher

*/

/* Variables */
$primary: #357ab4;
$accent: #af3229;
$white: #ffffff;
$black: #000000;
$grey-light: #f8f9fa;
$grey-medium: #e9ecef;
$grey-dark: #6c757d;
$text-main: #333333;
$text-muted: #777777;
$border-color: #dee2e6;

/* Genral*/

body {
  position: relative;
  font-size: 14px;
  font-family: "Noto Sans", sans-serif;
  letter-spacing: 0.5px;
  background-color: $white;
  color: $text-main;
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

$headingColor: $black;
$headerbg: $white;

a {
  text-decoration: none;
  color: $primary;
  transition: 0.3s;
  &:hover {
    color: $accent;
  }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: $headingColor;
  font-weight: 600;
}

input::placeholder {
  color: $grey-dark !important;
  opacity: 0.5 !important;
}

/* Buttons */
.default-btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: $white;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  padding: 13px 35px;
  border-radius: 5px;
  display: inline-block;
  background-color: $primary;
  transition: 0.4s;
  border: none;
  margin-top: 5px;

  span {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background-color: darken($primary, 10%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  }

  &:hover, &:focus {
    color: $white;
    span {
      width: 200%;
      height: 500px;
    }
  }
}

.default-btn-accent {
  @extend .default-btn;
  background-color: $accent;
  span {
    background-color: darken($accent, 10%);
  }
}

/* aligns */
@mixin alignContent {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin sidelinks {
  @include alignContent();
  color: $text-main;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;

  &:hover, &:focus {
    background-color: $grey-medium;
    color: $primary;
  }
}

/* header */
.top-header {
  .navbar {
    background-color: $headerbg;
    height: 70px;
    position: fixed;
    border-bottom: 1px solid $border-color;
    left: 300px;
    right: 0;
    top: 0;
    padding: 0 1.5rem;
    z-index: 10;
    transition: ease-out 0.3s;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);

    .search-bar {
      .search-control {
        background-color: $grey-light;
        border: 1px solid $border-color;
        color: $text-main;
        &:focus {
          background-color: $white;
          border-color: $primary;
          box-shadow: none;
        }
      }
      
      .search-popup {
        background-color: $white;
        border: 1px solid $border-color;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        
        .search-title { color: $grey-dark; }
        .kewords {
          background-color: $grey-light;
          color: $text-main;
          &:hover { background-color: $primary; color: $white; }
        }
        .search-list-item:hover { background-color: $grey-light; }
      }
    }
  }
}

/* sidebar wrapper */
.sidebar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: $white;
  border-right: 1px solid $border-color;
  z-index: 12;
  transition: ease-out 0.3s;
  box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.05);

  .sidebar-header {
    background-color: $white;
    border-bottom: 1px solid $border-color;
    .logo-name { color: $black; font-weight: 700; }
  }

  .sidebar-nav {
    .metismenu {
      background: none;
      a {
        color: $text-main;
        font-weight: 500;
        &:hover, &:focus {
          color: $primary;
          background-color: rgba($primary, 0.05);
        }
      }
      .mm-active > a {
        color: $primary;
        background-color: rgba($primary, 0.1);
        border-right: 3px solid $primary;
      }
      ul { background-color: $grey-light; }
    }
  }
  
  .menu-label {
    color: $grey-dark;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 10px 20px;
  }
}

/* main content */
.main-wrapper {
  margin-left: 300px;
  background-color: $white;
  min-height: 100vh;
  .main-content {
    padding: 100px 1.5rem 1.5rem;
  }
  .breadcrumb-title {
    border-right: 1px solid $border-color;
    color: $black;
  }
}

/* Forms & Inputs */
.form-control, .form-select {
  background-color: $white;
  border: 1px solid $border-color;
  color: $text-main;
  &:focus {
    border-color: $primary;
    box-shadow: 0 0 0 0.2rem rgba($primary, 0.15);
  }
}

.card {
  background-color: $white;
  border: 1px solid $border-color;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
  .card-title { color: $black; }
}

/* page footer */
.page-footer {
  background-color: $white;
  border-top: 1px solid $border-color;
  color: $text-muted;
  padding: 15px;
  text-align: center;
}

/* Utilities */
.bg-primary { background-color: $primary !important; }
.bg-accent { background-color: $accent !important; }
.text-primary { color: $primary !important; }
.text-accent { color: $accent !important; }
.border-primary { border-color: $primary !important; }

/* Alerts */
.alert-primary {
  background-color: rgba($primary, 0.1);
  border-left: 5px solid $primary;
  color: darken($primary, 20%);
}
