/* ==========================================================
   Bootstrap integration layer (keeps existing TANLAP colors)
   - Adds mobile responsiveness
   - Makes legacy inputs/tables/buttons look like Bootstrap
   ========================================================== */

:root{
  --brand: #384f76;       /* existing nav accent */
  --brand-dark: #2a3b5a;
  --accent: #840F44;      /* existing login accent */
}

/* Keep existing background but prevent horizontal overflow */
html, body { overflow-x: hidden; }

/* Improve content readability */
#innerContentHolder{
  padding: 16px 16px 24px 16px;
  background: #fff;
  border-radius: 12px;
  margin: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Page header */
#pageHeader{
  padding: 10px 12px;
  border-left: 5px solid var(--brand);
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Top system name banner tweaks */
#systemName{
  display: block;
  padding: 10px 12px;
}

/* Legacy form controls => Bootstrap-like */
.innerInputs,
.innerInputs2,
.tcal,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea{
  display: block;
  width: 100% !important;
  padding: .375rem .75rem !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529 !important;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da !important;
  border-radius: .375rem !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  float: none !important;
  box-shadow: none !important;
  outline: none !important;
  max-width: 100%;
}

.innerInputs:focus,
.innerInputs2:focus,
.tcal:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(56,79,118,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(56,79,118,.15) !important;
}

/* Reduce overly wide inline styles on small screens */
@media (max-width: 768px){
  .innerInputs, .innerInputs2, .tcal, input, select, textarea { width: 100% !important; }
  #innerContentHolder{ margin: 8px; padding: 12px; }
}

/* Buttons */
#inputButton,
input[type="submit"],
input[type="button"],
button{
  border-radius: .5rem !important;
}

/* Brand button helper used by JS */
.btn-brand{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn-brand:hover{ background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color:#fff !important; }

/* Convert legacy submit input to Bootstrap-like button */
#inputButton,
input[type="submit"]{
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: #fff !important;
  padding: .45rem .9rem !important;
  font-weight: 600;
  cursor: pointer;
}
#inputButton:hover,
input[type="submit"]:hover{ background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }

/* Links that behave like buttons (used in many list pages) */
a.action-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .25rem .6rem;
  border-radius: .5rem;
  text-decoration: none !important;
  font-weight: 600;
}
a.action-btn.btn-edit{ background: rgba(13,110,253,.12); color: #0d6efd !important; }
a.action-btn.btn-delete{ background: rgba(220,53,69,.12); color: #dc3545 !important; }
a.action-btn.btn-view{ background: rgba(25,135,84,.12); color: #198754 !important; }

/* Tables: make all data tables bootstrap-like inside inner content */
#innerContentHolder table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

#innerContentHolder table th,
#innerContentHolder table td{
  padding: .55rem .6rem !important;
  vertical-align: middle;
}

#innerContentHolder table thead th,
#innerContentHolder table tr:first-child th{
  background: #f8f9fa;
}

#innerContentHolder table,
#innerContentHolder table th,
#innerContentHolder table td{
  border: 1px solid #dee2e6 !important;
}

/* Make table scroll on small screens */
#innerContentHolder .table-responsive,
#innerContentHolder table{
  overflow-x: auto;
}

/* Login page: make it look modern without changing layout color */
/* New Bootstrap login page */
body.tanlap-auth{
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(56,79,118,.95) 0%, rgba(56,79,118,.35) 35%, #f8f9fa 100%);
}
.tanlap-auth-card{
  border: 0;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

/* Legacy login blocks (kept for safety if older template pages exist) */
#loginRound{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  padding-bottom: 10px;
}
#loginFields{ color: var(--accent); }

/* Nav: add some spacing and improve mobile behavior */
#w{ padding: 8px 12px; }
#nav > li > a{
  border-radius: 10px;
}
@media (max-width: 992px){
  /* Stack menu items */
  #nav { display: block; }
  #nav > li { display: block; margin-bottom: 6px; }
  #nav li ul{ position: static; }
}

/* Pagination component inserted by JS */
.tanlap-pagination{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}


/* ==========================================================
   Modern sidebar menu (menu.php)
   ========================================================== */


.tanlap-sidebar{
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: 16px;
  padding: 14px;
  margin: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}

.tanlap-logo{
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  padding: 6px;
}

.tanlap-brand-title{
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.1;
}

.tanlap-brand-subtitle{
  font-size: 12px;
  opacity: .85;
}

.tanlap-nav{
  padding-left: 0;
  margin: 0;
}

.tanlap-nav-item{ margin-bottom: 6px; }

.tanlap-navlink{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff !important;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

.tanlap-navlink:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.tanlap-navlink-top{
  background: rgba(255,255,255,.10);
}

.tanlap-navlink.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.22);
}

.tanlap-submenu{
  margin: 8px 0 2px 0;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.tanlap-sublink{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin: 4px 0;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.tanlap-sublink:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.16);
}

.tanlap-sublink.active{
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.22);
}

.tanlap-navlink .bi-chevron-down{
  transition: transform .15s ease;
  opacity: .9;
}

.tanlap-navlink.open .bi-chevron-down{
  transform: rotate(180deg);
}

/* Make the legacy table-based left column feel aligned */
@media (max-width: 992px){
  .tanlap-sidebar{ margin: 8px 6px; }
}