/* ==========================================================================
   OpZone - SiteAdmin / My Sites dashboard
   Role: address map picker, sites table, site details, social links + logo,
         opening hours, boundary editor, site icon rail, tokens (NFC) + tag /
         category rows.
   Load position: 6 of 8 in the website opz-*.css chain.
   ========================================================================== */

/* ==========================================================================
   Map surfaces (dark — screens only)
   ========================================================================== */

/* Reusable map surface. Dark while tiles load; framed like the site's other
   screen surfaces. */
.opz-map {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    border: 1px solid var(--opz-screen-frame);
    background-color: var(--opz-screen);
    overflow: hidden;
}

/* MapPickerDialog body — the map fills the dialog width at a fixed height. */
.opz-map-picker {
    width: 100%;
}

.opz-map-picker .opz-map {
    height: 400px;
}

/* "Select from map" trigger under the address autocomplete. */
.opz-map-pick-btn {
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Sites rail (left column)
   ========================================================================== */

.opz-sites-rail-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.opz-sites-rail-toolbar {
    flex-shrink: 0;
    flex-wrap: wrap;
    row-gap: 8px;
}

.opz-sites-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-sites-placeholder {
    color: var(--opz-panel-text-soft);
}

.opz-sites-rail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 4px 8px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--opz-panel-border-strong) transparent;
}

.opz-sites-rail::-webkit-scrollbar {
    width: 6px;
}

.opz-sites-rail::-webkit-scrollbar-thumb {
    background: var(--opz-panel-border-strong);
    border-radius: 999px;
}

.opz-sites-rail::-webkit-scrollbar-track {
    background: transparent;
}

.opz-sites-rail-divider {
    width: 80%;
    margin: 0 auto;
}

/* Clickable site row: icon box + name. */
.opz-site-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.opz-site-icon:hover {
    background: color-mix(in srgb, var(--opz-signal-deep) 8%, transparent);
}

.opz-site-icon-selected {
    background: color-mix(in srgb, var(--opz-signal-deep) 12%, transparent);
    border-color: color-mix(in srgb, var(--opz-signal-deep) 50%, transparent);
    box-shadow: inset 3px 0 0 var(--opz-signal-deep);
}

.opz-site-icon-selected:hover {
    background: color-mix(in srgb, var(--opz-signal-deep) 18%, transparent);
}

/* The square the logo / letter avatar lives in. */
.opz-site-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--opz-paper-2);
    border: 1px solid var(--opz-panel-border);
}

.opz-site-icon-selected .opz-site-icon-box {
    border-color: color-mix(in srgb, var(--opz-signal-deep) 60%, transparent);
}

/* Logo image fills the box. */
.opz-site-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Letter avatar (deterministic per-site background colour set inline). */
.opz-site-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--opz-screen-text);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--opz-ink) 35%, transparent);
    user-select: none;
}

/* Site name next to the icon. */
.opz-site-icon-name {
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--opz-panel-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.opz-site-icon:hover .opz-site-icon-name {
    color: var(--opz-panel-text);
}

.opz-site-icon-selected .opz-site-icon-name {
    color: var(--opz-panel-text);
    font-weight: 600;
}

/* ==========================================================================
   Site details
   ========================================================================== */

.opz-sitedetails-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-sitedetails-hint {
    color: var(--opz-panel-text-soft);
}

.opz-sitedetails-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-sitedetails-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
    background: color-mix(in srgb, var(--opz-ink) 5%, transparent);
}

/* View-only definition list. */
.opz-sitedetails-fields {
    display: flex;
    flex-direction: column;
}

.opz-sitedetails-field {
    padding: 10px 0;
    border-bottom: 1px solid var(--opz-panel-border);
}

.opz-sitedetails-field:last-child {
    border-bottom: none;
}

.opz-sitedetails-value {
    display: block;
    margin-top: 2px;
    color: var(--opz-panel-text-soft);
    line-height: 1.5;
    word-break: break-word;
}

/* ==========================================================================
   Logo + social links
   ========================================================================== */

.opz-logo-box {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--opz-paper-2);
    border: 1px dashed var(--opz-panel-border-strong);
}

.opz-logo-icon {
    font-size: 40px;
    color: var(--opz-panel-text-soft);
}

.opz-logo-icon-sm {
    font-size: 18px;
    color: var(--opz-panel-text-soft);
    vertical-align: middle;
    margin-right: 6px;
}

.opz-sitelinks-platform {
    min-width: 160px;
    max-width: 220px;
}

.opz-sitelinks-url {
    flex: 1 1 auto;
    min-width: 220px;
}

.opz-sitelinks-url-invalid .mud-input-helper-text {
    color: var(--mud-palette-error) !important;
}

.opz-sitelinks-remove {
    align-self: center;
    margin-top: 4px;
}

/* ==========================================================================
   Opening hours editor
   ========================================================================== */

.opz-hours-section-title {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opz-hours-empty {
    color: var(--opz-panel-text-soft);
    font-style: italic;
}

.opz-hours-row {
    display: grid;
    grid-template-columns: 150px 1fr 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
}

.opz-hours-row-closed {
    background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
}

.opz-hours-day {
    min-width: 0;
}

.opz-hours-time {
    min-width: 0;
}

.opz-hours-closed-label {
    color: var(--mud-palette-error);
    font-size: 0.85rem;
    font-weight: 600;
    grid-column: 2 / 4;
}

.opz-hours-closed-switch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.opz-hours-remove {
    color: var(--mud-palette-error);
}

.opz-hours-add {
    align-self: flex-start;
}

/* ==========================================================================
   Boundary editor
   ========================================================================== */

.opz-boundary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.opz-boundary-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-boundary-map {
    width: 100%;
    height: 700px;
    border-radius: 12px;
    border: 1px solid var(--opz-screen-frame);
    background-color: var(--opz-screen);
    overflow: hidden;
}

.opz-boundary-hint {
    color: var(--opz-panel-text-soft);
}

.opz-boundary-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.opz-boundary-tiles {
    color: var(--opz-panel-text);
    border-color: var(--opz-panel-border);
}

.opz-boundary-tile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.opz-boundary-tile-check {
    color: var(--opz-signal-deep);
}

.opz-boundary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.opz-boundary-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The boundary toolbar buttons are MudButtons, so their shape/typography come from
   the theme's button system -- verified: a single-class base rule here does NOT win
   against MudBlazor's compound button selectors (padding/font-size stayed at
   MudButton's values), so deliberately do not add one. Only the state colours need
   us, and those DO apply. */
.opz-boundary-tool-danger {
    color: var(--mud-palette-error);
}

.opz-boundary-tool-active {
    color: var(--opz-signal-deep);
    border-color: var(--opz-signal-deep);
    background: color-mix(in srgb, var(--opz-signal-deep) 10%, transparent);
}

.opz-boundary-tool-danger.opz-boundary-tool-active {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

.opz-boundary-alert {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

.opz-boundary-badge {
    margin-left: 8px;
}

.opz-boundary-expand-btn {
    color: var(--opz-panel-text-soft);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.opz-boundary-expand-btn:hover {
    color: var(--opz-panel-text);
    background-color: color-mix(in srgb, var(--opz-ink) 8%, transparent);
}

/* Expanded full-screen overlay. The panel becomes a fixed overlay; the map
   stays dark while the chrome goes light paper. */
.opz-boundary-expanded {
    position: fixed;
    inset: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--opz-panel-border-strong);
    box-shadow: 0 24px 48px color-mix(in srgb, var(--opz-ink) 28%, transparent);
    animation: opz-boundary-fade-in 0.18s ease;
}

.opz-boundary-expanded .opz-boundary-map {
    flex: 1;
    height: auto;
    min-height: 0;
}

@keyframes opz-boundary-fade-in {
    from {
        opacity: 0;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   Tokens panel
   ========================================================================== */

.opz-tokens-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.opz-tokens-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-tokens-hint {
    color: var(--opz-panel-text-soft);
}

.opz-tokens-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--opz-signal-deep);
    background: color-mix(in srgb, var(--opz-signal-deep) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-signal-deep) 30%, transparent);
}

.opz-tokens-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 28px 12px;
    border: 1px dashed var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
}

.opz-tokens-empty-icon {
    color: var(--opz-panel-text-soft);
    font-size: 34px;
    margin-bottom: 6px;
}

.opz-tokens-empty-title {
    color: var(--opz-panel-text-soft);
}

/* ---- Tag rows ---- */

.opz-tags-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.opz-tag-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opz-tag-row:hover {
    border-color: var(--opz-panel-border-strong);
    background: var(--opz-paper-3);
}

/* View-only rows have no action column — keep the meta right-aligned. */
.opz-tag-row-readonly {
    grid-template-columns: minmax(0, 1fr) auto;
}

.opz-tag-main {
    min-width: 0;
}

.opz-tag-keyline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.opz-tag-nfc-icon {
    color: var(--opz-signal-deep);
    flex-shrink: 0;
}

.opz-tag-key {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--opz-panel-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opz-tag-lock {
    display: inline-flex;
    align-items: center;
    color: var(--opz-alert-warning);
    flex-shrink: 0;
}

.opz-tag-value {
    margin-top: 2px;
    color: var(--opz-panel-text-soft);
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

.opz-tag-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 320px;
}

.opz-tag-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.opz-tag-type-entry {
    color: var(--opz-signal-deep);
    background: color-mix(in srgb, var(--opz-signal-deep) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-signal-deep) 30%, transparent);
}

.opz-tag-type-event {
    color: var(--opz-cyan);
    background: color-mix(in srgb, var(--opz-cyan) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-cyan) 30%, transparent);
}

.opz-tag-type-custom {
    color: var(--opz-hazard);
    background: color-mix(in srgb, var(--opz-hazard) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-hazard) 30%, transparent);
}

.opz-tag-type-data {
    color: var(--opz-olive);
    background: color-mix(in srgb, var(--opz-olive) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-olive) 30%, transparent);
}

.opz-tag-category {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--opz-panel-text-soft);
    background: color-mix(in srgb, var(--opz-ink) 5%, transparent);
    border: 1px solid var(--opz-panel-border);
    white-space: nowrap;
}

.opz-tag-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ---- Category rows ---- */

.opz-cats-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.opz-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
}

.opz-cat-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--opz-panel-text-soft);
    font-size: 0.9rem;
}

.opz-cat-icon {
    color: var(--opz-panel-text-soft);
    flex-shrink: 0;
}

.opz-cat-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opz-cat-count {
    color: var(--opz-panel-text-soft);
    font-size: 0.72rem;
    white-space: nowrap;
}

.opz-cat-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.opz-cat-edit-field {
    flex: 1 1 auto;
}

.opz-cat-add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.opz-cat-add-field {
    flex: 1 1 auto;
}

.opz-cats-empty {
    padding: 16px 12px;
    border: 1px dashed var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
    margin-top: 12px;
    text-align: center;
}


.opz-admin-page{
    width: 90vw;
}



/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .opz-hours-row {
        grid-template-columns: 1fr 1fr;
    }

    .opz-hours-day {
        grid-column: 1 / -1;
    }

    .opz-hours-closed-label {
        grid-column: 1 / -1;
    }

    .opz-tag-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .opz-tag-meta {
        justify-content: flex-start;
        max-width: none;
    }

    .opz-tag-actions {
        justify-content: flex-end;
    }
}