* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial, sans-serif;
background: #1f2933;
color: #e5e7eb;
}

.layout {
min-height: 100vh;
display: flex;
}

/* SIDEBAR */

.sidebar {
width: 260px;
min-height: 100vh;
background: #18212b;
border-right: 1px solid #2d3742;
padding: 28px 22px;
position: fixed;
left: 0;
top: 0;
}

.brand {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 36px;
}

.brand-mark {
width: 38px;
height: 38px;
border-radius: 10px;
background: #d6a85d;
}

.brand h2 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #ffffff;
}

.brand p {
margin: 3px 0 0;
font-size: 13px;
color: #9ca3af;
}

.menu {
display: flex;
flex-direction: column;
gap: 6px;
}

.menu a {
text-decoration: none;
color: #cbd5e1;
padding: 12px 14px;
border-radius: 9px;
font-size: 15px;
}

.menu a:hover,
.menu a.active {
background: #263241;
color: #ffffff;
}

.side-note {
position: absolute;
left: 22px;
right: 22px;
bottom: 26px;
background: #202b37;
border: 1px solid #334155;
border-radius: 12px;
padding: 16px;
}

.side-note strong {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #ffffff;
}

.side-note span {
color: #9ca3af;
font-size: 13px;
}

/* CONTENT */

.content {
margin-left: 260px;
width: calc(100% - 260px);
padding: 40px;
}

.topline {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
gap: 24px;
}

.label {
margin: 0 0 9px;
color: #d6a85d;
font-size: 13px;
font-weight: 700;
}

h1 {
margin: 0;
font-size: 34px;
font-weight: 700;
color: #ffffff;
}

.subtitle {
max-width: 660px;
margin: 13px 0 0;
color: #a7b0bd;
line-height: 1.6;
font-size: 15px;
}

.plain-link {
color: #ffffff;
text-decoration: none;
background: #263241;
border: 1px solid #3b4654;
padding: 11px 15px;
border-radius: 9px;
font-size: 14px;
}

.plain-link:hover {
background: #303d4c;
}

/* CARDS */

.page-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 22px;
}

.card {
background: #24303d;
border: 1px solid #364352;
border-radius: 16px;
padding: 26px;
}

.card-head {
margin-bottom: 22px;
}

.card h2 {
margin: 0;
font-size: 21px;
color: #ffffff;
}

.card p {
margin: 8px 0 0;
color: #a7b0bd;
font-size: 14px;
line-height: 1.5;
}

/* UPLOAD */

.upload-area {
display: block;
background: #1f2933;
border: 1px dashed #667085;
border-radius: 14px;
padding: 42px 24px;
text-align: center;
cursor: pointer;
margin-bottom: 16px;
}

.upload-area:hover {
border-color: #d6a85d;
}

.upload-area input {
display: none;
}

.upload-area span {
display: inline-block;
background: #d6a85d;
color: #1f2933;
padding: 10px 15px;
border-radius: 8px;
font-weight: 700;
margin-bottom: 12px;
}

.upload-area small {
display: block;
color: #a7b0bd;
}

.upload-area em {
display: block;
margin-top: 12px;
font-style: normal;
color: #7f8b9a;
font-size: 13px;
}

.primary-btn {
width: 100%;
border: none;
background: #d6a85d;
color: #1f2933;
padding: 13px;
border-radius: 9px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}

.primary-btn:hover {
background: #e0b56d;
}

/* STEPS */

.steps {
display: flex;
flex-direction: column;
gap: 14px;
}

.step {
border-left: 3px solid #d6a85d;
padding-left: 14px;
}

.step b {
display: block;
color: #ffffff;
margin-bottom: 5px;
}

.step span {
color: #a7b0bd;
font-size: 14px;
line-height: 1.5;
}

/* INFO */

.info-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 22px;
}

.info-row div {
background: #202b37;
border: 1px solid #334155;
border-radius: 14px;
padding: 20px;
}

.info-row strong {
display: block;
color: #ffffff;
margin-bottom: 8px;
}

.info-row p {
margin: 0;
color: #a7b0bd;
line-height: 1.5;
font-size: 14px;
}

/* FLASH */

.flash {
padding: 14px 16px;
border-radius: 10px;
margin-bottom: 22px;
font-size: 14px;
font-weight: 600;
}

.flash.success {
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.35);
color: #86efac;
}

.flash.error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #fca5a5;
}

/* DASHBOARD STATS */

.stats-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin-bottom: 22px;
}

.stat-card {
background: #202b37;
border: 1px solid #334155;
border-radius: 14px;
padding: 18px;
}

.stat-card span {
display: block;
color: #9ca3af;
font-size: 13px;
margin-bottom: 8px;
}

.stat-card strong {
display: block;
color: #ffffff;
font-size: 26px;
}

/* TABLE */

.table-wrapper {
width: 100%;
overflow-x: auto;
}

.documents-table {
width: 100%;
border-collapse: collapse;
}

.documents-table th {
text-align: left;
color: #9ca3af;
font-size: 13px;
font-weight: 600;
padding: 13px 10px;
border-bottom: 1px solid #334155;
}

.documents-table td {
padding: 15px 10px;
border-bottom: 1px solid #334155;
color: #e5e7eb;
font-size: 14px;
}

.documents-table tr:hover {
background: rgba(255,255,255,0.03);
}

.status-badge {
display: inline-block;
padding: 6px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}

.status-badge.uploaded {
background: rgba(148, 163, 184, 0.15);
color: #cbd5e1;
}

.status-badge.needs-review {
background: rgba(214, 168, 93, 0.16);
color: #f3c979;
}

.status-badge.validated {
background: rgba(34, 197, 94, 0.14);
color: #86efac;
}

.status-badge.rejected {
background: rgba(239, 68, 68, 0.14);
color: #fca5a5;
}

.issue-count {
color: #f3c979;
font-weight: 600;
}

.no-issues {
color: #86efac;
font-weight: 600;
}

.table-link {
color: #d6a85d;
text-decoration: none;
font-weight: 700;
}

.table-link:hover {
text-decoration: underline;
}

/* EMPTY STATE */

.empty-state {
background: #1f2933;
border: 1px dashed #475569;
border-radius: 14px;
padding: 34px;
text-align: center;
}

.empty-state h3 {
margin: 0 0 8px;
color: #ffffff;
font-size: 20px;
}

.empty-state p {
margin: 0 0 18px;
color: #9ca3af;
}

.primary-small-btn {
display: inline-block;
background: #d6a85d;
color: #1f2933;
text-decoration: none;
padding: 10px 14px;
border-radius: 8px;
font-weight: 700;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 900px) {
.layout {
display: block;
}

.sidebar {
position: relative;
width: 100%;
min-height: auto;
}

.side-note {
position: static;
margin-top: 20px;
}

.content {
margin-left: 0;
width: 100%;
padding: 24px;
}

.topline {
flex-direction: column;
}

.page-grid,
.info-row {
grid-template-columns: 1fr;
}
}

@media (max-width: 600px) {
.stats-row {
grid-template-columns: 1fr;
}
}