/*
  This is a manifest file that'll be compiled into application.css.

  With Propshaft, assets are served efficiently without preprocessing steps. You can still include
  application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
  cascading order, meaning styles declared later in the document or manifest will override earlier ones,
  depending on specificity.

  Consider organizing styles into separate files for maintainability.
*/

/* ====================== Shortcuts ===================== */
.jcc { justify-content: center !important; }
.jcs, .jcst { justify-content: flex-start !important; }
.jce, .jcend { justify-content: flex-end !important; }
.jcsa { justify-content: space-around !important; }
.jcsb { justify-content: space-between !important; }
.c-row { margin: 0px !important; padding: 0px !important; }
.aic { align-items: center !important; }
.ait { align-items: top !important; }
.aib { align-items: bottom !important; }
.vam { vertical-align: middle !important; }
.vab { vertical-align: bottom !important; }
.rg-3 { row-gap: 1rem; }
.cg-3 { column-gap: 1rem; }
.rcg-3 { row-gap: 1rem; column-gap: 1rem; }
.w-fit-content { width: fit-content !important; }
.fs-normal { font-size: 1rem !important; }
.fill-primary { fill: var(--bs-primary) !important; }
.fill-success { fill: var(--bs-success) !important; }
.fill-info { fill: var(--bs-info) !important; }
.fill-warning-dark { fill: var(--bs-orange) !important; }
.fill-purple { fill: var(--bs-purple) !important; }
.fill-white { fill: white !important; }

/* ============= Custom Bootstrap-ish Styles ============ */
.pt-2_5 { padding-top: 0.75rem !important; }
.pb-2_5 { padding-bottom: 0.75rem !important; }
.py-2_5 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.pe-2_5 { padding-right: 0.75rem !important; }
.ps-2_5 { padding-left: 0.75rem !important; }
.px-2_5 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}


.offcanvas-custom {
  min-height: 30vh !important;
  max-height: 60vh !important;
  height: unset !important;
}

/* ================== Login Page Styles ================= */
/* Gro-mor Logo */
.gm-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 35% !important;
  margin-top: 0.75rem;
}

.devise-view-col {
  border-radius: 1rem;
  border: 4px solid var(--bs-primary);
  padding: 3rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pwd-reset-col {
  max-width: 32rem;
}

.login-col {
  max-width: 50% !important;
}

/* ==================== Custom Styles =================== */
.flash-badge {
  width: fit-content;
  color: white;
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.flash-badge.fade-out {
  animation-name: fadeOut;
  animation-duration: 1.6s;
  animation-fill-mode: forwards;
}

/* Equivalent to px-3 but I can control its responsive styling */
.table-card-responsive-padding {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    /* display: block; */
  }
  67% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    /* display: none; */
  }
}

/* ========= Rails Devise / Login alerts styling ======== */
.devise-view-link {
  text-decoration: none;
  color: var(--bs-primary);
}

.alert.flash {
  position: fixed;
  top: 1.375rem;
  left: 50%;
  transform: translateX(-50%);
  z-index:1;
  animation-name: alertFadeOut;
  animation-delay: 7s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes alertFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ========== Rouge Rails Monokai Code Styling ========== */
.highlight.monokai {
  .hll { background-color: #49483e }
  .c { color: #75715e } /* Comment */
  .err { color: #960050; background-color: #1e0010 } /* Error */
  .k { color: #66d9ef } /* Keyword */
  .l { color: #ae81ff } /* Literal */
  .n { color: #f8f8f2 } /* Name */
  .o { color: #f92672 } /* Operator */
  .p { color: #f8f8f2 } /* Punctuation */
  .cm { color: #75715e } /* Comment.Multiline */
  .cp { color: #75715e } /* Comment.Preproc */
  .c1 { color: #75715e } /* Comment.Single */
  .cs { color: #75715e } /* Comment.Special */
  .ge { font-style: italic } /* Generic.Emph */
  .gs { font-weight: bold } /* Generic.Strong */
  .kc { color: #66d9ef } /* Keyword.Constant */
  .kd { color: #66d9ef } /* Keyword.Declaration */
  .kn { color: #f92672 } /* Keyword.Namespace */
  .kp { color: #66d9ef } /* Keyword.Pseudo */
  .kr { color: #66d9ef } /* Keyword.Reserved */
  .kt { color: #66d9ef } /* Keyword.Type */
  .ld { color: #e6db74 } /* Literal.Date */
  .m { color: #ae81ff } /* Literal.Number */
  .s { color: #e6db74 } /* Literal.String */
  .na { color: #a6e22e } /* Name.Attribute */
  .nb { color: #f8f8f2 } /* Name.Builtin */
  .nc { color: #a6e22e } /* Name.Class */
  .no { color: #66d9ef } /* Name.Constant */
  .nd { color: #a6e22e } /* Name.Decorator */
  .ni { color: #f8f8f2 } /* Name.Entity */
  .ne { color: #a6e22e } /* Name.Exception */
  .nf { color: #a6e22e } /* Name.Function */
  .nl { color: #f8f8f2 } /* Name.Label */
  .nn { color: #f8f8f2 } /* Name.Namespace */
  .nx { color: #a6e22e } /* Name.Other */
  .py { color: #f8f8f2 } /* Name.Property */
  .nt { color: #f92672 } /* Name.Tag */
  .nv { color: #f8f8f2 } /* Name.Variable */
  .ow { color: #f92672 } /* Operator.Word */
  .w { color: #f8f8f2 } /* Text.Whitespace */
  .mf { color: #ae81ff } /* Literal.Number.Float */
  .mh { color: #ae81ff } /* Literal.Number.Hex */
  .mi { color: #ae81ff } /* Literal.Number.Integer */
  .mo { color: #ae81ff } /* Literal.Number.Oct */
  .sb { color: #e6db74 } /* Literal.String.Backtick */
  .sc { color: #e6db74 } /* Literal.String.Char */
  .sd { color: #e6db74 } /* Literal.String.Doc */
  .s2 { color: #e6db74 } /* Literal.String.Double */
  .se { color: #ae81ff } /* Literal.String.Escape */
  .sh { color: #e6db74 } /* Literal.String.Heredoc */
  .si { color: #e6db74 } /* Literal.String.Interpol */
  .sx { color: #e6db74 } /* Literal.String.Other */
  .sr { color: #e6db74 } /* Literal.String.Regex */
  .s1 { color: #e6db74 } /* Literal.String.Single */
  .ss { color: #e6db74 } /* Literal.String.Symbol */
  .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
  .vc { color: #f8f8f2 } /* Name.Variable.Class */
  .vg { color: #f8f8f2 } /* Name.Variable.Global */
  .vi { color: #f8f8f2 } /* Name.Variable.Instance */
  .il { color: #ae81ff } /* Literal.Number.Integer.Long */

  .gh { } /* Generic Heading & Diff Header */
  .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
  .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
  .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
}

/* ============ Custom Background Jobs Styles =========== */
.background-jobs-header { position: fixed; }
#iframed-jobs { display: block; }
#screen-too-small { display: none; }

/* ==================== Media Queries =================== */
@media (max-width: 1407px) {
  /* ============ Custom Background Jobs Styles =========== */
  #iframed-jobs { display: none; }
  #screen-too-small { display: block; }
  .background-jobs-header { position: inherit; }
}

@media (max-width: 991px) {
  .login-col { max-width: 67.75% !important; }
}

@media (max-width: 767px) {
  .login-col { max-width: 90% !important; }
  .offcanvas-custom { max-height: 90vh !important; }

  table.sched-details-table { font-size: 0.9rem; }
}

@media (max-width: 576px) {
  .login-col { max-width: 100% !important; }

  table.sched-details-table { font-size: 0.875rem; }
  table .badge.fs-6 { font-size: 0.875rem !important; }

  .table-card-responsive-padding {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }

}