/*
 * Basic styling for the HR CRM application. This stylesheet defines a
 * clean and simple layout with a responsive navigation bar, tables with
 * alternating row colours, forms and buttons. Feel free to expand upon
 * this styling to match your organisation's branding or personal taste.
 */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f7fa;
    color: #333;
}

header {
    background-color: #014f86;
    color: #fff;
    padding: 1rem;
}

header h1 {
    margin: 0;
}

/* Layout container places the sidebar and main content side by side */
.layout {
    display: flex;
    min-height: calc(100vh - 60px); /* subtract approximate header height */
}

/* Sidebar navigation sits on the left and spans full viewport height */
.sidebar {
    width: 200px;
    background-color: #014f86;
    color: #fff;
    padding-top: 1rem;
    flex-shrink: 0;
    min-height: 100vh;
}

.sidebar a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s;
}

.sidebar a:hover {
    background-color: #01396b;
}
/* Ensure both inputs in login card have identical width */
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

.login-page header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-page header h1 {
  margin: 0.75rem 0;
  text-align: center;
}

/* Soft blue gradient background for login page */
.login-page {
  background: linear-gradient(180deg, #c8def3 0%, #dbe9f9 50%, #eaf2ff 100%);
}

/* Lighter inner panel */
.login-card {
  background: #eef6ff;
  border: 1px solid #d1e4ff;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.07);
  padding: 1.25rem;
  max-width: 480px;     /* adjust if you want narrower */
  margin: 5rem auto;    /* already centers it */
}


/* Content area takes up remaining horizontal space */
.content {
    flex: 1;
    padding: 1rem;
}

/* The main container holds the page content. Its width is limited and
 * centered on the page. We'll remove the background and border here
 * and instead use cards to separate sections. */
.container {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Card component used to wrap forms, tables and other sections */
.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

form {
    margin-bottom: 2rem;
}

label {
    display: block;
    margin-top: 0.5rem;
    font-weight: bold;
}

input[type="text"], input[type="email"], input[type="date"], input[type="number"], textarea, select {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button, input[type="submit"] {
    padding: 0.5rem 1rem;
    background-color: #014f86;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
}

button:hover, input[type="submit"]:hover {
    background-color: #01396b;
}

.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    background-color: #e2f0d9;
    color: #2e6633;
    border: 1px solid #c4d7be;
}

/* Limit the width of small forms such as login and registration. The
 * container will centre the form on the page and restrict its width
 * so input fields don't stretch across the entire page. */
.form-small {
    max-width: 400px;
    margin: 0 auto;
}

/* Ensure inputs within the small form have consistent sizing. Without
 * this rule, the username and password fields may render with
 * different widths in some browsers due to default styling. Using
 * box-sizing ensures padding and borders are included in the width. */
.form-small input[type="text"],
.form-small input[type="password"],
.form-small input[type="email"] {
    width: 100%;
    box-sizing: border-box;
}

/*
 * Login page styling
 * ------------------
 * When the body element has the class `login-page`, we set a soft blue
 * background colour to distinguish the login and registration pages from
 * the rest of the application. We also define a `.login-card` class
 * that wraps the login form in a slightly lighter panel with rounded
 * corners and a subtle shadow.
 */
body.login-page {
    background-color: #cce0f5; /* slightly darker blue for the outer page */
}

.login-card {
    background-color: #e6f2ff; /* light blue for the form panel */
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    margin: 3rem auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.error {
    background-color: #f9d6d5;
    color: #912d2b;
    border: 1px solid #e9b3b1;
}

/* Responsive table: makes table scroll horizontally on small screens */
.table-responsive {
    overflow-x: auto;
}

footer {
    text-align: center;
    margin: 2rem 0;
    color: #666;
    font-size: 0.85rem;
}
/* Dashboard/index gradient to match login */
.content-gradient {
    /* darker gradient like your login page */
    background: linear-gradient(to bottom, #5a8bbd, #0a3d69);
    min-height: calc(100vh - 60px); /* header height compensation */
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Stats table styling (clean, readable) */
.stats-table {
    margin: 0 auto;
    border-collapse: collapse;
    width: min(900px, 95%);
    background: #f9f9f9;
    color: #333;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.stats-table th, .stats-table td {
    padding: 14px 20px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 16px;
}

.stats-table th {
    background-color: #0a4a75;
    color: white;
    font-weight: 600;
}

.stats-table tr:nth-child(even) {
    background-color: #eef5fb;
}

/* === Global background & header — match login === */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, #d4e4f3 0%, #e9f2fb 100%); /* same as login feel */
  color: #333;
}

/* Top header bar */
header {
  width: 100%;
  background-color: #0a4a75;         /* same blue as login title bar */
  color: #fff;
  padding: 18px 20px;
}
header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

/* Keep sidebar layout, but let page background show through */
.layout {
  display: flex;
  min-height: calc(100vh - 60px);
  background: transparent;           /* important: do NOT override body gradient */
}

/* Sidebar stays as you have it (left menu) */
.sidebar {
  width: 240px;
  background-color: #0a4a75;
  color: #fff;
  padding: 18px 12px;
  flex-shrink: 0;
}
.sidebar a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.sidebar a:hover { background: rgba(255,255,255,0.12); }

/* Main content area: shows gradient background (from body), adds spacing */
.content {
  flex: 1;
  padding: 24px;
  background: transparent;           /* let the body gradient be visible */
}

/* Uniform “card” look for all inner boxes */
.card {
  background: #ffffff;
  border: 1px solid #dbe7f6;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 20px;
}

/* Alerts (if you use them) */
.alert { background:#eef8ff; border:1px solid #cfe8ff; color:#0a3d69; border-radius:8px; padding:10px 14px; }
.alert.error { background:#ffecec; border-color:#ffc9c9; color:#8a1f1f; }

/* Tables used for stats and listings */
.stats-table, table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.stats-table th, .stats-table td,
table th, table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e9eef6;
  text-align: left;
}
.stats-table th, table th {
  background: #0a4a75;
  color: #fff;
  font-weight: 600;
}
.stats-table tr:nth-child(even),
table tr:nth-child(even) { background: #f6fafe; }

/* Forms: same feel as login */
label { font-weight: 600; display: block; margin: 8px 0 4px; }
input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #ccd6e0;
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  margin-bottom: 14px;
}
input[type="submit"], button, .btn {
  background: #0a4a75;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover, .btn:hover { background:#083a5c; }

/* Make any previous dark section backgrounds transparent */
.content-gradient, .content-soft, .panel, .whitebox {
  background: transparent !important;
  box-shadow: none;
  border: 0;
}
/* Compact two-column payroll form */
.payroll-form.card { padding: 16px; }
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid-2 .field { display: flex; flex-direction: column; }
.grid-2 .field label { font-weight: 600; margin-bottom: 6px; }
.grid-2 .field input, .grid-2 .field select { padding: 8px 10px; }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}
/* Compact two-column payroll form */
.payroll-form.card {
  padding: 16px 18px;
  max-width: 1100px;         /* keeps the form from stretching too wide */
  margin-inline: auto;       /* center the card in the content column */
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 24px;
  row-gap: 12px;
}

.field { display: flex; flex-direction: column; }
.field label { font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }

.field input,
.field select {
  padding: 8px 10px;
  height: 40px;
}

/* Centered action row spanning both columns */
.grid-2 .actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.grid-2 .actions .btn {
  min-width: 220px;
}

/* Stack on small screens */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 .actions { grid-column: auto; }
}
/* Actions cell layout */
.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Make sure cells don't clip buttons/tooltips */
table td { overflow: visible; }

/* Icon buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0a4a75;
  color: #fff !important;
  text-decoration: none;
  line-height: 1;
  border: 0;
}
.icon-btn:hover { background: #083a5c; }
.icon-btn.secondary { background: #145a8c; }
.icon-btn.ghost { background: #265a80; }

.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* (If you had table/row buttons collapsing) ensure anchors receive clicks */
.icon-btn { position: relative; z-index: 1; }
/* Compact two-column payroll form */
.payroll-form.card { padding: 16px 18px; max-width: 1100px; margin-inline: auto; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;   /* was 24px */
  row-gap: 8px;       /* was 12px */
}

.field { display: flex; flex-direction: column; }
.field label { font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }

.grid-2 .actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.grid-2 .actions .btn { min-width: 200px; }

.icon-view {
  color: green;
  font-size: 20px;
}

.icon-download {
  color: red;
  font-size: 20px;
  margin-left: 10px;
}
.btn-icon.pdf-btn {
    color: #fff;
    background-color: #ff0000; /* red background */
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon.pdf-btn:hover {
    background-color: #cc0000;
}

/* ===== Layout ===== */
.layout { display: flex; min-height: 100vh; }
.sidebar{
  width:260px; min-height:100vh;
  background: linear-gradient(180deg,#0a4a75 0%, #0c3e62 100%);
  color:#e8f1f7; padding:18px; position:sticky; top:0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.content{
  flex:1; padding:24px;
  background: linear-gradient(180deg,#e7f0f9 0%, #dbe7f3 35%, #eaf2fa 100%);
}
.brand{ display:flex; align-items:center; justify-content:center; height:42px; margin-bottom:10px; }
.brand i{ font-size:22px; color:#e8f1f7; }

.userbox{ padding:10px; margin:8px 0 12px; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.userbox .hello{ font-weight:600; }
.userbox .role{ font-size:12px; opacity:.8; }

.navitem{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:6px 0; border-radius:10px;
  color:#e8f1f7; text-decoration:none; transition: all .12s ease;
}
.navitem i{ width:20px; text-align:center; font-size:16px; opacity:.95; }
.navitem:hover{ background:rgba(255,255,255,.10); transform: translateX(2px); }
.navitem.active{
  background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.navitem.danger{ color:#ffd9d9; }
.spacer{ flex:1; }

/* ===== Page header, cards, tables ===== */
.page-header{ margin-bottom:14px; padding:6px 4px; display:flex; align-items:center; justify-content:space-between; }
.page-header h1{ margin:0; font-size:22px; color:#0a3e62; }

.card{
  background:#fff; border-radius:14px; padding:18px;
  box-shadow: 0 6px 20px rgba(10,74,117,.08), 0 2px 6px rgba(10,74,117,.06);
  border:1px solid rgba(10,74,117,.06);
}
.card + .card{ margin-top:16px; }
.card-title{ font-weight:700; margin-bottom:12px; color:#0a3e62; }

.kpi-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1100px){ .kpi-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .kpi-grid{ grid-template-columns: 1fr; } }
.kpi{
  padding:14px; border-radius:12px;
  background: linear-gradient(180deg,#f7fbff 0%, #eef6ff 100%);
  box-shadow: inset 0 0 0 1px rgba(10,74,117,.06);
}
.kpi .label{ font-size:12px; color:#4a6a86; }
.kpi .value{ font-size:26px; font-weight:800; color:#0b4b76; line-height:1.2; }
.kpi .trend{ font-size:12px; margin-top:6px; color:#277a43; }

.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th,.table td{ padding:12px 14px; }
.table thead th{ background:#0a4a75; color:#fff; text-align:left; position:sticky; top:0; }
.table tbody tr{ background:#fff; }
.table tbody tr:nth-child(even){ background:#f6f9fc; }
.table tbody tr:hover{ outline:2px solid rgba(10,74,117,.12); }

/* Tight actions (icons row) */
.icon-row{ display:flex; align-items:center; gap:6px; }
.icon-row a{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; }
.icon-row a i{ font-size:16px; }
.icon-row a.view{ color:#2e8b57; background:#e8f6ef; }
.icon-row a.pdf{ color:#d64040; background:#fdecec; }
.icon-row a.del{ color:#8B0000; background:#fde3e3; }
.icon-row a:hover{ filter:saturate(1.1) brightness(.97); }

/* Alerts (if you need) */
.alert{ padding:10px 12px; border-radius:8px; background:#edf6ff; color:#0a3e62; border:1px solid #cfe7ff; margin-bottom:12px; }
.alert.error{ background:#ffecec; color:#7a0d0d; border-color:#ffd0d0; }
.alert.success{ background:#e9fbef; color:#0f5a2a; border-color:#c9f1d6; }

/* ===== Layout ===== */
.layout { display: flex; min-height: 100vh; }
.sidebar{
  width:260px; min-height:100vh;
  background: linear-gradient(180deg,#0a4a75 0%, #0c3e62 100%);
  color:#e8f1f7; padding:18px; position:sticky; top:0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.content{
  flex:1; padding:24px;
  background: linear-gradient(180deg,#e7f0f9 0%, #dbe7f3 35%, #eaf2fa 100%);
}
.brand{ display:flex; align-items:center; justify-content:center; height:42px; margin-bottom:10px; }
.brand i{ font-size:22px; color:#e8f1f7; }

.userbox{ padding:10px; margin:8px 0 12px; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.userbox .hello{ font-weight:600; }
.userbox .role{ font-size:12px; opacity:.8; }

.navitem{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:6px 0; border-radius:10px;
  color:#e8f1f7; text-decoration:none; transition: all .12s ease;
}
.navitem i{ width:20px; text-align:center; font-size:16px; opacity:.95; }
.navitem:hover{ background:rgba(255,255,255,.10); transform: translateX(2px); }
.navitem.active{
  background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.navitem.danger{ color:#ffd9d9; }
.spacer{ flex:1; }

/* Page header, cards, tables */
.page-header{ margin-bottom:14px; padding:6px 4px; display:flex; align-items:center; justify-content:space-between; }
.page-header h1{ margin:0; font-size:22px; color:#0a3e62; }

.card{
  background:#fff; border-radius:14px; padding:18px;
  box-shadow: 0 6px 20px rgba(10,74,117,.08), 0 2px 6px rgba(10,74,117,.06);
  border:1px solid rgba(10,74,117,.06);
}
.card + .card{ margin-top:16px; }
.card-title{ font-weight:700; margin-bottom:12px; color:#0a3e62; }

/* KPI cards */
.kpi-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1100px){ .kpi-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .kpi-grid{ grid-template-columns: 1fr; } }
.kpi{
  padding:14px; border-radius:12px;
  background: linear-gradient(180deg,#f7fbff 0%, #eef6ff 100%);
  box-shadow: inset 0 0 0 1px rgba(10,74,117,.06);
}
.kpi .label{ font-size:12px; color:#4a6a86; }
.kpi .value{ font-size:26px; font-weight:800; color:#0b4b76; line-height:1.2; }
.kpi .trend{ font-size:12px; margin-top:6px; color:#277a43; }

/* Tables */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th,.table td{ padding:12px 14px; }
.table thead th{ background:#0a4a75; color:#fff; text-align:left; position:sticky; top:0; }
.table tbody tr{ background:#fff; }
.table tbody tr:nth-child(even){ background:#f6f9fc; }
.table tbody tr:hover{ outline:2px solid rgba(10,74,117,.12); }

/* Tight actions (icons row) */
.icon-row{ display:flex; align-items:center; gap:6px; }
.icon-row a{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; }
.icon-row a i{ font-size:16px; }
.icon-row a.view{ color:#2e8b57; background:#e8f6ef; }
.icon-row a.pdf{  color:#d64040; background:#fdecec; }
.icon-row a.del{  color:#8B0000; background:#fde3e3; }
.icon-row a:hover{ filter:saturate(1.1) brightness(.97); }

/* Alerts (optional) */
.alert{ padding:10px 12px; border-radius:8px; background:#edf6ff; color:#0a3e62; border:1px solid #cfe7ff; margin-bottom:12px; }
.alert.error{ background:#ffecec; color:#7a0d0d; border-color:#ffd0d0; }
.alert.success{ background:#e9fbef; color:#0f5a2a; border-color:#c9f1d6; }

/* === Tighten vertical spacing on inner pages === */
.content{
  /* reduce top space and prevent margin-collapsing with first child */
  padding: 16px 24px 32px;
  display: flow-root; /* or: display:flex; flex-direction:column; */
}

.page-header{
  margin: 0 0 12px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header h1{
  margin: 0;          /* avoid big top margin from the first heading */
  font-size: 22px;    /* optional: slightly smaller */
}

.page-header .icon-row{ margin-left: auto; }

.content > .card{ margin-top: 12px; }
.content > .card:first-of-type{ margin-top: 0; }

/* safety: collapse any stray heading margins */
h1, h2, h3{ margin-top: 0; }

/* === Tighten top spacing on inner pages (global) === */
.content {
  padding: 12px 24px 32px !important; /* reduce top pad */
  display: flow-root;                  /* prevents margin-collapsing */
}

/* keep the header compact */
.page-header{
  margin: 0 0 10px !important;
  padding: 6px 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-header h1{ margin: 0 !important; }

/* first block after header shouldn't jump down */
.content > .page-header + * {
  margin-top: 0 !important;
}

/* default card spacing */
.card { margin-top: 12px !important; }
.card:first-of-type { margin-top: 0 !important; }

/* guard against accidental big margins */
h1, h2, h3 { margin-top: 0 !important; }

/* Force the performance form card to be visible and compact */
#perf-form-card { 
  display: block !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure the first block after the page header hugs the header */
.content > .page-header + * { 
  margin-top: 0 !important; 
}
/* === FIX: Make the Performance entry form visible and compact === */
#perf-form-card{
  /* make sure it renders */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* undo any “slide in”/animation/transform tricks */
  transform: none !important;
  animation: none !important;
  transition: none !important;

  /* ensure it's not pushed down or reserved as blank area */
  margin: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: static !important;
  z-index: 1 !important;

  /* restore card chrome in case it was stripped */
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(2,28,53,.06) !important;
  padding: 16px !important;
}

/* grid inside the form */
#perf-form-card .grid-2{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: 16px !important;
  row-gap: 12px !important;
}

#perf-form-card .actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: 8px !important;
}

/* tighten spacing below page header so the first block hugs it */
.content{
  padding-top: 12px !important;
  display: flow-root !important;   /* prevents margin-collapsing */
}
.content > .page-header{ margin: 0 0 10px !important; padding: 6px 0 !important; }
.content > .page-header + *{ margin-top: 0 !important; }

/* safety: no big surprise margins on headings */
h1, h2, h3{ margin-top: 0 !important; }