:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4f2864;
  background: #f4f0f7;
  color-scheme: light;
  accent-color: #4f2864;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(420px, 100%); padding: 36px; border-radius: 18px; background: white; box-shadow: 0 18px 55px rgba(75, 48, 89, .13); }
.brand { color: #4f2864; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: 6px 0 8px; font-size: 2rem; }
h2 { margin: 0 0 8px; font-size: 1.1rem; }
label { display: block; margin: 18px 0 7px; font-weight: 650; }
input[type="email"], input[type="password"], input[type="text"], textarea, select { color: inherit; width: 100%; padding: 12px 13px; border: 1px solid #cdbbd8; border-radius: 8px; background: white; }
input:focus, select:focus { outline: 3px solid rgba(79, 40, 100, .2); border-color: #4f2864; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
button { border: 0; border-radius: 8px; padding: 11px 16px; background: #4f2864; color: white; font-weight: 700; }
.card button { width: 100%; margin-top: 18px; }
button:hover { background: #3d1d50; }
.secondary { padding: 8px 12px; background: white; color: #4f2864; border: 1px solid #cdbbd8; }
/* Ensure secondary buttons keep readable text on hover (override global button:hover) */
.secondary:hover {
  background: #f2eaf6;
  color: #4f2864;
  border-color: #dfcce9;
}
.muted { color: #64566b; }
.small { font-size: .85rem; line-height: 1.45; }
.error { padding: 10px; border-radius: 7px; color: #8a1f1f; background: #fdeaea; }
.notice { padding: 10px; border-radius: 7px; color: #624c12; background: #fff6d9; }

.app-shell { min-height: 100vh; }
header { height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: white; border-bottom: 1px solid #e4dbe9; }
header strong { color: #4f2864; margin-right: 8px; }
.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 12px; }
.app-brand-logo { display: block; width: auto; height: 50px; max-width: min(132px, 32vw); object-fit: contain; }
.app-brand span { color: #4f2864; font-size: 1.725rem; font-weight: 750; letter-spacing: .02em; }
.account { display: flex; align-items: center; gap: 12px; }
.workspace { height: calc(100vh - 64px); display: grid; grid-template-columns: 320px 1fr; }
aside { padding: 20px; overflow-y: auto; background: #faf7fb; border-right: 1px solid #e4dbe9; }
.map-container { position: relative; min-width: 0; min-height: 0; }
#map { width: 100%; height: 100%; min-width: 0; background: #e7e1e9; }
.basemap-setting { margin-inline: -4px; padding-inline: 4px; }
.basemap-setting select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  padding: 10px 34px 10px 12px;
  appearance: none;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.selection-panel { padding: 10px; border: 1px solid #d8c9df; border-radius: 10px; background: white; }
.selection-panel h2 { margin: 0; }
.selection-panel label { margin: 12px 0 5px; }
.selection-panel select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  padding: 10px 34px 10px 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352675b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.selection-panel p { margin: 10px 0 0; }
#open-upload { width: 100%; margin-top: 12px; }
.upload-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.upload-button-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewer-tab-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 28px; }
#open-upload:not([hidden]) + .viewer-content-tabs .viewer-tab-list { margin-top: 16px; }
.viewer-tab { padding: 9px 8px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: #64566b; font-size: .9rem; }
.viewer-tab:hover { background: #f2eaf6; color: #4f2864; }
.viewer-tab[aria-selected="true"] { position: relative; z-index: 1; background: white; border-color: #e2d7e8; border-bottom-color: white; color: #4f2864; }
.viewer-tab-panel { position: relative; margin-top: -1px; padding: 14px; border: 1px solid #e2d7e8; border-radius: 0 9px 9px 9px; background: white; }
.viewer-tab-panel > p:first-child { margin-top: 0; }
.drawing-panel { margin-top: 20px; padding: 14px; border: 1px solid #d8c9df; border-radius: 10px; background: white; }
.drawings-heading { margin: 0 0 8px; }
.drawing-panel label { margin: 12px 0 6px; }
.drawing-panel select { width: 100%; }
.drawing-panel #drawing-help { margin: 12px 0 0; }
.drawing-form label { margin-top: 10px; }
.drawing-form textarea { resize: vertical; }
.drawing-form button { width: 100%; margin-top: 12px; }
.drawing-form .error { margin: 10px 0 0; }
.drawing-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.drawing-actions button { padding: 8px 6px; font-size: .85rem; }
.drawing-actions .danger { background: #a93434; color: white; border-color: #a93434; }
.drawing-actions .danger:hover { background: #832727; color: white; }
.upload-dialog { width: min(980px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 12px; color: #4f2864; }
.upload-dialog::backdrop { background: rgb(15 23 42 / 72%); }
.upload-dialog[open] { display: flex; flex-direction: column; }
.upload-dialog-header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: #4f2864; color: white; }
.upload-dialog-header button { width: auto; }
.upload-dialog-body { overflow: auto; padding: 16px 22px 22px; }
.upload-dialog-body > select { width: 100%; }
#uppy-dashboard .uppy-Dashboard-inner { width: 100%; }
#upload-status { padding: 12px; border-radius: 6px; background: #f2eaf6; }
.upload-progress-summary:empty { display: none; }
.upload-progress-summary p { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #624078; background: #f4eff6; font-size: .9rem; }
body.upload-open { overflow: hidden; }
#map-file-list:not(:empty) { overflow: hidden; background: transparent; }
.map-file-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #64566b; background: white; font-size: .9rem; font-weight: 500; }
.map-file-name { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.map-file-download-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #76677d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-file-item + .map-file-item { border-top: 1px solid #ece5ef; }
.map-file-item:hover { background: #f5eff7; color: #4f2864; }
#layer-list:not(:empty) { overflow: hidden; background: white; border: 1px solid #e2d7e8; border-radius: 9px; }
.layer-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 8px 10px; background: white; }
.layer-item + .layer-item { border-top: 1px solid #ece5ef; }
.layer-name { display: flex; grid-column: 1 / -1; align-items: center; gap: 9px; min-width: 0; margin: 0; }
.layer-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-title-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.layer-title-group .layer-description { color: #64566b; font-size: .78rem; font-weight: 400; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.layer-actions { display: flex; gap: 4px; }
.layer-actions button { width: 30px; height: 30px; padding: 0; background: #eee5f2; color: #4f2864; }
.layer-actions button:disabled { opacity: .35; cursor: default; }
.layer-item input[type="range"] { width: 100%; }
.layer-status { grid-column: 1 / -1; color: #a12c2c; }

.admin-shell { min-height: 100vh; }
.admin-content { display: grid; grid-template-columns: clamp(160px, 18vw, 240px) 1fr; gap: 20px; padding: 20px; }
.admin-content.password-mode { grid-template-columns: 1fr; }
.admin-sidebar { padding: 16px; border: 1px solid #e2d7e8; border-radius: 12px; background: white; height: fit-content; width: auto; max-width: 240px; }
.admin-main { min-width: 0; }
.admin-sidebar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-sidebar nav button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; background: white; border: 1px solid #e2d7e8; color: #4f2864; }
.admin-sidebar nav button:hover { background: #f2eaf6; }
.admin-list-panel, .user-editor-panel, .admin-home-panel { padding: 24px; border: 1px solid #e2d7e8; border-radius: 12px; background: white; width: 100%; max-width: 100%; box-sizing: border-box; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.admin-filter-label { min-width: 220px; margin: 0; }
.admin-filter-label select { margin-top: 7px; }
.admin-grid-actions { margin-bottom: 12px; }
.section-heading h1 { margin-top: 0; }
.section-heading p { margin: 0; }
.table-scroll { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td { padding: 12px; border-bottom: 1px solid #e8e0eb; text-align: left; }
.users-table th { color: #64566b; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.users-table td:last-child { width: 1%; white-space: nowrap; }
.table-actions { display: flex; gap: 8px; }
.layer-order-actions { display: flex; gap: 4px; white-space: nowrap; }
.layer-order-actions button { min-width: 34px; padding: 6px 8px; font-size: 1.1rem; line-height: 1; }
.table-actions button { padding: 7px 10px; }
.table-actions .btn-icon { display: inline-block; margin-right: 8px; font-size: 1rem; line-height: 1; }
.table-actions .btn-text { display: inline-block; }
.table-actions .needs-review { border-color: #8a5b18; color: #68420c; background: #fff6db; }
.table-actions .needs-review:hover { background: #ffedb8; }
.table-action-edit, .table-action-delete, .table-action-rights { display: inline-flex; align-items: center; gap: 6px; }
.danger { background: #a93434; }
.danger:hover { background: #832727; }
.danger:disabled, button:disabled { opacity: .5; cursor: default; }
.user-editor-panel label:first-of-type { margin-top: 12px; }
.user-editor-panel .notice { margin-top: 18px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.rights-list:not(:empty) { margin-top: 18px; overflow: hidden; border: 1px solid #e2d7e8; border-radius: 9px; }
.rights-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 12px; font-weight: 500; background: white; }
.rights-item + .rights-item { border-top: 1px solid #ece5ef; }
.rights-item:hover { background: #faf7fb; }
.rights-item input { flex: 0 0 auto; margin: 0; }
.rights-item span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  aside { max-height: 44vh; border-right: 0; border-bottom: 1px solid #e4dbe9; }
  .account #account-name { display: none; }
  .admin-content { grid-template-columns: 1fr; padding: 12px; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .account #admin-account-name { display: none; }
  .admin-sidebar { width: 100%; max-width: 100%; padding: 12px; }
  .admin-list-panel, .user-editor-panel, .admin-home-panel { padding: 12px; }
  /* On small screens show only icons for action buttons */
  .table-actions .btn-text { display: none; }
  .table-actions button { padding: 6px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .table-actions .btn-icon { margin: 0; font-size: 1.05rem; }
}

.operations-dialog { width: min(56rem, 92vw); max-height: 88vh; overflow: auto; border: 1px solid #cbd5e1; border-radius: .75rem; padding: 1.5rem; color: #4f2864; }
.operations-dialog::backdrop { background: #102a4380; }
.operations-dialog form { display: grid; gap: .75rem; margin-block: 1.25rem; }
.operations-dialog label { display: grid; gap: .3rem; }
.operations-dialog input, .operations-dialog select { max-width: 100%; }
.operations-dialog .job-status { border-top: 1px solid #d8e0e7; padding-block: .7rem; }
.operations-dialog > div > button { margin-inline-end: .5rem; }
.job-details-summary { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: .4rem 1rem; }
.job-details-summary dt { font-weight: 700; }
.job-details-summary dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
#admin-job-details-items td { overflow-wrap: anywhere; white-space: pre-wrap; }
.raster-legend { display: grid; grid-column: 1 / -1; gap: .2rem; width: 100%; }
.legend-ramp { display: block; height: .7rem; border: 1px solid #aab5bd; border-radius: .2rem; }

@media (max-width: 800px) {
  header { padding-inline: 12px; }
  .app-brand { gap: 7px; margin-left: 0; }
  .app-brand-logo { height: 44px; max-width: 96px; }
  .app-brand span { font-size: 1.4rem; }
  .account { gap: 6px; }
  .account #account-name { display: none; }
  .account button { padding: 8px 10px; }
}