/* Admin Styles - Pronoco Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --color-black: #000; --color-teal: #00A6A6; --color-teal-bright: #00C9C9; --color-teal-dark: #008A8A;
    --color-blue: #0077B6; --color-blue-light: #0096D6; --color-blue-dark: #005F8F;
    --color-gray-light: #F5F5F5; --color-gray-lighter: #FAFAFA; --color-gray-medium: #555;
    --color-gray-dark: #2E2E2E; --color-gray-border: #E0E0E0; --color-white: #FFF;
    --color-success: #00A676; --color-success-hover: #00bf89; --color-success-active: #008f66;
    --color-warning: #F4A261; --color-warning-hover: #e59548; --color-warning-dark: #c27a30;
    --color-error: #D62828; --color-error-hover: #e03030; --color-error-active: #b82020;
    --color-disabled-bg: #E0E0E0; --color-disabled-text: #7A7A7A;
    /* Semantic background tints (used in badges, messages, header badges, highlights) */
    --tint-success: rgba(0,166,118,.15); --tint-success-light: rgba(0,166,118,.1); --tint-success-border: rgba(0,166,118,.3);
    --tint-warning: rgba(244,162,97,.15); --tint-warning-light: rgba(244,162,97,.1); --tint-warning-border: rgba(244,162,97,.3);
    --tint-error: rgba(214,40,40,.15); --tint-error-light: rgba(214,40,40,.1); --tint-error-border: rgba(214,40,40,.3);
    --tint-info: rgba(0,119,182,.15); --tint-info-light: rgba(0,119,182,.1); --tint-info-border: rgba(0,119,182,.3);
    --tint-teal: rgba(0,166,166,.1);
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'JetBrains Mono', 'Courier New', monospace;
    --font-size-h1: clamp(48px, 5vw, 56px); --font-size-h2: clamp(32px, 4vw, 40px);
    --font-size-h3: clamp(24px, 3vw, 28px); --font-size-h4: clamp(18px, 2vw, 20px);
    --font-size-body-lg: 18px; --font-size-body: 16px; --font-size-body-sm: 14px; --font-size-caption: 12px;
    --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 2px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.12); --shadow-teal: 0 4px 12px rgba(0,166,166,.2);
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
    --transition-fast: .15s ease; --transition-base: .2s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.6; color: var(--color-gray-dark); background: var(--color-gray-light); min-height: 100vh; }

h1, h2, h3 { font-family: var(--font-heading); color: var(--color-black); }
h4, h5, h6 { font-family: var(--font-body); color: var(--color-gray-dark); }
h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: 1.2; }
h2, h3, h4 { font-weight: var(--font-weight-semibold); line-height: 1.3; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
p { margin-bottom: var(--space-sm); }
a { color: var(--color-teal); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-teal-bright); text-decoration: underline; }
a.btn { text-decoration: none; }
a.btn:hover { text-decoration: none; }
a.btn-primary:hover, a.btn-success:hover, a.btn-danger:hover, a.btn-secondary:hover { color: var(--color-white); }
code { font-family: var(--font-code); font-size: var(--font-size-body-sm); padding: 2px 6px; background: var(--color-gray-light); color: var(--color-teal); border-radius: var(--radius-sm); }

/* Layout */
.app-container { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }

/* Header */
.app-header { background: var(--color-white); position: fixed; top: 0; left: 0; right: 0; z-index: 50; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); padding: var(--space-md) 0; }
.header-content, .header-right, .header-api-links, .header-status-bar, .header-status-item { display: flex; align-items: center; }
.header-content { justify-content: space-between; }
.header-right, .header-api-links { gap: var(--space-lg); }
.header-api-links { padding-right: var(--space-md); border-right: 1px solid var(--color-gray-border); gap: var(--space-md); }
.header-status-bar { gap: var(--space-lg); padding-top: var(--space-sm); margin-top: var(--space-sm); border-top: 1px solid var(--color-gray-border); flex-wrap: wrap; font-size: var(--font-size-body-sm); }
.header-status-item { gap: var(--space-xs); }
.logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo-img { height: 28px; width: auto; }
.logo-text { font-family: var(--font-heading); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-gray-dark); }
@media (min-width: 640px) { .logo-img { height: 36px; } }
@media (min-width: 1024px) { .logo-img { height: 40px; } }
.nav { display: flex; gap: var(--space-md); }
.nav-link, .header-link { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); text-decoration: none; transition: color var(--transition-base); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.nav-link { color: var(--color-gray-medium); }
.nav-link:hover { color: var(--color-black); text-decoration: none; background: var(--color-gray-light); }
.nav-link.active { color: var(--color-teal); }
.nav-link-dev { color: var(--color-blue); font-size: var(--font-size-caption); opacity: 0.7; }
.nav-link-dev:hover { opacity: 1; color: var(--color-blue); }
.header-link { color: var(--color-teal); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.header-link:hover { background: var(--color-gray-light); text-decoration: none; }
.header-status-label { color: var(--color-gray-medium); }
.header-status-value { font-weight: var(--font-weight-medium); color: var(--color-gray-dark); }
.header-status-badge { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); padding: 2px 8px; border-radius: var(--radius-sm); margin-right: var(--space-xs); }
.header-status-badge-success { background: var(--tint-success-light); color: var(--color-success); }
.header-status-badge-warning { background: var(--tint-warning-light); color: var(--color-warning); }
.status-healthy { color: var(--color-success); }
.status-error { color: var(--color-error); }
.status-dot-inline { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; }
@media (max-width: 640px) { .header-right, .header-api-links { gap: var(--space-sm); } .header-api-links { padding-right: var(--space-sm); } .header-status-bar { gap: var(--space-md); } }

/* Main */
.main-content { flex: 1; padding: var(--space-2xl) 0; padding-top: calc(var(--space-2xl) + 100px); }
.page-title { margin-bottom: var(--space-md); }
.section { margin-bottom: var(--space-md); }
.section-title, .section-header-title { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-black); }
.section-title { margin-bottom: var(--space-sm); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); gap: var(--space-sm); flex-wrap: wrap; }
.section-header-actions, .btn-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Cards */
.card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-md); transition: box-shadow var(--transition-base); }
.card:hover { box-shadow: var(--shadow-lg); }
.card-bordered { background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-lg); padding: var(--space-md); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-gray-border); }
.card-title { font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-black); }
.card-body { padding: var(--space-sm) 0; }
.card-muted { background: var(--color-gray-light); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); border: none; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-base); text-decoration: none; padding: 12px 24px; font-size: var(--font-size-body); }
.btn:focus { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
/* Color variants */
.btn-primary { background: var(--color-teal); color: var(--color-white); }
.btn-primary:hover { background: var(--color-teal-bright); box-shadow: var(--shadow-teal); }
.btn-primary:active { background: var(--color-teal-dark); }
.btn-secondary { background: var(--color-blue); color: var(--color-white); }
.btn-secondary:hover { background: var(--color-blue-light); box-shadow: 0 4px 12px var(--tint-info); }
.btn-secondary:active { background: var(--color-blue-dark); }
.btn-success { background: var(--color-success); color: var(--color-white); }
.btn-success:hover { background: var(--color-success-hover); box-shadow: 0 4px 12px var(--tint-success); }
.btn-success:active { background: var(--color-success-active); }
.btn-danger { background: var(--color-error); color: var(--color-white); }
.btn-danger:hover:not(:disabled) { background: var(--color-error-active); box-shadow: 0 4px 12px var(--tint-error); }
.btn-danger:active { background: var(--color-error-active); }
.btn-warning { background: var(--color-warning); color: var(--color-white); }
.btn-warning:hover { background: var(--color-warning-hover); box-shadow: 0 2px 8px var(--tint-warning); }
.btn-outline { background: transparent; border: 2px solid var(--color-blue); color: var(--color-blue); padding: 10px 22px; }
.btn-outline:hover { background: var(--color-blue); color: var(--color-white); }
.btn-subtle { background: transparent; border: 1.5px solid var(--color-gray-border); color: var(--color-gray-dark); }
.btn-subtle:hover { border-color: var(--color-teal); color: var(--color-teal); background: rgba(0,166,166,.04); }
.btn-ghost { background: transparent; color: var(--color-gray-medium); padding: 10px 16px; }
.btn-ghost:hover { background: var(--color-gray-light); color: var(--color-gray-dark); }
/* Size variants */
.btn-sm { padding: 8px 16px; font-size: var(--font-size-body-sm); min-height: 36px; }
.btn-xs { padding: 4px 10px; font-size: var(--font-size-caption); min-height: 28px; }
.btn-lg { padding: 16px 32px; font-size: var(--font-size-body-lg); }
.btn-full { width: 100%; }

/* Forms */
.form-group { margin-bottom: var(--space-sm); }
.form-label { display: block; margin-bottom: var(--space-xs); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-gray-dark); }
.form-input { width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: var(--font-size-body-sm); color: var(--color-gray-dark); background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.form-input:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--tint-teal); }
.form-input.error { border-color: var(--color-error); }
.form-input.error:focus { box-shadow: 0 0 0 3px var(--tint-error-light); }
.form-input:disabled { background: var(--color-gray-light); color: var(--color-disabled-text); cursor: not-allowed; }
.form-helper { margin-top: var(--space-xs); font-size: var(--font-size-caption); color: var(--color-gray-medium); }
.form-error { margin-top: var(--space-xs); font-size: var(--font-size-caption); color: var(--color-error); }
.form-row { display: flex; gap: var(--space-lg); align-items: flex-start; }
.form-row .form-group { flex: 1; }
.form-input-sm { max-width: 120px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .form-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .form-grid-4 { grid-template-columns: 1fr; } }
.checkbox-label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: var(--font-size-body-sm); }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
select.form-input, .form-select { appearance: none; 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='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.form-select { width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: var(--font-size-body-sm); color: var(--color-gray-dark); background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); }
.search-box { position: relative; }
.search-box .form-input { padding-left: 16px; padding-right: 40px; background: var(--color-gray-lighter); border-color: transparent; }
.search-box .form-input:focus { background: var(--color-white); border-color: var(--color-teal); }

/* Messages & Alerts */
.alert { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.alert-icon { flex-shrink: 0; width: 20px; height: 20px; }
.alert-content { flex: 1; }
.alert-title, .message-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); }
.alert-message { font-size: var(--font-size-body-sm); color: var(--color-gray-dark); margin: 0; }
.alert-success { border-left: 4px solid var(--color-success); }
.alert-warning { border-left: 4px solid var(--color-warning); }
.alert-error { border-left: 4px solid var(--color-error); }
.alert-info { border-left: 4px solid var(--color-blue); }
.message { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--font-size-body-sm); }
.message-success { background: var(--tint-success-light); color: var(--color-success); border: 1px solid var(--tint-success-border); }
.message-warning { background: var(--tint-warning-light); color: var(--color-warning-dark); border: 1px solid var(--tint-warning-border); }
.message-error { background: var(--tint-error-light); color: var(--color-error); border: 1px solid var(--tint-error-border); }
.message-info { background: var(--tint-info-light); color: var(--color-blue); border: 1px solid var(--tint-info-border); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: var(--font-weight-semibold); border-radius: var(--radius-pill); background: var(--color-teal); color: var(--color-white); letter-spacing: 0.02em; }
.badge-secondary { background: #E0E0E0; color: var(--color-gray-dark); }
.badge-success { background: var(--tint-success); color: var(--color-success); }
.badge-warning { background: var(--tint-warning); color: var(--color-warning-dark); }
.badge-error { background: var(--tint-error); color: var(--color-error); }
.badge-info { background: var(--tint-info); color: var(--color-blue); }
.badge-outline { background: transparent; border: 1px solid var(--color-gray-border); color: var(--color-gray-medium); }
.badge-info-outline { background: transparent; border: 1px solid var(--color-blue); color: var(--color-blue); }
.badge-warning-outline { background: transparent; border: 1px solid var(--color-warning-dark); color: var(--color-warning-dark); }
.badge-error-outline { background: transparent; border: 1px solid var(--color-error); color: var(--color-error); }

/* Status */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot-success { background: var(--color-success); }
.status-dot-warning { background: var(--color-warning); }
.status-dot-error { background: var(--color-error); }
.status-dot-info { background: var(--color-blue); }
.status-row { display: flex; align-items: center; gap: var(--space-sm); }

/* Loading & Empty */
.spinner { width: 32px; height: 32px; border: 3px solid var(--color-gray-border); border-top-color: var(--color-teal); border-radius: 50%; animation: spin 1s linear infinite; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center, .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-lg); text-align: center; }
.loading-text { margin-top: var(--space-md); color: var(--color-gray-medium); }
.empty-state { color: var(--color-gray-medium); }
.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: .5; }
.empty-state-title { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-dark); margin-bottom: var(--space-sm); }
.empty-state-description { font-size: var(--font-size-body-sm); }

/* Lists */
.item-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Item Cards */
.item-card, .admin-card, .user-card-enhanced, .context-card, .audit-entry-card { padding: var(--space-sm) var(--space-md); background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.item-card:hover, .admin-card:hover, .user-card-enhanced:hover, .context-card:hover { border-color: rgba(0,166,166,.3); box-shadow: 0 2px 8px rgba(0,166,166,.06); }
.item-card, .admin-card { display: flex; align-items: flex-start; justify-content: space-between; }
.user-card-enhanced, .context-card { display: flex; flex-direction: column; }
.user-card-enhanced { gap: var(--space-md); }
.context-card { gap: var(--space-sm); }
.admin-card-info, .context-card-info { flex: 1; min-width: 0; }
.admin-card-email { font-weight: var(--font-weight-semibold); color: var(--color-black); margin-bottom: var(--space-xs); }
.admin-card-name, .admin-card-meta, .context-card-desc, .context-card-meta { font-size: var(--font-size-body-sm); color: var(--color-gray-medium); }
.admin-card-meta, .context-card-meta { font-size: var(--font-size-caption); }
.context-card-desc { margin-top: var(--space-xs); }
.admin-card-actions, .context-card-header-actions, .context-card-edit-actions { display: flex; gap: var(--space-sm); }
.context-card-header-actions { align-items: center; flex-shrink: 0; }
.admin-card-status { margin-left: var(--space-md); }
.user-card-header, .context-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.user-card-body { padding-top: var(--space-sm); }
.user-card-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; padding-top: var(--space-sm); margin-top: var(--space-sm); }
.context-card-url { font-family: var(--font-code); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-teal); word-break: break-all; }
.context-card-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-gray-border); }
.context-card-meta-section { display: flex; flex-direction: column; gap: var(--space-xs); }
.context-card-meta-title { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-gray-dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: var(--space-xs); }
.context-card-meta-item { display: flex; gap: var(--space-sm); font-size: var(--font-size-caption); }
.context-card-meta-item .meta-label { color: var(--color-gray-medium); min-width: 90px; }
.context-card-meta-item .meta-value { color: var(--color-gray-dark); font-family: var(--font-code); }
.context-card-edit-form { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-gray-border); }
.context-card-edit-actions { margin-top: var(--space-sm); }
.context-card-actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-end; }
.endpoint-item { padding: var(--space-md); background: var(--color-gray-light); border-radius: var(--radius-md); border: 1px solid var(--color-gray-border); }
.endpoint-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.endpoint-path { font-family: var(--font-code); font-size: var(--font-size-body-sm); color: var(--color-gray-dark); }
.endpoint-description { font-size: var(--font-size-body-sm); margin-bottom: var(--space-xs); }
.endpoint-auth { font-size: var(--font-size-caption); color: var(--color-gray-medium); font-style: italic; }

/* Striped Row Lists */
.row-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-gray-border); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); overflow: hidden; }
.audit-row, .document-row, .user-row { display: flex; align-items: center; gap: var(--space-sm); background: var(--color-white); font-size: var(--font-size-body-sm); transition: background var(--transition-fast); }
.audit-row { padding: var(--space-sm) var(--space-md); min-height: 40px; }
.document-row { padding: 6px var(--space-sm); }
.user-row { gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.audit-row:hover, .user-row:hover { background: var(--color-gray-lighter); }
.document-row:hover { background: var(--color-gray-light); }
/* Document row: expand/collapse toggle */
.version-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: var(--radius-sm); padding: 0; cursor: pointer; color: var(--color-gray-medium); transition: color var(--transition-fast), background var(--transition-fast); }
.version-toggle:hover { background: var(--color-gray-light); color: var(--color-gray-dark); }
.version-toggle-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; transition: transform var(--transition-fast); }
.version-toggle-icon svg { width: 16px; height: 16px; }
.version-toggle-open .version-toggle-icon { transform: rotate(180deg); }
/* Audit row details */
.audit-row-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 13px; }
.audit-row-icon-ok { color: var(--color-success); }
.audit-row-icon-fail { color: var(--color-error); }
.audit-row-main { flex: 1; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-width: 0; }
.audit-row-event { font-weight: var(--font-weight-semibold); color: var(--color-black); white-space: nowrap; }
.audit-row-meta, .audit-row-sep { color: var(--color-gray-medium); font-size: var(--font-size-caption); }
.audit-row-value { font-family: var(--font-code); font-size: var(--font-size-caption); color: var(--color-gray-dark); }
.audit-row-ip { margin-left: auto; }
.audit-row-time { flex-shrink: 0; color: var(--color-gray-medium); font-size: var(--font-size-caption); white-space: nowrap; }
.audit-entry-changes { padding: var(--space-xs) var(--space-md); background: #F0F9FF; font-size: var(--font-size-caption); font-family: var(--font-code); color: var(--color-black); }
.audit-entry-error { padding: var(--space-xs) var(--space-md); background: #FEF2F2; font-size: var(--font-size-caption); color: var(--color-error); }
.audit-detail-label { color: var(--color-gray-medium); }

/* Audit Filter Bar & Panel */
.audit-filter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.audit-filter-bar-left { display: flex; align-items: center; gap: var(--space-sm); }
.audit-filter-panel { background: var(--color-gray-lighter); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.audit-filter-row { display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.audit-filter-field { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; }
.audit-filter-label { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); color: var(--color-gray-medium); }
.audit-filter-input { padding: 6px 10px !important; font-size: var(--font-size-body-sm) !important; min-height: 32px; }
.audit-filter-actions { display: flex; gap: var(--space-xs); align-items: flex-end; flex-shrink: 0; }

/* Event Filter Dropdown */
.event-filter-container { position: relative; }
.event-filter-button { display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; }
.event-filter-arrow { margin-left: var(--space-sm); font-size: var(--font-size-caption); color: var(--color-gray-medium); }
.event-filter-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; z-index: 100; margin-top: var(--space-xs); min-width: 220px; }
.event-filter-item { display: flex; align-items: center; gap: var(--space-sm); padding: 4px var(--space-md); cursor: pointer; transition: background var(--transition-fast); font-size: var(--font-size-body-sm); }
.event-filter-item:hover { background: var(--color-gray-light); }
.event-filter-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-teal); cursor: pointer; }

/* Permission Tags */
.permission-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.permission-tag { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--color-gray-light); border-radius: var(--radius-sm); font-family: var(--font-code); font-size: var(--font-size-caption); color: var(--color-teal); }
.permission-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: transparent; color: var(--color-error); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 50%; transition: background var(--transition-fast); }
.permission-tag-remove:hover { background: var(--tint-error-light); }

/* Pattern Selector */
.pattern-selector { border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; }
.pattern-selector-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background var(--transition-fast); }
.pattern-selector-item:hover { background: var(--color-gray-light); }
.pattern-selector-item.selected { background: var(--tint-teal); }
.pattern-selector-checkbox { width: 20px; height: 20px; accent-color: var(--color-teal); }
.pattern-selector-label { flex: 1; font-family: var(--font-code); font-size: var(--font-size-body-sm); }

/* Navigation — shared base for section pills and tab buttons */
.tab-btn, .section-btn { display: flex; align-items: center; gap: var(--space-sm); border: none; background: transparent; color: var(--color-gray-medium); font-family: var(--font-body); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-base); white-space: nowrap; }
.tab-btn:hover, .section-btn:hover { color: var(--color-gray-dark); }
.tab-icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-gray-medium); }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* Section pills (top-level, inside dashboard header) */
.section-nav { display: flex; gap: var(--space-sm); padding: var(--space-xs); background: var(--color-gray-lighter); border-radius: var(--radius-lg); }
.section-btn { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-size: var(--font-size-body); }
.section-btn:hover { background: var(--color-white); }
.section-btn.active { color: var(--color-teal); background: var(--color-white); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-sm); }
/* Tab underline buttons */
.tab-container { display: flex; flex-direction: column; min-height: calc(100vh - 200px); }
.tab-nav { display: flex; gap: 0; background: var(--color-white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-gray-border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn { justify-content: center; padding: var(--space-md) var(--space-lg); min-height: 52px; border-bottom: 2px solid transparent; border-radius: 0; font-size: var(--font-size-body-sm); margin-bottom: -1px; position: relative; }
.tab-btn:hover { background: var(--color-gray-lighter); }
.tab-btn.active { color: var(--color-teal); border-bottom-color: var(--color-teal); background: transparent; font-weight: var(--font-weight-semibold); }
.tab-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: var(--font-weight-bold); border-radius: var(--radius-pill); background: var(--color-gray-light); color: var(--color-gray-medium); }
.tab-btn.active .tab-btn-count { background: var(--tint-teal); color: var(--color-teal); }
.tab-content { flex: 1; background: var(--color-white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-md); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
@media (max-width: 640px) { .dashboard-header-main { flex-direction: column; align-items: stretch; } .dashboard-header-right { justify-content: space-between; } .section-nav { justify-content: center; } .tab-nav { flex-wrap: wrap; } .tab-btn { flex: 1 1 calc(50% - 2px); min-width: unset; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-caption); } }

/* Dashboard & Admin */
.dashboard-header { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-md); }
.dashboard-header-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.dashboard-header-right { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
.dashboard-title { font-family: var(--font-heading); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); margin: 0; color: var(--color-black); letter-spacing: -0.01em; }
.admin-details { background: var(--color-gray-lighter); border-radius: var(--radius-md); padding: var(--space-md); }
.admin-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-gray-border); }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--color-gray-medium); font-size: var(--font-size-body-sm); }
.detail-value { font-weight: var(--font-weight-medium); color: var(--color-black); }

/* WebAuthn */
.webauthn-prompt { text-align: center; padding: var(--space-2xl); }
.webauthn-icon { font-size: 4rem; margin-bottom: var(--space-lg); }
.webauthn-title { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-black); margin-bottom: var(--space-sm); }
.webauthn-description { color: var(--color-gray-medium); margin-bottom: var(--space-lg); }

/* Super Admin */
.mtls-banner { background: linear-gradient(90deg, var(--color-success) 0%, #00C9A7 100%); color: var(--color-white); padding: var(--space-xs) 0; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: 51; }
.mtls-banner .container { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mtls-icon { display: inline-block; vertical-align: middle; }
.app-container.super-admin .app-header { top: 26px; border-bottom: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.app-container.super-admin .main-content { padding-top: calc(var(--space-2xl) + 126px); }
.app-container.super-admin .logo-text { color: var(--color-success); }
.app-container.super-admin .logo:hover .logo-text { color: #00C9A7; }

/* Utilities */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-gray-medium); }
.text-bold { font-weight: 600; }
.font-mono { font-family: monospace; font-size: 12px; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.list-muted { margin-left: var(--space-lg); margin-top: var(--space-sm); color: var(--color-gray-medium); }
.list-muted li { margin-bottom: var(--space-xs); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-lg); }
.modal-content { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-lg); max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); }
.modal-title { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-sm); }

/* Responsive */
@media (max-width: 767px) {
    .hide-mobile { display: none; }
    .btn-group { flex-direction: column; }
    .admin-card { flex-direction: column; gap: var(--space-md); }
    .admin-card-actions { width: 100%; }
    .admin-card-actions .btn { flex: 1; }
}

/* Landing Page */
.landing-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-gray-lighter); margin: calc(var(--space-2xl) * -1) calc(var(--space-lg) * -1); padding: var(--space-xl); }
.landing-content { text-align: center; max-width: 420px; width: 100%; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2xl) var(--space-xl); }
.landing-logo { width: 72px; margin: 0 auto var(--space-lg); }
.landing-logo img { width: 100%; height: auto; }
.landing-title { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); color: var(--color-black); margin-bottom: var(--space-xs); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.landing-instance { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-gray-medium); }
.landing-tagline { font-family: var(--font-heading); font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-teal); letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--space-sm); }
.landing-description { font-size: var(--font-size-body-sm); line-height: 1.6; color: var(--color-gray-medium); margin-bottom: var(--space-lg); }
.landing-page .btn-lg { padding: 12px var(--space-xl); font-size: var(--font-size-body); width: 100%; max-width: 280px; }
.landing-features { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-gray-border); display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; }
.landing-feature { display: flex; align-items: center; gap: var(--space-xs); font-size: 11px; color: var(--color-gray-medium); }
.landing-feature .feature-icon { width: 16px; height: 16px; fill: var(--color-teal); }
.landing-register-link { margin-top: var(--space-sm); font-size: var(--font-size-caption); }
.landing-register-link .link { color: var(--color-teal); }
.landing-footer { margin-top: var(--space-lg); font-size: 11px; color: var(--color-gray-medium); }
.landing-footer a { color: var(--color-teal); }

/* ClearVault Admin Styles */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.project-card { cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.project-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.project-meta { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); flex-wrap: wrap; }
.documents-view, .users-view, .settings-view { padding: var(--space-sm) 0; }
.toolbar { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.folder-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.folder-item { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px var(--space-sm); background: var(--color-gray-light); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-body-sm); transition: background var(--transition-fast); }
.folder-item:hover { background: var(--color-gray-border); }
.folder-icon { display: flex; align-items: center; color: var(--color-teal-dark); }
.folder-icon .icon-sm { color: var(--color-teal-dark); }
.folder-name { font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); }
/* Document/user row details (vault-specific) */
.document-icon { display: flex; align-items: center; color: var(--color-gray-medium); }
.document-info { flex: 1; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.document-title { font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-desc { font-size: var(--font-size-caption); color: var(--color-gray-medium); }
.document-meta { flex-shrink: 0; font-size: var(--font-size-caption); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-body-sm); margin-bottom: var(--space-sm); }
.breadcrumb-item { cursor: pointer; color: var(--color-gray-medium); transition: color var(--transition-fast); }
.breadcrumb-item:hover { color: var(--color-teal); }
.breadcrumb-item.active { color: var(--color-gray-dark); font-weight: var(--font-weight-medium); cursor: default; }
.breadcrumb-separator { color: var(--color-gray-border); font-size: var(--font-size-caption); }
.user-info { flex: 1; display: flex; align-items: center; gap: var(--space-sm); }
.user-primary { display: flex; align-items: center; flex-wrap: wrap; }
.user-secondary { display: flex; align-items: center; gap: var(--space-sm); }
.user-email { font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); }
.user-name { font-size: var(--font-size-body-sm); color: var(--color-gray-medium); }
.user-meta { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.user-actions { flex-shrink: 0; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-gray-border); font-size: var(--font-size-body-sm); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-weight: var(--font-weight-medium); color: var(--color-gray-medium); }
.settings-value { color: var(--color-gray-dark); }
.section-header-title-group { display: flex; align-items: center; gap: var(--space-sm); }

/* Footer */
.app-footer { background: var(--color-black); color: var(--color-white); padding: var(--space-2xl) 0; }
.footer-content { display: flex; flex-direction: column; gap: var(--space-lg); }
@media (min-width: 768px) { .footer-content { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-brand { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-lg); }
.footer-tagline { color: #9CA3AF; font-size: var(--font-size-body-sm); margin-top: var(--space-xs); }
.footer-links { display: flex; gap: var(--space-lg); justify-content: center; }
.footer-links a { color: #9CA3AF; font-size: var(--font-size-body-sm); text-decoration: none; transition: color var(--transition-base); }
.footer-links a:hover { color: var(--color-teal); text-decoration: none; }
.footer-divider { border-top: 1px solid #374151; margin-top: var(--space-xl); padding-top: var(--space-lg); }
.footer-copyright { color: #6B7280; font-size: var(--font-size-body-sm); text-align: center; }

/* Schedule Calendar Grid */
.schedule-grid { display: grid; border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); overflow: hidden; font-size: var(--font-size-caption); user-select: none; }
.schedule-grid.cols-5 { grid-template-columns: 56px repeat(5, 1fr); }
.schedule-grid.cols-7 { grid-template-columns: 56px repeat(7, 1fr); }
.schedule-grid-header { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-gray-lighter); border-bottom: 2px solid var(--color-gray-border); font-weight: var(--font-weight-semibold); font-size: var(--font-size-body-sm); color: var(--color-gray-dark); }
.schedule-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; cursor: pointer; font-size: 11px; border-radius: var(--radius-sm); opacity: 0.4; transition: opacity var(--transition-fast), background var(--transition-fast); }
.schedule-copy-btn:hover { opacity: 1; background: var(--color-gray-border); }
.schedule-time-label { display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px var(--space-sm) 0; font-family: var(--font-code); font-size: 10px; color: var(--color-gray-medium); background: var(--color-gray-lighter); border-right: 1px solid var(--color-gray-border); border-bottom: 1px solid var(--color-gray-border); min-height: 24px; }
.schedule-time-label-half { font-size: 0; }
.schedule-cell { position: relative; min-height: 24px; border-right: 1px solid var(--color-gray-border); border-bottom: 1px solid var(--color-gray-border); cursor: pointer; transition: background var(--transition-fast); }
.schedule-cell:hover { background: rgba(0,166,166,.06); }
.schedule-cell-active { background: var(--tint-success); }
.schedule-cell-active:hover { background: rgba(0,166,118,.25); }
.schedule-cell-inactive { background: var(--color-gray-light); opacity: 0.7; }
.schedule-cell-anchor { background: rgba(0,166,166,.15); outline: 2px dashed var(--color-teal); outline-offset: -2px; animation: pulse-border 1.5s ease-in-out infinite; }
@keyframes pulse-border { 0%, 100% { outline-color: var(--color-teal); } 50% { outline-color: transparent; } }
.schedule-cell-selected { background: rgba(0,119,182,.15); outline: 2px solid var(--color-blue); outline-offset: -2px; z-index: 2; position: relative; overflow: visible; }
.schedule-cell-mid { border-top-color: transparent; }
.schedule-slot-label { display: block; padding: 1px 3px; font-size: 10px; font-family: var(--font-code); color: var(--color-success-active); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-cell-inactive .schedule-slot-label { color: var(--color-gray-medium); }
.schedule-slot-actions { position: absolute; top: 100%; left: 0; z-index: 20; display: flex; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); white-space: nowrap; }
.schedule-hint { font-size: var(--font-size-caption); color: var(--color-gray-medium); margin-top: var(--space-sm); font-style: italic; }
@media (max-width: 640px) { .schedule-grid { font-size: 10px; } .schedule-grid.cols-5 { grid-template-columns: 44px repeat(5, 1fr); } .schedule-grid.cols-7 { grid-template-columns: 44px repeat(7, 1fr); } .schedule-cell { min-height: 20px; } .schedule-slot-actions { flex-direction: column; } }

/* Accessibility */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-contrast: high) { .btn-primary { background: var(--color-black); border: 2px solid var(--color-black); } .btn-outline { border-width: 3px; } .form-input { border-width: 2px; } .card { border: 2px solid var(--color-black); } }
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }