/* ============================================
RESET & BASE STYLES
============================================ */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #2d3748;
background-color: #f7fafc;
min-height: 100vh;
}
/* ============================================
LAYOUT CONTAINERS
============================================ */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
}
.content-wrapper {
width: 100%;
}
/* ============================================
NAVIGATION BAR - DESKTOP & MOBILE
============================================ */
.top-nav {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
position: relative;
min-height: 70px;
}
.nav-brand {
order: 1;
}
.nav-brand a {
display: flex;
align-items: center;
gap: 0.75rem;
color: white;
text-decoration: none;
font-size: 1.25rem;
font-weight: 700;
padding: 1rem 0;
white-space: nowrap;
}
.nav-brand i {
font-size: 1.5rem;
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.75rem;
color: white;
cursor: pointer;
padding: 0.5rem;
line-height: 1;
transition: transform 0.2s;
order: 3;
z-index: 1002;
}
.mobile-menu-toggle:hover {
transform: scale(1.1);
}
.mobile-menu-toggle:active {
transform: scale(0.95);
}
/* Navigation Menu - Desktop Default */
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.25rem;
flex: 1;
justify-content: center;
align-items: center;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1rem;
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: all 0.2s;
border-radius: 6px;
font-weight: 500;
white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
background: rgba(255,255,255,0.15);
color: white;
text-decoration: none;
}
.nav-link i {
font-size: 1.1rem;
}
/* Dropdown Menu - Desktop */
.nav-item.dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
min-width: 220px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
list-style: none;
padding: 0.5rem 0;
margin-top: 0.25rem;
z-index: 1001;
border: 1px solid #e2e8f0;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li {
margin: 0;
padding: 0;
}
.dropdown-menu li a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
color: #2d3748 !important;
text-decoration: none;
transition: background 0.2s;
background: transparent;
font-weight: 500;
}
.dropdown-menu li a:hover {
background: #f7fafc !important;
color: #667eea !important;
text-decoration: none;
}
.dropdown-menu li a i {
width: 20px;
text-align: center;
font-size: 16px;
}
/* User Profile Section */
.nav-user {
position: relative;
flex-shrink: 0;
margin-left: 1rem;
order: 2;
}
.user-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(255,255,255,0.1);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.user-info:hover {
background: rgba(255,255,255,0.2);
}
.user-name {
color: white;
font-weight: 600;
font-size: 0.95rem;
}
.user-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
background: white;
min-width: 200px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 0.5rem 0;
margin-top: 0.5rem;
z-index: 1001;
}
.user-dropdown a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
color: #2c3e50;
text-decoration: none;
transition: background 0.2s;
}
.user-dropdown a:hover {
background: #f8f9fa;
}
/* ============================================
PAGE HEADER
============================================ */
.page-header {
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 1rem;
}
.page-header h1 {
font-size: 2rem;
color: #1a202c;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.page-header p {
color: #718096;
font-size: 1rem;
margin: 0;
}
.header-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ============================================
BREADCRUMB
============================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 14px;
}
.breadcrumb a {
color: #3498db;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb .separator {
color: #95a5a6;
}
/* ============================================
HERO SECTION
============================================ */
.hero-section {
text-align: center;
padding: 3rem 1.5rem;
background: white;
margin: 2rem 0;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
}
.hero-section h1 {
font-size: 2.5rem;
color: #1a202c;
margin-bottom: 1rem;
}
.hero-section p {
font-size: 1.2rem;
color: #718096;
margin-bottom: 1rem;
}
/* ============================================
STATISTICS CARDS
============================================ */
.stats-section,
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.stat-card {
background-color: #ffffff;
border-radius: 12px;
padding: 2rem 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 1rem;
min-height: 140px;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
.stat-details,
.stat-content {
flex: 1;
text-align: left;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
color: #2c3e50;
line-height: 1;
margin-bottom: 0.25rem;
}
.stat-card h3 {
font-size: 2rem;
color: #667eea;
margin-bottom: 0.5rem;
font-weight: 700;
line-height: 1;
}
.stat-label,
.stat-card p {
font-size: 0.875rem;
color: #7f8c8d;
margin: 0;
line-height: 1.4;
font-weight: 500;
}
/* ============================================
FILTERS & SEARCH
============================================ */
.filters-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.filters-form,
.filter-form {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: end;
}
.filter-group {
flex: 1;
min-width: 200px;
}
.search-form {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.search-form .form-control {
flex: 1;
}
.search-form .btn {
flex: 0 0 auto;
}
/* ============================================
IMAGES GRID & CARDS
============================================ */
.images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.image-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.image-thumbnail,
.image-preview {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
background: #f8f9fa;
}
.image-thumbnail img,
.image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quality-badge {
position: absolute;
top: 10px;
right: 10px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
color: white;
}
.quality-high { background: #27ae60; }
.quality-medium { background: #f39c12; }
.quality-low { background: #e74c3c; }
.image-info,
.card-content {
padding: 1rem;
}
.image-title {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
.image-title a {
color: #2c3e50;
text-decoration: none;
}
.image-title a:hover {
color: #3498db;
}
.image-meta {
font-size: 0.875rem;
color: #7f8c8d;
margin-bottom: 1rem;
}
.meta-item {
padding: 0.25rem 0;
}
.image-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
/* ============================================
LABELED IMAGES SPECIFIC
============================================ */
.labeled-image-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s;
}
.labeled-image-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.label-badge {
position: absolute;
top: 10px;
left: 10px;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 0.875rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.confidence-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
/* ============================================
VIEW LAYOUTS (for detail pages)
============================================ */
.view-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
.image-viewer-section,
.related-info-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.image-viewer {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
#mainImage {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
transition: transform 0.3s ease;
cursor: zoom-in;
}
.image-controls {
display: flex;
gap: 10px;
margin-top: 15px;
justify-content: center;
}
.control-btn {
padding: 10px 16px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
text-decoration: none;
color: #2c3e50;
}
.control-btn:hover {
background: #3498db;
color: white;
border-color: #3498db;
transform: translateY(-2px);
}
.info-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.info-card h3 {
margin-bottom: 20px;
color: #2c3e50;
font-size: 18px;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.info-grid {
display: grid;
gap: 12px;
}
.info-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #ecf0f1;
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
font-weight: 600;
color: #7f8c8d;
font-size: 14px;
}
.info-value {
color: #2c3e50;
font-size: 14px;
}
.info-value a {
color: #3498db;
text-decoration: none;
}
.info-value a:hover {
text-decoration: underline;
}
/* ============================================
EMPTY STATES
============================================ */
.empty-state {
text-align: center;
padding: 3rem 1rem;
background: #f7fafc;
border-radius: 12px;
margin: 2rem 0;
}
.empty-state i,
.empty-icon {
font-size: 4rem;
color: #cbd5e0;
margin-bottom: 1rem;
display: block;
}
.empty-state h3 {
color: #2d3748;
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.empty-state p {
color: #718096;
margin-bottom: 1rem;
}
/* ============================================
PAGINATION
============================================ */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.page-link {
padding: 10px 16px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
color: #2c3e50;
transition: all 0.3s ease;
}
.page-link:hover {
background: #3498db;
color: white;
border-color: #3498db;
}
.page-link.active {
background: #3498db;
color: white;
border-color: #3498db;
}
.pagination-ellipsis {
padding: 0 5px;
color: #718096;
}
/* ============================================
TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
font-weight: 600;
line-height: 1.2;
color: #1a202c;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p {
margin-bottom: 1rem;
}
a {
color: #667eea;
text-decoration: none;
transition: color 0.2s;
}
a:hover {
text-decoration: underline;
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
font-size: 0.95rem;
font-weight: 500;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1.5;
}
.btn:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: #667eea;
color: white;
border-color: #667eea;
}
.btn-primary:hover {
background-color: #5a67d8;
}
.btn-secondary {
background-color: #718096;
color: white;
border-color: #718096;
}
.btn-secondary:hover {
background-color: #4a5568;
}
.btn-success {
background-color: #48bb78;
color: white;
border-color: #48bb78;
}
.btn-success:hover {
background-color: #38a169;
}
.btn-danger {
background-color: #f56565;
color: white;
border-color: #f56565;
}
.btn-danger:hover {
background-color: #e53e3e;
}
.btn-outline {
background-color: white;
color: #667eea;
border: 1px solid #667eea;
}
.btn-outline:hover {
background-color: #667eea;
color: white;
}
.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
.btn-lg {
padding: 0.875rem 1.75rem;
font-size: 1.125rem;
}
.btn-block {
width: 100%;
justify-content: center;
}
.btn-icon {
margin-right: 0.25rem;
}
/* ============================================
ALERTS & MESSAGES
============================================ */
.alert {
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
border: 1px solid transparent;
border-radius: 8px;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.alert i {
font-size: 1.25rem;
flex-shrink: 0;
}
.alert-success {
background-color: #c6f6d5;
border-color: #9ae6b4;
color: #22543d;
}
.alert-error,
.alert-danger {
background-color: #fed7d7;
border-color: #fc8181;
color: #742a2a;
}
.alert-info {
background-color: #bee3f8;
border-color: #90cdf4;
color: #2c5282;
}
.alert-warning {
background-color: #feebc8;
border-color: #fbd38d;
color: #744210;
}
.alert-dismissible {
position: relative;
padding-right: 3rem;
}
.alert-dismissible .close {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
opacity: 0.5;
}
.alert-dismissible .close:hover {
opacity: 1;
}
/* ============================================
CARDS
============================================ */
.card {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid #e2e8f0;
}
.card-header {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
.card-body {
padding: 0;
}
/* ============================================
TABLES
============================================ */
.table-responsive {
overflow-x: auto;
border-radius: 8px;
margin-bottom: 1.5rem;
}
table,
.data-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
}
table thead,
.data-table thead {
background-color: #f7fafc;
}
table th,
.data-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: #4a5568;
border-bottom: 2px solid #e2e8f0;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
table td,
.data-table td {
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
color: #2d3748;
}
table tbody tr,
.data-table tbody tr {
transition: background-color 0.15s;
}
table tbody tr:hover,
.data-table tbody tr:hover {
background-color: #f7fafc;
}
table tbody tr:last-child td,
.data-table tbody tr:last-child td {
border-bottom: none;
}
.table-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ============================================
BADGES
============================================ */
.badge {
display: inline-block;
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-success {
background-color: #c6f6d5;
color: #22543d;
}
.badge-warning {
background-color: #feebc8;
color: #744210;
}
.badge-danger {
background-color: #fed7d7;
color: #742a2a;
}
.badge-info {
background-color: #bee3f8;
color: #2c5282;
}
.badge-secondary {
background-color: #e2e8f0;
color: #4a5568;
}
.badge-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* ============================================
FORMS
============================================ */
.form-container {
max-width: 700px;
margin: 2rem auto;
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-header {
border-bottom: 2px solid #e2e8f0;
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.form-header h2 {
color: #1a202c;
margin: 0;
}
.form-header p {
color: #718096;
margin: 0.5rem 0 0 0;
font-size: 0.95rem;
}
.form-section {
margin-bottom: 2rem;
}
.form-section-title {
font-size: 1.125rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.form-row.three-col {
grid-template-columns: 1fr 1fr 1fr;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.form-group label {
font-weight: 600;
color: #4a5568;
font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.5;
    color: #2d3748;
    background-color: white;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f7fafc;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-control::placeholder {
    color: #a0aec0;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

input[type="file"].form-control {
    padding: 0.5rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
    flex-wrap: wrap;
}

.required {
    color: #f56565;
    font-weight: 700;
    margin-left: 2px;
}

.help-text {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 0.25rem;
    display: block;
}

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
    background-color: #2d3748;
    color: white;
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
}

.footer-content p {
    margin-bottom: 0.5rem;
}

.footer-version {
    font-size: 0.875rem;
    color: #a0aec0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.d-none { display: none !important; }
.d-block { display: block !important; }

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 992px) {
    .nav-menu {
        gap: 0.15rem;
    }

    .nav-link {
        padding: 1rem 0.75rem;
        font-size: 0.9rem;
    }

    .stats-section,
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .view-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Show hamburger menu */
    .mobile-menu-toggle {
        display: block !important;
    }

    /* Hide username on mobile */
    .user-name {
        display: none;
    }

    /* Mobile navigation menu */
    .nav-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        flex-direction: column;
        padding: 1rem 0;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 999;
        gap: 0;
    }

    .nav-menu.active {
        display: flex !important;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-link {
        padding: 1rem 1.5rem;
        justify-content: flex-start;
        border-radius: 0;
        width: 100%;
        font-size: 1rem;
    }

    /* Mobile dropdown */
    .nav-item.dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,0.15);
        border-radius: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        display: none;
    }

    .nav-item.dropdown.active .dropdown-menu {
        display: block;
    }

    .dropdown-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .dropdown-menu li a {
        padding: 0.875rem 2rem;
        color: rgba(255,255,255,0.95) !important;
        font-size: 0.95rem;
    }

    .dropdown-menu li a:hover {
        background: rgba(255,255,255,0.1) !important;
        color: white !important;
    }

    /* Layout adjustments */
    .main-content {
        padding: 1rem;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }

    .hero-section {
        padding: 2rem 1rem;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .stats-section,
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card {
        padding: 1.5rem 1rem;
        min-height: 120px;
    }

    .stat-value,
    .stat-card h3 {
        font-size: 2rem;
    }

    .form-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .form-row,
    .form-row.three-col {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .filters-form,
    .filter-form {
        flex-direction: column;
    }

    .search-form {
        flex-direction: column;
    }

    table,
    .data-table {
        font-size: 0.85rem;
    }

    table th,
    table td,
    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
    }

    .table-actions {
        flex-direction: column;
        gap: 0.25rem;
    }

    .table-actions .btn {
        width: 100%;
    }

    .card {
        padding: 1rem;
    }

    .images-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }

    .info-item {
        grid-template-columns: 1fr;
    }

    .info-label {
        font-weight: 700;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .nav-brand a {
        font-size: 1rem;
    }

    .hero-section h1 {
        font-size: 1.5rem;
    }

    .stat-value,
    .stat-card h3 {
        font-size: 1.75rem;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    .images-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .top-nav,
    .nav-menu,
    .mobile-menu-toggle,
    .form-actions,
    .btn,
    .user-dropdown,
    .header-actions {
        display: none !important;
    }

    .main-content {
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #e2e8f0;
        page-break-inside: avoid;
    }

    body {
        background: white;
    }
}