/* WorkForms — Custom Styles */

/* ── Theme tokens (default: Classic Blue) ─────────────────────────────────── */
:root {
  --sb-bg:           #0f172a;
  --sb-active-bg:    #1e3a5f;
  --sb-active-color: #60a5fa;
  --sb-icon-bg:      #2563eb;
  --primary:         #2563eb;
  --primary-hover:   #1d4ed8;
  --primary-rgb:     37,99,235;
  --primary-light:   #eff6ff;
  --primary-border:  #bfdbfe;
  --primary-text:    #1d4ed8;
  --page-bg:         #f1f5f9;
  --card-border:      #c4cdd8;
  --card-shadow:      0 1px 3px rgba(0,0,0,.10);
  --card-header-bg:   #f8fafc;
  --card-body-bg:     #ffffff;
  --sep-border:       #c4cdd8;
  --sep-bg:           transparent;
  --sep-color:        #1e293b;
  --sep-size:         .9375rem;
  --card-title-size:  1rem;
  --label-color:      #374151;
  --label-size:       .875rem;
}

/* ── Océania theme — inspired by oceaniabeloeil.com ───────────────────────── */
.theme-oceania {
  --sb-bg:           #0c3547;
  --sb-active-bg:    #0e4f6e;
  --sb-active-color: #7dd3fc;
  --sb-icon-bg:      #0ea5e9;
  --primary:         #0ea5e9;
  --primary-hover:   #0284c7;
  --primary-rgb:     14,165,233;
  --primary-light:   #e0f2fe;
  --primary-border:  #bae6fd;
  --primary-text:    #0369a1;
  --page-bg:         #f0f9ff;
  --card-border:      #b0cfe0;
  --card-shadow:      0 1px 3px rgba(14,165,233,.12);
  --card-header-bg:   #e0f2fe;
  --card-body-bg:     #ffffff;
  --sep-border:       #b0cfe0;
  --sep-bg:           transparent;
  --sep-color:        #0c4a6e;
  --sep-size:         .9375rem;
  --card-title-size:  1rem;
  --label-color:      #374151;
  --label-size:       .875rem;
}

/* Sidebar */
.sidebar { width: 260px; height: 100vh; position: sticky; top: 0; background: var(--sb-bg); flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; transition: width .2s ease; z-index: 20; }
.sidebar-logo { padding: 1.25rem 1rem 1.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: .75rem; min-height: 72px; }
.sidebar-logo-icon { width: 36px; height: 36px; background: var(--sb-icon-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-logo-text { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-nav { flex: 1; padding: 1rem .75rem; overflow-y: auto; overflow-x: hidden; }
.sidebar-section { font-size: .65rem; font-weight: 700; letter-spacing: .08em; color: #475569; text-transform: uppercase; padding: .75rem .5rem .25rem; margin-top: .5rem; white-space: nowrap; overflow: hidden; transition: opacity .15s; }
.sidebar-item { display: flex; align-items: center; gap: .625rem; padding: .55rem .75rem; border-radius: .5rem; color: #94a3b8; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s, padding .2s; cursor: pointer; white-space: nowrap; }
.sidebar-item:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.sidebar-item.active { background: var(--sb-active-bg); color: var(--sb-active-color); }
.sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-footer { padding: 1rem .75rem; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: .5rem; }
.sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-avatar { width: 32px; height: 32px; background: var(--sb-icon-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: white; flex-shrink: 0; }
.sidebar-toggle { background: none; border: none; cursor: pointer; color: #475569; display: flex; align-items: center; justify-content: center; padding: .25rem; border-radius: .375rem; flex-shrink: 0; transition: color .15s, transform .2s; }
.sidebar-toggle:hover { color: #94a3b8; }

/* Collapsed sidebar */
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .sidebar-logo { flex-direction: column; justify-content: center; align-items: center; padding: .875rem .5rem; gap: .5rem; }
.sidebar.collapsed .sidebar-logo-text { display: none; }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-section { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-nav { padding: 1rem .5rem; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: .6rem .5rem; gap: 0; }
.sidebar.collapsed .sidebar-item > span { display: none; }
.sidebar.collapsed .sidebar-footer { padding: .75rem .5rem; }
.sidebar.collapsed .sidebar-user { flex-direction: column; gap: .375rem; padding: .375rem .25rem; }
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .sidebar-user > a { padding: .25rem; }

/* Layout */
.app-layout { display: flex; min-height: 100vh; }
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { background: white; border-bottom: 1px solid #e2e8f0; padding: .875rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-content { flex: 1; padding: 1.5rem; background: var(--page-bg); }

/* Cards */
.card { background: var(--card-body-bg); border-radius: .75rem; box-shadow: var(--card-shadow); border: 1px solid var(--card-border); }
.card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--card-header-bg); border-radius: .75rem .75rem 0 0; }
.card-body { padding: 1.5rem; background: var(--card-body-bg); }
.card-title { font-size: var(--card-title-size); font-weight: 600; color: #1e293b; }

/* Stats cards */
.stat-card { background: white; border-radius: .75rem; padding: 1.25rem; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 48px; height: 48px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon.blue { background: var(--primary-light); color: var(--primary); }
.stat-icon.green { background: #f0fdf4; color: #16a34a; }
.stat-icon.yellow { background: #fefce8; color: #ca8a04; }
.stat-icon.slate { background: #f8fafc; color: #475569; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #1e293b; line-height: 1; }
.stat-label { font-size: .8125rem; color: #64748b; margin-top: .2rem; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table thead th { padding: .75rem 1rem; text-align: left; font-size: .75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #e2e8f0; background: #f8fafc; white-space: nowrap; }
.data-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody td { padding: .75rem 1rem; color: #334155; vertical-align: middle; }
.data-table tbody tr:last-child { border-bottom: none; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-green { background: #dcfce7; color: #15803d; }
.badge-yellow { background: #fef9c3; color: #a16207; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-slate { background: #f1f5f9; color: #475569; }
.badge-orange { background: #ffedd5; color: #c2410c; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: var(--label-size); font-weight: 500; color: var(--label-color); margin-bottom: .375rem; }
.form-label .req { color: #ef4444; margin-left: .25rem; }
.form-input { width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; color: #1e293b; background: white; transition: border-color .15s, box-shadow .15s; outline: none; }
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1); }
.form-input:read-only { background: #f8fafc; color: #64748b; cursor: default; }
.form-input.error { border-color: #ef4444; }
.form-select { width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; color: #1e293b; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right .75rem center no-repeat; appearance: none; outline: none; transition: border-color .15s; }
.form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: .75rem; color: #94a3b8; margin-top: .25rem; }
.form-error { font-size: .75rem; color: #ef4444; margin-top: .25rem; }

/* Toggle */
.toggle-wrap { display: flex; align-items: center; gap: .625rem; }
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 9999px; cursor: pointer; transition: background .2s; }
.toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform .2s; }
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider:before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider { opacity: .5; cursor: not-allowed; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; border: none; cursor: pointer; transition: background .15s, opacity .15s; text-decoration: none; white-space: nowrap; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: #10b981; color: white; }
.btn-success:hover { background: #059669; }
.btn-ghost { background: transparent; color: #64748b; padding: .375rem .625rem; }
.btn-ghost:hover { background: #f1f5f9; color: #334155; }
.btn-sm { padding: .3rem .7rem; font-size: .8125rem; }
.btn-icon { padding: .4rem; border-radius: .375rem; }
.btn svg { width: 16px; height: 16px; }

/* Autocomplete */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: white; border: 1px solid #e2e8f0; border-radius: .5rem; box-shadow: 0 4px 20px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto; margin-top: 2px; }
.autocomplete-item { padding: .625rem .875rem; cursor: pointer; font-size: .875rem; border-bottom: 1px solid #f8fafc; transition: background .1s; }
.autocomplete-item:hover, .autocomplete-item.focused { background: var(--primary-light); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-name { font-weight: 500; color: #1e293b; }
.autocomplete-sub { font-size: .75rem; color: #64748b; margin-top: .1rem; }
.autocomplete-selected { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--primary-light); border: 1px solid var(--primary-border); border-radius: .5rem; font-size: .875rem; }
.autocomplete-selected-name { flex: 1; font-weight: 500; color: var(--primary-text); }
.autocomplete-clear { background: none; border: none; cursor: pointer; color: #64748b; padding: .15rem; border-radius: .25rem; display: flex; }
.autocomplete-clear:hover { color: #ef4444; background: #fee2e2; }

/* Section headers in forms */
.form-section { margin-bottom: 1.5rem; }
.form-section-header { display: flex; align-items: center; gap: .625rem; padding-bottom: .625rem; margin-bottom: 1.125rem; border-bottom: 2px solid var(--sep-border); background: var(--sep-bg); }
.form-section-icon { width: 28px; height: 28px; background: var(--primary-light); border-radius: .375rem; display: flex; align-items: center; justify-content: center; }
.form-section-icon svg { width: 16px; height: 16px; color: var(--primary); }
.form-section-title { font-size: var(--sep-size); font-weight: 600; color: var(--sep-color); }

/* Toast */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.125rem; border-radius: .625rem; box-shadow: 0 4px 20px rgba(0,0,0,.15); font-size: .875rem; font-weight: 500; pointer-events: all; animation: toast-in .3s ease; max-width: 360px; }
.toast-success { background: #1e293b; color: white; border-left: 4px solid #10b981; }
.toast-error   { background: #1e293b; color: white; border-left: 4px solid #ef4444; }
.toast-info    { background: #1e293b; color: white; border-left: 4px solid var(--primary); }
@keyframes toast-in { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: white; border-radius: .875rem; box-shadow: 0 20px 60px rgba(0,0,0,.2); width: 100%; max-width: 480px; overflow: hidden; }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 1rem; font-weight: 600; color: #1e293b; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: .625rem; }

/* Config table */
.config-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.config-table th { padding: .625rem .875rem; background: #f8fafc; border: 1px solid #e2e8f0; font-weight: 600; color: #475569; text-align: center; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.config-table th.field-col { text-align: left; min-width: 200px; }
.config-table td { padding: .5rem .875rem; border: 1px solid #f1f5f9; text-align: center; vertical-align: middle; }
.config-table td.field-col { text-align: left; font-weight: 500; color: #334155; }
.config-table tbody tr:hover td { background: #f8fafc; }
.config-table .role-group-header { background: #f1f5f9; color: #334155; font-weight: 700; font-size: .75rem; letter-spacing: .04em; }

/* Search bar */
.search-bar { display: flex; align-items: center; gap: .5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .4rem .75rem; }
.search-bar input { border: none; background: transparent; font-size: .875rem; color: #1e293b; outline: none; flex: 1; min-width: 0; }
.search-bar svg { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; }

/* Misc */
.divider { height: 1px; background: #e2e8f0; margin: 1rem 0; }
.text-muted { color: #94a3b8; font-size: .8125rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto .75rem; opacity: .3; }
.empty-state p { font-size: .9375rem; font-weight: 500; color: #64748b; }

/* Language switcher */
.lang-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .35rem .75rem; border-radius: .375rem; font-size: .8125rem; font-weight: 600; border: 1px solid #e2e8f0; background: white; color: #475569; cursor: pointer; text-decoration: none; transition: background .15s; }
.lang-btn:hover { background: #f8fafc; }
.lang-btn.active { background: var(--primary-light); border-color: var(--primary-border); color: var(--primary); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sidebar { width: 220px; }
}