/* @import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/versions/bulma-no-dark-mode.min.css"; */
@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";

.icon {
  font-size: larger;
}

.menu-list li a {
  padding: 9px;
  margin: 10px 0;
  font-family: 'Times New Roman', Times, serif;
}

table thead tr th,
table tbody tr td {
  text-align: center !important;
  white-space: nowrap;
}

.table-container-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 1rem;
}

/* Force the table to be wider than the container to allow scroll */
.table-container-x .table {
  display: table !important;
  min-width: 1200px;
  /* Adjust if you need more */
  width: max-content;
  /* Allows table to expand based on content */
  border-collapse: collapse;
}


/* 3. Styling table headers */
.table thead th {
  background-color: #f8f8f8;
  font-weight: 600;
  font-size: 0.95rem;
}

/* 4. Remove row bg color & apply hover only */
.table tbody tr {
  background-color: transparent !important;
}

.table tbody tr:hover {
  background-color: #f0f8ff !important;
}

/* 5. Table cell padding and bottom border */
.table td,
.table th {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  font-size: 0.9rem;
  border-bottom: 1px solid #ddd;
}

/* 6. Ensure action buttons stay on one row */
.contract-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
}

/* 7. Button tweaks */
.button.is-small {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}

*/

/* --- NAVBAR / TOPBAR --- */
nav.navbar {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
 
}

/* Use a specific selector to override other CSS frameworks if needed */
nav.navbar .topbar {
  display: flex !important;
  /* ensure flex even if other CSS tries to change it */
  align-items: center;
  width: 100%;
 
  /* center area width that matches your screenshot */

  /* center the topbar container horizontally */
  padding: 12px 18px;
  box-sizing: border-box;
  gap: 12px;
  justify-content: space-between;
  
}

/* LEFT group - keep items inline and tight */
nav.navbar .topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  /* let left group take only the space it needs; logo is pushed by margin-inline-start on right */
}

/* Logo wrapper is pushed to the visual end (works in RTL & LTR) */
/* nav.navbar .topbar__right {
    margin-inline-start: auto;  /* pushes this block to the visual 'end' (right in your screenshot) */
/* Avatar & name */
.topbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

.topbar__name {
  font-size: 15px;
  color: #2d3748;
  display: inline-block;
  white-space: nowrap;
}

/* Language chips */
.topbar__langs {
  display: flex;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 10px;
  background: #f3f4f6;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #e6e8ee;
  text-decoration: none;
  color: #111827;
}

.chip--active {
  background: #eef2ff;
  border-color: #c7d2fe;
}

/* Search box inside left group */
.topbar__search {
  position: relative;
  min-width: 220px;
  width: clamp(220px, 32vw, 460px);
  display: inline-block;
}

.topbar__search input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e6e8ee;
  font-size: 14px;
  padding-inline: 12px;
  outline: none;
  box-sizing: border-box;
}

.topbar__search input:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.06);
  border-color: #94a3b8;
}

/* Search icon placement - uses logical properties where possible and fallback */
.topbar__searchIcon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9aa4b2;
  pointer-events: none;
}

/* Icon at inline-end (visual end) with fallback to right/left */
.topbar__searchIcon {
  inset-inline-end: 12px;
}

html[dir="ltr"] .topbar__searchIcon {
  right: 12px;
  left: auto;
}

html[dir="rtl"] .topbar__searchIcon {
  left: 12px;
  right: auto;
}

/* Adjust input padding to make room for the icon */
html[dir="ltr"] .topbar__search input {
  padding-inline-end: 36px;
  padding-inline-start: 12px;
}

html[dir="rtl"] .topbar__search input {
  padding-inline-start: 36px;
  padding-inline-end: 12px;
}

/* Brand logo */
.topbar__brand {
  height: 48px;
  width: auto;
  display: block;
}

/* Small screens: stack the search under the left group if needed */
@media (max-width: 620px) {
  nav.navbar .topbar {
    padding: 10px;
    gap: 8px;
  }

  /* Keep logo at end, move search to next line for narrow screens */
  nav.navbar .topbar__left {
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar__search {
    width: 100%;
    order: 99;
  }
}


.dash_box {
  transition: border 0.2s ease;
  /* smooth effect */
  border: 2px solid transparent;
  /* default no border */
}

.dash_box:hover {
  border: 2px solid #16a34a;
  /* show border only on hover */
  cursor: pointer;
  /* optional */
}

.dash_box__divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  /* light gray line */
  margin: 1rem 0;
  /* spacing above/below */
}

.dash_box__header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* space between icon & title */
  margin-bottom: 0.75rem;
}


/* LTR: icon left of title */
html[dir="ltr"] .dash_box__header {
  flex-direction: row;
  justify-content: flex-start;
}



.dash_box__icon {
  font-size: 1.5rem;
  /* size of icon */
  color: #16a34a;
  /* same green */
}

/* ===== Table Kit (reusable) ===== */

/* Page header (Back + Title + Subtitle) */
.page-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem
}

.back-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  cursor: pointer
}

.back-btn:hover {
  background: #f9fafb
}

.back-btn i {
  transition: transform .15s ease
}

/* Arrow direction: LTR => flip to left, RTL => keep to right */
[dir="ltr"] .back-btn i {
  transform: scaleX(-1)
}

[dir="rtl"] .back-btn i {
  transform: none
}

.page-title-wrap {
  display: flex;
  flex-direction: column
}

.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827
}

.page-subtitle {
  font-size: .9rem;
  color: #6b7280;
  margin-top: 2px
}

/* Card */
.table-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden
}

/* Controls bar (search, filters, actions) */
.controls-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #edf2f7;
  background: #fff
}

.controls-spacer {
  flex: 1 1 auto
}

.select-flat select {
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff
}

/* Search box */
.search {
  position: relative;
  min-width: 260px;
  flex: 1
}

.search input {
  width: 100%;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 14px;
  padding-inline-start: 38px;
  background: #fff
}

.search .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 12px;
  color: #9ca3af;
  pointer-events: none
}

/* Table */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0
}

.data-table thead th {
  font-size: .85rem;
  font-weight: 600;
  color: #6b7280;
  background: #fafafa;
  padding: 14px 18px;
  border-bottom: 1px solid #edf2f7;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2
}

.data-table thead th:first-child {
  border-top-left-radius: 16px
}

.data-table thead th:last-child {
  border-top-right-radius: 16px
}

.data-table tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: #111827
}

.data-table tbody tr:hover {
  background: #f8fafc
}

.table-scroll {
  overflow: auto;
  max-height: 70vh
}

/* Buttons + link buttons */
.cell-actions>*:not(:last-child) {
  margin-inline-end: .5rem
}

.link-btn {
  display: inline-block;
  padding: .35rem .6rem;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff
}

.link-btn:hover {
  background: #f9fafb
}

/* Neutralize Bulma conflicts */
.table.is-striped tr:nth-child(even),
.table.is-hoverable tbody tr:hover {
  background: transparent
}

/* RTL/LTR alignment */
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td {
  text-align: right
}

[dir="ltr"] .data-table th,
[dir="ltr"] .data-table td {
  text-align: left
}

/* ===== Table Kit – Controls Layout ===== */
.table-kit .controls-grid{
  padding:12px 16px;
  border-bottom:1px solid #edf2f7;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.table-kit .controls-row{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;   /* first child at start, second at end */
}
.table-kit .controls-left{display:flex; align-items:center; gap:12px;}
.table-kit .controls-right{display:flex; align-items:center; gap:12px;}

/* Search sizing */
.table-kit .controls-right .search{min-width:320px; flex:1;}
@media (max-width: 720px){
  .table-kit .controls-right .search{min-width:220px;}
  .table-kit .controls-row{flex-wrap:wrap;}
}
.table-kit .controls-row .search { min-width: 320px; flex: 1; }
@media (max-width: 720px){
  .table-kit .controls-row .search { min-width: 220px; }
}


/* ===== Form Kit (reusable) ===== */
.form-kit .form-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);padding:16px;
}

/* Sections inside the form card */
.form-kit .section{
  background:#fff;border:1px solid #edf2f7;border-radius:14px;
  padding:16px;margin:12px 0;
}
.form-kit .section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.form-kit .section-title{font-weight:700;color:#111827}
.form-kit .section-subtitle{font-size:.9rem;color:#6b7280}

/* Grid layout for fields */
.form-kit .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.form-kit .span-12{grid-column:span 12}
.form-kit .span-6{grid-column:span 6}
.form-kit .span-4{grid-column:span 4}
.form-kit .span-3{grid-column:span 3}
@media (max-width: 980px){
  .form-kit .span-6,.form-kit .span-4,.form-kit .span-3{grid-column:span 12}
}

/* Field look & feel */
.form-kit .field label{
  display:block;font-size:.92rem;font-weight:600;color:#111827;margin-bottom:6px;
}
.form-kit .help{font-size:.85rem;color:#6b7280;margin-top:4px}

/* Inputs & selects match your table search/select */
.form-kit .input, .form-kit textarea{
  width:100%;height:40px;border:1px solid #e5e7eb;border-radius:10px;
  padding:0 12px;background:#fff;box-sizing:border-box;
}
.form-kit textarea{min-height:96px;padding:10px 12px}
.form-kit .select-flat select{
  width:100%;height:40px;border:1px solid #e5e7eb;border-radius:10px;background:#fff
}
.form-kit .input:focus, .form-kit textarea:focus, .form-kit .select-flat select:focus{
  outline:none;border-color:#94a3b8;box-shadow:0 0 0 4px rgba(59,130,246,.06)
}

/* Summary pill (optional) */
.form-kit .summary{
  background:#f8fafc;border:1px solid #edf2f7;border-radius:12px;padding:12px
}
.form-kit .summary h4{margin:0 0 8px;font-size:.9rem;color:#374151}

/* Footer actions */
.form-kit .form-actions{
  display:flex;justify-content:center;gap:12px;margin-top:18px
}

/* Reuse your page-header/back-btn already defined. Works RTL/LTR. */
/* ===== Form Kit – wider fields + inner cards ===== */

/* Inner white blocks so each data collection is clearly boxed */
.form-kit .fieldset {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
}

/* Auto grid that guarantees wide fields */
.form-kit .grid-auto{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); /* wider min */
  gap:14px;
}
@media (max-width: 980px){
  .form-kit .grid-auto{ grid-template-columns: 1fr; }
}
/* Inputs / selects always fill their cell and keep a sensible min width */
.form-kit .input,
.form-kit textarea { width:100%; }

.form-kit .select-flat { width:100%; display:block; }
.form-kit select,
.form-kit .select-flat select{
  display:block;
  width:100% !important;      /* override any framework defaults */
  min-width:420px;            /* forces a wide control even in roomy cells */
  height:40px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}
@media (max-width: 980px){
  .form-kit .select-flat select { min-width:260px; }
}
.form-kit select[multiple]{
  min-height:96px;
  padding:8px;
}
.form-kit .select-flat.wide select{ min-width:520px; }

/* --- Form Kit: selects fill their column --- */
.form-kit .field{ min-width:0; }                 /* let grid items shrink */
.form-kit .select-flat{ width:100%; min-width:0; }

.form-kit .select-flat select,
.form-kit select,
.form-kit input{
  width:100% !important;                         /* occupy the whole column */
  min-width:0;                                   /* critical: no hard minimum */
  height:40px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}

.form-kit select[multiple]{                
  min-height:120px;
  padding:8px;
}
.form-kit .section-head.section-head--stack{
  flex-direction: column;
  align-items: flex-end;     
  justify-content: flex-start;
  gap: 4px;                 
  text-align: right;          
  width: 100%;              
}

.form-kit .section-head.section-head--stack .section-title,
.form-kit .section-head.section-head--stack .section-subtitle{
  display:block;
  margin:0;
}
[dir="rtl"] .form-kit .section-head.section-head--stack{
  align-items:flex-end; text-align:right;
}
[dir="ltr"] .form-kit .section-head.section-head--stack{
  align-items:flex-start; text-align:left;
}

.form-kit .section-head.section-head--stack .section-title {
  color: #48C78E;          
  font-weight: 600; 
}

.form-kit .section-head.section-head--stack .section-subtitle {
  color: rgba(72, 199, 142, 0.7); 
  font-weight: 400;            
}


  .nav_btns a:hover{
background-color: #217c19 !important;
color: white  !important;
  }
  .nav_btns a.button.active {
  background-color: #217c19 !important;
  color: white !important;
}
  .nav_btns i:hover {
  background-color: #217c19 !important;
  color: white !important;
}
.pagination-bar {
  position: sticky !important;
  bottom: 0 !important;
  background:#f6fffa !important;
  border-top: 1px solid #edf2f7 !important;
  padding: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  z-index: 5 !important;

}

/* Totals row: same width grid + clear look */
.data-table tfoot.totals-row tr{
  background:#f6fffa;                 /* faint green like header */
  border-top:2px solid #e5e7eb;
}
.data-table tfoot.totals-row th,
.data-table tfoot.totals-row td{
  padding:14px 16px;
  vertical-align:middle;
}

.sum-cell{ text-align:center !important; justify-content: center !important; line-height:1.15; }
.sum-cell .sum-value{ display:block; font-weight:800; color:#111827; }
.sum-cell .sum-label{ display:block; margin-top:4px; font-size:.78rem; color:#6b7280; }

/* keep actions column tiny even in footer */
.data-table tfoot.totals-row td:last-child{ width:.5%; white-space:nowrap; }

/* for text pipe */
.truncate {
  cursor: pointer;
  white-space: normal;   /* allows vertical expansion */
  
}