@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');



/* ═══════════════════════════════════════════

   RATNALAYA — MASTER STYLESHEET  v3

   Primary : Navy  #1a3a5c

   Accent  : Gold  #c9a84c

   ═══════════════════════════════════════════ */



/* ── TOKENS ── */

:root {

  --primary: linear-gradient(135deg, #df9a10 0%, #b85a15 50%, #8e1d1d 100%);

  --primary-dark: #8e1d1d;

  --primary-hover: #a9811e;

  --gold: #c9a84c;

  --gold-lt: #e8c97a;

  --gold-dk: #a07830;

  --cream: #fdf8f0;

  --cream2: #f7f0e4;

  --border: #dde4ee;

  --black: #1a1a1a;

  --gray: #555;

  --gray-lt: #999;

  --bg: #f0f4f8;

  --white: #fff;

  --sb-w: 220px;

  --sb-col: 56px;

  --hdr-h: 58px;

  --font: 'Poppins', sans-serif;

  --t: 0.2s ease;

  --radius: 10px;--gold: #d4b896;

  --gold-dk: #a07830;

}



/* ── RESET ── */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

a {

  text-decoration: none;

  color: inherit;

}

img {

  display: block;

}

button {

  font-family: var(--font);

  cursor: pointer;

  border: none;

  background: none;

}



/* ════════════════════════════════════════════

   LOADER

   ════════════════════════════════════════════ */

#loader {

  position: fixed;

  inset: 0;

  background: var(--cream);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  transition:

    opacity 0.5s ease,

    visibility 0.5s ease;

}

#loader.hide {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.ld-text {

  font-size: 0.54rem;

  letter-spacing: 0.4em;

  text-transform: uppercase;

  color: var(--gold-dk);

  margin-top: 14px;

  font-weight: 600;

}

.ld-dots {

  display: flex;

  gap: 6px;

  margin-top: 8px;

}

.ld-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--primary);

  animation: dotbounce 1.2s ease-in-out infinite;

}

.ld-dot:nth-child(2) {

  animation-delay: 0.2s;

}

.ld-dot:nth-child(3) {

  animation-delay: 0.4s;

}

@keyframes dotbounce {

  0%,

  80%,

  100% {

    transform: scale(0.4);

    opacity: 0.3;

  }

  40% {

    transform: scale(1);

    opacity: 1;

  }

}



/* ════════════════════════════════════════════

   LOGIN

   ════════════════════════════════════════════ */

body.login-body {

  font-family: var(--font);

  background: var(--cream);

  color: var(--black);

  -webkit-font-smoothing: antialiased;

  overflow: hidden;

}

#page {

  opacity: 0;

  transition: opacity 0.4s ease;

  height: 100vh;

  display: flex;

}

#page.show {

  opacity: 1;

}

#page .row {

  flex: 1;

  margin: 0;

}



.panel-left {

  background: var(--primary);

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 40px 28px 28px;

  position: relative;

  overflow: hidden;

  min-height: 100vh;

}

.slide-wrap {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 2;

  width: 100%;

}

.jewel-slide {

  display: none;

  text-align: center;

}

.jewel-slide.active {

  display: block;

  animation: fadeUp 0.5s ease;

}

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(12px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.slide-cat {

  font-size: 0.55rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--gold-lt);

  font-weight: 600;

  margin-bottom: 8px;

}

.slide-h {

  font-size: clamp(1.4rem, 2.2vw, 1.9rem);

  font-weight: 700;

  color: #fff;

  margin-bottom: 8px;

  line-height: 1.15;

}

.slide-p {

  font-size: 0.78rem;

  color: rgba(255, 255, 255, 0.55);

  line-height: 1.8;

  font-weight: 300;

  max-width: 260px;

  margin: 0 auto 14px;

}

.slide-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 0.57rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #fff;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.28);

  padding: 5px 14px;

  border-radius: 40px;

  font-weight: 600;

}

.jewel-art {

  width: 150px;

  height: 140px;

  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.2));

  animation: float 4s ease-in-out infinite;

  margin-bottom: 12px;

}

@keyframes float {

  0%,

  100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-8px);

  }

}

.sdots {

  display: flex;

  gap: 7px;

  margin-top: 18px;

  position: relative;

  z-index: 2;

}

.sdot {

  width: 20px;

  height: 3px;

  border-radius: 2px;

  background: rgba(255, 255, 255, 0.25);

  transition: all 0.3s;

  cursor: pointer;

  border: none;

  padding: 0;

}

.sdot.on {

  background: #fff;

  width: 32px;

}

.lp-trust {

  font-size: 0.51rem;

  font-weight: 500;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  margin-top: 18px;

  position: relative;

  z-index: 2;

}



.panel-right {

  background: var(--cream);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 28px 20px;

  min-height: 100vh;

}

.login-form-card {

  width: 100%;

  max-width: 440px;

  background: var(--white);

  border-radius: 14px;

  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.1);

  padding: 32px 32px 26px;

}

.rp-logo-block {

  text-align: center;

  margin-bottom: 6px;

}

.rp-logo-img {

  width: 68px;

  height: 68px;

  object-fit: contain;

  margin: 0 auto;

}

.rp-tagline {

  font-size: 0.54rem;

  font-weight: 600;

  letter-spacing: 0.38em;

  text-transform: uppercase;

  color: var(--gold-dk);

  margin-top: 4px;

}

.gold-line {

  width: 48px;

  height: 2px;

  margin: 10px auto;

  background: var(--gold);

  border-radius: 2px;

}

.welcome-h {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--black);

  text-align: center;

  margin-bottom: 2px;

}

.welcome-sub {

  font-size: 0.72rem;

  color: var(--gray-lt);

  text-align: center;

  margin-bottom: 22px;

}

.opts-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;

}

.chk-wrap {

  display: flex;

  align-items: center;

  gap: 6px;

}

.chk-wrap input[type='checkbox'] {

  width: 14px;

  height: 14px;

  accent-color: var(--primary);

  cursor: pointer;

}

.chk-label {

  font-size: 0.74rem;

  color: var(--gray-lt);

  cursor: pointer;

}

.forgot-a {

  font-size: 0.74rem;

  font-weight: 500;

  color: var(--primary);

  transition: color 0.2s;

}

.forgot-a:hover {

  color: var(--primary-dark);

}

.btn-login {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 12px 22px;

  background: var(--primary);

  border: none;

  border-radius: 8px;

  color: var(--white);

  font-family: var(--font);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  cursor: pointer;

  transition:

    background 0.2s ease,

    transform 0.15s ease;

  box-shadow: 0 4px 14px rgba(26, 58, 92, 0.3);

  text-decoration: none;

}

/* .btn-login:hover {

  background: var(--primary-hover);

  transform: translateY(-1px);

} */

.btn-login svg {

  width: 14px;

  height: 14px;

}

.form-footer {

  margin-top: 16px;

  text-align: center;

}

.form-footer p {

  font-size: 0.58rem;

  color: var(--gray-lt);

}

.error-msg {

  font-size: 10px;

  display: block;

  min-height: 14px;

}



/* ════════════════════════════════════════════

   DASHBOARD LAYOUT

   ════════════════════════════════════════════ */

body.dashboard-body {

  font-family: var(--font);

  background: var(--bg);

  color: var(--black);

  -webkit-font-smoothing: antialiased;

  overflow: hidden;

}

.app {

  display: flex;

  height: 100vh;

}



/* ── MAIN ── */

.main {

  flex: 1;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  min-width: 0;

}



/* ── TOPBAR ── */

.topbar {

  height: var(--hdr-h);

  background: var(--white);

  border-bottom: 1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 18px;

  flex-shrink: 0;

  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);

  position: relative;

  z-index: 100;

}

.tb-left {

  display: flex;

  align-items: center;

  gap: 12px;

}

.tb-right {

  display: flex;

  align-items: center;

  gap: 8px;

}

/* ── 1. HAMBURGER BUTTON ──────────────────────────────────── */

.sb-toggle-btn {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  width: 32px;

  height: 32px;

  padding: 5px;

  background: transparent;

  border: none;

  cursor: pointer;

  border-radius: 6px;

  flex-shrink: 0;

}

.sb-toggle-btn:hover {

  background: rgba(0, 0, 0, 0.07);

}

.sb-toggle-btn span {

  display: block;

  height: 2px;

  width: 100%;

  background: var(--primary, #7b2d00);

  border-radius: 2px;

}



.sb-toggle-btn span:nth-child(2) {

  width: 10px;

  align-self: flex-start;

  margin-left: 10px;

}

.tb-page {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--black);

}

.tb-sub {

  font-size: 0.57rem;

  color: var(--gray-lt);

  margin-top: 1px;

  display: flex;

  align-items: center;

  gap: 5px;

}

.tb-search {

  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--bg);

  border: 1px solid var(--border);

  border-radius: 50px;

  padding: 6px 12px;

  min-width: 190px;

  transition: border-color var(--t);

  margin: 4px;

  width: 15%;

}

.tb-search:focus-within {

  border-color: var(--primary);

}

.tb-search input {

  border: none;

  outline: none;

  background: transparent;

  font-family: var(--font);

  font-size: 10px;

  color: var(--black);

  width: 130px;

}

.tb-search svg {

  width: 12px;

  height: 12px;

  color: var(--gray-lt);

  flex-shrink: 0;

}

.tb-icon-btn {

  width: 34px;

  height: 34px;

  border-radius: 7px;

  border: 1.5px solid var(--border);

  background: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  position: relative;

  color: var(--gray);

  transition: border-color var(--t);

}

.tb-icon-btn:hover {

  border-color: var(--primary);

}

.tb-icon-btn svg {

  width: 14px;

  height: 14px;

}

.notif-dot {

  position: absolute;

  top: 6px;

  right: 6px;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #e74c3c;

  border: 2px solid var(--white);

}

.tb-user-pill {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 3px 10px 3px 3px;

  border: 1.5px solid var(--border);

  border-radius: 50px;

  cursor: pointer;

  background: var(--white);

  transition: border-color var(--t);

}

.tb-user-pill:hover {

  border-color: var(--primary);

}

.tb-user-avatar {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.52rem;

  font-weight: 700;

  color: var(--white);

}

.tb-user-name {

  font-size: 0.66rem;

  font-weight: 500;

  color: var(--black);

}



.tb-user-pill i {

  font-size: 9px;

}

/* ── CONTENT ── */

.content {

  flex: 1;

  overflow-y: auto;

  padding: 6px 8px;

  scrollbar-width: thin;

     scrollbar-color: var(--gold-dk) transparent;

}

.content::-webkit-scrollbar {

  width: 2px;

}

.content::-webkit-scrollbar-thumb {

  background: var(--border);

  border-radius: 4px;

}



/* ── BREADCRUMB ── */

.breadcrumb {

  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 10px;

  font-size: 0.61rem;

  color: var(--gray-lt);

  background: none;

  padding: 0;

}

.breadcrumb a {

  color: var(--primary);

  font-weight: 500;

}

.breadcrumb svg {

  width: 8px;

  height: 8px;

}

.sys-tbl-table {

  height: calc(100vh - 310px); /* adjust to your preference */

  overflow-y: auto;

  overflow-x: auto;

  position: relative;

}

/* ── FOOTER ── */

.footer {

  background: var(--white);

  border-top: 1px solid var(--border);

  padding: 0 20px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-shrink: 0;

  position: fixed;

  top: 95%;

  width: 100%;

  z-index: 999;

}

.footer-left {

  font-size: 0.57rem;

  color: var(--gray-lt);

  display: flex;

  align-items: center;

  gap: 5px;

}

.footer-logo {

  font-weight: 700;

  color: var(--primary);

}

.footer-dot {

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--border);

  display: inline-block;

}

.footer-right {

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 0.55rem;

  color: var(--gray-lt);

}

.status-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #27ae60;

}



/* ── MOBILE SIDEBAR OVERLAY ── */

.sidebar-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.38);

  z-index: 190;

}

.sidebar-overlay.active {

  display: block;

}



/* ════════════════════════════════════════════

   FORM PAGES

   ════════════════════════════════════════════ */



/* Form card — centered on desktop, full-width on mobile */

.form-card {

  background: var(--white);

  border-radius: var(--radius);

  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);

  /* overflow: hidden; */

  /* width: 62%; */

  margin: 0 auto;

}

.bootstrap-select.bs-actionsbox,

.bs-donebutton,

.bs-searchbox {

  padding: 2px 2px !important;

}

.beat-total {

  height: 27px;

  padding: 0 10px;

  border-radius: 20px;

  border: 1.5px solid #e5e7eb;

  background: #f9fafb;

  font-size: 0.65rem;

  font-weight: 700;

  color: #6b7280;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  transition: all 0.17s;

}

.bootstrap-select .dropdown-menu.show {

  display: block;

  padding: 0px !important;

  top: -34px !important;

}

.bootstrap-select.bs-searchbox + .bs-actionsbox {

  padding: 0 3px 4px !important;

}

/* ── SINGLE UNIVERSAL CARD HEADER ── */

.card-hd {

  background: var(--primary);

  padding: 9px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.card-hd-icon {

  width: 34px;

  height: 34px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.22);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.card-hd-icon svg {

  width: 16px;

  height: 16px;

  color: var(--gold-lt);

}

.card-hd-title {

  font-size: 0.84rem;

  font-weight: 700;

  color: var(--white);

}

.card-hd-sub {

  font-size: 0.56rem;

  color: rgba(255, 255, 255, 0.58);

  margin-top: 1px;

}

.card-hd-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.22);

  border-radius: 30px;

  padding: 4px 11px;

  font-size: 0.54rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gold-lt);

  white-space: nowrap;

}

.card-hd-badge::before {

  content: '';

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--gold-lt);

  opacity: 0.8;

}



/* Gold rule */

.gold-rule {

  height: 3px;

  background: #b85a15;

}



/* Form body */

.form-body {

  padding: 12px 14px 0;

}



/* Field components */

.field-wrap {

  display: flex;

  flex-direction: column;

  margin-bottom: 2px;

}

.field-label {

  font-size: 0.56rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gray);

  margin-bottom: 3px;

  display: flex;

  align-items: center;

  gap: 5px;

}

.req {

  color: #e74c3c;

  margin-left: 1px;

  font-size: 0.72rem;

}

.input-wrap {

  position: relative;

}

.field-input {

  width: 100%;

  padding: 7px 36px 7px 11px;

  /* background: var(--bg); */

  border: 1.5px solid var(--border);

  border-radius: 7px;

  font-family: var(--font);

  font-size: 0.78rem;

  color: var(--black);

  outline: none;

  transition:

    border-color 0.2s,

    box-shadow 0.2s,

    background 0.2s;

}

.field-input::placeholder {

  color: #bbb;

  font-size: 0.72rem;

}

/* .field-input:focus {

  background: var(--white);

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);

} */

select.field-input {

  appearance: none;

  -webkit-appearance: none;

  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23999' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 10px center;

  /* background-color: var(--bg); */

}

textarea.field-input {

  resize: none;

}

.field-icon {

  position: absolute;

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--gray-lt);

  display: flex;

  align-items: center;

  pointer-events: none;

}

.field-icon.clickable {

  pointer-events: auto;

  cursor: pointer;

}

.field-icon svg {

  width: 13px;

  height: 13px;

}

.field-hint {

  font-size: 0.56rem;

  color: var(--gray-lt);

  margin-top: 2px;

}



/* Section separator */

.sec-sep {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 8px 0 6px;

}

.sec-sep-line {

  flex: 1;

  height: 1px;

  background: var(--border);

}

.sec-sep-label {

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--gray-lt);

  white-space: nowrap;

}



/* Form actions */

.form-actions {

  padding: 10px 14px 12px;

  margin-top: 10px;

  border-top: 1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

}



/* Buttons */

.btn-cancel {

  padding: 7px 14px;

  border-radius: 6px;

  border: 1.5px solid var(--border);

  background: var(--white);

  font-family: var(--font);

  font-size: 0.7rem;

  font-weight: 500;

  color: var(--gray);

  cursor: pointer;

  transition: all 0.2s;

}

.btn-cancel:hover {

  border-color: var(--primary);

  color: var(--primary);

  background: var(--bg);

}

.btn-save {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 7px 14px;

  border-radius: 6px;

  background: var(--primary);

  border: none;

  font-family: var(--font);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--white);

  cursor: pointer;

  transition:

    background 0.2s,

    transform 0.15s,

    box-shadow 0.2s;

  box-shadow: 0 3px 12px rgba(26, 58, 92, 0.3);

  text-decoration: none;

}

.btn-save:hover {

  background: var(--primary-hover);

  transform: translateY(-1px);

  box-shadow: 0 5px 16px rgba(26, 58, 92, 0.4);

}

.btn-save svg {

  width: 13px;

  height: 13px;

}

.btn-new {

  display: flex;

  align-items: center;

  gap: 5px;

  padding: 7px 14px;

  background: var(--primary);

  border-radius: 50px;

  color: var(--white);

  font-family: var(--font);

  font-size: 0.65rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  cursor: pointer;

  border: none;

  transition:

    background var(--t),

    transform var(--t);

  box-shadow: 0 3px 10px rgba(26, 58, 92, 0.28);

}

.btn-new:hover {

  background: var(--primary-dark);

  transform: translateY(-1px);

}

.btn-new svg {

  width: 10px;

  height: 10px;

}



/* ── TOAST ── */

.toast {

  position: fixed;

  bottom: 24px;

  right: 24px;

  background: var(--primary);

  color: var(--white);

  padding: 11px 18px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  gap: 7px;

  font-family: var(--font);

  font-size: 0.72rem;

  font-weight: 500;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

  opacity: 0;

  transform: translateY(10px);

  transition:

    opacity 0.3s,

    transform 0.3s;

  pointer-events: none;

  z-index: 9999;

}

.toast.show {

  opacity: 1;

  transform: translateY(0);

}

.toast svg {

  width: 15px;

  height: 15px;

}



.tbl-inner {

  overflow: auto; /* move scroll here instead */

  flex: 1;

  scrollbar-width: thin;

  scrollbar-color: #d4b896 transparent;

}

.perm-table {

  width: 100%;

  border-collapse: collapse;

  min-width: 800px;

  border-bottom: 1px solid #ececec;

}

.perm-table thead tr.group-row th {

  padding: 4px 14px;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  /* simulate border using shadow */

  box-shadow:

    inset 0px 0 0 #bcbcbc,

    inset 0 -1px 0 #e8e0d5;

  text-align: center;

}

.perm-table thead tr.group-row .th-doer {

  background: #fdf8f2;

  color: #5a4a3a;

  text-align: left;

  border-right: 1px solid #e8e0d5;

  min-width: 160px;

}

.perm-table thead tr.group-row .th-sec {

  background: #fdf8f2;

  color: #c47c1a;

}

.perm-table thead tr.group-row .th-divider {

  border-left: 2px solid #e8e0d5;

}

.perm-table thead tr.col-row th {

  padding: 4px 10px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  color: #999;

  background: #f9f6f2;

  border-bottom: 1px solid #e8e0d5;

  border-right: 1px solid #e8e0d5;

  text-align: center;

  white-space: nowrap;

}

/* .perm-table thead tr.col-row .col-div {

  border-left: 2px solid #e8e0d5;

} */

.perm-table tbody td {

  padding: 1px 10px;

  border-bottom: 1px solid #f0ebe4;

  border-right: 1px solid #f0ebe4;

  vertical-align: middle;

  white-space: nowrap;

  font-size: 13px;

  color: #2c2c2c;

  background: #fff;

}

.perm-table tbody tr:last-child td {

  border-bottom: none;

}

.td-doer {

  min-width: 160px;

  border-right: 1px solid #e8e0d5 !important;

}

.doer-name {

  font-size: 10px;

  font-weight: 600;

  color: #1a1a1a;

}

.doer-role {

  font-size: 11px;

  color: #888;

  /* margin-top: 2px; */

}

.td-chk {

  text-align: center;

}

.td-div {

  border-left: 2px solid #e8e0d5 !important;

}

.td-br {

  min-width: 150px;

}

.perm-cb {

  width: 12px;

  height: 12px;

  accent-color: #c47c1a;

  cursor: pointer;

}

.saecr-card {

  padding: 2px;

}

.perm-sel {

  font-size: 12px;

  color: #2c2c2c;

  background: #fff;

  border: 1px solid #d5c9b8;

  border-radius: 6px;

  padding: 5px 8px;

  width: 100%;

  cursor: pointer;

  outline: none;

}

.perm-sel:hover {

  border-color: #c47c1a;

}

.tbl-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 16px;

  border-top: 1px solid #e8e0d5;

  background: #fdf8f2;

}

.tbl-foot-count {

  font-size: 12px;

  color: #888;

}

.tbl-foot-count b {

  color: #444;

  font-weight: 600;

}

.pg-wrap {

  display: flex;

  align-items: center;

  gap: 6px;

}

.pg-btn {

  font-size: 12px;

  color: #555;

  background: #fff;

  border: 1px solid #d5c9b8;

  border-radius: 6px;

  padding: 5px 13px;

  cursor: pointer;

}

.pg-btn:hover {

  background: #f5ede0;

}

.pg-active {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius: 6px;

  background: #b85c0a;

  color: #fff;

  font-size: 12px;

  font-weight: 700;

}



.select2-container--open .select2-dropdown--below {

  position: absolute;

  top: -31px;

  border-radius: 10px;

}



.select2-search--dropdown {

  padding: 0px !important;

  margin: 2px;

}



.select2-search__field {

  width: 100%;

  padding: 4px 30px 7px 8px !important;

  /* background: var(--bg); */

  border: 1.5px solid var(--border) !important;

  border-radius: 7px !important;

  font-family: var(--font) !important;

  font-size: 0.78rem !important;

  color: var(--black);

  outline: none !important;

  transition:

    border-color 0.2s,

    box-shadow 0.2s,

    background 0.2s !important;

  margin: 1px !important;

}

/* Table card (order items) */

.tbl-card {

  background: var(--white);

  border-radius: var(--radius);

  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);

  overflow: hidden;

  height: calc(100vh - 110px);

  display: flex;

  flex-direction: column;

}

.tbl-wrap {

  overflow-x: auto;

}

.tbl-inner thead {

  position: sticky;

  top: 0;

  z-index: 999;

}

.tbl {

  width: 100%;

  border-collapse: collapse;

  font-family: var(--font);

  min-width: 760px;

}

.tbl thead th {

  background: var(--bg);

  padding: 8px 10px;

  font-size: 0.55rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gray-lt);

  border-bottom: 2px solid var(--border);

  text-align: left;

  white-space: nowrap;

}

.tbl thead th.th-gold {

  color: var(--gold-dk);

}

.tbl tbody td {

  padding: 0;

  border-bottom: 1px solid var(--border);

  vertical-align: middle;

}

.tbl tbody tr:last-child td {

  border-bottom: none;

}

.tbl tbody tr:hover td {

  background: #f8fafc;

}

.td-no {

  padding: 9px 10px;

  font-weight: 700;

  font-size: 0.68rem;

  color: var(--primary);

  white-space: nowrap;

  min-width: 80px;

}

.cell-input {

  width: 100%;

  padding: 5px;

  border: 1px solid #ebebeb;

  background: transparent;

  font-family: var(--font);

  font-size: 0.7rem;

  color: var(--black);

  outline: none;

}

.cell-input:focus {

  background: #fffcf5;

  box-shadow: inset 0 0 0 1px var(--gold);

}

.cell-input::placeholder {

  color: #ccc;

  font-size: 0.66rem;

}

.file-cell {

  padding: 5px 8px;

}

.file-drop {

  border: 1.5px dashed var(--border);

  border-radius: 6px;

  padding: 1px 10px;

  text-align: center;

  cursor: pointer;

  font-size: 0.5rem;

  color: var(--gray-lt);

  transition:

    border-color var(--t),

    background var(--t);

  position: relative;

  /* min-width: 110px; */

}

.file-drop:hover {

  border-color: var(--gold);

  background: var(--cream);

  color: var(--gold-dk);

}

.file-drop input[type='file'] {

  position: absolute;

  inset: 0;

  opacity: 0;

  cursor: pointer;

  width: 100%;

  height: 100%;

}

.file-drop .file-names {

  margin-top: 2px;

  font-size: 0.54rem;

  color: var(--gold-dk);

  word-break: break-all;

}

.btn-del-row {

  padding: 8px 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #c0392b;

  transition: color var(--t);

}

.btn-del-row svg {

  width: 13px;

  height: 13px;

}

.tbl-foot {

  padding: 10px 14px 12px;

  border-top: 1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

}

.btn-add-row {

  display: flex;

  align-items: center;

  gap: 5px;

  padding: 6px 12px;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.28);

  border-radius: 7px;

  color: var(--white);

  font-family: var(--font);

  font-size: 0.62rem;

  font-weight: 600;

  cursor: pointer;

  transition: background var(--t);

}

.btn-add-row:hover {

  background: rgba(255, 255, 255, 0.24);

}

.btn-add-row svg {

  width: 10px;

  height: 10px;

}



/* ── PASSWORD STRENGTH ── */

.pw-strength {

  display: flex;

  gap: 3px;

  margin-top: 4px;

}

.pw-bar {

  flex: 1;

  height: 3px;

  border-radius: 2px;

  background: var(--border);

  transition: background 0.3s;

}

.pw-bar.weak {

  background: #e74c3c;

}

.pw-bar.fair {

  background: #f39c12;

}

.pw-bar.strong {

  background: #27ae60;

}



/* ════════════════════════════════════════════

   MOBILE ORDER FORM extras

   ════════════════════════════════════════════ */

.oic {

  border: 1.5px solid var(--border);

  border-radius: 9px;

  background: var(--white);

  overflow: hidden;

}

.oic-head {

  background: var(--cream2);

  border-bottom: 2px solid var(--gold);

  padding: 6px 11px;

}

.oic-num {

  font-size: 0.53rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--gold-dk);

  background: rgba(201, 168, 76, 0.1);

  border: 1px solid rgba(201, 168, 76, 0.28);

  border-radius: 20px;

  padding: 2px 9px;

}

.btn-del {

  width: 26px;

  height: 26px;

  border-radius: 6px;

  border: 1.5px solid #fde8e8;

  background: #fff5f5;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #e74c3c;

  cursor: pointer;

}

.btn-del svg {

  width: 11px;

  height: 11px;

}

.wt-lbl {

  display: block;

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gray-lt);

  margin-bottom: 3px;

}

.img-box {

  border: 1.5px dashed var(--border);

  border-radius: 7px;

  background: var(--bg);

  padding: 10px;

  cursor: pointer;

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



/* hide file input */

.img-box input[type='file'] {

  position: absolute;

  inset: 0;

  opacity: 0;

}



/* center upload area */

.img-placeholder {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 10px 0;

  text-align: center;

  pointer-events: none;

}



.img-placeholder svg {

  width: 22px;

  height: 22px;

  color: var(--primary);

}



.img-lbl {

  font-size: 0.7rem;

  font-weight: 600;

  color: var(--primary);

  margin-top: 4px;

}



/* thumbnails row */

.img-strip {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



/* thumbnail */

.img-thumb-wrap {

  position: relative;

}



.img-thumb {

  width: 40px;

  height: 40px;

  border-radius: 6px;

  object-fit: cover;

  border: 1px solid var(--border);

}



/* remove button */

.img-remove {

  position: absolute;

  top: -5px;

  right: -5px;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  border: none;

  background: red;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}

.sb-item.has-sub {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.sb-left {

  display: flex;

  align-items: center;

  gap: 8px;

}

.btn-add-item {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 10px;

  border: 2px dashed var(--border);

  border-radius: 9px;

  background: transparent;

  font-family: var(--font);

  font-size: 0.68rem;

  font-weight: 600;

  color: var(--gray-lt);

  cursor: pointer;

  transition: all 0.2s;

}

.btn-add-item:active {

  border-color: var(--primary);

  color: var(--primary);

}

.btn-add-item svg {

  width: 13px;

  height: 13px;

}

.badge-count {

  font-size: 0.54rem;

  font-weight: 700;

  background: var(--primary);

  color: var(--white);

  border-radius: 20px;

  padding: 1px 7px;

}

.sec-label {

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--gray-lt);

  white-space: nowrap;

}

.submit-bar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  background: var(--white);

  border-top: 1px solid var(--border);

  padding: 10px 14px;

  z-index: 300;

  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);

} /* ── SELECTPICKER: ERROR (red) ── */

.bootstrap-select.is-error > .dropdown-toggle {

  border-color: #c0392b !important;

  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;

}



/* ════════════════════════════════════════════

   RESPONSIVE

   ════════════════════════════════════════════ */



/* ── 2. FA ICON — fixed width keeps icons centred on collapse ── */

.sb-icon-fa {

  width: 16px;

  min-width: 16px;

  text-align: center;

  font-size: 0.8rem;

  flex-shrink: 0;

  line-height: 1;

}

.sb-item.active .sb-icon-fa,

.sb-item:hover .sb-icon-fa {

  opacity: 1;

}

/* .sidebar.collapsed .sb-item .sb-icon-fa {

  min-width: 36px;

} */



/* ════════════════════════════════════════════

   SELECT2 OVERRIDES

   ════════════════════════════════════════════ */

.select2-container--default .select2-selection--single {

  height: 31px;

  border: 1.5px solid var(--border);

  border-radius: 7px;

  background: var(--bg);

  font-family: var(--font);

  font-size: 11px;

  display: flex;

  align-items: center;

}

.select2-container--default .select2-selection--single .select2-selection__rendered {

  line-height: 34px;

  padding-left: 11px;

  color: var(--black);

  font-size: 11px;

}

.select2-container--default .select2-selection--single .select2-selection__arrow {

  height: 34px;

}

.select2-container--default .select2-results__option--highlighted[aria-selected] {

  background-color: var(--primary-dark);

}

.select2-dropdown {

  border: 1.5px solid var(--border);

  border-radius: 7px;

  font-family: var(--font);

  font-size: 0.78rem;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.select2-search--dropdown .select2-search__field {

  border: 1.5px solid var(--border);

  border-radius: 6px;

  font-family: var(--font);

  font-size: 0.74rem;

  padding: 5px 9px;

}

.select2-container--default .select2-selection--single:focus,

.select2-container--default.select2-container--open .select2-selection--single {

  border-color: #1a7a3a !important;

  outline: none;

  box-shadow: 0 0 0 3px rgba(142, 29, 29, 0.1);

}



/* branch-select use select2 */

.branch-cell .select2-container {

  min-width: 150px;

}



/* ── TAB SWITCHER ── */

.tab-row {

  display: flex;

  gap: 8px;

  margin-bottom: 16px;

}

.tab-btn {

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 8px 18px;

  border-radius: 8px;

  /* border: 1.5px solid var(--border); */

  background: #fff;

  font-family: var(--font);

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--gray);

  cursor: pointer;

  transition: all 0.2s;

}

.tab-btn i {

  font-size: 13px;

}

.tab-btn:hover {

  border-color: var(--primary-dark);

  color: var(--primary-dark);

}

.tab-btn.active {

  background: var(--primary);

  color: #fff;

  border-color: transparent;

  box-shadow: 0 3px 12px rgba(142, 29, 29, 0.3);

}

.tab-btn.active i {

  color: var(--gold-lt);

}



/* ── MASTER CARD ── */

.master-card {

  background: #fff;

  border-radius: var(--radius);

  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);

  overflow: hidden;

}

.card-hd {

  background: var(--primary);

  padding: 9px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.card-hd-icon {

  width: 34px;

  height: 34px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.22);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.card-hd-icon i {

  font-size: 15px;

  color: var(--gold-lt);

}

.card-hd-title {

  font-size: 0.84rem;

  font-weight: 700;

  color: #fff;

}

.card-hd-sub {

  font-size: 0.56rem;

  color: rgba(255, 255, 255, 0.58);

  margin-top: 1px;

}

.card-hd-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.22);

  border-radius: 30px;

  padding: 4px 11px;

  font-size: 0.54rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gold-lt);

  white-space: nowrap;

}

.card-hd-badge::before {

  content: '';

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--gold-lt);

  opacity: 0.8;

}



.btn-add-entry:hover {

  opacity: 0.9;

  transform: translateY(-1px);

}

.btn-add-entry i {

  font-size: 11px;

}

.btn-clear-form {

  display: flex;

  align-items: center;

  gap: 5px;

  height: 34px;

  padding: 0 12px;

  border-radius: 7px;

  border: 1.5px solid var(--border);

  background: #fff;

  color: var(--gray);

  font-family: var(--font);

  font-size: 0.66rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s;

}

.btn-clear-form:hover {

  border-color: var(--primary-dark);

  color: var(--primary-dark);

}

/* When checkbox is checked */

.cb-wrap input[type='checked'] {

  background: #b85a15;

} /* ── TABLE ── */

.tbl-wrap {

  overflow-x: auto;

}

table.sys-tbl {

  width: 100%;

  border-collapse: collapse;

  font-family: var(--font);

  min-width: 700px;

  border: 1px solid var(--border);

}

table.sys-tbl thead tr th {

  background: var(--bg);

  padding: 5px 1px;

  font-size: 0.55rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gray-lt);

  border: 1px solid var(--border);

  /* white-space: nowrap; */

  text-align: center;

}

.track-tbl thead tr.grp th {

  position: sticky;

  top: 0;

  z-index: 6;

}

.track-tbl thead tr.inp-row th {

  position: sticky;

  top: 26px;

  z-index: 6;

}

.track-tbl thead tr.sub th {

  position: sticky;

  top: 90px;

  z-index: 6;

}

.track-tbl thead th.stk {

  z-index: 9 !important;

}

@media (max-width: 768px) {

  .status-toggle-bar {

    flex-wrap: wrap;

    gap: 6px;

    padding: 8px;

  }



  /* Status buttons row — all 3 on one line */

  .status-toggle-bar .btn-status {

    flex: 1;

    justify-content: center;

    font-size: 10px;

    padding: 0 8px;

    height: 28px;

    white-space: nowrap;

  }



  /* Search takes full width on its own row */

  .status-toggle-bar .ms-auto {

    width: 100%;

    flex: 0 0 100%;

    margin-left: 0 !important;

  }



  .status-toggle-bar .tb-search {

    width: 100% !important;

    min-width: unset !important;

    margin: 0 !important;

  }



  .status-toggle-bar .tb-search input {

    width: 100% !important;

    min-width: unset !important;

  }



  /* Hide per-page on mobile */

  .status-toggle-bar .tb-perpage {

    display: none !important;

  }

}

table.sys-tbl thead tr th.th-center {

  text-align: center;

}

table.sys-tbl tbody tr {

  transition: background 0.15s;

}

table.sys-tbl tbody tr:hover td {

  background: #f8fafc;

}

table.sys-tbl tbody td {

  padding: 1px 6px;

  border: 1px solid var(--border);

  font-size: 10.5px;

  color: var(--black);

  vertical-align: middle;

}

.listpage {

  margin-top: 5px !important;

}

table.sys-tbl tbody tr:last-child td {

  border-bottom: none;

}

.td-num {

  font-size: 0.68rem;

  color: #8d8d8d !important;

  text-align: center;

}



.td-name {

  font-weight: 600;

  font-size: 0.73rem;

  color: var(--black);

}

.td-city {

  font-size: 0.7rem;

  color: var(--gray);

}

.td-code span {

  display: inline-block;

  padding: 2px 9px;

  border-radius: 6px;

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  background: rgba(142, 29, 29, 0.07);

  color: var(--primary-dark);

  border: 1px solid rgba(142, 29, 29, 0.15);

}

.td-status {

  text-align: center;

}

.date-pick::placeholder {

  font-size: 10px;

}

.status-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 3px 10px;

  border-radius: 20px;

  font-size: 0.6rem;

  font-weight: 600;

}

.status-badge.active {

  background: rgba(39, 174, 96, 0.1);

  color: #1a7a40;

}

.status-badge.active::before {

  content: '';

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #27ae60;

}

.status-badge.inactive {

  background: rgba(231, 76, 60, 0.08);

  color: #c0392b;

}

.status-badge.inactive::before {

  content: '';

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #e74c3c;

}

.td-actions {

  text-align: center;

  white-space: nowrap;

}

.td-actions .act-group {

  display: inline-flex;

  gap: 6px;

  align-items: center;

}

.btn-act {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 10px 11px;

  border-radius: 6px;

  font-family: var(--font);

  font-size: 0.6rem;

  font-weight: 600;

  cursor: pointer;

  border: 1.5px solid;

  transition: all 0.18s;

}

.btn-disable {

  border-color: var(--border);

  background: #fff;

  color: var(--gray);

}

.btn-disable:hover {

  border-color: #f39c12;

  color: #f39c12;

  background: rgba(243, 156, 18, 0.06);

}

.btn-disable.disabled-state {

  border-color: rgba(39, 174, 96, 0.3);

  background: rgba(39, 174, 96, 0.06);

  color: #27ae60;

}

.btn-disable.disabled-state:hover {

  border-color: #27ae60;

  background: rgba(39, 174, 96, 0.12);

}

.btn-edit {

  border-color: rgba(52, 152, 219, 0.3);

  background: rgba(52, 152, 219, 0.06);

  color: #2980b9;

}

.btn-edit:hover {

  border-color: #3498db;

  background: rgba(52, 152, 219, 0.14);

}

.btn-del {

  width: 30px;

  height: 30px;

  border-radius: 6px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1.5px solid rgba(231, 76, 60, 0.25);

  background: rgba(231, 76, 60, 0.06);

  color: #e74c3c;

  cursor: pointer;

  transition: all 0.18s;

}

.btn-del:hover {

  border-color: #e74c3c;

  background: rgba(231, 76, 60, 0.14);

}

.btn-del i {

  /* font-size: 11px; */

}



/* empty state */

.empty-state {

  text-align: center;

  padding: 40px 24px;

}

.empty-state i {

  font-size: 32px;

  color: var(--border);

  margin-bottom: 10px;

  display: block;

}

.empty-state p {

  font-size: 0.72rem;

  color: var(--gray-lt);

}



/* ── TABLE FOOTER ── */

.tbl-foot {

  padding: 10px 14px;

  border-top: 1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 8px;

}

.tbl-foot-count {

  font-size: 0.62rem;

  color: var(--gray-lt);

}

.tbl-foot-count b {

  color: var(--black);

  font-weight: 600;

}

.form-card-narrow {

  max-width: 680px;

  margin-bottom: 23px;

}

/* ── Sticky header rows ── */

table.sys-tbl thead tr.col-header th {

  background: #f5ede0;

  color: #8e1d1d;

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  /* padding: 8px 10px; */

  /* white-space: nowrap; */

  border: none;

  /* border-bottom: 2px solid #c8915a; */

  /* text-align: left; */

}

/* FIX 2: sticky header — add this */

/* .sys-tbl thead tr th {

  position: sticky;

  top: 0;

  z-index: 10;

  background: var(--color-background-primary);

} */

table.sys-tbl thead tr.col-header th.th-center {

  text-align: center;

}



/* ── Body cells ── */

table.sys-tbl tbody td {

  white-space: nowrap;

}



table.sys-tbl tbody tr:nth-child(even) {

  background: #fdf8f2;

}



table.sys-tbl tbody tr:hover td {

  background: #fef3e2 !important;

}



/* ── Status badges ── */

.badge-status {

  display: inline-block;

  padding: 2px 9px;

  border-radius: 20px;

  font-size: 0.6rem;

  font-weight: 700;

}



.badge-pending {

  background: #fff3cd;

  color: #856404;

}



.badge-done {

  background: #d1fae5;

  color: #065f46;

}



.badge-progress {

  background: #dbeafe;

  color: #1e40af;

}



/* ── Action buttons ── */

.act-btn {

  background: none;

  border: none;

  padding: 3px 6px;

  cursor: pointer;

  border-radius: 4px;

  color: #999;

  font-size: 12px;

  transition:

    background 0.15s,

    color 0.15s;

}



.act-btn:hover {

  background: #f3e8d0;

  color: #8e1d1d;

}



.act-btn.del-btn {

  color: #c0392b;

}



.act-btn.del-btn:hover {

  background: #ffeaea;

  color: #a93226;

}



/* ── Image cell ── */

.img-placeholder {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  /* width: 28px;

  height: 28px; */

  border-radius: 4px;

  border: 1px dashed #ccc;

  color: #ccc;

  font-size: 12px;

}

.imag_order {

  width: 28px !important;

}

.img-thumb {

  width: 54px;

  height: 54px;

  object-fit: cover;

  border-radius: 4px;

  border: 1px solid #ddd;

  cursor: pointer;

}



/* ── No data ── */

.no-data-row td {

  text-align: center;

  padding: 32px 0;

  color: #bbb;

  font-size: 0.75rem;

}



/* ── Pagination ── */

.page-num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

  border-radius: 5px;

  cursor: pointer;

  font-size: 0.63rem;

  font-weight: 700;

}



.page-num.active {

  background: #8e1d1d;

  color: #fff;

}



.page-num:not(.active) {

  background: #f3e8d0;

  color: #555;

}



.page-num:not(.active):hover {

  background: #e8d5b0;

}

.view_btn {

  color: green;

}

.edit_btn {

  color: blue;

}

/* ── Gold rule ── */

.gold-rule {

  height: 3px;

  background: #b85a15;

  min-width: 100%;

  width: max-content; /* stretches to match table width */

  position: sticky; /* optional: keeps it visible while scrolling vertically */

  top: 0;

  z-index: 2;

  flex-shrink: 0;

}

/* ── Table wrapper ── */

.tbl-scroll-wrap {

  overflow-x: auto;

  overflow-y: auto;

  /* FIX 1: dynamic height, adapts to any screen */

  /* max-height: calc(100vh - 210px); */

  border-radius: 0 0 8px 8px;

}



/* page scrollbar */



.track-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;

  flex-wrap: wrap;

  gap: 8px;

}

.track-status-btns {

  display: flex;

  gap: 8px;

}



/* .st-pend::before {

  content: "○";

  font-size: 9px;

} */

.pagination {

  margin: 10px;

}



.select2-container--default .select2-selection--single .select2-selection__arrow b {

  display: none !important;

}

.select2-results__option {

  padding: 4px;

  border-bottom: 1px solid #ebebeb;

  user-select: none;

  -webkit-user-select: none;

  font-size: 10px;

}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {

  content: '\f107'; /* Font Awesome down arrow */

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  color: black;

  position: absolute;

  top: 7px !important;

  right: 5px;

}



/* ══════════════════════════════════════════════

   SIDEBAR SHELL

══════════════════════════════════════════════ */

.sidebar {

  width: var(--sb-w);

  min-width: var(--sb-w);

  background: var(--primary);

  display: flex;

  flex-direction: column;

  height: 100vh;

  position: relative;

  transition:

    width var(--t),

    min-width var(--t);

  z-index: 200;

  /* overflow: hidden; */

  flex-shrink: 0;

}

.sidebar.collapsed {

  width: var(--sb-col);

  min-width: var(--sb-col);

}



/* ══════════════════════════════════════════════

   BRAND / LOGO

══════════════════════════════════════════════ */

.sb-brand {

  height: var(--hdr-h);

  min-height: var(--hdr-h);

  display: flex;

  align-items: center;

  border-bottom: 1px solid var(--border);

  border-right: 1px solid var(--border);

  flex-shrink: 0;

  overflow: hidden;

}

.sb-logo-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  flex-shrink: 0;

  background-color: #fff;

}

.sb-brand-text {

  margin-left: 10px;

  overflow: hidden;

  transition:

    opacity var(--t),

    width var(--t);

  white-space: nowrap;

}

.sidebar.collapsed .sb-brand-text {

  opacity: 0;

  width: 0;

  margin-left: 0;

}

.sb-brand-name {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--white);

  line-height: 1.2;

}

.sb-brand-sub {

  font-size: 0.5rem;

  color: rgba(255, 255, 255, 0.55);

  letter-spacing: 0.1em;

}



/* ══════════════════════════════════════════════

   NAV SCROLL AREA

══════════════════════════════════════════════ */

.sb-nav {

  flex: 1;

  padding: 8px 6px;

  scrollbar-width: none;

}

.sb-nav::-webkit-scrollbar {

  display: none;

}



.sb-section-label {

  font-size: 0.42rem;

  font-weight: 700;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.45);

  padding: 12px 8px 4px;

  white-space: nowrap;

  overflow: hidden;

  transition:

    opacity var(--t),

    height var(--t),

    padding var(--t);

}

.sidebar.collapsed .sb-section-label {

  opacity: 0;

  height: 0;

  padding: 0;

}



/* ══════════════════════════════════════════════

   TOP-LEVEL NAV ITEM  (.sb-item)

══════════════════════════════════════════════ */

.sb-item {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 8px 6px;

  border-radius: 7px;

  font-size: 0.77rem;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.72);

  cursor: pointer;

  position: relative;

  white-space: nowrap;

  overflow: hidden;

  margin-bottom: 1px;

  text-decoration: none;

  user-select: none;

  transition:

    background var(--t),

    color var(--t);

}



/* ─────────────────────────────────────────────

   .active  →  CURRENT PAGE ONLY

   Gold left bar + brighter background

   Used on: Dashboard, New Order, Doer List,

            Logout, AND Settings button

            (only when a settings sub-page is open)

───────────────────────────────────────────── */

.sb-item.active {

  background: rgba(255, 255, 255, 0.16);

  color: var(--white);

  font-weight: 600;

}

.sb-item.active::before {

  content: '';

  position: absolute;

  left: 0;

  top: 22%;

  bottom: 22%;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: var(--gold);

}



.sb-icon-fa {

  width: 15px;

  min-width: 15px;

  text-align: center;

  font-size: 0.9rem;

  opacity: 0.6;

  flex-shrink: 0;

  transition: opacity var(--t);

}

.sb-item:hover .sb-icon-fa,

.sb-item.active .sb-icon-fa {

  opacity: 1;

}

═════════════════════════════════════════════

  LABEL

  &

  BADGE

  ══════════════════════════════════════════════

  */

  .sb-label {

  flex: 1;

  overflow: hidden;

  text-overflow: ellipsis;

  transition:

    opacity var(--t),

    width var(--t);

}

.sb-badge {

  display: none;

  font-size: 0.46rem;

  font-weight: 600;

  padding: 2px 6px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.18);

  color: var(--white);

  transition: opacity var(--t);

}



.sb-chevron-icon {

  font-size: 0.58rem;

  flex-shrink: 0;

  transition:

    transform 0.25s ease,

    opacity 0.25s ease,

    width 0.25s ease;

}

/* Add this instead: */

details.acc-details[open] > summary .acc-chevron {

  transform: rotate(180deg);

}



details.acc-details > summary .acc-chevron {

  transition: transform 0.25s ease;

}

/* ══════════════════════════════════════════════

   SETTINGS SUB-MENU  (.sb-sub / .sb-sub-item)

══════════════════════════════════════════════ */

.sb-sub {

  overflow: hidden;

}

.sb-sub-item {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 7px 10px 7px 30px;

  border-radius: 6px;

  font-size: 0.72rem;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.62);

  text-decoration: none;

  white-space: nowrap;

  overflow: hidden;

  margin-bottom: 1px;

  position: relative;

  transition:

    background var(--t),

    color var(--t);

}

.sb-sub-item i {

  font-size: 0.7rem;

  width: 14px;

  min-width: 14px;

  text-align: center;

  opacity: 0.65;

  transition: opacity var(--t);

}

.sb-sub-item:hover {

  background: rgba(255, 255, 255, 0.09);

  color: var(--white);

  text-decoration: none;

}

.sb-sub-item:hover i {

  opacity: 1;

}



/* ── .active → current sub-page UI highlight only ── */

.sb-sub-item.active {

  background: rgba(255, 255, 255, 0.13);

  color: var(--white);

  font-weight: 600;

}



.sb-sub-item .active-item {

  background: rgba(255, 255, 255, 0.13);

  color: var(--white);

  font-weight: 600;

}

.sb-sub-item.active i {

  opacity: 1;

}

.sb-sub-item.active::before {

  content: '';

  position: absolute;

  left: 16px;

  top: 26%;

  bottom: 26%;

  width: 2px;

  border-radius: 2px;

  background: var(--gold);

}

/* ── Validation styles (same as adddoer.html) ── */

.field-input.is-error {

  border-color: #c0392b !important;

  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12) !important;

}



.field-input.is-valid {

  border-color: #1a7a3a !important;

  box-shadow: 0 0 0 2px rgba(26, 122, 58, 0.1) !important;

}



/* ══════════════════════════════════════════════

   USER BLOCK

══════════════════════════════════════════════ */

.sb-user {

  padding: 10px 12px;

  border-top: 1px solid var(--border);

  display: flex;

  align-items: center;

  gap: 8px;

  overflow: hidden;

  flex-shrink: 0;

  transition: padding var(--t);

}



.sb-avatar {

  width: 30px;

  height: 30px;

  min-width: 30px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  border: 1px solid rgba(255, 255, 255, 0.28);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.56rem;

  font-weight: 700;

  color: var(--white);

  flex-shrink: 0;

}

.sb-user-info {

  overflow: hidden;

  transition:

    opacity var(--t),

    width var(--t);

}

/* .sidebar.collapsed .sb-user-info {

  opacity: 0;

  width: 0;

  overflow: hidden;

  margin: 0;

} */

.sb-uname {

  font-size: 0.68rem;

  font-weight: 600;

  color: var(--white);

  white-space: nowrap;

}

.sb-urole {

  font-size: 0.52rem;

  color: rgba(255, 255, 255, 0.48);

  white-space: nowrap;

}



.scf-title {

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.38);

  padding: 2px 8px 6px;

  margin: 0;

}

.scf-item {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 7px 10px;

  border-radius: 6px;

  font-size: 0.7rem;

  color: rgba(255, 255, 255, 0.72);

  text-decoration: none;

  white-space: nowrap;

  position: relative;

  transition:

    background var(--t),

    color var(--t);

}

.scf-item:hover {

  background: rgba(255, 255, 255, 0.1);

  color: var(--white);

  text-decoration: none;

}

.scf-item.active {

  background: rgba(255, 255, 255, 0.15);

  color: var(--white);

  font-weight: 600;

}

.scf-item i {

  font-size: 0.72rem;

  width: 14px;

  text-align: center;

  opacity: 0.65;

  transition: opacity var(--t);

}

.scf-item:hover i,

.scf-item.active i {

  opacity: 1;

}



/* ══════════════════════════════════════════════

   MOBILE OVERLAY

══════════════════════════════════════════════ */

#sbOverlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  z-index: 199;

}

#sbOverlay.active {

  display: block;

}



@media (max-width: 768px) {

  .sidebar {

    position: fixed !important;

    left: 0;

    top: 0;

    height: 100vh;

    transform: translateX(-100%); /* ← uncomment this */

    transition: transform 0.2s ease;

    width: var(--sb-w) !important;

    min-width: var(--sb-w) !important;

    z-index: 9999 !important;

  }

  .sidebar.mobile-open {

    transform: translateX(0);

  }

  .app {

    display: block;

  }

  .main {

    width: 100%;

  }

}

.mw-30 {

  min-width: 30px;

  width: 30px;

}

.mw-50 {

  min-width: 50px;

  width: 50px;

}

.mw-60 {

  min-width: 60px;

  width: 60px;

}

.mw-70 {

  min-width: 70px;

  width: 70px;

}

.mw-80 {

  min-width: 80px;

  width: 80px;

}

.mw-90 {

  min-width: 90px;

  width: 90px;

}

.mw-100 {

  min-width: 100px;

  width: 100px;

}

.mw-110 {

  min-width: 110px;

  width: 110px;

}

.mw-120 {

  min-width: 120px;

  width: 120px;

}

.mw-150 {

  min-width: 150px;

  width: 150px;

}

/* ═══════════════════════════════════════════════════════════

   RATNALAYA JEWELLERS — track-table.css

   Enhanced Order Tracking Table

════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════

   WRAPPER

══════════════════════════════════════════ */

.track-wrap {

  background: var(--white);

  border-radius: 12px;

  border: 1px solid #e4d9cc;

  box-shadow: 0 2px 16px rgba(120, 80, 20, 0.08);

  /* height: calc(100vh - 170px);

  overflow-x: auto;

  overflow-y: auto; */

  position: relative;

}



/* ══════════════════════════════════════════

   PENDING / COMPLETE TOGGLE BAR

   Sits above the table, inside .track-wrap

══════════════════════════════════════════ */

.status-toggle-bar {

  display: flex;

  align-items: center;

  gap: 8px;

  /* background: wheat; */

  padding: 8px 7px;

  background: white;

  border-radius: 11px;

  margin-bottom: 5px;

}

.sidebar.collapsed .sb-item .sb-icon-fa {

  min-width: 26px;

}

/* ── Base pill ── */

.btn-status {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    height: 26px;

    padding: 0 12px;

    border-radius: 20px;

    border: 1.5px solid transparent;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.2s ease;

    background: #f3f4f6;

    color: #4b5563;

    border-color: #e5e7eb;

}



/* ── ALL — default blue active ── */

#btnAll.active {

    background: #1a56db;

    color: #fff;

    border-color: #1a56db;

    box-shadow: 0 3px 8px rgba(26,86,219,0.25);

}

#btnAll.active .badge {

    background: #fff !important;

    color: #1a56db !important;

}

#btnAll:hover:not(.active) {

    background: #e0e7ff;

    border-color: #1a56db;

    color: #1a56db;

}



/* ── COMPLETE — green ── */

#btnComplete {

    color: #145a2e;

    border-color: #4cae6e;

    background: #edf7f1;

}

#btnComplete:hover:not(.active) {

    background: #d0edda;

    border-color: #198754;

    color: #198754;

}

#btnComplete.active {

    background: #198754 !important;

    border-color: #198754 !important;

    color: #fff !important;

    box-shadow: 0 3px 8px rgba(25,135,84,0.28) !important;

}

#btnComplete.active .badge {

    background: #fff !important;

    color: #198754 !important;

}



/* ── PENDING — red ── */

#btnPending {

    color: #991b1b;

    border-color: #f87171;

    background: #fff5f5;

}

#btnPending:hover:not(.active) {

    background: #fee2e2;

    border-color: #dc2626;

    color: #dc2626;

}

#btnPending.active {

    background: #dc2626 !important;

    border-color: #dc2626 !important;

    color: #fff !important;

    box-shadow: 0 3px 8px rgba(220,38,38,0.28) !important;

}

#btnPending.active .badge {

    background: #fff !important;

    color: #dc2626 !important;

}

/* Small count label shown after buttons */

.filter-count {

  font-size: 10px;

  color: #9a8a7a;

  margin-left: 4px;

  font-style: italic;

}



/* ══════════════════════════════════════════

   TABLE SCROLL WRAPPER

══════════════════════════════════════════ */

.track-tbl-wrap {

  height: calc(100vh - 220px);

  overflow-x: auto;

  overflow-y: auto;

  position: relative;

  width: 100%;

  scrollbar-width: thin;

    scrollbar-color: var(--gold-dk) transparent;

}

.grp-s1,

.grp-s2,

.grp-s3,

.grp-s4,

.grp-s5 {

  position: sticky !important;

  top: 0 !important;

  z-index: 10 !important;

}

[class^='inp-s'] {

  position: sticky !important;

}



/* stacking offsets */

.inp-s1 {

  top: 23px !important;

  z-index: 42 !important;

}

.inp-s2 {

  top: 23px !important;

  z-index: 41 !important;

}

.inp-s3 {

  top: 23px !important;

  z-index: 40 !important;

}

.inp-s4 {

  top: 23px !important;

  z-index: 39 !important;

}

.inp-s5 {

  top: 23px !important;

  z-index: 38 !important;

}

.track-tbl-wrap::-webkit-scrollbar {

  height: 6px;

}

.sub {

  position: sticky;

  top: 67px;

  z-index: 45;

}

.track-tbl-wrap::-webkit-scrollbar-track {

  background: #f5efe6;

}

.track-tbl-wrap::-webkit-scrollbar-thumb {

  background: #c8a96e;

  border-radius: 10px;

}



.track-tbl {

  border-collapse: separate;

  border-spacing: 0;

  width: max-content;

  min-width: 100%;

}

/* ═══════════════════════════════════════════

   RATNALAYA — UNIVERSAL SCROLLBAR

   All scrollable areas: 3px, gold thumb,

   darker gold on hover

   ═══════════════════════════════════════════ */



.content,

.tbl-card,

.tbl-wrap,

.tbl-scroll-wrap,

.tbl-inner,

.track-tbl-wrap,

.track-wrap,

.sys-tbl-table,

.foc-body,

.sb-nav,

.tbl-scroll-managed {

  scrollbar-width: thin;

  scrollbar-color: #c8975a transparent;

}



.content::-webkit-scrollbar,

.tbl-card::-webkit-scrollbar,

.tbl-wrap::-webkit-scrollbar,

.tbl-scroll-wrap::-webkit-scrollbar,

.tbl-inner::-webkit-scrollbar,

.track-tbl-wrap::-webkit-scrollbar,

.track-wrap::-webkit-scrollbar,

.sys-tbl-table::-webkit-scrollbar,

.foc-body::-webkit-scrollbar,

.sb-nav::-webkit-scrollbar,

.tbl-scroll-managed::-webkit-scrollbar {

  width: 3px;

  height: 3px;

}



.content::-webkit-scrollbar-track,

.tbl-card::-webkit-scrollbar-track,

.tbl-wrap::-webkit-scrollbar-track,

.tbl-scroll-wrap::-webkit-scrollbar-track,

.tbl-inner::-webkit-scrollbar-track,

.track-tbl-wrap::-webkit-scrollbar-track,

.track-wrap::-webkit-scrollbar-track,

.sys-tbl-table::-webkit-scrollbar-track,

.foc-body::-webkit-scrollbar-track,

.sb-nav::-webkit-scrollbar-track,

.tbl-scroll-managed::-webkit-scrollbar-track {

  background: transparent;

}



.content::-webkit-scrollbar-thumb,

.tbl-card::-webkit-scrollbar-thumb,

.tbl-wrap::-webkit-scrollbar-thumb,

.tbl-scroll-wrap::-webkit-scrollbar-thumb,

.tbl-inner::-webkit-scrollbar-thumb,

.track-tbl-wrap::-webkit-scrollbar-thumb,

.track-wrap::-webkit-scrollbar-thumb,

.sys-tbl-table::-webkit-scrollbar-thumb,

.foc-body::-webkit-scrollbar-thumb,

.sb-nav::-webkit-scrollbar-thumb,

.tbl-scroll-managed::-webkit-scrollbar-thumb {

  background: #c8975a;

  border-radius: 4px;

}



.content::-webkit-scrollbar-thumb:hover,

.tbl-card::-webkit-scrollbar-thumb:hover,

.tbl-wrap::-webkit-scrollbar-thumb:hover,

.tbl-scroll-wrap::-webkit-scrollbar-thumb:hover,

.tbl-inner::-webkit-scrollbar-thumb:hover,

.track-tbl-wrap::-webkit-scrollbar-thumb:hover,

.track-wrap::-webkit-scrollbar-thumb:hover,

.sys-tbl-table::-webkit-scrollbar-thumb:hover,

.foc-body::-webkit-scrollbar-thumb:hover,

.sb-nav::-webkit-scrollbar-thumb:hover,

.tbl-scroll-managed::-webkit-scrollbar-thumb:hover {

  background: #8e5a1e;

}

/* ══════════════════════════════════════════

   BORDERS

══════════════════════════════════════════ */

.track-tbl th,

.track-tbl td {

  border-bottom: 1px solid #ecddd0;

}

.track-tbl tbody td:not(.stk),

.track-tbl thead th:not(.stk) {

  box-shadow: inset -1px 0 0 0 #ecddd0;

}



/* ══════════════════════════════════════════

   GROUP HEADER ROW 1

══════════════════════════════════════════ */

.track-tbl thead tr.grp th {

  padding: 2px 5px;

  font-size: 9.5px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #fff;

  text-align: center;

  white-space: nowrap;

  position: sticky;

  top: 0;

  z-index: 6;

}



/* Fixed left columns in group row */

.track-tbl thead tr.grp th.fix-hd {

  background: #f5ede0;

  color: #a09080;

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-align: center;

  vertical-align: middle;

  z-index: 127 !important;

  box-shadow: inset -1px 0 0 #ecddd0;

}



/* Step color bars */

.grp-s1 {

  background: linear-gradient(135deg, #8a1a1a 0%, #7a1a1a 100%);

}

.grp-s2 {

  background: linear-gradient(135deg, #9a7020 0%, #8a6520 100%);

}

.grp-s3 {

  background: linear-gradient(135deg, #1a7a3a 0%, #1a6b3a 100%);

}

.grp-s4 {

  background: linear-gradient(135deg, #1a4a7b 0%, #1a3f6b 100%);

}

.grp-s5 {

  background: linear-gradient(135deg, #6a5510 0%, #5a4a10 100%);

}



/* ══════════════════════════════════════════

   SUB HEADER ROW

══════════════════════════════════════════ */

.track-tbl thead tr.sub th {

  background: #f5ede0;

  padding: 4px 4px;

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  border-bottom: 2px solid #ddd0c0;

  text-align: center;

  /* position: relative; */

  position: sticky;

  top: 0px; /* grp (26px) + inp-row (~64px) */

  z-index: 6;

}



.track-tbl thead tr.sub th.sub-s1 {

  color: #8a1a1a;

}

.track-tbl thead tr.sub th.sub-s2 {

  color: #9a7020;

}

.track-tbl thead tr.sub th.sub-s3 {

  color: #1a7a3a;

}

.track-tbl thead tr.sub th.sub-s4 {

  color: #1a4a7b;

}

.track-tbl thead tr.sub th.sub-s5 {

  color: #6a5510;

}



.vendor-link {

  cursor: pointer;

}



/* ══════════════════════════════════════════

   BODY CELLS

══════════════════════════════════════════ */

.track-tbl tbody td {

  padding: 3px 4px;

  font-size: 10.5px;

  color: #1a1208;

  vertical-align: middle;

  text-align: center;

  background: #ffffff;

  transition: background 0.15s ease;

  white-space: nowrap;

}

.track-tbl tbody tr:nth-child(even) td {

  background: #fdf8f2;

}

.track-tbl tbody tr:hover td {

  background: #f2e8d8 !important;

}



/* ══════════════════════════════════════════

   CELL TYPE STYLES

══════════════════════════════════════════ */

.td-ordr-no {

  font-size: 11px;

  color: #9a7020;

  text-align: left;

  letter-spacing: 0.03em;

}

.td-party-name {

  font-weight: 600;

  font-size: 12px;

  color: #1a1208;

  text-align: left;

}

.td-party-no {

  font-size: 10.5px;

  color: #8a7a6a;

  text-align: left;

}

.td-prod {

  font-weight: 500;

  font-size: 11.5px;

  color: #7a1a1a;

  text-align: left;

}

.td-exp-date {

  font-size: 11px;

  color: #1a3f6b;

  text-align: center;

}

.tag-no {

  font-size: 11px;

  color: #9a7020;

}

.text-muted-cell {

  color: #c0b0a0;

  font-style: italic;

  font-size: 11px;

}



/* ══════════════════════════════════════════

   STATUS BADGES

══════════════════════════════════════════ */

.st-done {

  color: #1a7a3a;

}

.st-pend {

  color: #be3220;

}



.tbl-foot-count {

  font-size: 11px;

  color: #9a8a7a;

}

.tbl-foot-count b {

  color: #1a1208;

  font-weight: 700;

}



/* ══════════════════════════════════════════

   INPUT ROW

══════════════════════════════════════════ */

.track-tbl thead tr.inp-row th {

  padding: 5px 6px 6px;

  background: #fdf5ea;

  border-bottom: 2px solid #ddd0c0;

  vertical-align: middle;

  position: sticky;

  top: 0px; /* height of the .grp row */

  z-index: 6;

}

.track-tbl thead tr.inp-row th.stk {

  z-index: 5;

}

.track-tbl thead tr.inp-row th.inp-s2 {

  border-top: 2px solid rgba(154, 112, 32, 0.25);

}

.track-tbl thead tr.inp-row th.inp-s3 {

  border-top: 2px solid rgba(26, 122, 58, 0.25);

}

.track-tbl thead tr.inp-row th.inp-s4 {

  border-top: 2px solid rgba(26, 74, 123, 0.25);

}

.track-tbl thead tr.inp-row th.inp-s5 {

  border-top: 2px solid rgba(106, 85, 16, 0.25);

}



/* Horizontal fields group */

.inp-group {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 10px;

  flex-wrap: nowrap;

}



.inp-field {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2px;

}

.inp-field label {

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin: 0;

  line-height: 1;

  white-space: nowrap;

}

.inp-field input,

.inp-field textarea {

  height: 22px;

  padding: 0 6px;

  font-size: 9.5px;

  border: 1px solid #ddd0c0;

  border-radius: 4px;

  background: #fff;

  color: #2a1a08;

  outline: none;

  transition: border-color 0.15s;

  white-space: nowrap;

  resize: none;

}

.inp-field textarea {

  height: 34px;

  padding: 3px 6px;

  line-height: 1.3;

  resize: none;

}



/* Per-step label colors */

.inp-s1 .inp-field label {

  color: #8a1a1a;

}

.inp-s2 .inp-field label {

  color: #9a7020;

}

.inp-s3 .inp-field label {

  color: #1a7a3a;

}

.inp-s4 .inp-field label {

  color: #1a4a7b;

}

.inp-s5 .inp-field label {

  color: #6a5510;

}



/* Per-step focus colors */

.inp-s1 .inp-field input:focus,

.inp-s1 .inp-field textarea:focus {

  border-color: #8a1a1a;

  box-shadow: 0 0 0 2px rgba(138, 26, 26, 0.1);

}

.inp-s2 .inp-field input:focus,

.inp-s2 .inp-field textarea:focus {

  border-color: #9a7020;

  box-shadow: 0 0 0 2px rgba(154, 112, 32, 0.1);

}

.inp-s3 .inp-field input:focus,

.inp-s3 .inp-field textarea:focus {

  border-color: #1a7a3a;

  box-shadow: 0 0 0 2px rgba(26, 122, 58, 0.1);

}

.inp-s4 .inp-field input:focus,

.inp-s4 .inp-field textarea:focus {

  border-color: #1a4a7b;

  box-shadow: 0 0 0 2px rgba(26, 74, 123, 0.1);

}

.inp-s5 .inp-field input:focus,

.inp-s5 .inp-field textarea:focus {

  border-color: #6a5510;

  box-shadow: 0 0 0 2px rgba(106, 85, 16, 0.1);

}



/* ══════════════════════════════════════════

   PENDING COUNT BADGES in step headers

══════════════════════════════════════════ */

.step-badge {

  /* display: inline-flex;

  align-items: center; */

  gap: 6px;

  /* margin-left: 8px;

  vertical-align: middle; */

}

.sb-pend {

  background: rgba(255, 200, 100, 0.25);

  color: #753636;

  border: 1px solid rgba(255, 200, 100, 0.4);

  padding: 1px 7px;

  border-radius: 8px;

  font-size: 8px;

  font-weight: 700;

  white-space: nowrap;

}



/* ══════════════════════════════════════════

   FLATPICKR — RATNALAYA GOLD THEME

══════════════════════════════════════════ */

.ratnalaya-cal {

  font-family: inherit;

  font-size: 10px !important;

  border: 1px solid #ddc99a;

  border-radius: 10px;

  box-shadow: 0 6px 20px rgba(120, 80, 20, 0.13);

  overflow: hidden;

}

.ratnalaya-cal .flatpickr-months {

  background: #c68e47;

  padding: 4px 0;

}

.ratnalaya-cal .flatpickr-month {

  color: #fff !important;

  height: 28px;

}

.flatpickr-months .flatpickr-prev-month svg,

.flatpickr-months .flatpickr-next-month svg {

  width: 11px !important;

  height: 11px !important;

}

.ratnalaya-cal .flatpickr-prev-month,

.ratnalaya-cal .flatpickr-next-month {

  color: #fff !important;

  fill: #fff !important;

  padding: 4px 8px;

}

.ratnalaya-cal .flatpickr-prev-month:hover svg,

.ratnalaya-cal .flatpickr-next-month:hover svg {

  fill: #f5dfa0 !important;

}

.ratnalaya-cal .flatpickr-current-month {

  font-size: 11px !important;

  padding-top: 5px;

}

.ratnalaya-cal .flatpickr-current-month .cur-month,

.ratnalaya-cal .flatpickr-current-month input.cur-year {

  color: #fff !important;

  font-weight: 700;

  font-size: 11px !important;background: transparent !important;

}

.ratnalaya-cal .flatpickr-current-month .arrowUp,

.ratnalaya-cal .flatpickr-current-month .arrowDown {

  border-color: #f5dfa0 transparent transparent transparent;

}

.ratnalaya-cal .flatpickr-weekdays {

  background: #f5ede0;

  padding: 3px 0;

}

.ratnalaya-cal span.flatpickr-weekday {

  color: #c68e47 !important;

  font-weight: 700;

  font-size: 9px !important;

  text-transform: uppercase;

}

.ratnalaya-cal .flatpickr-days {

  border: none;

}

.ratnalaya-cal .dayContainer {

  padding: 2px 4px 4px;

}

.ratnalaya-cal .flatpickr-day {

  font-size: 10px !important;

  border-radius: 5px;

  color: #2a1a08;

  height: 26px;

  line-height: 26px;

  max-width: 32px;

  border: none;

}

.ratnalaya-cal .flatpickr-day:hover {

  background: #f5ede0;

  border-color: transparent;

  color: #c68e47;

}

.ratnalaya-cal .flatpickr-day.selected,

.ratnalaya-cal .flatpickr-day.selected:hover {

  background: #9a7020 !important;

  border-color: #9a7020 !important;

  color: #fff !important;

  font-weight: 700;

}

.ratnalaya-cal .flatpickr-day.today {

  border: 1.5px solid #c8a040 !important;

  color: #c68e47 !important;

  font-weight: 700;

  background: transparent;

}

.ratnalaya-cal .flatpickr-day.today.selected {

  color: #fff !important;

  border-color: #9a7020 !important;

}

.ratnalaya-cal .flatpickr-day.prevMonthDay,

.ratnalaya-cal .flatpickr-day.nextMonthDay {

  color: #c8b89a !important;

}



.bootstrap-select.form-select {

  padding: 0px !important;

  width: 100% !important;

}

.bootstrap-select .bs-actionsbox .btn-group {

  display: flex;

  gap: 5px;

}

.bootstrap-select .bs-actionsbox .actions-btn {

  flex: 1;

  height: 24px;

  font-size: 11px !important;

  font-weight: 500;

  border-radius: 6px !important;

  padding: 0 !important;

  transition:

    background 0.15s,

    color 0.15s,

    border-color 0.15s;

}

/* Select All — gold tint */

.bootstrap-select .bs-actionsbox .bs-select-all {

  background: #fdf3d7 !important;

  color: #7a5c0a !important;

  border: 0.5px solid #e8d48a !important;

}

.bootstrap-select .bs-actionsbox .bs-select-all:hover {

  background: #b8972a !important;

  color: #fff !important;

  border-color: #b8972a !important;

}

/* Deselect All — neutral */

.bootstrap-select .bs-actionsbox .bs-deselect-all {

  background: var(--color-background-secondary) !important;

  color: var(--color-text-secondary) !important;

  border: 0.5px solid var(--color-border-secondary) !important;

}

.bootstrap-select .bs-actionsbox .bs-deselect-all:hover {

  background: var(--color-background-tertiary) !important;

  color: var(--color-text-primary) !important;

}

.sidebar.collapsed .sb-label,

.sidebar.collapsed .sb-section-label,

.sidebar.collapsed .sb-badge {

  display: none;

}

/* MOBILE DEFAULT */

@media (max-width: 768px) {

  .sidebar {

    position: fixed;

    left: 0;

    top: 0;

    height: 100%;

    width: 260px;

    transform: translateX(-100%);

    transition: 0.3s ease;

    z-index: 9999;

  }



  .sidebar.mobile-open {

    transform: translateX(0);

  }



  .sidebar-overlay.active-item {

    display: block;

  }



  .sidebar-overlay {

    display: none;

    /* position: fixed; */

    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    position: fixed;

    z-index: 9999 !important;

  }



  /* MOBILE CLOSE BUTTON */

  .mobile-sidebar-toggle {

    display: flex;

    position: absolute;

    top: 10px;

    right: 10px;

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 8px;

    background: #fff;

    align-items: center;

    justify-content: center;

    z-index: 10000;

  }

}



/* hide mobile button on desktop */

.mobile-sidebar-toggle {

  display: none;

}

/* ── Dropdown toggle button ── */

.bootstrap-select > .dropdown-toggle {

  height: 32px !important;

  padding: 8px 8px !important;

  font-size: 11px !important;

  border-radius: 6px !important;

  background: #fff !important;

  /* border: 1px solid var(--border); */

  color: #888 !important;

  box-shadow: none !important;

}

.bootstrap-select > .dropdown-toggle:focus,

.bootstrap-select.show > .dropdown-toggle {

  border-color: #b8972a !important;

  box-shadow: 0 0 0 2px rgba(184, 151, 42, 0.13) !important;

}



/* ── Search box ── */

.bootstrap-select .bs-searchbox input {

  height: 28px !important;

  font-size: 11px !important;

  border-radius: 6px !important;

}

button.actions-btn.bs-deselect-all.btn.btn-light {

  color: #7a5c0a !important;

  border: 0.5px solid #e8d48a !important;

}

.bootstrap-select .bs-searchbox input:focus {

  border-color: #b8972a !important;

  box-shadow: 0 0 0 2px rgba(184, 151, 42, 0.1) !important;

}

.bs-searchbox + .bs-actionsbox {

  padding: 0 3px 4px !important;

}

/* ── Options ── */

.bootstrap-select .dropdown-menu li a {

  font-size: 11px !important;

  padding: 2px 6px !important;

  border-bottom: 1px solid #f1f1f1;

}

.bootstrap-select .dropdown-menu li a:hover,

.bootstrap-select .dropdown-menu li.selected a {

  background-color: #8e1d1d;

  color: #fff;

}

/* ══════════════════════════════════════

   COLLAPSED SIDEBAR — PERFECT FLYOUT

══════════════════════════════════════ */

/* .sidebar {

      position: relative !important;

      z-index: 1000 !important;

    } */



/* Parent must be relative */

.sidebar.collapsed details.acc-details {

  position: relative !important;

}







/* SHOW */

/* .sidebar.collapsed details.acc-details[open] .sb-sub {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;



} */



/* SHOW (HOVER) */

/* .sidebar.collapsed details.acc-details:hover .sb-sub {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;



} */



/* 🔥 ALIGN VERTICALLY WITH ICON */

/* .sidebar.collapsed details.acc-details:hover .sb-sub {

      top: calc(var(--sb-top, 100px)) !important;

    } */



/* ITEM STYLE */

.sidebar.collapsed .sb-sub-item {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  color: #fff !important;

  padding: 5px 8px !important;

  font-size: 11px;

}



.sidebar.collapsed .sb-sub-item:hover {

  background: rgba(255, 255, 255, 0.18) !important;

}



/* HIDE CHEVRON */

.sidebar.collapsed .acc-chevron {

  display: none !important;

}

.sidebar.collapsed .sb-sub {

  display: none; /* JS overrides with fixed positioning */

}



details.acc-details[open] > summary .acc-chevron {

  transform: rotate(180deg);

}



details.acc-details > summary .acc-chevron {

  transition: transform 0.25s ease;

}

/* ── Table card header bar ── */

.tbl-card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0px 12px 0px;

  border-bottom: 1px solid #f0e2cc;

}



.tbl-card-title {

  font-size: 0.75rem;

  font-weight: 700;

  color: #8e1d1d;

  letter-spacing: 0.06em;

  text-transform: uppercase;

}



.filter-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: #fdf3e5;

  border: 1px solid #e8d5b0;

  border-radius: 6px;

  padding: 5px 10px;

  cursor: pointer;

  font-size: 0.65rem;

  font-weight: 700;

  color: #8e1d1d;

  transition: background 0.15s;

}



.filter-btn:hover {

  background: #f3e0c0;

} /* Select2 error/valid — wrapper class se */

/* ── SELECTPICKER: ERROR ── */

.bootstrap-select.is-error > .dropdown-toggle,

.input-wrap.is-error .bootstrap-select > .dropdown-toggle {

  border-color: #c0392b !important;

  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;

}



/* ── SELECTPICKER: VALID / HAS SELECTION ── */

.bootstrap-select.is-valid > .dropdown-toggle,

.bootstrap-select.has-selection > .dropdown-toggle,

.input-wrap.is-valid .bootstrap-select > .dropdown-toggle {

  border-color: #1a7a3a !important;

  box-shadow: 0 0 0 3px rgba(26, 122, 58, 0.1) !important;

}



/* ── SELECT2: ERROR / VALID ── */

.input-wrap.is-error .select2-container .select2-selection {

  border-color: #c0392b !important;

}

.input-wrap.is-valid .select2-container .select2-selection {

  border-color: #1a7a3a !important;

}



/* ── FLATPICKR: ERROR / VALID ── */

.input-wrap.is-error .flatpickr-input {

  border-color: #c0392b !important;

}

.input-wrap.is-valid .flatpickr-input {

  border-color: #1a7a3a !important;

} /* ── OFFCANVAS FILTER PANEL ── */

.filter-offcanvas {

  position: fixed;

  top: 0;

  right: -360px;

  width: 340px;

  max-width: 95vw;

  height: 100vh;

  background: #fff;

  z-index: 9999;

  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.18);

  display: flex;

  flex-direction: column;

  transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);

}

.filter-offcanvas.open {

  right: 0;

}

.filter-offcanvas-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  z-index: 9998;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s;

}

.filter-offcanvas-backdrop.show {

  opacity: 1;

  pointer-events: auto;

}

.foc-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 18px;

  border-bottom: 2px solid #f0e2cc;

  background: #fff;

  flex-shrink: 0;

}

.foc-title {

  font-size: 0.82rem;

  font-weight: 700;

  color: #8e1d1d;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  display: flex;

  align-items: center;

  gap: 8px;

}

.foc-title i {

  font-size: 14px;

}

.foc-close {

  width: 30px;

  height: 30px;

  border-radius: 7px;

  border: 1.5px solid #e8d5b0;

  background: #fdf3e5;

  color: #8e1d1d;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 13px;

  transition: background 0.15s;

}

.foc-close:hover {

  background: #f3e0c0;

}

.foc-body {

  flex: 1;

  overflow-y: auto;

  padding: 16px 18px;

}

.foc-body::-webkit-scrollbar {

  width: 3px;

}

.foc-body::-webkit-scrollbar-thumb {

  background: #e2cca3;

  border-radius: 4px;

}

.foc-section {

  margin-bottom: 16px;

}

.foc-section-label {

  font-size: 0.54rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #9a8070;

  margin-bottom: 6px;

}

.foc-input {

  width: 100%;

  padding: 7px 10px;

  border: 1.5px solid #e8d5b0;

  border-radius: 7px;

  font-family: inherit;

  font-size: 0.75rem;

  color: #1a1a1a;

  background: #fdf8f2;

  outline: none;

  transition: border-color 0.2s;

}

.foc-input:focus {

  border-color: #8e1d1d;

  box-shadow: 0 0 0 2px rgba(142, 29, 29, 0.1);

}



.foc-date-row .foc-input {

  flex: 1;

}

.foc-footer {

  padding: 12px 18px;

  border-top: 1px solid #f0e2cc;

  display: flex;

  gap: 8px;

  flex-shrink: 0;

}

.foc-btn-clear {

  flex: 1;

  padding: 8px;

  border-radius: 7px;

  border: 1.5px solid #e8d5b0;

  background: #fff;

  font-family: inherit;

  font-size: 0.68rem;

  font-weight: 600;

  color: #9a8070;

  cursor: pointer;

  transition: all 0.15s;

}

.foc-btn-clear:hover {

  border-color: #8e1d1d;

  color: #8e1d1d;

}

.foc-btn-apply {

  flex: 2;

  padding: 8px;

  border-radius: 7px;

  border: none;

  background: linear-gradient(135deg, #df9a10, #b85a15, #8e1d1d);

  font-family: inherit;

  font-size: 0.68rem;

  font-weight: 700;

  color: #fff;

  cursor: pointer;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  transition: opacity 0.15s;

}

.foc-btn-apply:hover {

  opacity: 0.9;

}

.filter-active-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #e74c3c;

  border: 2px solid #fff;

  position: absolute;

  top: 4px;

  right: 4px;

  display: none;

}

.filter-active-dot.show {

  display: block;

}

.filter-btn {

  position: relative;

} /* Mobile: topbar always on top of sidebar */

@media (max-width: 768px) {

  .topbar {

    position: relative;

    z-index: 900 !important;

  }



  .sidebar {

    top: var(--hdr-h) !important; /* sidebar starts BELOW topbar */

    height: calc(100vh - var(--hdr-h)) !important;

    z-index: 10000 !important;

  }



  .sidebar-overlay,

  #sbOverlay {

    top: var(--hdr-h) !important;

    height: calc(100vh - var(--hdr-h)) !important;

    z-index: 9998 !important;

  }

} /* ── LOGIN — hide left panel on mobile ── */

@media (max-width: 767px) {

  .panel-left {

    display: none !important;

  }



  .panel-right {

    min-height: 100vh;

    padding: 24px 16px;

    background: var(--cream);

  }



  /* Full width form card on mobile */

  #page .row {

    height: 100vh;

  }



  .col-md-8.panel-right {

    width: 100% !important;

    flex: 0 0 100% !important;

    max-width: 100% !important;

  }



  .login-form-card {

    padding: 24px 20px 20px;

    border-radius: 12px;

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

  }

} /* ── TOPBAR search — hide on mobile ── */

@media (max-width: 768px) {

  /* Hide search from topbar on mobile */

  .topbar .tb-search {

    display: none !important;

  }



  /* Hide page title text on very small screens to save space */

  .tb-page {

    font-size: 0.72rem !important;

  }



  /* Make topbar tighter on mobile */

  .topbar {

    padding: 0 10px !important;

  }



  /* Hide breadcrumb on mobile */

  .breadcrumb {

    display: none !important;

  }



  /* Show search INSIDE the table card header instead */

  .tbl-card-header {

    flex-wrap: wrap;

    gap: 8px;

    padding: 8px 12px !important;

  }



  .tbl-card-header .tb-search {

    display: flex !important; /* show it here instead */

    width: 100% !important;

    min-width: unset !important;

    margin: 0 !important;

    order: 3;

  }



  .tbl-card-header .d-flex {

    /* flex-wrap: wrap; */

    width: 100%;

  }

}

@media (max-width: 768px) {

  .app {

    display: flex !important;

    flex-direction: column !important;

  }



  .main {

    width: 100% !important;

    overflow-x: hidden !important;

  }



  .content {

    padding: 8px !important;

  }



  /* Make table card full width */

  .tbl-card {

    margin-top: 8px !important;

    border-radius: 8px !important;

  }

}

/* Button bar at bottom of Flatpickr popup */

.ratnalaya-cal .fp-btn-bar {

  display: flex;

  gap: 6px;

  padding: 6px 8px 10px;

  border-top: 1px solid #ecddd0;

}

.ratnalaya-cal .fp-btn {

  flex: 1;

  font-size: 11px;

  font-weight: 600;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  letter-spacing: 0.03em;

}

.ratnalaya-cal .fp-btn-today {

  background: #c68e47;

  color: #fff;

}

.ratnalaya-cal .fp-btn-today:hover {

  background: #8b5230;

}

.ratnalaya-cal .fp-btn-clear {

  background: #f5ede0;

  color: #c68e47;

  border: 1px solid #ecddd0;

}

.ratnalaya-cal .fp-btn-clear:hover {

  background: #ecddd0;

} /* Force daterangepicker inside offcanvas */

#filterOffcanvas {

  overflow: visible !important;

  position: fixed !important;

}



#filterOffcanvas .daterangepicker {

  position: absolute !important;

  z-index: 99999 !important;

  left: 0 !important;

  right: auto !important;

  width: 100% !important;

  max-width: 320px;

}



#filterOffcanvas .foc-body {

  overflow: visible !important;

}

/* ══════════════════════════════════════════

   DATERANGEPICKER — RATNALAYA THEME

   (matches single flatpickr calendar)

══════════════════════════════════════════ */



.daterangepicker {

  font-family: 'Poppins', sans-serif !important;

  border: 1px solid #ddc99a !important;

  border-radius: 10px !important;

  box-shadow: 0 6px 20px rgba(120, 80, 20, 0.15) !important;

  background: #fff !important;

  padding: 0 !important;

  overflow: hidden !important;

}



/* ── Arrow tip ── */

.daterangepicker::before {

  border-bottom-color: #ddc99a !important;

}

.daterangepicker::after {

  border-bottom-color: #fff !important;

}



/* ── Month header — dark brown ── */

.daterangepicker .drp-calendar .calendar-table thead tr:first-child th {

  color: #fff !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  padding: 4px 4px !important;

  border: none !important;

}



/* Prev / Next arrows */

.daterangepicker .prev span,

.daterangepicker .next span {

  border-color: #fff !important;

}

.daterangepicker .prev,

.daterangepicker .next {

  background: #c68e47 !important;

  color: #fff !important;

}

.daterangepicker .prev:hover,

.daterangepicker .next:hover {

  background: #9a6520 !important;

}



/* Month + year selects inside header */

.daterangepicker select.monthselect,

.daterangepicker select.yearselect {

  border-radius: 4px !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  padding: 2px 4px !important;

}



/* ── Weekday row — cream background ── */

.daterangepicker .drp-calendar .calendar-table thead tr:last-child th {

  background: #fdf5e8 !important;

  color: #c68e47 !important;

  font-size: 9px !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.08em !important;

  padding: 4px 0 !important;

  border: none !important;

}



/* ── Calendar table ── */

.daterangepicker .calendar-table {

  border: none !important;

  background: #fff !important;

  padding: 4px !important;

}

.daterangepicker .calendar-table table {

  border-spacing: 1px !important;

}



/* ── Day cells ── */

.daterangepicker td.available {

  color: #5a3a10 !important;

  font-size: 11px !important;

  border-radius: 5px !important;

  border: none !important;

  font-family: 'Poppins', sans-serif !important;

  height: 26px !important;

  line-height: 26px !important;

  width: 26px !important;

}



.daterangepicker td.available:hover {

  background: #f5ede0 !important;

  color: #c68e47 !important;

  border-radius: 5px !important;

}



/* Today */

.daterangepicker td.today,

.daterangepicker td.today.available {

  font-weight: 700 !important;

  color: #c68e47 !important;

  border: 1.5px solid #c8a040 !important;

  border-radius: 5px !important;

  background: transparent !important;

}



/* Selected start / end */

.daterangepicker td.active,

.daterangepicker td.active:hover,

.daterangepicker td.start-date,

.daterangepicker td.end-date {

  background: #c68e47 !important;

  border-color: #c68e47 !important;

  color: #fff !important;

  border-radius: 5px !important;

  font-weight: 700 !important;

}



/* In-range highlight */

.daterangepicker td.in-range {

  background: #f5e6cc !important;

  color: #5a3010 !important;

  border-radius: 0 !important;

  border: none !important;

}

.daterangepicker td.start-date.in-range {

  border-radius: 5px 0 0 5px !important;

}

.daterangepicker td.end-date.in-range {

  border-radius: 0 5px 5px 0 !important;

}

.daterangepicker td.start-date.end-date {

  border-radius: 5px !important;

}



/* Off / other month */

.daterangepicker td.off,

.daterangepicker td.off.in-range,

.daterangepicker td.disabled {

  color: #ddc9a0 !important;

  background: transparent !important;

}



/* ── Ranges panel (left side) ── */

.daterangepicker .ranges li {

  font-size: 11px !important;

  font-weight: 500 !important;

  color: #5a3a10 !important;

  padding: 5px 12px !important;

  border-radius: 5px !important;

  margin: 2px 4px !important;

  cursor: pointer !important;

  transition: background 0.15s !important;

  font-family: 'Poppins', sans-serif !important;

}

.daterangepicker .ranges li:hover {

  background: #f5ede0 !important;

  color: #c68e47 !important;

}

.daterangepicker .ranges li.active {

  background: #c68e47 !important;

  color: #fff !important;

  font-weight: 700 !important;

}



/* ── Footer buttons — Today & Clear style ── */

.daterangepicker .drp-buttons {

  border-top: 1px solid #ecddd0 !important;

  padding: 6px 8px 8px !important;

  background: #fff !important;

  display: flex !important;

  gap: 6px !important;

  justify-content: stretch !important;

}



.daterangepicker .drp-buttons .btn {

  flex: 1 !important;

  font-family: 'Poppins', sans-serif !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  border-radius: 4px !important;

  padding: 5px 0 !important;

  text-align: center !important;

  cursor: pointer !important;

  letter-spacing: 0.03em !important;

}



/* Cancel = Clear button — cream style */

.daterangepicker .drp-buttons .cancelBtn {

  background: #f5ede0 !important;

  color: #c68e47 !important;

  border: 1px solid #ecddd0 !important;

  order: 2 !important;

}

.daterangepicker .drp-buttons .cancelBtn:hover {

  background: #ecddd0 !important;

}



/* Apply button — dark brown */

.daterangepicker .drp-buttons .applyBtn {

  background: #c68e47 !important;

  color: #fff !important;

  border: none !important;

  order: 1 !important;

}

.daterangepicker .drp-buttons .applyBtn:hover {

  background: #9a6520 !important;

}



/* Selected range text */

.daterangepicker .drp-selected {

  font-size: 10px !important;

  color: #9a8070 !important;

  font-family: 'Poppins', sans-serif !important;

  display: none !important;

}