:root{
    --imara-primary: #f47c20;
    --imara-primary-dark: #d96512;
    --imara-bg: #f7f8fa;
}

body{
    background: var(--imara-bg);
}

.btn-imara{
    background-color: var(--imara-primary);
    border-color: var(--imara-primary);
    color: white;
}

.btn-imara:hover{
    background-color: var(--imara-primary-dark);
    border-color: var(--imara-primary-dark);
}

.form-control:focus{
    border-color: var(--imara-primary);
    box-shadow: 0 0 0 .2rem rgba(244,124,32,.25);
}


h1 {
  font-size: 30px;
}


/* Base file Sidebar Custom CSS */

body {
  background-color: #fbfbfb;
}
@media (min-width: 991.98px) {
  main {
    padding-left: 0px;
  }
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 58px 0 0; /* Height of navbar */
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 292px;
  z-index: 600;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
  }
}
.sidebar .active {
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

/* Base file Sidebar Custom CSS */


/*formats the colours of the totals in the item form */
.total-cost {
    color: blue;
    font-weight: bold;
}

#total {
    color: red;
    font-weight: bold;
}

/* changes the font size and formatting of the side bar items */
.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.hr-sidebar{
    margin:7px;
    height:1px;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25;
}

.nav-link:hover {
    background-color: yellow;
}

/* to customise the navbar to requirements */
.custom-navbar {
    background-color: #CFB53B;
}

/* to customise the requisition modals */
 .modal-title {
    color: #281C02;
    font-weight: bold;
  }

 .req-table {
    color: black;
  }

.req-table .left-column {
  width: 30%;                   /* Adjusts the width of left column and right column below */
}

.req-table .right-column {
  width: 70%;
}

.req-table th,
.req-table td {
    padding: 10px 15px; /* Adjust the values as needed */
}

.approval-form-padding {
  padding: 10px;
}

.hidden {
  display: none;
}

/* To customise data lists used in the various drop down API menus */
.input-align-right {
    text-align: right; /* Set text alignment to right */
    padding-right: 0; /* Optionally, adjust right padding */
    margin-right: 0; /* Optionally, adjust right margin */
}

/*   INFORMATION REVIEW MODAL THAT IS IN - installation_request.html*/
/* ── CSS Variables ──────────────────────────────────────────────────────── */
#reviewModal {
  --imara-dark:    #2a2a2a;
  --imara-darker:  #1e1e1e;
  --imara-orange:  #e8601a;
  --imara-orange2: #c94e0e;
  --imara-border:  #e2e2e2;
}

/* ── Modal shell ────────────────────────────────────────────────────────── */
#reviewModal .modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#reviewModal .modal-header {
  background: linear-gradient(135deg, var(--imara-darker) 0%, var(--imara-dark) 100%);
  padding: .85rem 1.2rem;
  border-bottom: 3px solid var(--imara-orange);
  flex-wrap: nowrap;   /* keep title + badge + ✕ on one row always */
  gap: .6rem;
}
#reviewModal .modal-title {
  color: #fff;
  font-weight: 700;
  /* fluid font: shrinks gracefully on tiny screens */
  font-size: clamp(.78rem, 2.4vw, 1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#reviewModal #m-mode-badge {
  font-size: .65rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  margin-top: .1rem;
  letter-spacing: .05em;
}
#reviewModal .btn-close {
  filter: brightness(0) invert(1);
  opacity: .6;
  flex-shrink: 0;
}
#reviewModal .btn-close:hover { opacity: 1; }

/* ── Account badge – prominent, never shrinks ───────────────────────────── */
#reviewModal .account-badge {
  background: var(--imara-orange);
  border-radius: 8px;
  padding: .28rem .8rem;
  text-align: center;
  min-width: 64px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(232,96,26,.45);
}
#reviewModal .account-badge .acc-label {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  line-height: 1;
}
#reviewModal .account-badge .acc-value {
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Body – sections own their backgrounds ──────────────────────────────── */
#reviewModal #modal-loading,
#reviewModal #modal-body-content { padding: 0; }

#reviewModal #modal-loading {
  padding: 4rem 1.5rem;
  background: #fff;
  text-align: center;
}

/* ── Section blocks ─────────────────────────────────────────────────────── */
#reviewModal .ir-section {
  padding: 1rem 1.2rem 1.15rem;
  border-bottom: 1px solid var(--imara-border);
}
#reviewModal .ir-section.sec-customer   { background: #ffffff; }
#reviewModal .ir-section.sec-install    { background: #fafafa; }
#reviewModal .ir-section.sec-submission { background: #f5f5f5; }
#reviewModal .ir-section:last-child     { border-bottom: none; }

/* Tighter padding on phones */
@media (max-width: 575.98px) {
  #reviewModal .ir-section { padding: .8rem .95rem 1rem; }
}

/* ── Close section ──────────────────────────────────────────────────────── */
#reviewModal #close-section {
  background: #f5f5f5;
  padding: 0 1.2rem 1.15rem;
}
#reviewModal #close-section hr {
  border-color: var(--imara-border);
  margin-top: 0;
}
#reviewModal #m-close-notes {
  border-radius: 7px;
  border: 1.5px solid #ddd;
  font-size: .85rem;
}
#reviewModal #m-close-notes:focus {
  border-color: var(--imara-orange);
  box-shadow: 0 0 0 3px rgba(232,96,26,.12);
  outline: none;
}

/* ── Section headings ───────────────────────────────────────────────────── */
#reviewModal .section-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}
#reviewModal .section-heading .sh-bar {
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--imara-orange);
  flex-shrink: 0;
}
#reviewModal .section-heading .sh-text {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--imara-dark);
  white-space: nowrap;
}
#reviewModal .section-heading .sh-line {
  flex: 1;
  height: 1px;
  background: var(--imara-border);
}

/* ── Labels ─────────────────────────────────────────────────────────────── */
#reviewModal .form-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── Inputs & selects ───────────────────────────────────────────────────── */
#reviewModal .form-control,
#reviewModal .form-select {
  border-radius: 7px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: .83rem;
  color: #1e1e1e;
  font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
/*
 * iOS Safari auto-zoom fix:
 * Safari zooms in whenever a focused input has font-size < 16px.
 * We bump to 1rem (16px) on small screens to prevent that.
 */
@media (max-width: 575.98px) {
  #reviewModal .form-control,
  #reviewModal .form-select { font-size: 1rem; }
}
#reviewModal .form-control:focus,
#reviewModal .form-select:focus {
  border-color: var(--imara-orange);
  box-shadow: 0 0 0 3px rgba(232,96,26,.12);
  outline: none;
}
#reviewModal .form-control.bg-light,
#reviewModal textarea.bg-light {
  background: #f0f0f0 !important;
  color: #444;
  border-color: #ddd;
}
#reviewModal #m-missing {
  color: #c0392b !important;
  font-weight: 600;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#reviewModal .modal-footer {
  background: #f0f0f0;
  border-top: 1.5px solid var(--imara-border);
  padding: .8rem 1.2rem;
  flex-wrap: wrap;   /* wraps Cancel to its own row on very small screens */
  gap: .5rem;
}

/* ── Buttons – 40 px min tap target (WCAG 2.5.5 / mobile UX) ───────────── */
#reviewModal .modal-footer .btn {
  min-height: 40px;
  touch-action: manipulation;   /* removes 300 ms tap delay on Android */
}
#reviewModal .btn-outline-secondary {
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  border-color: #ccc;
  color: #555;
}
#reviewModal .btn-outline-secondary:hover {
  background: #e0dedd;
  border-color: #aaa;
  color: #333;
}
#reviewModal #btn-approve {
  border-radius: 7px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: linear-gradient(135deg, var(--imara-orange), var(--imara-orange2));
  border: none;
  padding: .48rem 1.1rem;
  color: #fff;
  box-shadow: 0 4px 14px rgba(232,96,26,.35);
  transition: transform .14s, box-shadow .14s;
}
#reviewModal #btn-approve:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,96,26,.45);
}
#reviewModal #btn-approve:active { transform: translateY(0); }

#reviewModal #btn-close.btn-outline-secondary {
  border-color: #e0a0a0;
  color: #b94040;
}
#reviewModal #btn-close.btn-outline-secondary:hover {
  background: #fdeaea;
  border-color: #c0392b;
  color: #c0392b;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
#reviewModal .spinner-border {
  color: var(--imara-orange) !important;
}

/* ── Mid-tablet (portrait): give modal slightly more breathing room ──────── */
@media (min-width: 576px) and (max-width: 767.98px) {
  #reviewModal .modal-dialog {
    max-width: 96vw;
    margin: .75rem auto;
  }
}

/* ===============================
   AUTH PAGE LOGO
================================ */

.auth-logo-wrapper{
    width: 200px;
    height: 200px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    border-radius: 16px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.auth-logo{
    width: 75%;
    height: auto;
}

/* Smaller logo on mobile */

@media (max-width: 576px){

    .auth-logo-wrapper{
        width: 130px;
        height: 130px;
    }

}

.bg-imara{
  background: var(--imara-primary, #f47c20) !important;
}


/* ===============================
   AUTH NAVBAR
================================ */

.auth-navbar{
    background:#161616;
    border-bottom:2px solid #f47c20;
}

.auth-navbar-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 18px;
}

/* Logo */

.auth-navbar-logo{
    height:42px;
    width:auto;
}

/* Right links */

.auth-link{
    color:#dcdcdc;
    text-decoration:none;
    margin-left:18px;
    font-size:14px;
}

.auth-link:hover{
    color:#ffffff;
}

/* Mobile adjustments */

@media (max-width:576px){

    .auth-navbar-logo{
        height:24px;
    }

    .auth-link span{
        display:none;
    }

}