/* styles.css — Full styles (same as previous version) */
:root {
  --color-primary: #e8821a; --color-secondary: #2c5f8a; --color-success: #27ae60;
  --color-danger: #e74c3c; --color-warning: #f39c12; --color-info: #3498db;
  --color-bg: #f5f5f5; --color-surface: #ffffff; --color-text: #2c2c2c;
  --color-muted: #7f8c8d; --color-border: #dce1e7; --font-main: 'Segoe UI', Arial, sans-serif;
  --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.1); --transition: 0.2s ease; --sidebar-width: 240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}
.field-label-with-info{display:flex;align-items:center;gap:0.5rem}
.info-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--color-info);color:white;font-size:12px;font-weight:bold;cursor:pointer}
.info-icon:hover{background:var(--color-primary)}
.info-tooltip{position:relative;display:inline-block}
.info-tooltip .info-text{visibility:hidden;background-color:var(--color-secondary);color:#fff;text-align:left;border-radius:6px;padding:0.5rem 0.75rem;position:absolute;z-index:100;bottom:125%;left:50%;transform:translateX(-50%);width:240px;font-size:0.75rem;line-height:1.4;box-shadow:var(--shadow)}
.info-tooltip:hover .info-text{visibility:visible}
.map-container{width:100%;height:400px;border-radius:var(--radius);border:1px solid var(--color-border);z-index:1}
.map-controls{margin-bottom:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap}
.map-search-input{flex:1;padding:0.5rem 0.75rem;border:1px solid var(--color-border);border-radius:var(--radius);font-size:0.9rem}
.map-locate-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:0.5rem 0.75rem;cursor:pointer;font-size:0.9rem}
.map-locate-btn:hover{background:var(--color-primary);color:white}
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-width);background:var(--color-secondary);color:#fff;padding:1rem;display:none;flex-direction:column;position:fixed;top:0;left:0;bottom:0}
.main-content{flex:1;padding:1rem;overflow-y:auto}
@media (min-width:768px){.sidebar{display:flex}.main-content{margin-left:var(--sidebar-width);padding:1.5rem 2rem}}
.nav-header{font-size:1.1rem;font-weight:700;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.2);margin-bottom:1rem}
.nav-links{list-style:none}
.nav-links li+li{margin-top:0.25rem}
.nav-links a{display:block;padding:0.5rem 0.75rem;border-radius:var(--radius);color:rgba(255,255,255,0.85);transition:background var(--transition)}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,0.15);color:#fff;text-decoration:none}
.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--color-secondary);color:#fff;padding:0.75rem 1rem;position:sticky;top:0;z-index:100}
.topbar-title{font-weight:700;font-size:1rem}
.hamburger-btn{background:none;border:none;color:#fff;font-size:1.5rem;line-height:1}
@media (min-width:768px){.topbar{display:none}}
.mobile-nav{position:fixed;top:0;left:0;width:80%;max-width:300px;height:100%;background:var(--color-secondary);z-index:200;transform:translateX(-100%);transition:transform 0.3s ease;padding:1.5rem 1rem;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:150}
.mobile-overlay.visible{display:block}
.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1rem}
.card-title{font-size:1rem;font-weight:600;margin-bottom:0.75rem;color:var(--color-secondary);border-bottom:2px solid var(--color-primary);padding-bottom:0.4rem}
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1.1rem;border-radius:var(--radius);border:none;font-size:0.9rem;font-weight:500;transition:opacity var(--transition),transform var(--transition)}
.btn:hover{opacity:0.88;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-secondary{background:var(--color-secondary);color:#fff}
.btn-success{background:var(--color-success);color:#fff}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-info{background:var(--color-info);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}
.btn-sm{padding:0.3rem 0.75rem;font-size:0.8rem}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:0.3rem}
.form-checkbox{margin-right:0.5rem;vertical-align:middle}
.form-checkbox-label{display:inline-flex;align-items:center;cursor:pointer}
.form-input,.form-select,.form-textarea{width:100%;padding:0.55rem 0.75rem;border:1px solid var(--color-border);border-radius:var(--radius);font-size:0.95rem;font-family:inherit;background:var(--color-surface);transition:border-color var(--transition)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(232,130,26,0.15)}
.form-input.error{border-color:var(--color-danger)}
.form-input.valid{border-color:var(--color-success)}
.form-hint{font-size:0.78rem;color:var(--color-muted);margin-top:0.25rem}
.form-error{font-size:0.78rem;color:var(--color-danger);margin-top:0.25rem;display:none}
.form-error.visible{display:block}
.form-textarea{resize:vertical;min-height:80px}
.conditional-field{margin-top:0.5rem;margin-bottom:1rem;border-left:3px solid var(--color-primary);padding-left:1rem}
.table-wrapper{overflow-x:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:0.9rem}
thead{background:var(--color-secondary);color:#fff}
th,td{padding:0.65rem 1rem;text-align:left}
th{font-weight:600;white-space:nowrap}
tbody tr:nth-child(even){background:#f8f9fa}
tbody tr:hover{background:#eef3f8;cursor:pointer}
.badge{display:inline-block;padding:0.15rem 0.55rem;border-radius:20px;font-size:0.75rem;font-weight:600}
.badge-success{background:#d5f5e3;color:#1a7a40}
.badge-danger{background:#fde8e8;color:#a93226}
.badge-warning{background:#fef9e7;color:#9a7d0a}
.badge-info{background:#d6eaf8;color:#1a5276}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem}
@media (min-width:480px){.media-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px){.media-grid{grid-template-columns:repeat(4,1fr)}}
.media-thumb{aspect-ratio:1;overflow:hidden;border-radius:calc(var(--radius)/2);background:#eee;cursor:pointer;position:relative}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}
.media-thumb .media-delete-btn{position:absolute;top:4px;right:4px;background:rgba(231,76,60,0.85);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:0.75rem;display:flex;align-items:center;justify-content:center}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:1000;align-items:center;justify-content:center;padding:1rem}
.lightbox.open{display:flex}
.lightbox-inner{position:relative;max-width:90vw;max-height:90vh}
.lightbox-inner img,.lightbox-inner video{max-width:100%;max-height:80vh;border-radius:var(--radius)}
.lightbox-close{position:absolute;top:-2rem;right:0;background:none;border:none;color:#fff;font-size:1.8rem;line-height:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:1.5rem;padding:0.5rem;border-radius:var(--radius)}
.lightbox-prev{left:-2.5rem}
.lightbox-next{right:-2.5rem}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:500;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:1.5rem}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.modal-title{font-size:1.1rem;font-weight:600}
.modal-close{background:none;border:none;font-size:1.3rem;color:var(--color-muted)}
.toast-container{position:fixed;bottom:1.5rem;right:1rem;z-index:2000;display:flex;flex-direction:column;gap:0.5rem}
.toast{min-width:240px;padding:0.75rem 1rem;border-radius:var(--radius);color:#fff;font-size:0.875rem;box-shadow:var(--shadow);animation:slideIn 0.3s ease}
.toast-success{background:var(--color-success)}
.toast-error{background:var(--color-danger)}
.toast-warning{background:var(--color-warning)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-secondary) 0%,#1a3a52 100%);padding:1rem}
.auth-card{background:var(--color-surface);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.25);padding:2rem;width:100%;max-width:420px}
.auth-logo{text-align:center;margin-bottom:1.5rem}
.auth-logo h1{font-size:1.4rem;color:var(--color-primary)}
.auth-logo p{font-size:0.85rem;color:var(--color-muted)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:1rem}
@media (min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;text-align:center;border-top:3px solid var(--color-primary)}
.stat-value{font-size:1.8rem;font-weight:700;color:var(--color-secondary)}
.stat-label{font-size:0.78rem;color:var(--color-muted)}
.text-center{text-align:center}
.text-muted{color:var(--color-muted)}
.text-danger{color:var(--color-danger)}
.text-success{color:var(--color-success)}
.mt-1{margin-top:0.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:0.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.d-flex{display:flex}
.gap-1{gap:0.5rem}
.gap-2{gap:1rem}
.flex-wrap{flex-wrap:wrap}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.hidden{display:none !important}
.loading-spinner{border:3px solid var(--color-border);border-top:3px solid var(--color-primary);border-radius:50%;width:24px;height:24px;animation:spin 0.7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
