/*
  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 {
  width: fit-content !important;
}

.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; }

/* =========== CHS Hedging Widget Extra Styles ========== */
/*
  Hedging widget has its own stylesheet.  These extra styles here are to further simulate it being embedded in the
  destination luckeyfarmers.com website
*/
.simulated-lfi-home-page {
  color: #212529 !important;
  background-color: #F5F5F5;
  -webkit-font-smoothing: antialiased !important;
}
.simulated-lfi-home-page h1,
.simulated-lfi-home-page h2,
.simulated-lfi-home-page h3,
.simulated-lfi-home-page h4 {
  color: #008B52 !important;
}


.chs-widget-bg { background-color: #DDDDDD; }

/* ==================== 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; }
  .logout-btn {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
}

@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;
  }

}