/* ══════════════════════════════════════════════════════════════
   Notespark — admin pages in the app's own theme
   Isolated file. Load after app.css, before nota-mobile.css.

   The admin pages were built as a separate dark console. AdminLayout now
   sits inside `.nota.theme-light` like the rest of the app, so every
   rule here reads the same --n-* tokens as the main layout and follows
   any theme change automatically.

   Selectors are `.nota.theme-light .admin-x`, which outranks the original
   `.admin-x` rules in app.css without needing !important (except on
   .admin-select, whose dark rules are themselves !important).
   ══════════════════════════════════════════════════════════════ */

/* ── Shell: canvas + two floating cards, like the main app ── */
.nota.theme-light .admin-shell {
    position: static;
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    background: var(--n-bg);
    gap: 10px;
    padding: 10px 10px 18px;
    box-sizing: border-box;
}

.nota.theme-light .admin-sidebar {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: var(--n-shadow-sm);
    padding: 22px 0 18px;
}

.nota.theme-light .admin-main {
    background: #fffdf9;
    background-image: none;
    border-radius: 16px;
    box-shadow: var(--n-shadow-sm);
}

/* ── Sidebar ── */
.nota.theme-light .admin-brand {
    border-bottom-color: var(--n-border-light);
}

.nota.theme-light .admin-brand-icon {
    color: var(--n-accent);
}

.nota.theme-light .admin-brand-name {
    color: var(--n-text);
}

.nota.theme-light .admin-back-to-app {
    color: var(--n-accent-text);
}

    .nota.theme-light .admin-back-to-app:hover {
        color: var(--n-accent-hover);
    }

.nota.theme-light .admin-nav-item {
    color: var(--n-text-3);
    font-weight: 600;
}

    .nota.theme-light .admin-nav-item:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

    .nota.theme-light .admin-nav-item.active {
        background: var(--n-accent-dim);
        color: var(--n-accent-text);
    }

.nota.theme-light .admin-sidebar-footer {
    border-top-color: var(--n-border-light);
}

.nota.theme-light .admin-user-avatar {
    color: #fff;
    background: var(--n-accent);
}

.nota.theme-light .admin-user-name {
    color: var(--n-text);
}

.nota.theme-light .admin-user-role {
    color: var(--n-text-4);
}

.nota.theme-light .admin-logout {
    color: var(--n-text-3);
}

    .nota.theme-light .admin-logout:hover {
        color: var(--n-danger, #dc2626);
    }

/* ── Page header ── */
.nota.theme-light .admin-page-header h1 {
    color: var(--n-text);
}

.nota.theme-light .admin-page-header p,
.nota.theme-light .admin-muted,
.nota.theme-light .admin-hint {
    color: var(--n-text-3);
}

.nota.theme-light .admin-back {
    color: var(--n-text-3);
}

    .nota.theme-light .admin-back:hover {
        color: var(--n-text);
    }

/* ── Buttons ── */
.nota.theme-light .admin-btn-primary {
    background: var(--n-accent);
    box-shadow: 0 3px 10px rgba(108,92,231,0.28);
}

    .nota.theme-light .admin-btn-primary:hover {
        background: var(--n-accent-hover);
    }

    .nota.theme-light .admin-btn-primary.danger {
        background: #dc2626;
        box-shadow: 0 3px 10px rgba(220,38,38,0.25);
    }

        .nota.theme-light .admin-btn-primary.danger:hover {
            background: #b91c1c;
        }

.nota.theme-light .admin-btn-secondary,
.nota.theme-light .admin-btn-sm {
    background: #fff;
    border: 1px solid var(--n-border);
    color: var(--n-text-2);
}

    .nota.theme-light .admin-btn-secondary:hover,
    .nota.theme-light .admin-btn-sm:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

    .nota.theme-light .admin-btn-sm.danger {
        color: #b4232a;
    }

        .nota.theme-light .admin-btn-sm.danger:hover {
            background: rgba(220,38,38,0.08);
            border-color: rgba(220,38,38,0.35);
            color: #b4232a;
        }

/* ── Messages ── */
.nota.theme-light .admin-message.success {
    background: rgba(99,171,119,0.12);
    border-color: rgba(99,171,119,0.35);
    color: #2f7a4f;
}

.nota.theme-light .admin-message.error,
.nota.theme-light .admin-modal-error {
    background: rgba(220,38,38,0.07);
    border-color: rgba(220,38,38,0.25);
    color: #b4232a;
}

/* ── Table ── */
.nota.theme-light .admin-table-wrap {
    background: #fff;
    border: 1px solid var(--n-border);
    box-shadow: 0 1px 4px rgba(70,55,30,0.05);
}

.nota.theme-light .admin-table thead tr {
    border-bottom-color: var(--n-border);
}

.nota.theme-light .admin-table th {
    color: var(--n-text-4);
}

.nota.theme-light .admin-table td {
    border-bottom-color: var(--n-border-light);
    color: var(--n-text-2);
}

.nota.theme-light .admin-table tbody tr:hover {
    background: var(--n-surface);
}

.nota.theme-light .admin-user-display,
.nota.theme-light .admin-co-name {
    color: var(--n-text);
}

.nota.theme-light .admin-user-username,
.nota.theme-light .admin-co-slug,
.nota.theme-light .admin-empty {
    color: var(--n-text-4);
}

/* ── Status + role pills ── */
.nota.theme-light .admin-status.active,
.nota.theme-light .admin-role-badge.companyadmin {
    background: var(--n-accent-dim);
    color: var(--n-accent-text);
}

.nota.theme-light .admin-status.inactive,
.nota.theme-light .admin-role-badge.user {
    background: var(--n-surface-hover);
    color: var(--n-text-3);
}

.nota.theme-light .admin-role-badge.superadmin {
    background: rgba(230,147,85,0.15);
    color: #b5651d;
}

.nota.theme-light .admin-badge {
    background: var(--n-accent-dim);
    color: var(--n-accent-text);
}

.nota.theme-light .admin-co-link {
    color: var(--n-accent-text);
}

/* ── Company cards ── */
.nota.theme-light .admin-co-card {
    background: #fff;
    border: 1px solid var(--n-border);
    box-shadow: 0 1px 4px rgba(70,55,30,0.05);
}

    .nota.theme-light .admin-co-card:hover {
        background: #fff;
        border-color: var(--n-card-border-hover);
        box-shadow: var(--n-shadow-sm);
    }

.nota.theme-light .admin-co-logo {
    background: var(--n-surface);
    border-color: var(--n-border);
    color: var(--n-text-2);
}

.nota.theme-light .admin-co-card-name {
    color: var(--n-text);
}

.nota.theme-light .admin-co-card-meta,
.nota.theme-light .admin-co-card-date {
    color: var(--n-text-3);
}

.nota.theme-light .admin-empty-state,
.nota.theme-light .admin-empty-state p {
    color: var(--n-text-3);
}

/* ── Modals ── */
.nota.theme-light .admin-modal-overlay {
    background: var(--n-overlay);
}

.nota.theme-light .admin-modal {
    background: #fffdf9;
    border: 1px solid var(--n-border-light);
    box-shadow: var(--n-shadow);
}

    .nota.theme-light .admin-modal h2 {
        color: var(--n-text);
    }

.nota.theme-light .admin-modal-body {
    color: var(--n-text-2);
}

/* ── Fields ── */
.nota.theme-light .admin-field label {
    color: var(--n-text-3);
}

.nota.theme-light .admin-input {
    background: #fff;
    border: 1px solid var(--n-border);
    color: var(--n-text);
}

    .nota.theme-light .admin-input:focus {
        border-color: rgba(108,92,231,0.45);
        box-shadow: 0 0 0 3px rgba(108,92,231,0.12);
        outline: none;
    }

    .nota.theme-light .admin-input::placeholder {
        color: var(--n-text-4);
    }

.nota.theme-light .admin-select {
    background-color: #fff !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    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='%23857e70' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
}

    .nota.theme-light .admin-select option {
        background: #fff !important;
        color: var(--n-text) !important;
    }

.nota.theme-light .admin-check,
.nota.theme-light .admin-toggle-label {
    color: var(--n-text-2);
}

    .nota.theme-light .admin-check input {
        accent-color: var(--n-accent);
    }

/* ── User search results ── */
.nota.theme-light .admin-user-list {
    border-color: var(--n-border);
    background: #fff;
}

.nota.theme-light .admin-user-result:hover {
    background: var(--n-surface-hover);
}

.nota.theme-light .admin-user-result:not(:last-child) {
    border-bottom-color: var(--n-border-light);
}

.nota.theme-light .admin-selected-user {
    background: var(--n-accent-dim);
    border-color: rgba(108,92,231,0.25);
    color: var(--n-text-2);
}

/* ── Logo upload ── */
.nota.theme-light .admin-logo-upload,
.nota.theme-light .admin-logo-preview {
    background: var(--n-surface);
    border-color: var(--n-border);
    color: var(--n-text-2);
}

/* ── Phone: the sidebar card becomes a top bar ── */
@media (max-width: 760px) {
    .nota.theme-light .admin-shell {
        padding: 8px;
        gap: 8px;
    }

    .nota.theme-light .admin-main {
        min-height: 0;
    }
}

/* The actions cell was display:flex, which takes a <td> out of the table
   layout — rows with no buttons (your own) lost their borders. Keep it a
   real cell and space the buttons inline instead. */
.nota.theme-light td.admin-actions {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

    .nota.theme-light td.admin-actions .admin-btn-sm + .admin-btn-sm {
        margin-left: 6px;
    }

@media (max-width: 760px) {
    .nota.theme-light .admin-nav {
        flex-direction: row;
        flex: none;
    }

    .nota.theme-light .admin-nav-item {
        padding: 8px 12px;
        white-space: nowrap;
    }

    .nota.theme-light .admin-sidebar {
        padding: 14px 0 10px;
    }

    /* A wide table on a phone: keep names on one line and scroll sideways
       to the role and buttons, rather than squeezing every column. */
    .nota.theme-light .admin-table {
        min-width: 720px;
    }

    .nota.theme-light .admin-user-display {
        white-space: nowrap;
    }
}