/* DonkyIT-ish modern baseline (no frameworks) */
:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, .12);
  --shadow: 0 10px 30px rgba(15, 23, 42, .10);
  --radius: 16px;
  --accent: #2563eb; /* blå */
  --accent-2: #16a34a; /* grön */
  --danger: #dc2626;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 500px at 50% -10%, rgba(37,99,235,.18), transparent 55%),
              radial-gradient(900px 450px at 20% 0%, rgba(22,163,74,.10), transparent 55%),
              var(--bg);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Headings / titles */
.menu2{
  max-width: 860px;
  margin: 24px auto 12px;
  padding: 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Generic tables */
table{
  border-collapse: separate;
  border-spacing: 0;
}

/* Forms area (your pages use a table for layout) */
form{
  max-width: 860px;
  margin: 0 auto 28px;
  padding: 0 16px;
}

form > table{
  width: 100% !important;
  max-width: 520px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

th, td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child th,
tr:last-child td{ border-bottom: 0; }

th{
  text-align:left;
  font-weight: 600;
  color: var(--muted);
  width: 36%;
  background: rgba(15,23,42,.02);
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="date"],
select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  outline: none;
}

input[type="text"]::placeholder{ color: rgba(100,116,139,.75); }

input:focus, select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* Buttons */
input[type="submit"],
button{
  appearance:none;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(180deg, rgba(37,99,235,1), rgba(29,78,216,1));
  box-shadow: 0 10px 20px rgba(37,99,235,.22);
  cursor:pointer;
}

input[type="submit"]:hover,
button:hover{ filter: brightness(1.03); }

input[type="submit"]:active,
button:active{ transform: translateY(1px); }

/* Login page helpers (index.php uses .box) */
.box{
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 10px 12px;
}

/* Top frame styling (top.php uses a table) */
body > table{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}

body > table td{
  border-bottom: 0;
  padding: 10px 14px;
}

#mySelect{
  max-width: 280px;
}

/* Report tables */
/* Many report tables are printed with <table><tr><th>... */
body table:not(form > table){
  width: min(960px, calc(100% - 32px));
  margin: 14px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

body table:not(form > table) th{ background: rgba(15,23,42,.04); color: var(--text); }
body table:not(form > table) tr:nth-child(even) td{ background: rgba(15,23,42,.02); }
body table:not(form > table) tr:hover td{ background: rgba(37,99,235,.06); }

/* Small screens */
@media (max-width: 640px){
  th{ width: 42%; }
  .menu2{ font-size: 18px; }
  body{ font-size: 15px; }
}