/* =========================================================
   TNPEITA Member Portal — Design tokens (from brand mark)
   ========================================================= */
:root{
  --bg-dark:#0a1628;
  --bg-dark-2:#0d1b2a;
  --bg-card:#13233a;
  --bg-card-hover:#17304f;
  --border-color:#2a3f5f;
  --accent-gold:#e6a53d;
  --accent-gold-dark:#c9891f;
  --accent-green:#2f7d5f;
  --text-light:#f5f7fa;
  --text-muted:#9aa5b1;
  --success:#2fae66;
  --danger:#e5484d;
  --warning:#e6a53d;
  --radius:14px;
  --font-serif:'Playfair Display', Georgia, serif;
  --font-sans:'Inter', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html, body{
  overflow-x:hidden;
  max-width:100vw;
}
body{
  background:radial-gradient(circle at 50% 0%, #102338 0%, var(--bg-dark) 60%);
  color:var(--text-light);
  font-family:var(--font-sans);
  min-height:100vh;
}
a{color:var(--accent-gold); text-decoration:none;}
h1,h2,h3,.brand-serif{font-family:var(--font-serif);}

/* Cards / panels */
.tn-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:28px;
  
}
.tn-panel-header{
  text-align:center;
  padding:32px 16px 8px;
}
.tn-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(230,165,61,.12);
  border:1px solid var(--accent-gold);
  color:var(--accent-gold);
  padding:6px 16px;border-radius:30px;
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
}

/* Buttons */
.btn-tn-primary{
  background:linear-gradient(180deg,var(--accent-gold),var(--accent-gold-dark));
  border:none;color:#0a1628;font-weight:700;
  padding:10px 22px;border-radius:8px;
}
.btn-tn-primary:hover{filter:brightness(1.08); color:#0a1628;}
.btn-tn-outline{
  background:transparent;border:1px solid var(--border-color);
  color:var(--text-light);padding:9px 20px;border-radius:8px;
}
.btn-tn-outline:hover{background:var(--bg-card-hover); color:var(--text-light);}

/* Forms */
.form-control, .form-select{
  background:var(--bg-dark-2)!important;
  border:1px solid var(--border-color)!important;
  color:var(--text-light)!important;
  border-radius:8px;
}
.form-control:focus, .form-select:focus{
  border-color:var(--accent-gold)!important;
  box-shadow:0 0 0 .2rem rgba(230,165,61,.15)!important;
}
.form-control::placeholder{color:var(--text-muted);}
label{color:var(--text-muted); font-size:.85rem; margin-bottom:4px;}

/* Bootstrap text-color utilities default to colors tuned for light
   backgrounds (e.g. text-muted = #6c757d). Override them here so every
   ".text-muted", ".text-success" etc. used across the templates stays
   readable against the dark navy theme. */
.text-muted{color:var(--text-muted)!important;}
.text-success{color:var(--success)!important;}
.text-danger{color:var(--danger)!important;}
.text-warning{color:var(--warning)!important;}
.text-secondary{color:var(--text-muted)!important;}
.text-light, .text-body, p, span, td, li{color:inherit;}
small, .small{color:var(--text-muted);}

/* Status pills */
.status-pill{padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;}
.status-active{background:rgba(47,174,102,.15); color:var(--success); border:1px solid var(--success);}
.status-inactive{background:rgba(229,72,77,.15); color:var(--danger); border:1px solid var(--danger);}
.status-expired{background:rgba(230,165,61,.15); color:var(--warning); border:1px solid var(--warning);}
.status-pending{background:rgba(154,165,177,.15); color:var(--text-muted); border:1px solid var(--text-muted);}

/* ============ Dashboard shell (member + admin) ============ */
.tn-shell{display:flex; min-height:100vh; overflow-x:hidden; max-width:100vw;}
.tn-sidebar{
  width:260px; background:var(--bg-dark-2); border-right:1px solid var(--border-color);
  position:fixed; top:0; bottom:0; left:0; z-index:1030;
  transition:transform .25s ease; overflow-y:auto;
}
.tn-sidebar .brand{padding:22px 20px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:10px;}
.tn-sidebar .brand img{width:38px;height:38px;}
.sidebar-close-btn{
  display:none; margin-left:auto; background:none; border:none; color:var(--text-muted);
  font-size:1.2rem; padding:4px 8px; border-radius:6px;
}
.sidebar-close-btn:hover{color:var(--accent-gold); background:var(--bg-card);}
.tn-sidebar nav{padding:14px 10px;}
.tn-sidebar .nav-link{
  color:var(--text-muted); padding:11px 14px; border-radius:8px; margin-bottom:4px;
  display:flex; align-items:center; gap:10px; font-size:.92rem;
}
.tn-sidebar .nav-link i{width:18px; text-align:center;}
.tn-sidebar .nav-link:hover{background:var(--bg-card); color:var(--text-light);}
.tn-sidebar .nav-link.active{background:rgba(230,165,61,.12); color:var(--accent-gold); font-weight:600;}

.tn-main{margin-left:260px; flex:1; display:flex; flex-direction:column; min-height:100vh;}
.tn-topbar{
  background:var(--bg-dark-2); border-bottom:1px solid var(--border-color);
  padding:14px 26px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.tn-topbar .menu-toggle{display:none; background:none; border:none; color:var(--text-light); font-size:1.3rem;}
.profile-menu img{width:36px;height:36px;border-radius:50%; object-fit:cover; border:2px solid var(--accent-gold);}
.profile-menu .dropdown-menu{background:var(--bg-card); border:1px solid var(--border-color);}
.profile-menu .dropdown-item{color:var(--text-light);}
.profile-menu .dropdown-item:hover{background:var(--bg-card-hover); color:var(--accent-gold);}

.tn-content{padding:26px; flex:1; overflow-x:hidden; max-width:100%;}

/* Native file/date inputs can render with a fixed intrinsic minimum width
   on some mobile browsers, wider than their container — force them to
   respect the grid instead of pushing the page wider. */
input[type="file"], input[type="date"]{max-width:100%;}
.tn-footer{padding:16px 26px; text-align:center; color:var(--text-muted); font-size:.82rem; border-top:1px solid var(--border-color);}

.stat-card{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:20px;}
.stat-card .stat-value{font-size:1.7rem; font-weight:700;}
.stat-card .stat-label{color:var(--text-muted); font-size:.82rem;}

/* Bootstrap tables default to a white background via CSS variables.
   Override those variables globally so ANY ".table" (not just .table-tn)
   renders correctly on the dark theme, including thead/tbody stripes. */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--text-light);
  --bs-table-striped-bg:rgba(255,255,255,.03);
  --bs-table-striped-color:var(--text-light);
  --bs-table-hover-bg:rgba(230,165,61,.06);
  --bs-table-hover-color:var(--text-light);
  --bs-table-border-color:var(--border-color);
  color:var(--text-light);
}
.table > :not(caption) > * > *{background-color:transparent; color:inherit; border-bottom-color:var(--border-color);}
.table thead th{color:var(--text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; border-bottom-width:1px;}

.table-tn{color:var(--text-light);}
.table-tn thead{color:var(--text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;}
.table-tn td, .table-tn th{border-color:var(--border-color)!important; vertical-align:middle;}

/* Mobile-responsive stacked tables: on narrow screens, tables with class
   "table-mobile-stack" turn each row into a labeled card instead of
   requiring horizontal scrolling. Add data-label="Column Name" to each
   <td> to supply the label shown next to its value. */
@media (max-width:767px){
  table.table-mobile-stack thead{display:none;}
  table.table-mobile-stack, table.table-mobile-stack tbody, table.table-mobile-stack tr, table.table-mobile-stack td{
    display:block; width:100%;
  }
  table.table-mobile-stack tr{
    margin-bottom:14px; border:1px solid var(--border-color); border-radius:10px;
    padding:10px 12px; background:var(--bg-dark-2);
  }
  table.table-mobile-stack td{
    border:none!important; padding:6px 0!important; text-align:left!important;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    white-space:normal; word-break:break-word;
  }
  table.table-mobile-stack td::before{
    content:attr(data-label); font-weight:600; color:var(--text-muted);
    font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;
    flex-shrink:0; margin-right:auto;
  }
  table.table-mobile-stack td:empty::before{content:none;}
  table.table-mobile-stack td[data-label=""]{display:none;}
}

/* Sortable column headers */
.th-sort{cursor:pointer; user-select:none; white-space:nowrap;}
.th-sort:hover{color:var(--accent-gold);}
.th-sort .sort-icon{font-size:.7rem; margin-left:4px; opacity:.6;}
.th-sort.active .sort-icon{opacity:1; color:var(--accent-gold);}

/* Dark-themed pagination */
.pagination .page-link{
  background:var(--bg-dark-2); border-color:var(--border-color); color:var(--text-light);
}
.pagination .page-link:hover{background:var(--bg-card-hover); color:var(--accent-gold);}
.pagination .page-item.active .page-link{background:var(--accent-gold); border-color:var(--accent-gold); color:#0a1628; font-weight:700;}
.pagination .page-item.disabled .page-link{background:var(--bg-dark-2); color:var(--text-muted); opacity:.5;}

/* Settings tabs: vertical alignment fix */
.nav-tabs{border-bottom:1px solid var(--border-color);}
.nav-tabs .nav-link{
  display:flex; align-items:center; height:100%;
  border:1px solid transparent; border-bottom:none;
  margin-bottom:-1px;
}
.nav-tabs .nav-link.active{
  background:var(--bg-card)!important; color:var(--accent-gold)!important;
  border-color:var(--border-color) var(--border-color) var(--bg-card);
}

.branding-preview{
  width:72px;height:72px;border-radius:12px;object-fit:contain;
  background:var(--bg-dark-2); border:1px solid var(--border-color); padding:8px;
}

.id-card{
  width:340px; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg,#13233a,#0a1628);
  border:1px solid var(--accent-gold); color:#fff;
}
.id-card .id-head{background:var(--accent-gold); color:#0a1628; padding:10px 16px; font-weight:700; text-align:center;}
.id-card .id-body{padding:16px; text-align:center;}
.id-card .id-photo{width:80px;height:80px;border-radius:50%; border:2px solid var(--accent-gold); object-fit:cover; margin-bottom:8px;}

@media (max-width:991px){
  .tn-sidebar{transform:translateX(-100%);}
  .tn-sidebar.show{transform:translateX(0);}
  .tn-main{margin-left:0;}
  .tn-topbar .menu-toggle{display:inline-block;}
  .sidebar-close-btn{display:inline-block;}
  .tn-sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1029;
  }
  .tn-sidebar-overlay.show{display:block;}
}
@media (min-width:992px){
  .tn-sidebar-overlay{display:none!important;}
}