* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; background: #c0c0c0; margin: 0; color: #000; }

header { background: #d4d0c8; border-bottom: 2px solid #808080; box-shadow: 0 1px 0 #fff inset; padding: 0.6rem 1rem; display: flex; justify-content: space-between; align-items: center; }
header a { color: #0000EE; }

.app-body { display: flex; align-items: flex-start; }

.sidebar { width: 160px; flex: 0 0 160px; background: #d4d0c8; border-right: 2px solid #808080; padding: 1rem 0; min-height: calc(100vh - 46px); }
.sidebar a { display: block; padding: 0.5rem 1rem; color: #000; text-decoration: none; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; }
.sidebar a:hover { background: #e8e4dc; }
.sidebar a.active { background: #000080; color: #fff; font-weight: bold; }

main { flex: 1; margin: 1.5rem; padding: 0; min-width: 0; }

.panel { max-width: 900px; margin: 0 0 1.5rem; background: #d4d0c8; border-style: outset; border-width: 3px; border-color: #fff #808080 #808080 #fff; padding: 1rem 1.25rem; }
.panel-wide { max-width: 1400px; }
.panel-full { max-width: none; }
.panel h2 { font-size: 1rem; margin: 0 0 0.75rem; font-family: 'Courier New', Courier, monospace; }

label { display: block; font-size: 0.85rem; margin: 0.6rem 0 0.2rem; }
input[type=text], textarea, input[type=file] { width: 100%; box-sizing: border-box; padding: 4px; border-style: inset; border-width: 2px; border-color: #808080 #fff #fff #808080; font-family: Arial, Helvetica, sans-serif; }
textarea { resize: vertical; min-height: 3rem; }

button { padding: 4px 16px; border-style: outset; border-width: 2px; border-color: #fff #808080 #808080 #fff; background: #d4d0c8; cursor: pointer; margin-top: 0.8rem; }
button:active { border-style: inset; border-color: #808080 #fff #fff #808080; }

/* Table-row actions (View / Approve / Reject) - same look whether it's
   really a link or a form button, so they read as one consistent group. */
.action-btn {
  display: inline-block;
  padding: 3px 10px;
  border-style: outset;
  border-width: 2px;
  border-color: #fff #808080 #808080 #fff;
  background: #d4d0c8;
  color: #000;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  margin: 0 2px 0 0;
}
.action-btn:active { border-style: inset; border-color: #808080 #fff #fff #808080; }

.review-tabs a.active { border-style: inset; border-color: #808080 #fff #fff #808080; background: #000080; color: #fff; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #fff; }
th, td { border: 1px solid #808080; padding: 4px 8px; text-align: left; }
th { background: #d4d0c8; }

.status-uploaded { color: #806600; font-weight: bold; }
.status-approved { color: #006600; font-weight: bold; }
.status-rejected { color: #a00000; font-weight: bold; }

#progress-wrap { margin-top: 0.8rem; background: #fff; border-style: inset; border-width: 2px; border-color: #808080 #fff #fff #808080; height: 18px; display: none; }
#progress-bar { height: 100%; width: 0%; background: #000080; }
#upload-msg { margin-top: 0.6rem; font-size: 0.85rem; }

.review-actions form { display: inline; }