/* ================================================================================
   STYLESHEET: permissions.css
   CREATED:    2026-03-15
   MODIFIED:   2026-03-15
   PURPOSE:    Tag-based visibility, settings page, and category manager styles
   ================================================================================ */

/* ========== 2026-03-05 TAG-BASED VISIBILITY ========== */
/* data-access="editor" = admin + collections:editor (full access) */
/* data-access="viewer" = collections:viewer (read-only) */
/* data-access="none" = no tags / pending (blocked) */
/* .role-edit = edit permission (objects, notes, files, edit log) */
/* .role-interact = interact permission (comments, pin, review) */
/* 2026-03-05 - Permission-based visibility
   CSS handles broad levels (editor/viewer/none)
   Fine-grained feature visibility handled by applyFeatureVisibility() in JS */
/* .role-edit = edit permission (objects, notes, files, edit log) */
/* .role-interact = interact permission (comments, pin, review) */
body[data-access="viewer"] .role-edit,
body[data-access="viewer"] .role-interact,
body[data-access="viewer"] .list-item-menu,
body[data-access="none"] .role-edit,
body[data-access="none"] .role-interact,
body[data-access="none"] .list-item-menu {
    display: none !important;
}
/* Pending/no-access users see nothing until approved */
body[data-access="none"] .page-container {
    display: none !important;
}
body[data-access="none"] .pending-overlay {
    display: flex !important;
}

/* 2026-03-05 - Settings page: Add Role modal */
#settingsAddRoleOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 4000;
    justify-content: center;
    align-items: center;
}
.settings-add-role-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px 24px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.settings-add-role-card h3 {
    font-size: 16px;
    margin: 0 0 16px;
    text-align: center;
}
.settings-add-role-card input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.settings-add-role-card input[type="text"]:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
.settings-add-role-card label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    display: block;
    margin-bottom: 4px;
}
.settings-role-tag-preview {
    font-size: 12px;
    color: #888;
    padding: 4px 0 8px;
}
.settings-role-error {
    color: #e74c3c;
    font-size: 12px;
    display: none;
    margin-top: 8px;
}
.settings-role-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
.settings-role-actions button {
    padding: 10px 24px;
    border-radius: 20px;
    border: 1px solid #d2d2d7;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 90px;
    transition: all 0.15s;
}
.settings-role-actions button:hover {
    background: #f5f5f7;
}
.settings-role-actions button.settings-role-save {
    background: #007aff;
    color: #fff;
    border-color: #007aff;
}
.settings-role-actions button.settings-role-save:hover {
    background: #0066d6;
}

/* 2026-03-05 - Toast notifications */
#settingsToast {
    display: none;
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.toast-success { background: rgba(52, 199, 89, 0.9); color: #fff; }
.toast-error { background: rgba(255, 59, 48, 0.9); color: #fff; }

/* 2026-03-05 - Settings page layout */
#page-settings {
    background: #f2f2f7;
    overflow-y: auto;
}
#page-settings .log-topbar {
    background: rgba(242, 242, 247, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
#page-settings .log-back-btn {
    color: #007aff;
}
.settings-body {
    padding: 0 20px 40px;
    max-width: 1080px;
    margin: 0 auto;
}
.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 20px;
}
.settings-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #1d1d1f;
}
.settings-add-btn {
    padding: 7px 16px;
    border-radius: 20px;
    border: none;
    background: #007aff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.settings-add-btn:hover { background: #0066d6; }
.settings-add-btn:active { background: #004ea2; }

/* Section cards */
.settings-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    margin-bottom: 20px;
    overflow: hidden;
}
.settings-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.settings-table-scroll .perm-table {
    width: 100%;
}
.settings-section-header {
    padding: 14px 16px 0;
}
.settings-section-header h4 {
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 2px;
}
.settings-section-header p {
    font-size: 12px;
    color: #86868b;
    margin: 0;
    line-height: 1.4;
}

/* 2026-03-07 - Settings tab bar */
/* 2026-03-10 - Sticky settings tabs (below topbar) */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 4px;
    position: sticky;
    top: 49px;
    background: rgba(242, 242, 247, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9;
}
.settings-tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #86868b;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.settings-tab:hover { color: #1d1d1f; }
.settings-tab.active {
    color: #1d1d1f;
    font-weight: 600;
    border-bottom-color: #007aff;
}

/* 2026-03-13 - Permission sub-tabs (App Access | Visibility | Actions) */
.settings-subtabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    margin: 4px 0 0;
}
.settings-subtab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #86868b;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.settings-subtab:hover { color: #1d1d1f; background: rgba(0,0,0,0.04); }
.settings-subtab.active {
    color: #fff;
    background: #007aff;
    font-weight: 600;
}

/* 2026-03-10 - Icon customization settings (row layout) */
.icon-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 24px;
}
.icon-settings-group-label {
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 0 6px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.icon-settings-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.icon-card-preview {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-card-preview svg {
    width: 20px;
    height: 20px;
}
.icon-card-name {
    width: 110px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}
.icon-card-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.icon-control-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #86868b;
}
.icon-control-row label {
    font-weight: 500;
    flex-shrink: 0;
}
.icon-control-row .icon-size-val {
    width: 32px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.icon-size-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
    background: #f5f5f7;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
}
.icon-size-btn:hover { background: #e8e8ed; }
.icon-svg-toggle {
    font-size: 11px;
    color: #007aff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}
.icon-svg-toggle:hover { text-decoration: underline; }
/* 2026-03-13 - Generic upload modal (drag & drop + file picker) */
.upload-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.upload-modal {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.upload-modal h4 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
}
.upload-modal-dropzone {
    border: 2px dashed rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 32px 16px;
    text-align: center;
    color: #86868b;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}
.upload-modal-dropzone.drag-over {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.05);
}
.upload-modal-dropzone svg {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.4;
}
.upload-modal-dropzone-hint {
    font-size: 12px;
    color: #aaa;
    margin-top: 6px;
}
.upload-modal-or {
    text-align: center;
    color: #bbb;
    font-size: 12px;
    padding: 12px 0;
}
.upload-modal-paste-area {
    width: 100%;
    min-height: 70px;
    max-height: 120px;
    font-family: monospace;
    font-size: 11px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 8px;
    resize: vertical;
    background: #fafafa;
}
.upload-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}
.upload-modal-actions button {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.upload-modal-file-name {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 500;
    margin-top: 8px;
}
.icon-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.icon-card-actions button {
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.icon-btn-apply {
    background: #007aff;
    color: #fff;
}
.icon-btn-apply:hover { background: #0066d6; }
.icon-btn-reset {
    background: #f5f5f7;
    color: #86868b;
}
.icon-btn-reset:hover { background: #e8e8ed; }
/* Show Reset on row hover only for customized icons */
.is-customized:hover .icon-btn-reset { display: inline-block !important; }
.icon-settings-card.is-customized .icon-card-preview {
    background: #e8f0fe;
    box-shadow: inset 0 0 0 2px #007aff;
}
/* 2026-03-14 - Icon settings responsive @media removed (desktop-only) */

/* 2026-03-11 - Category table: auto layout so columns size naturally */
#catSettingsTable {
    table-layout: auto;
}
#catSettingsTable thead th {
    white-space: nowrap;
    font-size: 11px;
}
#catSettingsTable tbody td:first-child {
    padding: 6px 4px 6px 12px;
    width: 68px;
}
.cat-setting-thumb {
    width: 60px;
    height: 45px;
    border-radius: 6px;
    object-fit: cover;
    background: #e8e8e8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grid tables inside cards */
/* 2026-03-08 - Fixed layout with equal-width data columns */
.perm-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
    table-layout: fixed;
}
.perm-table col.perm-label-col {
    width: 140px;
}
.perm-table thead th {
    padding: 10px 2px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.perm-table thead th:first-child {
    text-align: left;
    padding-left: 16px;
    color: #86868b;
}
.perm-table thead th.perm-feature-header {
    font-size: 11px;
    color: #1d1d1f;
    font-weight: 700;
    padding-bottom: 2px;
    border-bottom: none;
}
.perm-table tbody td {
    padding: 8px 2px;
    text-align: center;
    border-bottom: 1px solid #f5f5f7;
    white-space: nowrap;
}
.perm-table tbody tr:last-child td {
    border-bottom: none;
}
.perm-table tbody td:first-child {
    text-align: left;
    padding-left: 16px;
    font-weight: 500;
    color: #1d1d1f;
}
.perm-table tbody tr:hover td {
    background: #f5f5f7;
}
/* 2026-03-10 - Group separator rows in visibility/actions tables */
.perm-table tbody tr.perm-group-row td {
    padding: 10px 16px 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #999;
    border-bottom: 2px solid #d0d0d0;
    background: none;
}
.perm-table tbody tr.perm-group-row:hover td {
    background: none;
}
.perm-table tbody tr:not(.perm-group-row) td:first-child {
    padding-left: 28px;
}

/* 2026-03-05 - Styled checkboxes (subtle/soft) */
.perm-table input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c7c7cc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    vertical-align: middle;
    background: #fff;
}
.perm-table input[type="checkbox"]:checked {
    background: #34aadc;
    border-color: #34aadc;
}
/* 2026-03-05 - Red accent for UI-only features (log, settings, devinfo) */
.perm-table input[type="checkbox"].perm-red:checked {
    background: #c44;
    border-color: #c44;
}
.perm-table input[type="checkbox"].perm-red:hover {
    border-color: #c44;
}
.perm-table input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.perm-table input[type="checkbox"]:hover {
    border-color: #a0a0a5;
}


/* 2026-03-05 - Right-click context menu for roles */
.role-context-menu {
    position: fixed;
    z-index: 10001;
    min-width: 160px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08);
    padding: 4px;
    font-size: 14px;
    overflow: hidden;
}
.role-context-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    color: #1d1d1f;
}
.role-context-menu button:hover {
    background: #007aff;
    color: #fff;
}
.role-context-menu button.destructive {
    color: #ff3b30;
}
.role-context-menu button.destructive:hover {
    background: #ff3b30;
    color: #fff;
}
.role-context-menu .menu-separator {
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 4px 0;
}

/* 2026-03-05 - Drag-and-drop row reorder */
.perm-table tbody tr.dragging {
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    border-radius: 10px;
    opacity: 0.95;
    transform: scale(1.02);
}
.perm-table tbody tr.dragging td {
    background: #fff;
}
.perm-table tbody tr.dragging td:first-child {
    border-radius: 10px 0 0 10px;
}
.perm-table tbody tr.dragging td:last-child {
    border-radius: 0 10px 10px 0;
}
.perm-table tbody tr.drag-placeholder td {
    height: 44px;
    background: #f0f4ff;
    border: 2px dashed #c0d0e8;
    border-radius: 8px;
    padding: 0;
}
.perm-table.is-dragging tbody tr:not(.dragging):not(.drag-placeholder) {
    opacity: 0.5;
}
.perm-table tbody tr.drag-over td {
    border-top: 2px solid #007aff;
}

/* Save button */
.settings-save-bar {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 0;
}
/* 2026-03-11 - Save button in sticky header: compact, dimmed when no changes */
#settingsSaveBtn {
    padding: 6px 18px;
    border-radius: 16px;
    border: none;
    background: #007aff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
#settingsSaveBtn:disabled {
    background: transparent;
    color: #c7c7cc;
    cursor: default;
    opacity: 0.6;
}
#settingsSaveBtn:not(:disabled):hover {
    background: #0066d6;
}
#settingsSaveBtn:not(:disabled):active {
    background: #004ea2;
    transform: scale(0.97);
}

/* 2026-03-13 - Category tree icon button (home + gallery topbars) */
.home-cattree-wrap {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}
.home-cattree-btn,
.gallery-cattree-btn {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ececee;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #999;
    align-items: center;
    justify-content: center;
}
.home-cattree-btn:active,
.gallery-cattree-btn:active {
    opacity: 0.5;
}
.home-cattree-btn svg,
.gallery-cattree-btn svg {
    width: 22px;
    height: 22px;
}

/* 2026-03-13 - Category Manager page */
/* 2026-03-15 - Uses detail-backbar + detail-main pattern (matches detail/creator pages) */
#page-catmanager {
    background: var(--bg-color);
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}
/* 2026-03-16 - Shared header row: single border-bottom spans both columns */
.catmgr-header {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
}
.catmgr-header-left {
    flex: 0 0 40%;
    padding: 45px 8px 14px 100px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.catmgr-header-right {
    flex: 1;
    padding: 45px 20px 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
/* 2026-03-16 - Tree title: serif style, clickable for "show all" */
.catmgr-header-left h3 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
}
.catmgr-header-left h3.active {
    color: var(--accent-color, #007aff);
}
/* 2026-03-16 - Body panels below shared header */
.catmgr-tree-panel {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 36px 100px;
}
.catmgr-add-root-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.03);
    color: var(--text-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background 0.15s, color 0.15s;
}
.catmgr-add-root-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.catmgr-add-root-btn:active { background: rgba(0,0,0,0.1); }
.catmgr-total-row {
    cursor: default;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    padding-top: 6px;
    padding-bottom: 6px;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
.catmgr-total-row:hover {
    background: none;
}
.catmgr-tree-list {
    padding: 4px 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tree rows */
.catmgr-row {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 0;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.catmgr-row:hover {
    background: rgba(0,0,0,0.03);
}
.catmgr-row.selected,
.catmgr-row.selected:hover {
    background: rgba(0, 122, 255, 0.10);
    box-shadow: inset 3px 0 0 #007aff;
}
.catmgr-row.selected .catmgr-row-name {
    color: #007aff;
    font-weight: 600;
}
.catmgr-row-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 0;
    border-radius: 6px;
}
.catmgr-row-toggle:hover {
    background: rgba(0,0,0,0.06);
}
.catmgr-row-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}
.catmgr-row-toggle.expanded svg {
    transform: rotate(90deg);
}
.catmgr-row-toggle.leaf {
    visibility: hidden;
}
.catmgr-row-name {
    flex-shrink: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catmgr-row-spacer {
    flex: 1;
    min-width: 0;
}
.catmgr-row-depth2 .catmgr-row-name { font-weight: 400; color: #333; }
.catmgr-row-depth3 .catmgr-row-name { font-weight: 400; color: #555; font-size: 13px; }
.catmgr-row-count {
    font-size: 12px;
    color: #999;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.catmgr-row-count-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #007aff;
    background: rgba(0, 122, 255, 0.10);
    border: none;
    border-radius: 10px;
    padding: 1px 8px;
    min-width: 24px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 18px;
}
.catmgr-row-count-pill:hover {
    background: rgba(0, 122, 255, 0.22);
    color: #005ecb;
}
.catmgr-row-actions {
    display: flex;
    gap: 2px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.catmgr-row:hover .catmgr-row-actions {
    opacity: 1;
}
.catmgr-row-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    border-radius: 6px;
    padding: 0;
}
.catmgr-row-action-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #333;
}
.catmgr-row-action-btn.delete:hover {
    color: #e53e3e;
}

/* Inline add input */
.catmgr-add-inline {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
}
.catmgr-add-input {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid #007aff;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font-family);
    outline: none;
}
.catmgr-add-input:focus {
    box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}
.catmgr-add-cancel-btn {
    padding: 5px 10px;
    border: none;
    background: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-family);
}

/* 2026-03-15 - Info panel: flat layout matching detail/creator pages */
.catmgr-info-content-wrap {
    padding: 0 20px 20px 20px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.catmgr-info-empty {
    text-align: center;
    padding: 20px 20px 40px;
    color: var(--text-tertiary);
    font-size: 15px;
}
/* 2026-03-17 - Search pill centered in backbar (matches gallery nav pill position) */
/* 2026-03-16 - Right header title: uppercase label style */
.catmgr-info-title {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}
.catmgr-info-label {
    font-size: 11px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 6px;
}
.catmgr-info-label:first-of-type {
    margin-top: 0;
}
/* 2026-03-17 - Search pill centered in backbar (matches gallery nav pill) */
.catmgr-search-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    width: 50%;
    height: 44px;
    background: #ececee;
    border-radius: 22px;
    padding: 0 16px;
}
.catmgr-search-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
}
.catmgr-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--text-primary);
    outline: none;
}
.catmgr-search-input::placeholder {
    color: var(--text-tertiary);
}
.catmgr-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    color: #666;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.catmgr-search-clear:hover {
    background: rgba(0,0,0,0.18);
    color: #333;
}
.catmgr-info-files-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.catmgr-info-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: none;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    border-radius: 0;
    flex-wrap: wrap;
}
.catmgr-file-cat-label {
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    color: #007aff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.catmgr-file-thumb {
    width: 145px;
    height: 145px;
    border-radius: 12px;
    flex-shrink: 0;
    object-fit: contain;
    background: #eee;
}
.catmgr-file-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 145px;
    height: 145px;
    border-radius: 12px;
    flex-shrink: 0;
    background: #eee;
    color: #999;
}
.catmgr-file-thumb-icon.pdf { background: #fde8e8; color: #c0392b; }
.catmgr-file-thumb-icon.web { background: #e8f0fe; color: #1a73e8; }
.catmgr-file-thumb-icon.note { background: #fef9e7; color: #b7950b; }
.catmgr-note-preview {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.catmgr-note-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catmgr-note-text {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.catmgr-note-preview:hover .catmgr-note-title { color: #007aff; }
.catmgr-file-thumb-wrap {
    position: relative;
    width: 145px;
    height: 145px;
    flex-shrink: 0;
}
.catmgr-file-thumb-wrap .catmgr-file-thumb {
    width: 100%;
    height: 100%;
}
.catmgr-thumb-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.catmgr-thumb-badge.wiki {
    font-family: 'Linux Libertine', 'Georgia', serif;
    color: #333;
}
.catmgr-thumb-badge.youtube {
    background: #ff0000;
    color: #fff;
    border-radius: 3px;
    font-size: 9px;
    font-family: system-ui, sans-serif;
}
.catmgr-info-file-icon {
    flex-shrink: 0;
    color: #007aff;
}
.catmgr-info-file-name {
    flex: 1;
    font-size: 13px;
    color: #007aff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.catmgr-info-file-name:hover {
    text-decoration: underline;
}
.catmgr-info-file-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: #aaa;
    border-radius: 8px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.catmgr-info-file-action:hover {
    color: #007aff;
    background: rgba(0, 122, 255, 0.08);
}
.catmgr-info-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: #aaa;
    border-radius: 8px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.catmgr-info-file-remove:hover {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.08);
}
.catmgr-info-add-file-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1.5px dashed #ccc;
    border-radius: 8px;
    background: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-family);
    margin-top: 6px;
}
.catmgr-info-add-file-btn:hover {
    border-color: #007aff;
    color: #007aff;
}
.catmgr-info-save-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    border: none;
    border-radius: 10px;
    background: #007aff;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background 0.2s;
}
.catmgr-info-save-btn:hover { background: #0066d6; }
.catmgr-info-save-btn:active { background: #004ea2; }
.catmgr-info-save-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: default;
}
/* 2026-03-15 - Save button in backbar (pill shape, matches detail action btns) */
.catmgr-topbar-save {
    padding: 7px 18px;
    border-radius: 20px;
    border: none;
    background: #007aff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family);
    transition: opacity 0.3s ease, background 0.15s;
}
.catmgr-topbar-save:hover { background: #0066d6; }
.catmgr-topbar-save:active { background: #004ea2; }
/* 2026-03-13 - Resource confirmation modal */
.catmgr-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.catmgr-confirm-modal {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 340px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    text-align: center;
}
.catmgr-confirm-modal h4 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
}
.catmgr-confirm-modal p {
    margin: 0 0 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}
.catmgr-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.catmgr-confirm-actions button {
    padding: 9px 22px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background 0.15s, opacity 0.15s;
}
.catmgr-confirm-btn-cancel {
    background: #f0f0f5;
    color: #1d1d1f;
}
.catmgr-confirm-btn-cancel:hover { background: #e4e4ea; }
.catmgr-confirm-btn-danger {
    background: #ff3b30;
    color: #fff;
}
.catmgr-confirm-btn-danger:hover { background: #e0332a; }
.catmgr-confirm-btn-primary {
    background: #007aff;
    color: #fff;
}
.catmgr-confirm-btn-primary:hover { background: #0066d6; }

/* Rename inline input */
.catmgr-rename-input {
    padding: 4px 8px;
    border: 1.5px solid #007aff;
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-family);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}