/* ==========================================
   Studio For Makers — Global Styles
   ========================================== */

/* CSS Variables */
:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --ink:#1e1e1e;
  --muted:#6b7280;
  --brand:#214e69;
  --accent:#6e9a90;
  --soft:#e6ded9;
  --border:#e5e7eb;
  --line:#e5e7eb;
  
  /* Status colors */
  --success:#137333;
  --error:#b42318;
  --warning:#f59e0b;
}

/* Reset & Base */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}

/* ==========================================
   Header & Navigation
   ========================================== */

header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 3px rgba(0,0,0,0.02);
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  padding-bottom:12px;
}

nav .dropdown{
  margin-left: -8px;  /* try -4px to -8px */
}

nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  padding:6px 0;
  transition:color 0.2s;
}

nav a:hover{ 
  color:var(--brand); 
}

nav a.active{ 
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:4px;
}
 public-nav {
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 100;
    }

  public-nav .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      
    }



/* ==========================================
   Typography
   ========================================== */

h1{
  margin:10px 0 6px;
  font-size:28px;
  color:var(--brand);
  letter-spacing:-0.3px;
  font-weight:900;
}

h2{
  margin:20px 0 10px;
  font-size:20px;
  color:var(--accent);
  font-weight:800;
}

h3{
  margin:16px 0 8px;
  font-size:16px;
  color:var(--brand);
  font-weight:700;
}

.tiny{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* ==========================================
   Cards & Containers
   ========================================== */

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-top:12px;
}

/* ==========================================
   Forms & Inputs
   ========================================== */

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  font-weight:600;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
  width:100%;
  transition:border-color 0.2s;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(33,78,105,0.1);
}

input:disabled,
select:disabled,
textarea:disabled{
  background:#f9fafb;
  color:var(--muted);
  cursor:not-allowed;
}

textarea{
  resize:vertical;
  min-height:80px;
}

/* ==========================================
   Buttons
   ========================================== */

button,
.btn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  padding:9px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
  transition:all 0.2s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}

button:hover,
.btn:hover{
  background:#f9fafb;
  border-color:#d0d5dd;
  transform:translateY(-1px);
}

button.primary,
.btn.primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

button.primary:hover,
.btn.primary:hover{
  background:#1a3d52;
  border-color:#1a3d52;
}

button:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}

button.small{
  padding:6px 10px;
  font-size:12px;
}

/* ==========================================
   Status Messages
   ========================================== */

.status{
  margin-top:10px;
  font-size:13px;
  padding:8px 12px;
  border-radius:8px;
}

.status.ok{
  color:var(--success);
  background:#f0fdf4;
  border:1px solid #bbf7d0;
}

.status.err,
.status.error{
  color:var(--error);
  background:#fef2f2;
  border:1px solid #fecaca;
}

.status.warning{
  color:var(--warning);
  background:#fffbeb;
  border:1px solid #fde68a;
}

/* ==========================================
   Tables
   ========================================== */

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}

thead{
  background:var(--soft);
}

th{
  padding:12px;
  text-align:left;
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:#374151;
  border-bottom:2px solid var(--border);
}

td{
  padding:12px;
  border-bottom:1px solid var(--border);
  font-size:13px;
}

tr:last-child td{
  border-bottom:none;
}

tr:hover{
  background:#f9fafb;
}

/* ==========================================
   Utilities
   ========================================== */

.hidden{
  display:none !important;
}

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

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

.mt-1{ margin-top:8px; }
.mt-2{ margin-top:16px; }
.mt-3{ margin-top:24px; }

.mb-1{ margin-bottom:8px; }
.mb-2{ margin-bottom:16px; }
.mb-3{ margin-bottom:24px; }

.flex{
  display:flex;
  gap:12px;
}

.flex-wrap{
  flex-wrap:wrap;
}

.align-center{
  align-items:center;
}

.justify-between{
  justify-content:space-between;
}

/* ==========================================
   Tags & Badges
   ========================================== */

.tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:#374151;
  background:var(--soft);
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #dccfc8;
}

.tag.accent{
  background:#d4e9e3;
  border-color:#b8d9cf;
  color:#1f3d38;
}

.tag.success{
  background:#dcfce7;
  border-color:#bbf7d0;
  color:#166534;
}

.tag.error{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}

.tag.warning{
  background:#fef3c7;
  border-color:#fde68a;
  color:#92400e;
}

/* ==========================================
   Loading & Empty States
   ========================================== */

.loading{
  text-align:center;
  padding:40px;
  color:var(--muted);
}

.empty{
  text-align:center;
  padding:40px;
  color:var(--muted);
  background:#f9fafb;
  border:2px dashed var(--border);
  border-radius:12px;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px){
  .wrap{
    padding:12px;
  }
  
  nav{
    gap:12px;
  }
  
  h1{
    font-size:24px;
  }
  
  table{
    font-size:12px;
  }
  
  th, td{
    padding:8px;
  }
}

/* ========================================
   FOOTER STYLES
   ======================================== */

/* Small Footer (most pages) */
.footer-simple {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 20px 0;
  font-size: 13px;
  color: #6b7280;
}

.footer-simple .footerInner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-simple .copyright {
  font-size: 13px;
  color: #6b7280;
}

.footer-simple .footerLinks {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-simple .footerLinks a {
  color: #6b7280;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-simple .footerLinks a:hover {
  color: #214e69;
}

.footer-simple .footerLinks span {
  color: #d1d5db;
  user-select: none;
}

/* Big 4-Column Footer */
.footer-full {
  background: #1f2937;
  color: #9ca3af;
  padding: 60px 0 30px;
}

.footer-full h4 {
  color: #ffffff;
}

.footer-full p {
  color: #9ca3af;
}

.footer-full .footer-bottom {
  border-top: 1px solid #374151;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .footer-simple .footerInner {
    flex-direction: column;
    text-align: center;
  }
  
  .dropdown-menu {
    right: auto;
    left: 0;
  }
}

/* Light version of 3-column footer (for index.html) */
.footer-full.footer-light {
  background: #f9fafb;
  color: #374151;
  border-top: 1px solid #e5e7eb;
}

.footer-full.footer-light h4 {
  color: #214e69;
}

.footer-full.footer-light p {
  color: #6b7280;
}

.footer-full.footer-light ul li a {
  color: #6b7280;
}

.footer-full.footer-light ul li a:hover {
  color: #214e69;
}

.footer-full.footer-light .footer-bottom {
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
}

/* Grid layout for 4-column footer */
.footer-full-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

@media (max-width: 980px) {
  .footer-full-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .footer-full-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.footer-full-grid h4 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
}

.footer-full-grid p {
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 14px;
}

.footer-full-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-full-grid ul li {
  margin-bottom: 12px;
}

.footer-full-grid ul li a {
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
  color: #9ca3af;
}

.footer-full-grid ul li a:hover {
  color: #6e9a90;
}

.footer-bottom {
  text-align: center;
  padding: 30px 0;
  font-size: 13px;
}

/* ==========================================
   Print Styles
   ========================================== */

@media print{
  header, nav, button, .btn, #role-badge{
    display:none !important;
  }
  
  body{ 
    background:#fff; 
  }
  
  .wrap{ 
    max-width:none; 
    padding:0; 
  }
  
  .card{ 
    border:1px solid #ddd;
    page-break-inside:avoid;
  }
  
  table{
    page-break-inside:auto;
  }
  
  tr{
    page-break-inside:avoid;
    page-break-after:auto;
  }
}

/* Dropdown Styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 6px;
  z-index: 1000;
  margin-top: 5px;
}

.dropdown-menu a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.dropdown-menu a:hover {
  background: #f9fafb;
}

.dropdown:hover .dropdown-menu {
  display: block;
}