/* Peramare Mines — Gold Operations Reporting
   Theme from STYLE-GUIDE.md: Gold/Amber #F0A500, Anthracite #4A4F50,
   Dark blue #0E2841, Link blue #156082, Success #196B24, Warning #E97132 */
:root {
  --gold: #F0A500;
  --anthracite: #4A4F50;
  --darkblue: #0E2841;
  --link: #156082;
  --warning: #E97132;
  --success: #196B24;
  --grey: #595959;
  --lightgrey: #E8E8E8;
  --bg: #f5f6f7;
  --white: #ffffff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: "Aptos Display", Arial, sans-serif; color: #000; }
h1 { font-size: 1.6rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout: sidebar + content */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--darkblue);
  color: #dfe6ee;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  text-align: center;
  padding: 22px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand img { width: 96px; height: 96px; }          /* 1:1 — never distort */
.brand .system {
  display: block;
  margin-top: 8px;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav { list-style: none; margin: 10px 0; padding: 0; flex: 1; }
.nav li a {
  display: block;
  padding: 11px 20px;
  color: #c9d4df;
  border-left: 3px solid transparent;
}
.nav li a:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.nav li a.active {
  background: rgba(240,165,0,.12);
  border-left-color: var(--gold);
  color: #fff;
}
.nav .section {
  padding: 12px 20px 4px;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6f8094;
}
.nav .parent a { font-weight: 700; color: #e7eef5; }
.nav .sub a { padding-left: 38px; font-size: .86rem; }
.nav .sub a::before { content: "› "; color: #6f8094; }
.sidebar-foot {
  padding: 14px 20px;
  font-size: .72rem;
  color: #7f8fa1;
  border-top: 1px solid rgba(255,255,255,.08);
}

.content { flex: 1; display: flex; flex-direction: column; }
.topbar {
  background: var(--white);
  border-bottom: 2px solid var(--gold);
  padding: 12px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .user { font-size: .85rem; color: var(--grey); }
.topbar .role-chip {
  background: var(--gold);
  color: #1a1a1a;
  font-weight: bold;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: .72rem;
  margin-left: 8px;
}
.main { padding: 26px; max-width: 1100px; }

/* Cards / tables / forms */
.card {
  background: var(--white);
  border: 1px solid var(--lightgrey);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 1.05rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lightgrey); }
th { font-size: .76rem; text-transform: uppercase; color: var(--grey); }

label { display: block; font-size: .82rem; color: var(--grey); margin: 10px 0 3px; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cfd6dc;
  border-radius: 5px;
  font: inherit;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }

.btn {
  display: inline-block;
  background: var(--gold);
  color: #1a1a1a;
  font-weight: bold;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
}
.btn:hover { filter: brightness(.95); text-decoration: none; }
.btn-secondary { background: var(--anthracite); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: .8rem; }

/* Gold module accent */
.gold-zone { border-left: 4px solid var(--gold); }
.badge { padding: 2px 9px; border-radius: 10px; font-size: .72rem; font-weight: bold; }
.badge-draft { background: var(--lightgrey); color: #444; }
.badge-submitted { background: #fdebd3; color: #8a5212; }
.badge-approved { background: #d7ead9; color: var(--success); }
.badge-locked { background: var(--anthracite); color: #fff; }

.flash { padding: 11px 16px; border-radius: 6px; margin-bottom: 14px; font-size: .88rem; }
.flash.success { background: #d7ead9; color: var(--success); }
.flash.danger  { background: #f8d7d7; color: #9b1c1c; }
.flash.warning { background: #fdebd3; color: #8a5212; }
.muted { color: var(--grey); font-size: .85rem; }
.hub-tree { list-style: none; padding-left: 14px; }
.hub-tree .loc { color: var(--grey); font-size: .85rem; }