/* ===== Global ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

/* ===== Login Page ===== */
body.login-body {
  background: linear-gradient(135deg, #e8f7df, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 360px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #cbd5c0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px 24px;
}

.login-header h1 {
  font-size: 18px;
  color: #136f1f;
  text-align: center;
}

.login-header p {
  text-align: center;
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

.login-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-form label {
  font-size: 13px;
  color: #333;
}

.login-form input,
.login-form select {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #b0b0b0;
  font-size: 13px;
}

.login-form button {
  margin-top: 10px;
  padding: 8px;
  background: #1f8a1f;
  border: none;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}

.login-form button:hover {
  background: #176c17;
}

.login-footer {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: #666;
}

/* ===== Main App Layout ===== */
.app-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f5f5;
}

/* Header banner similar to bamboo style */
.header-banner {
  height: 120px;
  background:#2E8B57;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #c7dfb4;
}

.logo-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #1f8a1f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f8a1f;
  font-weight: bold;
  font-size: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.system-name{

    color:#ffffff;

    font-weight:700;

    letter-spacing:1px;
}

.company-name {
  font-size: 13px;
  color:#e8f5e9;
}

.header-right {
  text-align: right;
  font-size: 12px;
  color:#d4ffd4;
}

.header-right .highlight {
  color:#d4ffd4;
  font-weight: bold;
}

.mini-meta {
  margin-top: 4px;
}

/* ===== Top Navigation Bar ===== */
.top-nav {
  background: #1a7c16;
  border-bottom: 3px solid #11520e;
}

.menu {
  list-style: none;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.menu > li {
  position: relative;
}

.menu-link {
  display: block;
  padding: 8px 14px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  border-right: 1px solid #0f530d;
}

.menu-link:hover,
.menu > li:hover > .menu-link {
  background: #0f530d;
}

/* Logout special color */
.logout-link {
  background: #b30f0f;
}

.logout-link:hover {
  background: #8c0c0c;
}

/* Dropdown */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #0f530d;
  list-style: none;
  z-index: 100;
}

.dropdown-menu li a {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #0c410a;
}

.dropdown-menu li a:hover {
  background: #0a3407;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  position: absolute;
  z-index: 10000;   /* ABOVE EVERYTHING */
}

.dropdown-menu {
  display: none;
}

/* ===== Content Area ===== */
.content-area {
  flex: 1;
  background: #ffffff;
  border-top: 1px solid #d0d0d0;
}

.content-area iframe {
  width: 100%;
  height: calc(100vh - 100px - 36px - 30px); /* header + nav + footer approx */
  border: none;
}

#content-frame {
    width: 100%;
    height: calc(100vh - 100px); /* adjust based on header height */
    border: none;
}

/* ===== Footer ===== */
.footer-bar {
  height: 30px;
  background: #1a7c16;
  color: #ffffff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Inner pages (inside /pages) ===== */
.page-wrapper {
  padding: 15px 18px;
  font-size: 13px;
}

.page-title {
  font-size: 16px;
  color: #136f1f;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 12px;
  color: #555;
  margin-bottom: 12px;
}

.page-form {
  margin-bottom: 14px;
  background: #f4fbea;
  border: 1px solid #c7dfb4;
  padding: 10px;
  border-radius: 4px;
}

.page-form label {
  display: block;
  margin-bottom: 2px;
}

.page-form input,
.page-form select,
.page-form textarea {
  width: 100%;
  padding: 5px 7px;
  margin-bottom: 6px;
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid #b0b0b0;
}

.page-form button {
  padding: 6px 14px;
  background: #1f8a1f;
  color: white;
  border: none;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}

.page-form button:hover {
  background: #176c17;
}

.page-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.page-table th,
.page-table td {
  border: 1px solid #b0b0b0;
  padding: 5px 6px;
}

.page-table th {
  background: #1a7c16;
  color: white;
}

.page-table tr:nth-child(even) td {
  background: #f2f2f2;
}

/* Small responsiveness */
@media (max-width: 768px) {
  .menu {
    flex-wrap: wrap;
  }
  .menu-link {
    padding: 6px 10px;
  }
  .header-banner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .header-right {
    margin-top: 8px;
  }
}

.floating-form {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 420px;
  max-height: 90vh;
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  border-radius: 8px;
  z-index: 9999;
  overflow-y: auto;
}

.floating-header {
  background: #1e7e34;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hidden {
  display: none;
}

/* ===============================
   COMMON PAGE TITLE
================================= */
.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f7a1f;
  margin: 20px 0 15px 0;
}

/* ===============================
   DATA TABLE (ADMIN LISTING)
================================= */
/* ===== TABLE WRAPPER ===== */
.table-wrapper {
  margin-left: 40px;   /* master alignment control */
}

.data-table {
  width: 90%;
  border-collapse: collapse;
  margin: 10px 0 20px 0;
  margin-left: 40px;
  font-size: 14px;
}

/* ===== ACTION BAR (ADD NEW) ===== */
.table-action-bar {
  margin-top: 12px;
}

.data-table thead {
  background-color: #2e7d32;
  color: #ffffff;
}

.data-table th,
.data-table td {
  border: 1px solid #cfcfcf;
  padding: 8px 10px;
  text-align: left;
}

.data-table tr:nth-child(even) {
  background-color: #f5f5f5;
}

.data-table tr:hover {
  background-color: #e8f5e9;
}

/* ===============================
   BUTTONS
================================= */
.btn-green {
  background-color: #2e7d32;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  margin: 10px 5px 10px 0;
}

.btn-green:hover {
  background-color: #256428;
}

.btn-gray {
  background-color: #9e9e9e;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
}

.btn-gray:hover {
  background-color: #7e7e7e;
}

/* ===============================
   FORM ROWS
================================= */
.form-row {
  margin: 10px 0;
}

.form-row label {
  display: inline-block;
  width: 120px;
  font-weight: 600;
  color: #333333;
}

.form-row input {
  padding: 6px 8px;
  width: 200px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
}

/* ===============================
   ACTION ICONS
================================= */
.edit-btn {
  cursor: pointer;
  font-size: 16px;
}

.delete-btn {
  cursor: pointer;
  font-size: 16px;
}

.edit-btn:hover,
.delete-btn:hover {
  opacity: 0.7;
}

.btn-green {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-green:hover {
  background: #218838;
}

.btn-cancel {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
}

.btn-cancel:hover {
  background: #5a6268;
}

.badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.badge-green { background: #28a745; }
.badge-orange { background: #fd7e14; }

.btn-disabled {
  background: #ccc;
  color: #666;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: not-allowed;
}

.btn-red {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-red:hover { background: #c82333; }

.top-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background: #1f8f3a;
}

.menu-item {
  position: relative;
  padding: 12px 18px;
  color: white;
  cursor: pointer;
}

.menu-item:hover {
  background: #166f2c;
}

/* SUB MENU */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 999;
}

.submenu li {
  padding: 10px 14px;
  cursor: pointer;
  color: #000;
}

.submenu li:hover {
  background: #e6f5ea;
}

/* 🔥 THIS MAKES HOVER WORK */
.menu-item:hover .submenu {
  display: block;
}
.top-bar,
.top-menu,
.navbar {
  position: relative;
  z-index: 9999;   /* VERY IMPORTANT */
}
.menu-bar {
  position: relative;
  z-index: 9999;
}
.dropdown-menu li {
  cursor: pointer;
  padding: 7px 12px;
  color: #ffffff;
}

.dropdown-menu li:hover {
  background: #0a3407;
}

/* ===== Center Invoice Preview ===== */

#invoiceContainer {
  max-width: 794px;       /* Controls invoice width */
  margin: 30px auto;      /* Centers horizontally */
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

@media print {
  #invoiceContainer {
    max-width: 100%;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
}

/* ================= PRINT MODE ================= */
@media print {

  body * {
    visibility: hidden;
  }

  #invoiceContainer,
  #invoiceContainer * {
    visibility: visible;
  }

  #invoiceContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 210mm;
    min-height: 297mm;
    padding: 15mm;
    background: white;
    box-shadow: none;
  }

}

/* Force A4 */
@page {
  size: A4;
  margin: 0;
}

.page-break {
  page-break-before: always;
}

.small {
  font-size: 11px;
}

.center { text-align: center; }
.right { text-align: right; }

pre {
  white-space: pre-wrap;     /* Allows wrapping */
  word-wrap: break-word;     /* Breaks long words */
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

pre {
  page-break-inside: avoid;
}

.terms-box {
  white-space: normal;
  line-height: 1.4;
  page-break-inside: avoid;
}

.terms-box {
  border: 1px solid #000;
  padding: 6px;
  margin-top: 6px;
}

.invoice-note {
  font-weight: bold;
  color: lab(38.43% 62.09 50.36);
  margin-top: 8px;
  page-break-inside: avoid;
}

@media print {
  body {
    margin: 0;
  }
}

#pdfContent {
  box-shadow: none !important;
  border: 1px solid #000;
}

.dashboard-card {
    background: #ffffff;
    padding: 15px;
    margin: 15px 0;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.dashboard-card h3 {
    margin-bottom: 10px;
}

#lockedMonthsTable th {
    background: #f4f4f4;
}

/* ==============================
   SCROLLABLE DROPDOWN MENU
   ============================== */

.dropdown-menu {
    max-height: 300px;     /* adjust height as required */
    overflow-y: auto;      /* vertical scroll inside menu */
    overflow-x: hidden;
}

/* Optional: smooth scrollbar styling */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.dropdown-menu {
    max-height: 40vh;   /* relative to screen height */
}

@media print {
  button {
    display: none;
  }

  body {
    margin: 0;
  }
}

/* ================= HELP PAGE STYLING ================= */

.page-wrapper h1{
    color:#1a3d6d;
    font-size:28px;
    margin-bottom:5px;
}

.page-wrapper h2{
    color:#0f5c3b;
    border-left:5px solid #0f5c3b;
    padding-left:10px;
    margin-top:30px;
    margin-bottom:10px;
    font-size:22px;
}

.page-wrapper h3{
    color:#2b4c7e;
    margin-top:20px;
    margin-bottom:5px;
}

.page-wrapper p{
    line-height:1.6;
    margin-bottom:10px;
}

.page-wrapper ul{
    margin-left:20px;
    margin-bottom:15px;
}

.page-wrapper li{
    margin-bottom:5px;
}

.page-wrapper hr{
    border:none;
    border-top:1px solid #d6d6d6;
    margin:25px 0;
}

/* Highlight important sections */

.page-wrapper h2{
    background:#f4f8fb;
    padding:8px 10px;
    border-radius:4px;
}

/* Manual heading style */

.page-wrapper h3{
    font-weight:600;
}

/* End message */

.page-wrapper p b{
    color:#333;
}

.page-wrapper{
    max-width:1000px;
    margin:auto;
    background:#ffffff;
    padding:25px 35px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* ================= SUPERADMIN DASHBOARD ================= */

.superadmin-header{
    background:#0b5d3b;
    color:#ffffff;
    font-size:22px;
    font-weight:600;
    padding:14px 20px;
    border-radius:6px;
    margin-bottom:15px;
    letter-spacing:0.5px;
}

.superadmin-container{
    background:#ffffff;
    padding:15px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* ================= TABLE ================= */

.superadmin-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.superadmin-table thead{
    background:#0b5d3b;
    color:#ffffff;
}

.superadmin-table th{
    padding:10px;
    text-align:left;
    font-weight:600;
}

.superadmin-table td{
    padding:9px;
    border-bottom:1px solid #e5e5e5;
}

/* ================= ROW HOVER ================= */

.superadmin-table tbody tr:hover{
    background:#f4f9f7;
}

/* ================= RESPONSIVE ================= */

@media (max-width:900px){

.superadmin-table{
    font-size:12px;
}

.superadmin-header{
    font-size:18px;
}

}

/* ================= SAAS SUMMARY CARDS ================= */

.saas-summary{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.saas-card{
    flex:1;
    min-width:180px;
    background:#0b5d3b;
    color:white;
    padding:20px;
    border-radius:8px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.saas-number{
    font-size:28px;
    font-weight:700;
}

.saas-label{
    font-size:14px;
    opacity:0.9;
}

/* ================= SUBSCRIPTION PLANS ================= */

.plans-header{
    background:#0b5d3b;
    color:#fff;
    padding:14px 20px;
    font-size:22px;
    font-weight:600;
    border-radius:6px;
    margin-bottom:15px;
}

.plans-container{
    background:#ffffff;
    padding:15px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* ================= TABLE ================= */

.plans-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.plans-table thead{
    background:#0b5d3b;
    color:white;
}

.plans-table th{
    padding:10px;
    text-align:left;
}

.plans-table td{
    padding:9px;
    border-bottom:1px solid #e5e5e5;
}

.plans-table tbody tr:hover{
    background:#f4f9f7;
}

/* ================= FORM ================= */

.plan-form{
    margin-top:20px;
    background:#ffffff;
    padding:15px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.plan-form h3{
    margin-bottom:10px;
}

.plan-form input{
    padding:8px;
    margin-right:10px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:14px;
}

/* ================= BUTTONS ================= */

.btn-save{
    background:#0b5d3b;
    color:white;
    border:none;
    padding:8px 16px;
    border-radius:4px;
    cursor:pointer;
}

.btn-save:hover{
    background:#094b2f;
}

button{
    padding:6px 12px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    background:#0b5d3b;
    color:white;
}

button:hover{
    background:#094b2f;
}

/* ================= PRICING PAGE ================= */

.pricing-grid{
 display:flex;
 gap:20px;
 flex-wrap:wrap;
 margin-top:20px;
}

.pricing-card{
 flex:1;
 min-width:220px;
 background:#ffffff;
 padding:20px;
 border-radius:8px;
 text-align:center;
 box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.pricing-card h3{
 color:#0b5d3b;
 margin-bottom:10px;
}

.price{
 font-size:26px;
 font-weight:bold;
 margin-bottom:10px;
}

.guards{
 margin-bottom:15px;
 color:#555;
}

.btn-buy{
 background:#0b5d3b;
 color:white;
 border:none;
 padding:10px 20px;
 border-radius:4px;
 cursor:pointer;
}

.btn-buy:hover{
 background:#094b2f;
}

.register-box{
 width:320px;
 margin:40px auto;
 display:flex;
 flex-direction:column;
 gap:10px;
}

.register-box input{
 padding:10px;
 border:1px solid #ccc;
 border-radius:4px;
}

.register-box button{
 background:#0b5d3b;
 color:white;
 padding:10px;
 border:none;
 border-radius:4px;
 cursor:pointer;
}

.signup-box{
 width:320px;
 margin:20px auto;
 display:flex;
 flex-direction:column;
 gap:10px;
}

.signup-box input{
 padding:10px;
 border:1px solid #ccc;
 border-radius:4px;
}

.badge-red {
  background: #e74c3c;
  color: #fff;
}

.badge-orange {
  background: #f39c12;
  color: #fff;
}

.badge-green {
  background: #27ae60;
  color: #fff;
}

.row-expired {
  background-color: #ffe6e6;
}

.pricing-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.pricing-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 220px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.pricing-card h3 {
  margin-bottom: 10px;
}

.price {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

.pricing-card button {
  background: #27ae60;
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}

/* =========================================
   BLACK CAT ERP - MODERN SIDEBAR LAYOUT
========================================= */

/* APP BODY */

.app-body{
    margin:0;
    background:#f5f7fa;
}

/* HEADER */

.header-banner{

    position:fixed;

    top:0;
    left:260px;
    right:0;

    z-index:1000;

    height:80px;
}

/* SIDEBAR NAVIGATION */

.top-nav{

    position:fixed;

    top:0;
    left:0;

    width:260px;
    height:100vh;

    background:#2E8B57;

    overflow-y:auto;

    border:none;

    z-index:2000;

    padding-top:20px;
}

/* MENU */

.menu{

    flex-direction:column;

    align-items:stretch;

    padding:0 10px;
}

/* MENU ITEMS */

.menu > li{

    width:100%;

    margin-bottom:4px;
}

/* LINKS */

.menu-link{

    border:none;

    border-radius:6px;

    padding:12px 14px;

    font-size:14px;

    background:transparent;
}

/* HOVER */

.menu-link:hover,
.menu > li:hover > .menu-link{

    background:#3CB371;
}

/* DROPDOWN */

.dropdown-menu{

    position:static;

    display:none;

    background:#3CB371;

    margin-top:4px;

    border-radius:6px;

    overflow:hidden;
}

/* SHOW DROPDOWN */

.dropdown:hover .dropdown-menu{

    display:block;
}

/* SUBMENU ITEMS */

.dropdown-menu li{

    padding:10px 14px;

    font-size:13px;

    border-bottom:1px solid rgba(255,255,255,0.08);
}

/* MAIN CONTENT */

.content-area{

    margin-left:260px;

    margin-top:80px;

    background:#ffffff;
}

/* IFRAME */

#content-frame{

    width:100%;

    height:calc(100vh - 110px);

    border:none;
}

/* FOOTER */

.footer-bar{

    margin-left:260px;
}

/* MOBILE */

@media (max-width:768px){

    .top-nav{

        width:220px;
    }

    .header-banner{

        left:220px;
    }

    .content-area{

        margin-left:220px;
    }

    .footer-bar{

        margin-left:220px;
    }
}

/* =========================================
   MAIN MODULE STYLE
========================================= */

.menu > li > .menu-link{

    font-weight:700;

    font-size:15px;

    color:#ffffff;

    letter-spacing:0.3px;
}

/* =========================================
   SUBMODULE STYLE
========================================= */

.dropdown-menu li{

    font-weight:400;

    font-size:13px;

    color:#dcdcdc;

    padding-left:20px;
}

/* SUBMODULE HOVER */

.dropdown-menu li:hover{

    background:#1c3b73;

    color:#ffffff;
}

/* =========================================
   SIDEBAR DROPDOWN SCROLL FIX
========================================= */

.top-nav .dropdown-menu{

    position:static;

    max-height:300px;

    overflow-y:auto;

    overflow-x:hidden;

    scrollbar-width:thin;
}

/* SCROLLBAR */

.top-nav .dropdown-menu::-webkit-scrollbar{

    width:6px;
}

.top-nav .dropdown-menu::-webkit-scrollbar-thumb{

    background:#cfe9cf;

    border-radius:10px;
}

.top-nav .dropdown-menu::-webkit-scrollbar-thumb:hover{

    background:#a8d5a8;
}

/* =========================================
   ADVANCE REQUEST MODULE
========================================= */

.advance-card{

    background:#ffffff;

    padding:20px;

    border-radius:10px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);

    margin-bottom:20px;
}

.advance-title{

    color:#1f7a1f;

    font-size:24px;

    margin-bottom:20px;

    border-left:5px solid #1f7a1f;

    padding-left:12px;
}

/* GRID */

.advance-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

/* FORM GROUP */

.form-group{

    display:flex;

    flex-direction:column;
}

.form-group label{

    margin-bottom:6px;

    font-weight:600;

    color:#333;
}

.form-group input,
.form-group select,
.form-group textarea{

    padding:10px 12px;

    border:1px solid #cfcfcf;

    border-radius:6px;

    font-size:14px;

    background:#ffffff;
}

.form-group textarea{

    min-height:90px;

    resize:vertical;
}

/* FULL WIDTH */

.full-width{

    grid-column:1 / span 2;
}

/* BUTTON */

.btn-area{

    margin-top:20px;
}

.btn-submit{

    background:#1f7a1f;

    color:#ffffff;

    border:none;

    padding:10px 24px;

    border-radius:25px;

    font-size:14px;

    cursor:pointer;

    transition:0.3s;
}

.btn-submit:hover{

    background:#145214;
}

/* TABLE CARD */

.table-card{

    background:#ffffff;

    padding:20px;

    border-radius:10px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.table-title{

    color:#1f7a1f;

    margin-bottom:15px;

    font-size:20px;
}

/* TABLE */

.advance-table{

    width:100%;

    border-collapse:collapse;

    font-size:14px;
}

.advance-table thead{

    background:#1f7a1f;

    color:#ffffff;
}

.advance-table th,
.advance-table td{

    padding:12px;

    border:1px solid #dcdcdc;

    text-align:left;
}

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

    background:#f7f7f7;
}

.advance-table tbody tr:hover{

    background:#eaf7ea;
}

/* MESSAGE */

#msg{

    margin-top:15px;

    font-weight:600;

    color:#1f7a1f;
}

/* MOBILE */

@media(max-width:768px){

.advance-grid{

    grid-template-columns:1fr;
}

.full-width{

    grid-column:auto;
}

}

/* =========================================
   BLACK CAT ERP - GLOBAL DESIGN SYSTEM
========================================= */

/* ===== PAGE CARD ===== */

.erp-card{

    background:#ffffff;

    padding:20px;

    border-radius:10px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);

    margin-bottom:20px;
}

/* ===== PAGE TITLE ===== */

.erp-title{

    color:#1f7a1f;

    font-size:24px;

    margin-bottom:20px;

    border-left:5px solid #1f7a1f;

    padding-left:12px;

    font-weight:600;
}

/* ===== GRID FORM ===== */

.erp-form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

/* ===== FORM GROUP ===== */

.erp-form-group{

    display:flex;

    flex-direction:column;
}

.erp-form-group label{

    margin-bottom:6px;

    font-weight:600;

    color:#333;
}

/* ===== INPUTS ===== */

.erp-input,
.erp-select,
.erp-textarea{

    width:100%;

    padding:10px 12px;

    border:1px solid #cfcfcf;

    border-radius:6px;

    font-size:14px;

    background:#ffffff;
}

.erp-textarea{

    min-height:90px;

    resize:vertical;
}

/* ===== FULL WIDTH ===== */

.erp-full{

    grid-column:1 / span 2;
}

/* ===== BUTTON AREA ===== */

.erp-btn-area{

    margin-top:20px;
}

/* ===== PRIMARY BUTTON ===== */

.erp-btn{

    background:#1f7a1f;

    color:#ffffff;

    border:none;

    padding:10px 24px;

    border-radius:25px;

    font-size:14px;

    cursor:pointer;

    transition:0.3s;
}

.erp-btn:hover{

    background:#145214;
}

/* ===== RED BUTTON ===== */

.erp-btn-danger{

    background:#dc3545;
}

.erp-btn-danger:hover{

    background:#b52b38;
}

/* ===== TABLE CARD ===== */

.erp-table-card{

    background:#ffffff;

    padding:20px;

    border-radius:10px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* ===== TABLE TITLE ===== */

.erp-table-title{

    color:#1f7a1f;

    margin-bottom:15px;

    font-size:20px;

    font-weight:600;
}

/* ===== TABLE ===== */

.erp-table{

    width:100%;

    border-collapse:collapse;

    font-size:14px;
}

.erp-table thead{

    background:#1f7a1f;

    color:#ffffff;
}

.erp-table th,
.erp-table td{

    padding:12px;

    border:1px solid #dcdcdc;

    text-align:left;
}

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

    background:#f7f7f7;
}

.erp-table tbody tr:hover{

    background:#eaf7ea;
}

/* ===== STATUS BADGES ===== */

.erp-badge{

    padding:5px 12px;

    border-radius:20px;

    color:#ffffff;

    font-size:12px;

    font-weight:600;
}

.erp-badge-success{

    background:#28a745;
}

.erp-badge-warning{

    background:#f39c12;
}

.erp-badge-danger{

    background:#dc3545;
}

/* ===== RESPONSIVE ===== */

@media(max-width:768px){

.erp-form-grid{

    grid-template-columns:1fr;
}

.erp-full{

    grid-column:auto;
}

}

/* ================= SEARCH SECTION ================= */

.search-section {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 250px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.search-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.reset-btn {
    background: #777;
    color: white;
}

.btn-danger{

  background:#dc3545;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:4px;
  cursor:pointer;

}

.btn-danger:hover{

  background:#bb2d3b;

}

/*=========================================================
 BLACK-CAT ERP GLOBAL UI STANDARD
 (Use for ALL modules)
=========================================================*/

/* PAGE CONTAINER */
.erp-card{
    background:#fff;
    padding:20px;
    margin-bottom:20px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* TITLES */

.erp-title{
    color:#1f7a1f;
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
    border-left:5px solid #1f7a1f;
    padding-left:12px;
}

.erp-subtitle{
    color:#666;
    margin-bottom:15px;
    font-size:14px;
}

/* FORM GRID */

.erp-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.erp-full{
    grid-column:1 / span 2;
}

/* FORM GROUP */

.erp-form-group{
    display:flex;
    flex-direction:column;
}

.erp-form-group label{
    margin-bottom:6px;
    font-weight:600;
    color:#333;
}

/* INPUTS */

.erp-input,
.erp-select,
.erp-textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #d0d0d0;
    border-radius:6px;
    background:white;
    font-size:14px;
}

.erp-input:focus,
.erp-select:focus,
.erp-textarea:focus{
    outline:none;
    border-color:#1f7a1f;
    box-shadow:0 0 5px rgba(31,122,31,.2);
}

.erp-textarea{
    min-height:90px;
    resize:vertical;
}

/* BUTTON AREA */

.erp-btn-area{
    margin-top:20px;
}

/* BUTTONS */

.erp-btn{
    background:#1f7a1f;
    color:white;
    border:none;
    padding:10px 25px;
    border-radius:25px;
    cursor:pointer;
    transition:.3s;
}

.erp-btn:hover{
    background:#145214;
}

.erp-btn-secondary{
    background:#6c757d;
}

.erp-btn-secondary:hover{
    background:#555;
}

.erp-btn-danger{
    background:#dc3545;
}

.erp-btn-danger:hover{
    background:#bb2d3b;
}

.erp-btn-warning{
    background:#f39c12;
}

.erp-btn-warning:hover{
    background:#d68910;
}

/* TABLE CARD */

.erp-table-card{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* TABLE TITLE */

.erp-table-title{
    color:#1f7a1f;
    font-size:20px;
    font-weight:600;
    margin-bottom:15px;
}

/* TABLE */

.erp-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.erp-table thead{
    background:#1f7a1f;
    color:white;
}

.erp-table th{
    padding:12px;
    border:1px solid #ddd;
}

.erp-table td{
    padding:12px;
    border:1px solid #ddd;
}

.erp-table tbody tr:nth-child(even){
    background:#f7f7f7;
}

.erp-table tbody tr:hover{
    background:#eaf7ea;
}

/* SEARCH BAR */

.erp-search{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.erp-search input{
    flex:1;
    min-width:250px;
}

/* BADGES */

.erp-badge{
    padding:5px 12px;
    border-radius:20px;
    color:white;
    font-size:12px;
    font-weight:600;
}

.erp-success{
    background:#28a745;
}

.erp-warning{
    background:#f39c12;
}

.erp-danger{
    background:#dc3545;
}

.erp-info{
    background:#17a2b8;
}

/* MESSAGE */

.erp-msg{
    margin-top:15px;
    color:#1f7a1f;
    font-weight:600;
}

/* MOBILE */

@media(max-width:768px){

    .erp-form-grid{
        grid-template-columns:1fr;
    }

    .erp-full{
        grid-column:auto;
    }

}

/* =========================================================
   BLACK-CAT-SAAS
   GLOBAL SAAS APPLICATION SHELL
   PHASE 1 — FRONTEND MODERNISATION
   ---------------------------------------------------------
   IMPORTANT:
   This is an override layer.
   Existing application CSS is intentionally preserved.
   Do NOT remove earlier CSS yet.
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {

    /* Brand */
    --bc-primary: #176b4d;
    --bc-primary-hover: #12563e;
    --bc-primary-soft: #eaf5f0;

    /* Sidebar */
    --bc-sidebar: #142b24;
    --bc-sidebar-hover: #1d4438;
    --bc-sidebar-active: #21624e;
    --bc-sidebar-text: #dce9e4;
    --bc-sidebar-muted: #9fb8ae;

    /* Header */
    --bc-header: #ffffff;
    --bc-header-border: #e5ebe8;

    /* Workspace */
    --bc-workspace: #f5f7f6;
    --bc-surface: #ffffff;

    /* Text */
    --bc-text: #17221e;
    --bc-text-secondary: #64736d;
    --bc-text-muted: #8a9792;

    /* Borders */
    --bc-border: #e1e7e4;

    /* Status */
    --bc-success: #198754;
    --bc-warning: #d89b18;
    --bc-danger: #dc3545;
    --bc-info: #168aad;

    /* Shadows */
    --bc-shadow-sm: 0 1px 3px rgba(20,43,36,.08);
    --bc-shadow-md: 0 4px 14px rgba(20,43,36,.10);

    /* Radius */
    --bc-radius-sm: 6px;
    --bc-radius-md: 10px;
    --bc-radius-lg: 14px;
}


/* =========================================================
   2. APPLICATION BODY
   ========================================================= */

body.app-body {

    margin: 0;
    min-height: 100vh;

    background: var(--bc-workspace);

    color: var(--bc-text);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;
}


/* =========================================================
   3. GLOBAL HEADER
   ========================================================= */

.app-body .header-banner {

    position: fixed;

    top: 0;
    left: 260px;
    right: 0;

    height: 76px;

    z-index: 3000;

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

    padding: 0 28px;

    background: var(--bc-header);

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

    box-shadow: var(--bc-shadow-sm);

    box-sizing: border-box;
}


/* LEFT SIDE */

.app-body .header-left {

    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}


/* ORGANIZATION LOGO */

.app-body #orgLogo {

    height: 42px !important;
    width: auto;

    max-width: 150px;

    object-fit: contain;

    border-radius: 7px;
}


/* HEADER TEXT */

.app-body .header-text {

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.app-body .system-name {

    color: var(--bc-text);

    font-size: 17px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .2px;

    white-space: nowrap;
}


.app-body .company-name {

    margin-top: 3px;

    color: var(--bc-text-secondary);

    font-size: 12px;

    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 520px;
}


/* =========================================================
   4. HEADER RIGHT / USER AREA
   ========================================================= */

.app-body .header-right {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    gap: 4px;

    text-align: right;

    color: var(--bc-text-secondary);

    font-size: 12px;

    white-space: nowrap;
}


.app-body .welcome-text {

    color: var(--bc-text-secondary);

    font-size: 13px;

    font-weight: 500;
}


.app-body .header-right .highlight {

    color: var(--bc-primary);

    font-weight: 700;
}


.app-body .mini-meta {

    margin-top: 0;

    color: var(--bc-text-muted);

    font-size: 11px;
}


/* =========================================================
   5. SIDEBAR
   ========================================================= */

.app-body .top-nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 260px;
    height: 100vh;

    z-index: 4000;

    padding: 14px 10px 18px;

    box-sizing: border-box;

    background: var(--bc-sidebar);

    border: none;

    overflow-x: hidden;
    overflow-y: auto;

    box-shadow:
        2px 0 10px rgba(0,0,0,.08);
}


/* SIDEBAR SCROLLBAR */

.app-body .top-nav::-webkit-scrollbar {

    width: 6px;
}


.app-body .top-nav::-webkit-scrollbar-track {

    background: transparent;
}


.app-body .top-nav::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,.18);

    border-radius: 20px;
}


.app-body .top-nav::-webkit-scrollbar-thumb:hover {

    background: rgba(255,255,255,.30);
}


/* FIREFOX */

.app-body .top-nav {

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,.22)
        transparent;
}


/* =========================================================
   6. MENU CONTAINER
   ========================================================= */

.app-body .menu {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 3px;

    width: 100%;

    padding: 0;

    margin: 0;

    list-style: none;
}


.app-body .menu > li {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;
}


/* =========================================================
   7. MAIN MENU LINKS
   ========================================================= */

.app-body .menu > li > .menu-link {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 42px;

    padding: 10px 14px;

    box-sizing: border-box;

    border: none;

    border-radius: var(--bc-radius-sm);

    background: transparent;

    color: var(--bc-sidebar-text);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: .1px;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


/* HOVER */

.app-body .menu > li > .menu-link:hover,
.app-body .menu > li:hover > .menu-link {

    background: var(--bc-sidebar-hover);

    color: #ffffff;
}


/* HOME / SIMPLE LINKS */

.app-body .menu > li[data-home="true"] > .menu-link {

    margin-bottom: 5px;

    background: rgba(255,255,255,.07);

    color: #ffffff;
}


/* =========================================================
   8. DROPDOWN MODULE TRIGGER
   ========================================================= */

.app-body .dropdown > .menu-link {

    position: relative;

    padding-right: 36px;
}


/* =========================================================
   9. DROPDOWN ARROW
   ========================================================= */

.app-body .dropdown > .menu-link::after {

    content: "›";

    position: absolute;

    right: 14px;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    color: var(--bc-sidebar-muted);

    font-size: 15px;

    transition:
        transform .18s ease,
        color .18s ease;
}


.app-body .dropdown:hover > .menu-link::after {

    color: #ffffff;

    transform:
        translateY(-50%)
        rotate(90deg);
}


/* =========================================================
   10. DROPDOWN PANEL
   ========================================================= */

.app-body .dropdown-menu {

    position: static;

    display: none;

    width: calc(100% - 8px);

    max-height: 320px;

    margin: 3px 4px 5px;

    padding: 5px;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        rgba(255,255,255,.055);

    border-left: 2px solid
        rgba(117,194,164,.35);

    border-radius: 0 7px 7px 0;

    list-style: none;

    box-shadow: none;
}


/* EXISTING JS / HOVER COMPATIBILITY */

.app-body .dropdown:hover > .dropdown-menu {

    display: block;
}


/* =========================================================
   11. DROPDOWN ITEMS
   ========================================================= */

.app-body .dropdown-menu li {

    display: block;

    width: 100%;

    margin: 1px 0;

    padding: 0;

    box-sizing: border-box;

    color: var(--bc-sidebar-muted);

    font-size: 12px;

    font-weight: 400;

    border: none;

    cursor: pointer;
}


/* IMPORTANT:
   Current menu.js uses data-page on <li>.
   Therefore style the LI itself AND possible anchors.
*/

.app-body .dropdown-menu li,
.app-body .dropdown-menu li a {

    transition:
        background .15s ease,
        color .15s ease;
}


.app-body .dropdown-menu li {

    padding: 9px 10px 9px 13px;

    border-radius: 5px;

    line-height: 1.35;
}


.app-body .dropdown-menu li a {

    color: inherit;

    text-decoration: none;
}


/* SUBMENU HOVER */

.app-body .dropdown-menu li:hover {

    background: var(--bc-sidebar-hover);

    color: #ffffff;
}


/* =========================================================
   12. DROPDOWN SCROLLBAR
   ========================================================= */

.app-body .dropdown-menu::-webkit-scrollbar {

    width: 5px;
}


.app-body .dropdown-menu::-webkit-scrollbar-track {

    background: transparent;
}


.app-body .dropdown-menu::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,.18);

    border-radius: 10px;
}


.app-body .dropdown-menu::-webkit-scrollbar-thumb:hover {

    background: rgba(255,255,255,.30);
}


/* =========================================================
   13. LOGOUT
   ========================================================= */

.app-body .logout-link {

    margin-top: 8px !important;

    background: rgba(220,53,69,.10) !important;

    color: #ffb4bb !important;
}


.app-body .logout-link:hover {

    background: rgba(220,53,69,.22) !important;

    color: #ffffff !important;
}


/* =========================================================
   14. WORKSPACE
   ========================================================= */

.app-body .content-area {

    position: fixed;

    top: 76px;

    left: 260px;

    right: 0;

    bottom: 30px;

    margin: 0;

    padding: 0;

    background: var(--bc-workspace);

    border: none;

    overflow: hidden;
}


/* =========================================================
   15. IFRAME
   ========================================================= */

.app-body #content-frame {

    display: block;

    width: 100%;

    height: 100%;

    border: none;

    background: var(--bc-workspace);
}


/* =========================================================
   16. FOOTER
   ========================================================= */

.app-body .footer-bar {

    position: fixed;

    left: 260px;

    right: 0;

    bottom: 0;

    height: 30px;

    z-index: 2500;

    margin: 0;

    padding: 0 18px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

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

    color: var(--bc-text-muted);

    font-size: 10px;

    letter-spacing: .15px;
}


/* =========================================================
   17. ACTIVE / FOCUS STATES
   ========================================================= */

.app-body .menu-link:focus-visible {

    outline: 2px solid
        rgba(117,194,164,.75);

    outline-offset: -2px;
}


.app-body .dropdown-menu li:focus-visible {

    outline: 2px solid
        rgba(117,194,164,.65);
}


/* =========================================================
   18. SEPARATOR BEFORE LOGOUT
   ========================================================= */

.app-body .menu > li[data-static="true"]:has(.logout-link) {

    margin-top: 8px;

    padding-top: 8px;

    border-top:
        1px solid rgba(255,255,255,.08);
}


/* =========================================================
   19. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .app-body .header-banner {

        left: 230px;

        padding-left: 20px;
        padding-right: 20px;
    }

    .app-body .top-nav {

        width: 230px;
    }

    .app-body .content-area {

        left: 230px;
    }

    .app-body .footer-bar {

        left: 230px;
    }

    .app-body .company-name {

        max-width: 360px;
    }
}


/* =========================================================
   20. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .app-body {

        overflow: hidden;
    }


    .app-body .top-nav {

        width: 220px;

        padding-left: 8px;
        padding-right: 8px;
    }


    .app-body .header-banner {

        left: 220px;

        height: 70px;

        padding:
            0 14px;
    }


    .app-body .content-area {

        top: 70px;

        left: 220px;

        bottom: 28px;
    }


    .app-body .footer-bar {

        left: 220px;

        height: 28px;

        font-size: 9px;
    }


    .app-body .header-left {

        gap: 9px;
    }


    .app-body #orgLogo {

        height: 34px !important;

        max-width: 100px;
    }


    .app-body .system-name {

        font-size: 14px;
    }


    .app-body .company-name {

        max-width: 220px;

        font-size: 10px;
    }


    .app-body .header-right {

        font-size: 10px;
    }


    .app-body .welcome-text {

        font-size: 11px;
    }


    .app-body .mini-meta {

        font-size: 9px;
    }
}


/* =========================================================
   21. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 560px) {

    .app-body .header-right {

        display: none;
    }


    .app-body .system-name {

        font-size: 13px;
    }


    .app-body .company-name {

        max-width: 180px;
    }
}


/* =========================================================
   END — BLACK-CAT-SAAS GLOBAL SHELL PHASE 1
   ========================================================= */

   /* =========================================================
   BLACK-CAT-SAAS
   GLOBAL SHELL — PHASE 1B
   PROFESSIONAL SIDEBAR BRAND & MENU REFINEMENT
   ========================================================= */


/* =========================================================
   1. SIDEBAR CONTAINER REFINEMENT
   ========================================================= */

.app-body .top-nav {

    padding: 0 10px 18px;

    background:
        linear-gradient(
            180deg,
            #142b24 0%,
            #122820 100%
        );
}


/* =========================================================
   2. SIDEBAR BRAND AREA
   ========================================================= */

.app-body .sidebar-brand {

    height: 76px;

    margin: 0 -10px 10px;

    padding: 0 18px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

    border-bottom:
        1px solid rgba(255,255,255,.10);

    position: relative;

    overflow: hidden;
}


/* LEFT BRAND ACCENT */

.app-body .sidebar-brand::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: #54b892;
}


/* SMALL TOP BRAND LINE */

.app-body .sidebar-brand::after {

    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(84,184,146,.65),
            rgba(84,184,146,0)
        );
}


/* =========================================================
   3. BRAND TITLE
   ========================================================= */

.app-body .sidebar-brand-title {

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: 1.2px;
}


/* =========================================================
   4. BRAND SUBTITLE
   ========================================================= */

.app-body .sidebar-brand-subtitle {

    margin-top: 5px;

    color: #8fb7a9;

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   5. MENU START SPACING
   ========================================================= */

.app-body .top-nav > .menu {

    padding-top: 2px;
}


/* =========================================================
   6. HOME BUTTON REFINEMENT
   ========================================================= */

.app-body .menu > li[data-home="true"] > .menu-link {

    min-height: 44px;

    margin-bottom: 7px;

    background:
        linear-gradient(
            90deg,
            rgba(84,184,146,.16),
            rgba(84,184,146,.04)
        );

    border:
        1px solid rgba(84,184,146,.16);

    color: #ffffff;

    font-weight: 700;
}


/* HOME HOVER */

.app-body .menu > li[data-home="true"] > .menu-link:hover {

    background:
        linear-gradient(
            90deg,
            rgba(84,184,146,.24),
            rgba(84,184,146,.08)
        );

    border-color:
        rgba(84,184,146,.28);
}


/* =========================================================
   7. MODULE LINK REFINEMENT
   ========================================================= */

.app-body .menu > li > .menu-link {

    min-height: 43px;

    color: #d5e4de;

    font-size: 13px;

    font-weight: 600;

    border:
        1px solid transparent;
}


/* MODULE HOVER */

.app-body .menu > li > .menu-link:hover {

    background:
        rgba(84,184,146,.10);

    border-color:
        rgba(84,184,146,.12);

    color: #ffffff;

    transform: translateX(1px);
}


/* =========================================================
   8. DROPDOWN MODULE ARROW
   ========================================================= */

.app-body .dropdown > .menu-link::after {

    content: "⌄";

    right: 14px;

    transform:
        translateY(-52%);

    color: #7fa99b;

    font-size: 13px;

    font-weight: 700;
}


.app-body .dropdown:hover > .menu-link::after {

    color: #72c8a4;

    transform:
        translateY(-42%);
}


/* =========================================================
   9. SUBMENU PANEL
   ========================================================= */

.app-body .dropdown-menu {

    width: calc(100% - 12px);

    margin:
        2px 6px 6px;

    padding: 5px 4px 5px 6px;

    background:
        rgba(0,0,0,.10);

    border-left:
        2px solid rgba(84,184,146,.30);

    border-radius:
        0 7px 7px 0;
}


/* =========================================================
   10. SUBMENU ITEMS
   ========================================================= */

.app-body .dropdown-menu li {

    min-height: 34px;

    padding:
        8px 9px 8px 11px;

    box-sizing: border-box;

    color: #aebfb8;

    font-size: 11.5px;

    font-weight: 500;

    line-height: 1.3;

    border:
        1px solid transparent;

    border-radius: 5px;
}


/* SUBMENU HOVER */

.app-body .dropdown-menu li:hover {

    background:
        rgba(84,184,146,.12);

    border-color:
        rgba(84,184,146,.10);

    color: #ffffff;

    transform: translateX(1px);
}


/* =========================================================
   11. SIMPLE MENU ITEMS
   Contract / Organization / Audit / Help etc.
   ========================================================= */

.app-body .menu > li:not(.dropdown) > .menu-link {

    color: #c7d9d2;

    font-size: 12.5px;

    font-weight: 600;
}


/* =========================================================
   12. SECONDARY MENU SEPARATOR
   ========================================================= */

.app-body .menu > li[data-module="contract"] {

    margin-top: 9px;

    padding-top: 9px;

    border-top:
        1px solid rgba(255,255,255,.08);
}


/* =========================================================
   13. LOGOUT REFINEMENT
   ========================================================= */

.app-body .menu > li[data-static="true"]:has(.logout-link) {

    margin-top: 10px;

    padding-top: 9px;

    border-top:
        1px solid rgba(255,255,255,.08);
}


.app-body .logout-link {

    min-height: 40px !important;

    background:
        rgba(220,53,69,.08) !important;

    border:
        1px solid rgba(220,53,69,.10) !important;

    color: #e8aeb4 !important;
}


.app-body .logout-link:hover {

    background:
        rgba(220,53,69,.18) !important;

    border-color:
        rgba(220,53,69,.25) !important;

    color: #ffffff !important;
}


/* =========================================================
   14. SIDEBAR BOTTOM BREATHING SPACE
   ========================================================= */

.app-body .top-nav > .menu {

    padding-bottom: 12px;
}


/* =========================================================
   15. TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .app-body .sidebar-brand-title {

        font-size: 16px;
    }

    .app-body .sidebar-brand-subtitle {

        font-size: 9px;

        letter-spacing: 1.6px;
    }
}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .app-body .sidebar-brand {

        height: 70px;
    }

    .app-body .sidebar-brand-title {

        font-size: 15px;
    }

    .app-body .sidebar-brand-subtitle {

        font-size: 8px;
    }
}


/* =========================================================
   END — GLOBAL SHELL PHASE 1B
   ========================================================= */

   /* =========================================================
   BLACK-CAT-SAAS
   COMMON CRUD DESIGN SYSTEM
   PHASE 3B
   ---------------------------------------------------------
   Reusable visual components for ERP listing / management
   pages.
   ========================================================= */


/* =========================================================
   1. PAGE FOUNDATION
   ========================================================= */

.bc-page {

    min-height: 100vh;

    box-sizing: border-box;

    padding: 24px 28px 38px;

    background: var(--bc-workspace);

    color: var(--bc-text);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


.bc-card {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    background: var(--bc-surface);

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

    border-radius:
        var(--bc-radius-md);

    box-shadow:
        var(--bc-shadow-sm);

    overflow: hidden;
}


/* =========================================================
   2. PAGE HEADER
   ========================================================= */

.bc-page-header {

    padding:
        22px 24px 18px;

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


.bc-page-title {

    margin: 0;

    color:
        var(--bc-text);

    font-size: 23px;

    font-weight: 750;

    line-height: 1.25;

    letter-spacing: .1px;
}


.bc-page-subtitle {

    margin-top: 6px;

    color:
        var(--bc-text-secondary);

    font-size: 12px;

    line-height: 1.5;
}


/* Optional small module label */

.bc-page-kicker {

    margin-bottom: 5px;

    color:
        var(--bc-primary);

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   3. TOOLBAR
   ========================================================= */

.bc-toolbar {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        14px 24px;

    background:
        #fafcfb;

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


.bc-toolbar-grow {

    flex: 1;

    min-width: 180px;
}


/* =========================================================
   4. SEARCH / INPUT
   ========================================================= */

.bc-search {

    width: 100%;

    height: 39px;

    padding:
        0 12px;

    box-sizing: border-box;

    border:
        1px solid #d8e1dd;

    border-radius:
        7px;

    outline: none;

    background:
        #ffffff;

    color:
        var(--bc-text);

    font: inherit;

    font-size: 12px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}


.bc-search::placeholder {

    color:
        #9aa7a1;
}


.bc-search:focus {

    border-color:
        #8ab9a7;

    box-shadow:
        0 0 0 3px
        rgba(23,107,77,.08);
}


/* =========================================================
   5. BUTTON SYSTEM
   ========================================================= */

.bc-btn {

    height: 39px;

    padding:
        0 15px;

    box-sizing: border-box;

    border:
        1px solid transparent;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #53645d;

    font: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}


.bc-btn:hover {

    transform:
        translateY(-1px);
}


.bc-btn-primary {

    background:
        var(--bc-primary);

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

    color:
        #ffffff;
}


.bc-btn-primary:hover {

    background:
        var(--bc-primary-hover);

    box-shadow:
        0 4px 10px
        rgba(23,107,77,.15);
}


.bc-btn-secondary {

    background:
        #ffffff;

    border-color:
        #d5dfdb;

    color:
        #53645d;
}


.bc-btn-secondary:hover {

    background:
        #f2f6f4;

    border-color:
        #c3d1ca;

    color:
        var(--bc-primary);
}


.bc-btn-danger {

    background:
        #ffffff;

    border-color:
        #efd0d4;

    color:
        #b4232f;
}


.bc-btn-danger:hover {

    background:
        var(--bc-danger-soft);

    border-color:
        #e9b9c0;

    color:
        #a31d29;
}


/* =========================================================
   6. TABLE WRAPPER
   ========================================================= */

.bc-table-wrapper {

    width: 100%;

    overflow-x: auto;

    padding:
        18px 24px 24px;

    box-sizing: border-box;
}


/* =========================================================
   7. STANDARD TABLE
   ========================================================= */

.bc-table {

    width: 100%;

    border-collapse:
        separate;

    border-spacing: 0;

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

    border-radius:
        9px;

    overflow: hidden;

    background:
        #ffffff;
}


.bc-table th {

    padding:
        11px 13px;

    background:
        #f4f7f5;

    border-bottom:
        1px solid #dfe7e3;

    color:
        var(--bc-text-secondary);

    font-size: 10px;

    font-weight: 750;

    letter-spacing: .45px;

    text-align: left;

    text-transform: uppercase;

    white-space: nowrap;
}


.bc-table td {

    padding:
        11px 13px;

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

    color:
        #43524c;

    font-size: 12px;

    line-height: 1.4;

    vertical-align: middle;
}


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

    border-bottom:
        none;
}


.bc-table tbody tr {

    transition:
        background .14s ease;
}


.bc-table tbody tr:hover {

    background:
        #f8faf9;
}


/* =========================================================
   8. TABLE EMPHASIS
   ========================================================= */

.bc-table-code {

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

    font-weight:
        700 !important;

    white-space:
        nowrap;
}


.bc-table-name {

    color:
        #26352f !important;

    font-weight:
        650 !important;
}


/* =========================================================
   9. TABLE ACTIONS
   ========================================================= */

.bc-table-actions {

    white-space:
        nowrap;

    text-align:
        left;
}


.bc-action-btn {

    min-width:
        52px;

    height:
        29px;

    margin-right:
        5px;

    padding:
        0 9px;

    border:
        1px solid #d5dfdb;

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        #53645d;

    font: inherit;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.bc-action-btn:hover {

    background:
        var(--bc-primary-soft);

    border-color:
        #b9d4c8;

    color:
        var(--bc-primary);
}


.bc-action-btn-danger {

    border-color:
        #efd0d4;

    color:
        #b4232f;
}


.bc-action-btn-danger:hover {

    background:
        var(--bc-danger-soft);

    border-color:
        #e9b9c0;

    color:
        #a31d29;
}


/* =========================================================
   10. STATUS BADGES
   ========================================================= */

.bc-status {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        70px;

    padding:
        5px 9px;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .25px;

    text-transform:
        uppercase;
}


.bc-status-active {

    background:
        #e9f7ef;

    color:
        #167044;
}


.bc-status-warning {

    background:
        #fff4d8;

    color:
        #956a00;
}


.bc-status-danger {

    background:
        #fdebed;

    color:
        #b4232f;
}


.bc-status-neutral {

    background:
        #eef2f0;

    color:
        #64736d;
}


/* =========================================================
   11. LOADING / EMPTY / ERROR STATES
   ========================================================= */

.bc-empty,
.bc-loading,
.bc-error {

    padding:
        34px 18px !important;

    text-align:
        center !important;

    color:
        var(--bc-text-muted) !important;

    font-size:
        12px !important;
}


.bc-error {

    color:
        var(--bc-danger) !important;
}


/* =========================================================
   12. FOCUS STATES
   ========================================================= */

.bc-btn:focus-visible,
.bc-search:focus-visible,
.bc-action-btn:focus-visible {

    outline:
        2px solid
        rgba(23,107,77,.45);

    outline-offset:
        2px;
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .bc-page {

        padding:
            16px 12px 28px;
    }


    .bc-page-header {

        padding-left:
            17px;

        padding-right:
            17px;
    }


    .bc-toolbar {

        padding:
            13px 17px;

        flex-wrap:
            wrap;
    }


    .bc-toolbar-grow {

        flex-basis:
            100%;
    }


    .bc-table-wrapper {

        padding:
            16px 17px 22px;
    }


    .bc-table {

        min-width:
            620px;
    }
}


@media (max-width: 520px) {

    .bc-page-title {

        font-size:
            19px;
    }


    .bc-toolbar .bc-btn {

        flex:
            1;
    }
}


/* =========================================================
   END — COMMON CRUD DESIGN SYSTEM
   ========================================================= */

   .post-deduction-title {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 7px 8px;
  background: #eef6f1;
  border-left: 4px solid #1b5e20;
  color: #1b5e20;
  font-size: 12px;
  font-weight: 700;
}

.post-deduction-note {
  grid-column: 1 / -1;
  color: #66756d;
  font-size: 10px;
  line-height: 1.4;
  padding-top: 0;
}