:root {
  --blue-dark: #1a3a5c;
  --blue-mid: #2563a8;
  --blue-light: #406d9c;
  --blue-pale: #d6e8f7;
  --blue-xpale: #eef5fc;
  --white: #ffffff;
  --ash-light: #9c9696;
  --ash-mid: #d1d5db;
  --ash-dark: #5f5b5b;
  --ash-xdark: #374151;
  --brown: #7c5c3e;
  --brown-light: #c4a882;
  --brown-pale: #f3e8db;
  --green: #2d7a4f;
  --green-light: #d1f0e0;
  --red: #c0392b;
  --red-light: #fdecea;
  --yellow: #d97706;
  --yellow-light: #fef3c7;
  --shadow: 0 2px 14px rgba(26,58,92,0.10);
  --shadow-md: 0 4px 24px rgba(26,58,92,0.15);
  --radius: 10px;
  --radius-lg: 14px;
}
*{ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
.auth-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../imgs/bg.jpg');
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(1px);
}
.auth-card{
  background: transparent;
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  width: 100%;
  max-width: 440px;
}
.auth-logo{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.auth-logo img{
  height: 45px;
  width: 70px;  
}
.auth-logo h1{
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  font-style: italic;
  font-family: "Dancing Script";
}
.auth-tabs{
  display: flex;
  background: var(--ash-light);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}
.auth-tab{
  padding: 8px 4px;
  border: none;
  background: transparent;
  border-radius: 6px;
  flex: 1;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ash-dark);
  transition: all 0.2s;
}
.auth-tab.active{
  background: var(--blue-mid);
  color: var(--white);
}
.auth-link{
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ash-dark);
}
.auth-link a{
  color: var(--blue-mid);
  text-decoration: none;
  font-weight: 600;
}
   /* DASHBOARD */
.dashboard{
  display: flex;
  min-height: 100vh;
}
.sidebar{
  width: 248px;
  background: var(--blue-dark);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; 
  left: 0;
  height: 100vh;
  z-index: 200;
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.sidebar-logo{
  padding: 22px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-logo img{
  width: 42px; 
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
}
.sidebar-logo 
.logo-fallback-sm{
  width: 42px; 
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 22px; 
  flex-shrink: 0;
}
.sidebar-logo-text h2{ 
  font-size: 16px; 
  color: var(--white); 
  font-weight: 700; 
}
.sidebar-logo-text p{ 
  font-size: 12px; 
  color: var(--blue-pale); 
  margin-top: 2px; 
}
.sidebar-nav{ 
  flex: 1; 
  padding: 14px 0; 
  overflow-y: auto;
}
.nav-link{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.18s;
  border-left: 3px solid transparent;
  position: relative;
}
.nav-link .icon{ 
  font-size: 16px; 
  width: 20px; 
  text-align: center; 
  flex-shrink: 0; 
}
.nav-link:hover, 
.nav-link.active{
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border-left-color: var(--blue-light);
}
.nav-link .badge-count{
  margin-left: auto;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: 700;
}
.sidebar-footer{
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.user-info{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.user-avatar{
  width: 36px; 
  height: 36px;
  background: var(--blue-light);
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-weight: 700; 
  font-size: 14px;
  flex-shrink: 0;
  color: var(--white);
}
.user-name{ 
  font-size: 13px; 
  font-weight: 600; 
  color: var(--white); 
}
.user-role{ 
  font-size: 11px; 
  color: var(--blue-pale); 
}

.main-content{ 
  flex: 1; 
  margin-left: 248px; 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
}
.topbar{
  background: var(--white);
  padding: 13px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 12px;
}
.topbar-left{ 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  min-width: 0; 
}
.hamburger{
  display: none;
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  color: var(--blue-dark);
  padding: 4px;
  flex-shrink: 0;
}
.topbar-title{ 
  font-size: 16px; 
  color: var(--blue-dark); 
  font-weight: 700; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.topbar-right{ 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  flex-shrink: 0; 
}
.date-badge{
  font-size: 10px;
  color: var(--ash-dark);
  background: var(--ash-light);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.page-content{ 
  padding: 26px 28px; 
  flex: 1; 
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.stat-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.15s;
}
.stat-card:hover{ 
  transform: translateY(-2px); 
}
.stat-icon{
  width: 50px; 
  height: 50px;
  border-radius: 12px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.si-blue{ 
  background: var(--blue-pale); 
  color: var(--yellow)
}
.si-green{ 
  background: var(--green-light); 
  color: var(--green);
}
.si-brown{ 
  background: var(--brown-pale); 
  color: var(--brown);
}
.si-ash{ 
  background: var(--ash-light); 
  color: var(--green-light);
}
.si-yellow{ 
  background: var(--yellow-light);
  color: var(--blue-light); 
}
.si-red{ 
  background: var(--red-light); 
}
.stat-value{ 
  font-size: 20px; 
  font-weight: 800; 
  color: var(--blue-dark); 
  line-height: 1; 
}
.stat-label { 
  font-size: 13px; 
  color: var(--ash-dark); 
  margin-top: 3px; 
}
.card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 22px;
}
.card-header{
  padding: 16px 22px;
  border-bottom: 1.5px solid var(--ash-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.card-header h3{ 
  font-size: 15px; 
  color: var(--blue-dark); 
  font-weight: 700; 
}
.card-body{ 
  padding: 22px; 
}
.card-body.no-pad{ 
  padding: 0; 
}
.welcome-banner{
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.welcome-banner h2{ 
  font-size: 20px; 
  font-weight: 700; 
}
.welcome-banner p{ 
  font-size: 13px; 
  color: var(--blue-pale); 
  margin-top: 4px; 
}
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid 
.full{ 
  grid-column: 1 / -1; 
}
.section-label{
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 0 4px;
  border-bottom: 2px solid var(--brown-light);
  margin-top: 6px;
}
.section-header{
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 28px 0 6px 0;
  border-bottom: 3px solid var(--blue-mid);
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-hint{
  font-size: 13px;
  color: var(--ash-dark);
  margin-bottom: 14px;
  grid-column: 1 / -1;
  margin-top: -8px;
}
.form-group{
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.form-group label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: inherit; 
}
.auth-card 
.form-group label {
  color: var(--white);
}
.form-group label span.req{ 
  color: var(--red); 
}
.form-group input,
.form-group select,
.form-group textarea{
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ash-mid);
  border-radius: 8px;
  font-size: 13px;
  color: #222;
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color: var(--blue-mid);
}
.form-group input[readonly]{
  background: var(--ash-light);
  color: var(--ash-dark);
}
.form-group textarea{
  resize: vertical;
  min-height: 80px;
}
.form-group small
.form-hint{
  font-size: 12px;
  color: var(--ash-dark);
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.4;
}
/* Input Groups */
.input-group{
  display: flex;
  align-items: stretch;
  width: 100%;
}
.input-group 
.prefix{
  background: var(--blue-pale);
  color: var(--blue-mid);
  border: 1.5px solid var(--blue-light);
  border-right: none;
  padding: 10px 12px;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.input-group input,
.input-group select{
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  flex: 1;
}
.btn{
  display: inline-block;
  padding: 11px 24px;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
}
.btn-primary{ 
  background: var(--blue-mid); 
  color: var(--white); 
  width: 100%; 
}
.btn-primary:hover{ 
  background: var(--blue-dark); 
}
.btn-secondary{ 
  background: var(--ash-light); 
  color: var(--ash-xdark); 
  border: 1.5px solid var(--ash-mid); 
}
.btn-secondary:hover{ 
  background: var(--ash-mid); 
}
.btn-green{ 
  background: var(--green); 
  color: var(--white); 
}
.btn-green:hover{ 
  opacity: 0.88; 
}
.btn-brown{ 
  background: var(--brown); 
  color: var(--white); 
}
.btn-brown:hover{ 
  opacity: 0.88; 
}
.btn-danger{ 
  background: var(--red); 
  color: var(--white); 
}
.btn-sm{ 
  padding: 6px 14px; 
  font-size: 12px; 
}
.btn-full{
  width: 100%; 
}
.btn:disabled{ 
  opacity: 0.55; 
  cursor: not-allowed; 
}
.btn-logout{
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  font-family: inherit;
  text-align: left;
}
.btn-logout:hover{ 
  background: var(--red); 
  border-color: var(--red); 
  color: var(--white); 
}

/* Dynamic Multi-Rows (Debtors/Creditors) */
.dynamic-row{
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.dynamic-row input,
.dynamic-row select{
  flex: 1;
  min-width: 100px;
  padding: 9px 11px;
  border: 1.5px solid var(--ash-mid);
  border-radius: 7px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.dynamic-row input:focus{ 
  border-color: var(--blue-mid); 
}
.btn-remove{
  background: var(--red-light);
  color: var(--red);
  border: none;
  border-radius: 7px;
  padding: 9px 11px;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.btn-add-row{
  background: var(--blue-xpale);
  color: var(--blue-mid);
  border: 1.5px dashed var(--blue-light);
  border-radius: 7px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  width: 100%;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-add-row:hover{ 
  background: var(--blue-pale); 
  border-style: solid; 
}
.filter-bar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
.filter-bar input,
.filter-bar select{
  padding: 9px 13px;
  border: 1.5px solid var(--ash-mid);
  border-radius: 8px;
  font-size: 13px;
  background: var(--white);
  outline: none;
  font-family: inherit;
}
.filter-bar input:focus,
.filter-bar select:focus{ 
  border-color: var(--blue-mid); 
}
.table-wrap{ 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
}
table{ 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 13px; 
  min-width: 540px; 
}
thead th{
  background: var(--ash-light);
  color: var(--blue-dark);
  font-weight: 700;
  padding: 11px 13px;
  text-align: left;
  white-space: nowrap;
}
tbody td{
  padding: 11px 13px;
  border-bottom: 1px solid var(--ash-light);
  color: #333;
  vertical-align: middle;
}
tbody tr:last-child td{ 
  border-bottom: none; 
}
tbody tr:hover{ 
  background: var(--blue-xpale); 
}
.no-data{ 
  text-align: center; 
  color: var(--ash-dark); 
  padding: 32px 16px !important; 
  font-style: italic; 
}
.badge{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.badge-blue{ 
  background: var(--blue-pale);   
  color: var(--blue-mid); 
}
.badge-green { 
  background: var(--green-light); 
  color: var(--green); 
}
.badge-brown { 
  background: var(--brown-pale);  
   color: var(--brown); 
  }
.badge-red{ 
  background: var(--red-light);   
  color: var(--red); 
  }
.badge-yellow{ 
  background: var(--yellow-light);
  color: var(--yellow); 
}
.badge-gray{ 
  background: var(--ash-light);   
  color: var(--ash-dark); 
}
.status-badge{
  display: inline-block; 
  padding: 3px 10px; 
  border-radius: 20px; 
  font-size: 11px; 
  font-weight: 700; 
}
.status-active, 
.status-paid{ 
  background: var(--green-light);  
  color: var(--green); 
}
.status-pending{ 
  background: var(--yellow-light); 
  color: var(--yellow); 
}
.status-suspend, 
.status-debt{ 
  background: var(--red-light);    
  color: var(--red); 
}
.status-submit{ 
  background: var(--blue-pale);    
  color: var(--blue-mid); 
}
.alert{
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
  display: none;
}
.alert-error{ 
  background: var(--red-light); 
  color: var(--red); 
  border: 1px solid #f5c6c3; 
}
.alert-success{ 
  background: var(--green-light); 
  color: var(--green); 
  border: 1px solid #a8dfc5; 
}
.alert-info{ 
  background: var(--blue-pale); 
  color: var(--blue-dark); 
  border: 1px solid #b0d0ed; 
}
.alert-warn{ 
  background: var(--yellow-light); 
  color: var(--yellow); 
  border: 1px solid #fde68a; 
}
.alert.show{ 
  display: block; 
}
.sidebar-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
}
.sidebar-overlay.show{ 
  display: block; 
}
.modal-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop.open,
.modal-backdrop.show{ 
  display: flex; 
}
.modal{
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.modal-header{
  padding: 18px 22px;
  border-bottom: 1.5px solid var(--ash-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}
.modal-header h3{ 
  font-size: 16px; 
  color: var(--blue-dark); 
  font-weight: 700; 
}
.modal-close{
  background: var(--ash-light);
  border: none;
  border-radius: 6px;
  width: 30px; 
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  color: var(--ash-dark);
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.modal-close:hover{ 
  background: var(--red-light); 
  color: var(--red); 
}
.modal-body{ 
  padding: 22px; 
}
.modal-footer{
  padding: 14px 22px;
  border-top: 1.5px solid var(--ash-light);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.detail-table{ 
  width: 100%; 
  font-size: 14px; 
  border-collapse: collapse; 
}
.detail-table td{ 
  padding: 7px 4px; 
  border-bottom: 1px solid var(--ash-light); 
}
.detail-table td:first-child{ 
  color: var(--ash-dark); 
  width: 45%; 
  font-weight: 500; 
}
.detail-table td:last-child{ 
  color: #222; 
  font-weight: 600; 
}
.detail-table tr:last-child td{ 
  border-bottom: none; 
}
.sub-heading{
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* Loading Spinner */
.spinner{
  width: 28px; 
  height: 28px;
  border: 3px solid var(--ash-mid);
  border-top-color: var(--blue-mid);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 20px auto;
}
@keyframes spin{ 
  to { 
    transform: rotate(360deg); 
  } 
}
.loading-row td{ 
  text-align: center; 
  padding: 28px; 
}

  /* responsiveness */
@media (max-width: 920px){
  .sidebar{ 
    transform: translateX(-100%); 
  }
  .sidebar.open{ 
    transform: translateX(0); 
  }
  .main-content{ 
    margin-left: 0; 
  }
  .hamburger{ 
    display: block; 
  }
  .form-grid{ 
    grid-template-columns: 1fr; 
  }
  .form-grid .full{ 
    grid-column: 1; 
  }
  .section-label{ 
    grid-column: 1; 
  }
  .stats-grid{ 
    grid-template-columns: 1fr 1fr; 
  }
  .page-content{ 
    padding: 16px; 
  }
  .topbar{ 
    padding: 12px 16px; 
  }
  .welcome-banner{ 
    padding: 18px 20px; 
  }
  .welcome-banner 
  .banner-emoji{ 
    display: none; 
  }
}
@media (max-width: 540px){
  .stats-grid{ 
    grid-template-columns: 1fr; 
  }
  .auth-card { 
    padding: 28px 20px; 
  }
  .modal{ 
    border-radius: 0; 
    max-height: 100vh; 
  }
  .filter-bar{ 
    flex-direction: column; 
    align-items: stretch; 
  }
  .filter-bar input, 
  .filter-bar select{ 
    width: 100%; 
  }
  .card-header{ 
    flex-direction: column; 
    align-items: flex-start; 
  }
}
@media print{
  .sidebar, .topbar, 
  .btn, .filter-bar, 
  .modal-footer{ 
    display: none !important;
   }
  .main-content{ 
    margin-left: 0 !important;
  }
  .card{ 
    box-shadow: none;
    border: 1px solid #ccc;
  }
}
/* FORM SECTION CARDS */
.form-section{
  background: var(--blue-xpale);
  border: 1.5px solid var(--blue-pale);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.form-section-header{
  display: flex;
  align-items: center;
   gap: 10px;
  font-size: 14px; 
  font-weight: 700; 
  color: var(--blue-dark);
  margin-bottom: 16px; 
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blue-pale);
}
.form-section-header 
.fs-icon{
  width: 32px; 
  height: 32px; 
  border-radius: 8px;
  background: var(--blue-mid); 
  color: var(--white);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 16px; 
  flex-shrink: 0;
}
.form-section.fs-warn{ 
  background: #fff8ec; 
  border-color: var(--yellow-light); 
}
.form-section.fs-warn   
.form-section-header{ 
  color: var(--yellow); 
  border-bottom-color: var(--yellow-light); 
}
.form-section.fs-warn   
.fs-icon{ 
  background: var(--yellow); 
}
.form-section.fs-danger{ 
  background: var(--red-light); 
  border-color: #f5c6c3; 
}
.form-section.fs-danger 
.form-section-header{ 
  color: var(--red); 
  border-bottom-color: #f5c6c3; 
}
.form-section.fs-danger 
.fs-icon{ 
  background: var(--red); 
}
.form-section.fs-green{ 
  background: var(--green-light); 
  border-color: #a8dfc5; 
}
.form-section.fs-green  
.form-section-header{ 
  color: var(--green); 
  border-bottom-color: #a8dfc5; 
}
.form-section.fs-green  
.fs-icon{ 
  background: var(--green); 
}
.form-section.fs-brown{ 
  background: var(--brown-pale); 
  border-color: var(--brown-light); 
}
.form-section.fs-brown  
.form-section-header{ 
  color: var(--brown); 
  border-bottom-color: var(--brown-light); 
}
.form-section.fs-brown  
.fs-icon{ 
  background: var(--brown); 
}
.form-section 
.form-grid{ 
  gap: 14px; 
}
.form-section 
.form-group label{ 
  font-size: 13px; 
  color: var(--blue-dark); 
}
.form-section 
.form-group input,
.form-section 
.form-group select,
.form-section 
.form-group textarea{
  border: 1.5px solid var(--ash-mid); 
  background: var(--white);
}
.form-section .form-group input:focus,
.form-section .form-group select:focus,
.form-section .form-group textarea:focus{
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(37,99,168,0.12);
}
.help-text{ 
  font-size: 12px; 
  color: var(--ash-dark); 
  margin-bottom: 10px; 
}
.form-submit-bar{ 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  align-items: center; 
  padding-top: 6px; 
  border-top: 1.5px solid var(--ash-light);
}

/* PERIOD TABS */
.period-tabs{
  display: flex; 
  gap: 6px;
  background: var(--ash-light);
  border-radius: 8px; 
  padding: 4px;
  margin-bottom: 22px; 
  max-width: 360px;
}
.period-tab{
  flex: 1; 
  padding: 9px 6px;
  border: none; 
  background: transparent;
  border-radius: 6px; 
  cursor: pointer;
  font-size: 13px; 
  font-weight: 600;
  color: var(--ash-dark); 
  transition: all 0.2s;
}
.period-tab.active{ 
  background: var(--blue-mid); 
  color: var(--white); 
}
.notif-bell{
  position: relative; 
  cursor: pointer;
  background: none;
  border: none;
  font-size: 16px; 
  color: var(--blue-dark);
  padding: 4px 8px;
}
.notif-badge{
  position: absolute; 
  top: 0; 
  right: 0;
  background: var(--red); 
  color: var(--white);
  border-radius: 50%; 
  width: 18px; 
  height: 18px;
  font-size: 10px; 
  font-weight: 700;
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.btn-export{
  background: var(--green); 
  color: var(--white);
  border: none; 
  border-radius: 8px;
  padding: 8px 16px; 
  font-size: 13px;
  font-weight: 600; 
  cursor: pointer;
  display: inline-flex;
  align-items: center; 
  gap: 6px;
  transition: opacity 0.2s;
}
.btn-export:hover{ 
  opacity: 0.88; 
}
.input-error{ 
  border-color: var(--red) !important; 
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12) !important; 
}
.field-error{ 
  font-size: 12px; 
  color: var(--red); 
  margin-top: 4px; 
  display: block; 
}