/* Base styles derived from demo_job_pages/styles.css */
:root{--bg:#ffffff;--panel:#f7f8fa;--ink:#1a1f29;--muted:#5a6a7a;--accent:#c1d72e;--accent-alt:#bccf11;--border:#d9e0e7}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}

/* Layout helpers */
.content-wrapper{max-width:1100px;margin:0 auto;padding:16px}

/* Headings, sections */
h1{margin:0 0 12px;font-size:20px}
h2{margin:18px 0 8px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
section{margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff}

/* Forms */
label{display:flex;flex-direction:column;gap:6px;margin:6px 0;font-size:12px;color:var(--muted)}
input,textarea,select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--ink)}
textarea{resize:vertical}
button,.btn{display:inline-block;background:var(--accent);color:#24300f;border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-secondary{background:#fff;border:1px solid var(--border);color:var(--muted);font-weight:600}
.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}
.btn-danger:hover{filter:brightness(0.95)}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);text-align:left;padding:8px;vertical-align:top}
thead th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:var(--panel)}

/* Messages */
.messages{list-style:none;padding:0;margin:0 0 12px}
.messages li{margin:6px 0;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#fff}
.messages li.success{border-color:#b8e6c1;background:#e7f7e9;color:#0b6b2e}
.messages li.error{border-color:#f3b4b4;background:#fdecec;color:#a61b1b}
.messages li.info{border-color:#c7d7ff;background:#e8f0ff;color:#0b3d91}

/* Utilities */
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filters{display:grid;gap:10px}
.filters .row{display:grid;gap:10px}
@media(min-width:720px){.filters .row{grid-template-columns:repeat(4,1fr)}}

/* --- Theme extensions (inspired by today-experts.com) --- */
:root{
  --accent-ink:#24300f; /* readable text on accent */
  --accent-soft:#eef6cc; /* soft background for accents */
  --shadow-color:16 24 40; /* for rgba shadows */
}

/* Typography */
h1{font-weight:800;letter-spacing:-.01em}
h2{font-weight:700}
h3{margin:16px 0 8px;font-size:13px;color:var(--muted)}
.lead{font-size:16px;line-height:1.5;color:#2a3340}
.subdued{color:var(--muted)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* Links & buttons */
a{color:#0b3d91}
a:hover{opacity:.9}
button,.btn{transition:box-shadow .15s ease,transform .02s ease}
button:hover,.btn:hover{box-shadow:0 1px 0 rgba(var(--shadow-color)/.06),0 1px 2px rgba(var(--shadow-color)/.1)}
button:active,.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border:1px dashed var(--border);color:var(--muted)}

/* Cards & panels */
.card, section{box-shadow:0 1px 0 rgba(var(--shadow-color)/.04)}
.surface{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px}

/* Navbar (moved from inline style) */
.te-navbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--panel)}
.te-brand{font-weight:800;letter-spacing:.02em}
.te-brand a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
.te-brand .brand-logo{display:block;height:84px;width:auto}
.te-nav{display:flex;gap:10px;margin-left:auto}
.te-nav a{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none}
.te-nav a.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Dropdown (Account) */
.dropdown{position:relative}
.dropdown-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.dropdown-toggle.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dropdown.open .dropdown-toggle{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dropdown .caret{font-size:10px}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 24px rgba(16 24 40 / .12);padding:6px;display:none;z-index:50}
.dropdown.open .dropdown-menu{display:block}
.dropdown-item{display:block;padding:8px 10px;border-radius:8px;color:inherit;text-decoration:none}
.dropdown-item:hover{background:var(--panel)}
.dropdown-sep{height:1px;background:var(--border);margin:6px}

/* Filters panel */
.filters{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.filters input,.filters select{background:#fff}

/* Make weekly hours and actions occupy their own full-width rows */
.filters .row label.weekly-hours{grid-column:1 / -1}
.filters .row .actions{grid-column:1 / -1}
.filters .row .weekly-hours .checkboxes{display:flex;flex-wrap:wrap;gap:8px}
.filters .row .weekly-hours .checkbox{display:inline-flex;align-items:center;gap:6px;margin:0}
.filters .row .weekly-hours .checkbox input{width:auto}

/* Chips / Pills */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:12px;line-height:1}
.chip.accent{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

/* Badges */
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--border);font-size:12px;color:var(--muted);font-weight:600}
.badge.success{background:#e7f7e9;border-color:#b8e6c1;color:#0b6b2e}
.badge.warn{background:#fff6e5;border-color:#ffe0a3;color:#7a4e00}

/* Tables → "row cards" look */
.table-rows{width:100%;border-collapse:separate;border-spacing:0 8px}
.table-rows thead th{background:transparent;border:none;padding:0 8px}
.table-rows tbody td{background:#fff;border:1px solid var(--border);vertical-align:middle}
.table-rows tbody tr td:first-child{border-radius:10px 0 0 10px}
.table-rows tbody tr td:last-child{border-radius:0 10px 10px 0}
.table-rows tbody tr:hover td{background:#fff;box-shadow:0 1px 0 rgba(var(--shadow-color)/.04),0 2px 6px -1px rgba(var(--shadow-color)/.06)}

/* Key-value tables */
.kv{width:100%;border-collapse:separate;border-spacing:0 6px}
.kv th{width:38%;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-right:0;border-radius:8px 0 0 8px;color:var(--muted);text-transform:none;letter-spacing:0}
.kv td{padding:10px 12px;background:#fff;border:1px solid var(--border);border-left:0;border-radius:0 8px 8px 0}

/* Prose (rich text) */
.prose{font-size:15px;line-height:1.7;color:#2a3340}
.prose :where(h2,h3){margin:18px 0 8px}
.prose p{margin:0 0 12px}
.prose ul{padding-left:20px;margin:0 0 12px}
.prose li{margin:6px 0}

/* Pagination */
.pagination{display:flex;gap:8px;align-items:center}
.pagination .btn{padding:6px 10px}
.pagination .btn[disabled],.pagination .btn.disabled{opacity:.6;pointer-events:none}

/* Forms: focus ring */
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}

/* Forms: checkbox/radio accent color */
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}

/* Skills editor (jobs list) */
.skills-input-row{display:flex;gap:8px;align-items:stretch}
.skills-input-row input{flex:1 1 auto;min-width:0;width:auto}
.skills-input-row button{flex:0 0 auto}

/* Jobs list hover chevron → anchor to role column explicitly */
.table-rows.jobs-list tbody tr td.col-role{position:relative;overflow:hidden}
.table-rows.jobs-list tbody tr td.col-role::after{content:"›";position:absolute;top:50%;left:-0px;transform:translateY(-65%);color:var(--accent);font-weight:800;font-size:100px;line-height:1;pointer-events:none;z-index:0;opacity:0;transition:left .9s cubic-bezier(.22,1,.36,1),opacity .9s ease-out}
.table-rows.jobs-list tbody tr:hover td.col-role::after{left:max(0px, calc(100% - 50px));opacity:1}
.table-rows.jobs-list tbody tr td.col-role a{position:relative;z-index:1}