/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: #7abaf0 !important;
    color: #fafdff !important;
}
html body nav.navbar.navbar-inverse.navbar-simas {
    margin-top: 0;
    padding-top: 0;
    background-color: #d6cc9c;
}

.panel-heading {
    background-color: #055fad !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.panel-body {
    font-size: 14px !important;
    color: #ffffff !important;
    background-color: #FFFBE5 !important;
    padding: 15px !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.panel-heading a {
    color: #ffffff !important;
}
.panel-heading label {
    color: #ffffff !important;
}


.panel-info {
    border-color: #ffbb02 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 8px rgba(253, 216, 53, 0.3) !important;
  }

a.readmore {
    color: #fafafa !important;
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

a.readmore:hover {
    text-decoration: underline !important;
    color: #ffbb02 !important;
}

.footer {
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    background-color: #055fad !important;
    background: #055fad !important;
    padding: 12px 20px !important;
    text-align: center !important;
    color: rgb(24, 41, 114) !important;
    font-size: 13px !important;
    border-top: 2px solid #ffbb02 !important;
    box-shadow: 0 0 8px rgba(253, 216, 53, 0.3) !important;
}

h3 {
    font-weight: 700 !important;
    color: #1F4F75 !important;
    margin-top: 20px !important;
}

blockquote {
    background-color: #FFFBE5 !important;
    padding: 20px !important;
    border-left: 5px solid #ffbb02 !important;
    font-size: 15px !important;
    font-family: "Calibri", sans-serif !important;
    margin: 20px 0 !important;
    color: #1F4F75 !important;
}

ul li {
    padding: 6px 0 !important;
    list-style-type: square !important;
    color: #1F4F75 !important;
}

.btn-custom {
    background-color: #ffbb02 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #1F4F75 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease-in-out !important;
}

.btn-custom:hover {
    background-color: #ffbb02 !important;
    color: #1A2E3F !important;
}

.style-five {
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(to right, #1F4F75, #ffbb02, #1F4F75) !important;
    margin: 20px 0 !important;
}

.glyphicon-hand-down {
    color: #F44336 !important;
    font-size: 18px !important;
}
/* Form Styling */
form {
    background-color: #FFFBE5 !important; /* Light yellow, easy on eyes */
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important; /* Default black text */
}

/* Form Labels */
form label {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Input Fields */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form textarea,
form select {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    color: #000000 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

/* Placeholder text */
form input::placeholder,
form textarea::placeholder {
    color: #666 !important;
    font-style: italic !important;
}

/* Input Focus State */
form input:focus,
form textarea:focus,
form select:focus {
    border-color: #ffbb02 !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(255, 187, 2, 0.3) !important;
}

/* Container */
.form-container {
    max-width: 600px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
}

/* Labels */
.form-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

/* Inputs, Selects, Textareas */
.form-container input[type="text"],
.form-container input[type="number"],
.form-container input[type="date"],
.form-container select,
.form-container textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Textarea height */
.form-container textarea {
    resize: vertical;
    min-height: 100px;
}

/* Buttons */
.form-container button {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

/* Submit Button */
.form-container button[type="submit"] {
    background-color: #055fad;
    color: #fff;
}

.form-container button[type="submit"]:hover {
    background-color: #003f80;
}

/* Reset Button */
.form-container button[type="reset"] {
    background-color: #f44336;
    color: #fff;
}

.form-container button[type="reset"]:hover {
    background-color: #c0392b;
}

/* Optional headings */
.form-container h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #1F4F75;
}
/* Fix white text issue in form fields inside .panel-body */
.panel-body label,
.panel-body select,
.panel-body input,
.panel-body textarea {
    color: #1a1a1a !important;
    /* Dark gray/black for readability */
}

/* Optional: input and select field improvements */
.panel-body input,
.panel-body select,
.panel-body textarea {
    background-color: #ffffff !important;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
}

/* Ensure the placeholder text is visible too */
.panel-body input::placeholder,
.panel-body textarea::placeholder {
    color: #888;
}

/* ============================
   Responsive Wrapper
   ============================ */
.table-responsive {
  background: #ffffff !important;
  border: 1px solid #a9c2e8 !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ============================
   Base Tables (hover_me + example)
   ============================ */
.table-responsive .hover_me,
#example {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background: #FFFBE5 !important;
  color: #111111 !important;
  font: 14px/1.4 system-ui, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Cells */
.table-responsive .hover_me th,
.table-responsive .hover_me td,
#example th,
#example td {
  border: 1px solid #d6e3f7 !important;
  padding: 6px 8px !important;
  vertical-align: middle !important;
  background: #FFFBE5 !important;
  color: #111111 !important;
}

/* Nested tags inherit color */
.table-responsive .hover_me th *,
.table-responsive .hover_me td *,
#example th *,
#example td * {
  color: inherit !important;
}

/* ============================
   Header Rows
   ============================ */
.table-responsive .hover_me thead tr:first-child th,
#example thead tr:first-child th {
  background: linear-gradient(180deg, #1e88e5, #1666c5) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  font-weight: 700 !important;
}
.table-responsive .hover_me thead tr:first-child b,
#example thead tr:first-child b {
  color: inherit !important;
}
.table-responsive .hover_me thead tr:nth-child(2) th,
#example thead tr:nth-child(2) th {
  background: #f3f7ff !important;
  color: #111111 !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ============================
   Table Body
   ============================ */
.table-responsive .hover_me tr,
.table-responsive .hover_me th,
.table-responsive .hover_me td,
#example tr,
#example th,
#example td {
  color: #111111 !important;
}
.table-responsive .hover_me tbody tr td:last-child,
#example tbody tr td:last-child {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
.table-responsive .hover_me tbody tr:hover td,
#example tbody tr:hover td {
  background: #eef5ff !important;
}

/* ============================
   DataTables: Controls Shell
   ============================ */
.dataTables_wrapper {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  color: #111111 !important;
}

/* Length menu (Show 10/25/50/100) */
.dataTables_length {
  font-size: 14px !important;
  margin: 6px 0 10px !important;
}
.dataTables_length label {
  color: #111111 !important;
  font-weight: 500 !important;
}
.dataTables_length select {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  margin: 0 6px !important;
  cursor: pointer !important;
}
.dataTables_length select:focus {
  border-color: #1e88e5 !important;
  outline: none !important;
  box-shadow: 0 0 4px rgba(30,136,229,0.3) !important;
}
.dataTables_length select option {
  color: #111111 !important;
  background: #ffffff !important;
}

/* Search box */
.dataTables_filter {
  font-size: 14px !important;
  margin: 6px 0 10px !important;
}
.dataTables_filter label {
  color: #111111 !important;
  font-weight: 500 !important;
}
.dataTables_filter input[type="search"] {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  width: 240px !important; /* comfortable width */
  box-sizing: border-box !important;
}
.dataTables_filter input[type="search"]::placeholder {
  color: #666666 !important;
}
.dataTables_filter input[type="search"]:focus {
  border-color: #1e88e5 !important;
  outline: none !important;
  box-shadow: 0 0 4px rgba(30,136,229,0.3) !important;
}

/* Info text (“Showing 1 to 10 of …”) */
.dataTables_info {
  color: #333333 !important;
  font-size: 13px !important;
  padding-top: 6px !important;
}

/* ============================
   Pagination
   ============================ */
.dataTables_paginate {
  margin: 8px 0 !important;
  text-align: right !important;
}
.dataTables_paginate .paginate_button {
  display: inline-block !important;
  min-width: 34px !important;
  padding: 6px 10px !important;
  margin-left: 4px !important;
  border: 1px solid #cfd8ea !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #0b66c3 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  user-select: none !important;
  font-size: 14px !important;
}
.dataTables_paginate .paginate_button:hover {
  background: #eef5ff !important;
  border-color: #b9c9e9 !important;
  color: #0b66c3 !important;
}
.dataTables_paginate .paginate_button:active {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: #1e88e5 !important;
  color: #ffffff !important;
  border-color: #1e88e5 !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  color: #9aa6bf !important;
  background: #f5f7fb !important;
  border-color: #e0e6f2 !important;
  cursor: default !important;
}

/* “Processing…” badge */
.dataTables_processing {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid #d6e3f7 !important;
  border-radius: 6px !important;
  color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  font-size: 13px !important;
  z-index: 10 !important;
}

/* ============================
   Sorting cues (space for icons)
   ============================ */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  padding-right: 26px !important; /* room for sort icon */
}

/* ============================
   Safety Nets
   ============================ */
/* Keep controls readable on any dark/light page */
.dataTables_wrapper,
.dataTables_wrapper * {
  color: #111111 !important;
}


/* =============================
   Uncompleted Loans Table Styling
   ============================= */

/* Wrapper */
.table-responsive {
  background: #ffffff !important;
  border: 1px solid #a9c2e8 !important;
  border-radius: 6px !important;
  padding: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Table base */
.table.table-striped {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #FFFBE5 !important;   /* light cream background for clarity */
  color: #111111 !important;
  font-size: 14px !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Table cells */
.table.table-striped th,
.table.table-striped td {
  border: 1px solid #d6e3f7 !important;
  padding: 8px 10px !important;
  vertical-align: middle !important;
  background: #FFFBE5 !important;
  color: #111111 !important;
}

/* Header row (title section) */
.table.table-striped tr:first-child th {
  background: linear-gradient(180deg, #1e88e5, #1666c5) !important;
  color: #ffffff !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  font-size: 15px !important;
}

/* Section headers like "Kipengele / Maelezo Zaidi" */
.table.table-striped th {
  background: #f3f7ff !important;
  color: #111111 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Alternate row styling */
.table.table-striped tbody tr:nth-child(odd) td {
  background: #FFFBE5 !important; /* cream */
}
.table.table-striped tbody tr:nth-child(even) td {
  background: #fefdf2 !important; /* even lighter cream */
}

/* Hover effect */
.table.table-striped tbody tr:hover td {
  background: #eef5ff !important;
}

/* Bold numbers (align right) */
.table.table-striped td b {
  display: inline-block !important;
  text-align: right !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Subsection titles (e.g., "Wadhamini", "Viambatanisho") */
.table.table-striped tr th[colspan="2"] {
  background: #ffeb99 !important;   /* warm yellow section highlight */
  color: #111111 !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding-left: 12px !important;
}

/* Links inside table */
.table.table-striped a {
  color: #0b66c3 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.table.table-striped a:hover {
  text-decoration: underline !important;
}
/* === EXACT FIX for the info block after <hr class="style-seven"> === */
/* 1) The span immediately following the HR */
hr.style-seven + span,
#printable hr.style-seven + span {
  display: block !important;
  background: #FFFBE5 !important;          /* cream panel so it’s visible */
  color: #111111 !important;               /* force dark text */
  -webkit-text-fill-color: #111111 !important; /* defeats WebKit text-fill overrides */
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  line-height: 1.55 !important;
  font: 14px/1.55 "Segoe UI", Tahoma, Verdana, sans-serif !important;
  opacity: 1 !important;                   /* defeat any accidental opacity */
  mix-blend-mode: normal !important;       /* defeat blend tricks making text pale */
  filter: none !important;                 /* defeat any filters */
}

/* 2) Everything inside that span must inherit readable colors */
hr.style-seven + span *,
#printable hr.style-seven + span * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* 3) Make the bold labels stand out */
hr.style-seven + span b,
#printable hr.style-seven + span b {
  color: #1F4F75 !important;
  font-weight: 700 !important;
}

/* 4) The <hr> placed at the END of that span */
hr.style-seven + span > hr,
#printable hr.style-seven + span > hr {
  height: 1px !important;
  border: 0 !important;
  margin: 12px 0 0 !important;
  background: #e6eef9 !important;
}

/* Optional: tighten the line height created by <br> breaks */
hr.style-seven + span br,
#printable hr.style-seven + span br {
  line-height: 1.1 !important;
}


/* Style all select options */
/* Make Select2 always readable, regardless of body/panel colors */
.select2-container--default .select2-selection--single {
  background: #ffffff !important;
  border: 1px solid #ccc !important;
  min-height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: #111111 !important;           /* selected value text */
}
.select2-container--default .select2-selection__placeholder {
  color: #666666 !important;            /* placeholder in the closed control */
}

/* The dropdown and its search input */
.select2-container .select2-dropdown {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ccc !important;
}
.select2-search--dropdown .select2-search__field {
  background: #ffffff !important;
  color: #111111 !important;            /* <-- the typing color */
  caret-color: #111111 !important;
  border: 1px solid #ccc !important;
  padding: 6px 8px !important;
  font: 14px/1.4 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}
.select2-search--dropdown .select2-search__field::placeholder {
  color: #777777 !important;
}

/* Options in the open dropdown */
.select2-results__option {
  color: #111111 !important;
  background: #ffffff !important;
}
.select2-results__option--highlighted[aria-selected] {
  background: #eef5ff !important;       /* hover highlight */
  color: #111111 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: #f3f7ff !important;       /* selected row */
  color: #111111 !important;
}

/* Multiple select pills */
.select2-container--default .select2-selection--multiple {
  background: #ffffff !important;
  border: 1px solid #ccc !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #f3f7ff !important;
  border: 1px solid #d6e3f7 !important;
  color: #111111 !important;
}