/* Q Org Website and HR Portal Design
   Central visual layer for opportunity pages and managed HR Web Forms.
   Values come from Q Org web theme tokens and Frappe/Website Theme variables.
   Deliberately avoids hard-coded brand colors and avoids forced declarations so Website
   Theme Custom CSS can override component rules when required. */

:root {
    --qorg-web-content-width: 1180px;
    --qorg-web-content-gutter: clamp(16px, 3vw, 32px);
    --qorg-web-section-gap: clamp(16px, 2vw, 24px);
    --qorg-web-card-shadow: 0 12px 34px rgb(15 23 42 / 7%);
    --qorg-web-soft-shadow: 0 6px 20px rgb(15 23 42 / 5%);
}

/* Shared website shell. Website Theme can override body, .web-page and the
   standard Frappe variables without fighting high-specificity declarations. */
html[data-qorg-scope="web"] body {
    color: var(--qorg-text, var(--text-color));
    background: var(--qorg-page-bg, var(--bg-color));
}

html[data-qorg-scope="web"] :is(.web-page, .page_content, main) {
    color: inherit;
}

.qorg-portal,
.web-form-container,
.web-form-wrapper,
.web-form-list-container {
    width: min(100%, var(--qorg-web-content-width));
    margin-inline: auto;
}

.qorg-portal {
    padding: clamp(20px, 4vw, 48px) var(--qorg-web-content-gutter) clamp(40px, 6vw, 72px);
    color: var(--qorg-text, var(--text-color));
}

.qorg-portal *,
.web-form-container *,
.web-form-wrapper * {
    box-sizing: border-box;
}

/* Hero */
.qorg-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    margin-bottom: var(--qorg-web-section-gap);
    padding: clamp(24px, 4vw, 48px);
    overflow: hidden;
    color: var(--qorg-text, var(--text-color));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 10%, var(--qorg-surface-bg, var(--card-bg))) 0%,
            var(--qorg-surface-bg, var(--card-bg)) 56%,
            color-mix(in srgb, var(--qorg-brand-secondary, var(--secondary-color)) 14%, var(--qorg-surface-bg, var(--card-bg))) 100%);
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-card-radius, var(--qorg-default-card-radius, var(--card-border-radius)));
    box-shadow: var(--qorg-web-card-shadow);
}

.qorg-hero::after {
    content: "";
    position: absolute;
    inset-block-start: -72px;
    inset-inline-end: -54px;
    width: 190px;
    height: 190px;
    border: 34px solid color-mix(in srgb, var(--qorg-brand-secondary, var(--secondary-color)) 20%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.qorg-hero > * { position: relative; z-index: 1; }
.qorg-hero h1,
.qorg-detail-hero h1 {
    margin: 8px 0 12px;
    color: var(--qorg-text, var(--text-color));
    font-size: clamp(28px, 4vw, var(--font-size-4xl, 42px));
    line-height: var(--qorg-heading-line-height, 1.2);
    letter-spacing: -0.02em;
}
.qorg-hero p,
.qorg-detail-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--qorg-muted-text, var(--text-muted));
    font-size: var(--font-size-lg, 16px);
}
.qorg-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    color: var(--qorg-brand-primary, var(--primary-color));
    background: color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 24%, transparent);
    border-radius: 999px;
    font-size: var(--font-size-sm, 12px);
    font-weight: 600;
}
.qorg-hero-actions,
.qorg-detail-actions,
.qorg-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.qorg-hero-actions { justify-content: flex-end; }

/* Frappe buttons, token aware */
.qorg-portal :is(.btn, .qorg-button),
.web-form-container :is(.btn, .web-form-submit) {
    min-height: var(--qorg-web-button-height, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-inline: 18px;
    border-radius: var(--qorg-web-button-radius, var(--qorg-default-button-radius, var(--border-radius)));
    font-weight: 600;
    box-shadow: none;
}
.qorg-portal .btn-primary,
.web-form-container .btn-primary {
    color: var(--qorg-button-text, #fff);
    background: var(--qorg-button-bg, var(--primary-color));
    border-color: var(--qorg-button-bg, var(--primary-color));
}
.qorg-portal .btn-primary:hover,
.web-form-container .btn-primary:hover {
    color: var(--qorg-button-text, #fff);
    background: var(--qorg-button-hover, var(--primary-color));
    border-color: var(--qorg-button-hover, var(--primary-color));
}
.qorg-portal :is(.btn-default, .btn-secondary),
.web-form-container :is(.btn-default, .btn-secondary) {
    color: var(--qorg-secondary-button-text, var(--text-color));
    background: var(--qorg-secondary-button-bg, var(--card-bg));
    border-color: var(--qorg-border, var(--border-color));
}
.qorg-portal :is(.btn-default, .btn-secondary):hover,
.web-form-container :is(.btn-default, .btn-secondary):hover {
    color: var(--qorg-secondary-button-text, var(--text-color));
    background: var(--qorg-secondary-button-hover, var(--control-bg));
}

/* Filters and editable controls */
.qorg-filter-card,
.qorg-section,
.qorg-sidebar-card,
.qorg-empty-state,
.web-form-container .web-form,
.web-form-container .web-form-page,
.web-form-container .form-section,
.web-form-container .web-form-header,
.web-form-list-container .web-form-list-row {
    color: var(--qorg-text, var(--text-color));
    background: var(--qorg-surface-bg, var(--card-bg));
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-card-radius, var(--qorg-default-card-radius, var(--card-border-radius)));
    box-shadow: var(--qorg-web-soft-shadow);
}
.qorg-filter-card {
    margin-bottom: var(--qorg-web-section-gap);
    padding: clamp(16px, 2.5vw, 24px);
}
.qorg-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) repeat(2, minmax(170px, 1fr)) auto;
    gap: 14px;
    align-items: end;
}
.qorg-filter-grid label,
.web-form-container .frappe-control {
    min-width: 0;
}
.qorg-filter-grid label > span,
.web-form-container .control-label {
    display: block;
    margin-bottom: 7px;
    color: var(--qorg-muted-text, var(--text-muted));
    font-size: var(--font-size-sm, 12px);
    font-weight: 600;
}
.qorg-portal :is(input.form-control, select.form-control, textarea.form-control),
.web-form-container :is(input.form-control, select.form-control, textarea.form-control, .input-with-feedback) {
    min-height: var(--qorg-web-field-height, 44px);
    color: var(--qorg-field-text, var(--text-color));
    background: var(--qorg-field-bg, var(--control-bg));
    border: 1px solid var(--qorg-field-border, var(--border-color));
    border-radius: var(--qorg-web-field-radius, var(--qorg-default-field-radius, var(--border-radius)));
    box-shadow: none;
}
.qorg-portal :is(input.form-control, select.form-control, textarea.form-control):focus,
.web-form-container :is(input.form-control, select.form-control, textarea.form-control, .input-with-feedback):focus {
    border-color: var(--qorg-field-focus, var(--primary-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qorg-field-focus, var(--primary-color)) 16%, transparent);
}
.qorg-portal textarea.form-control,
.web-form-container textarea.form-control { min-height: 112px; }

/* Opportunity cards */
.qorg-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--qorg-web-section-gap);
}
.qorg-opportunity-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 26px);
    color: var(--qorg-text, var(--text-color));
    background: var(--qorg-surface-bg, var(--card-bg));
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-card-radius, var(--qorg-default-card-radius, var(--card-border-radius)));
    box-shadow: var(--qorg-web-soft-shadow);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.qorg-opportunity-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 40%, var(--qorg-border, var(--border-color)));
    box-shadow: var(--qorg-web-card-shadow);
}
.qorg-opportunity-card h2 {
    margin: 12px 0 8px;
    color: var(--qorg-text, var(--text-color));
    font-size: var(--font-size-xl, 18px);
}
.qorg-opportunity-card h2 a { color: inherit; text-decoration: none; }
.qorg-opportunity-card h2 a:hover { color: var(--qorg-link, var(--primary-color)); }
.qorg-opportunity-card p { color: var(--qorg-muted-text, var(--text-muted)); }
.qorg-opportunity-card .qorg-card-actions { margin-top: auto; padding-top: 18px; }
.qorg-badge-row,
.qorg-meta-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.qorg-badge,
.qorg-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    color: var(--qorg-brand-primary, var(--primary-color));
    background: color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 9%, var(--qorg-surface-bg, var(--card-bg)));
    border: 1px solid color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 22%, var(--qorg-border, var(--border-color)));
    border-radius: 999px;
    font-size: var(--font-size-xs, 11px);
    font-weight: 600;
}
.qorg-meta,
.qorg-meta-row { color: var(--qorg-muted-text, var(--text-muted)); font-size: var(--font-size-sm, 12px); }

/* Detail page */
.qorg-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--qorg-muted-text, var(--text-muted));
    font-size: var(--font-size-sm, 12px);
}
.qorg-breadcrumbs a { color: var(--qorg-link, var(--primary-color)); }
.qorg-detail-hero {
    margin-bottom: var(--qorg-web-section-gap);
    padding: clamp(24px, 4vw, 42px);
    color: var(--qorg-text, var(--text-color));
    background: var(--qorg-surface-bg, var(--card-bg));
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-card-radius, var(--qorg-default-card-radius, var(--card-border-radius)));
    box-shadow: var(--qorg-web-card-shadow);
}
.qorg-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: var(--qorg-web-section-gap);
    align-items: start;
}
.qorg-detail-main { display: grid; gap: var(--qorg-web-section-gap); min-width: 0; }
.qorg-section,
.qorg-sidebar-card { padding: clamp(18px, 2.5vw, 28px); }
.qorg-section h2,
.qorg-sidebar-card h2 {
    margin: 0 0 16px;
    color: var(--qorg-text, var(--text-color));
    font-size: var(--font-size-xl, 18px);
}
.qorg-sidebar-card { position: sticky; top: 88px; }
.qorg-rich-text { color: var(--qorg-text, var(--text-color)); line-height: var(--qorg-paragraph-line-height, 1.55); }
.qorg-rich-text :is(p, ul, ol):last-child { margin-bottom: 0; }
.qorg-rich-text img { max-width: 100%; height: auto; border-radius: var(--qorg-web-card-radius, var(--card-border-radius)); }
.qorg-meta-list { margin: 0; }
.qorg-meta-list > div {
    display: grid;
    grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--qorg-border, var(--border-color));
}
.qorg-meta-list > div:last-child { border-bottom: 0; }
.qorg-meta-list dt { color: var(--qorg-muted-text, var(--text-muted)); font-weight: 500; }
.qorg-meta-list dd { margin: 0; color: var(--qorg-text, var(--text-color)); font-weight: 600; text-align: end; }
.qorg-list-cards { display: grid; gap: 10px; }
.qorg-list-card {
    padding: 14px;
    background: var(--qorg-control-bg, var(--control-bg));
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-field-radius, var(--border-radius));
}
.qorg-empty-state { padding: clamp(32px, 6vw, 72px); text-align: center; }
.qorg-empty-state h2 { margin-top: 0; color: var(--qorg-text, var(--text-color)); }
.qorg-empty-state p { color: var(--qorg-muted-text, var(--text-muted)); }

/* Managed HR Web Forms */
.web-form-container,
.web-form-wrapper {
    padding-inline: var(--qorg-web-content-gutter);
}
.web-form-container { padding-block: clamp(20px, 4vw, 48px); }
.web-form-container .web-form-header {
    display: block;
    margin-bottom: var(--qorg-web-section-gap);
    padding: clamp(22px, 3vw, 34px);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 9%, var(--qorg-surface-bg, var(--card-bg))),
            var(--qorg-surface-bg, var(--card-bg)) 64%);
}
.web-form-container .web-form-header h1,
.web-form-container .web-form-header .web-form-title {
    margin: 0 0 8px;
    color: var(--qorg-text, var(--text-color));
}
.web-form-container .web-form-header :is(.web-form-introduction, .description, p) {
    margin-bottom: 0;
    color: var(--qorg-muted-text, var(--text-muted));
}
.web-form-container .web-form,
.web-form-container .web-form-page {
    padding: clamp(18px, 3vw, 32px);
}
.web-form-container .form-section {
    margin-bottom: 16px;
    padding: clamp(16px, 2vw, 24px);
    box-shadow: none;
}
.web-form-container :is(.section-head, .form-section-heading) {
    margin-bottom: 15px;
    color: var(--qorg-text, var(--text-color));
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
}
.web-form-container .web-form-actions,
.web-form-container .web-form-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 18px;
}
.web-form-container .form-message,
.web-form-container .alert {
    border-radius: var(--qorg-web-field-radius, var(--border-radius));
}
.web-form-container .table,
.web-form-container .grid-body,
.web-form-container .grid-row {
    color: var(--qorg-text, var(--text-color));
    border-color: var(--qorg-border, var(--border-color));
}
.web-form-container .grid-heading-row,
.web-form-container .grid-footer {
    background: var(--qorg-control-bg, var(--control-bg));
}
.web-form-list-container .web-form-list-row {
    margin-bottom: 10px;
    padding: 14px 18px;
}

/* Pagination */
.qorg-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(24px, 4vw, 40px);
}
.qorg-pagination a,
.qorg-pagination span {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qorg-text, var(--text-color));
    background: var(--qorg-surface-bg, var(--card-bg));
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-button-radius, var(--border-radius));
}
.qorg-pagination .active {
    color: var(--qorg-button-text, #fff);
    background: var(--qorg-button-bg, var(--primary-color));
    border-color: var(--qorg-button-bg, var(--primary-color));
}

/* Logical properties provide RTL without duplicating the component system. */
[dir="rtl"] .qorg-portal,
html[dir="rtl"] .web-form-container { text-align: start; }

@media (max-width: 991px) {
    .qorg-hero { grid-template-columns: 1fr; }
    .qorg-hero-actions { justify-content: flex-start; }
    .qorg-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qorg-filter-actions { grid-column: 1 / -1; }
    .qorg-detail-layout { grid-template-columns: 1fr; }
    .qorg-sidebar-card { position: static; }
}

@media (max-width: 575px) {
    .qorg-portal,
    .web-form-container,
    .web-form-wrapper { padding-inline: 12px; }
    .qorg-hero,
    .qorg-detail-hero,
    .qorg-filter-card,
    .qorg-section,
    .qorg-sidebar-card { padding: 18px; }
    .qorg-filter-grid { grid-template-columns: 1fr; }
    .qorg-filter-actions { grid-column: auto; }
    .qorg-hero-actions,
    .qorg-detail-actions,
    .qorg-filter-actions,
    .web-form-container .web-form-actions { align-items: stretch; flex-direction: column; }
    .qorg-portal .btn,
    .web-form-container .btn { width: 100%; }
    .qorg-meta-list > div { grid-template-columns: 1fr; gap: 3px; }
    .qorg-meta-list dd { text-align: start; }
    .web-form-container .web-form,
    .web-form-container .web-form-page { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .qorg-opportunity-card { transition: none; }
}

/* Exact portal template components */
.qorg-results-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin: clamp(24px, 4vw, 38px) 0 16px;
}
.qorg-results-heading h2 { margin: 0; color: var(--qorg-text, var(--text-color)); }
.qorg-results-heading > span { color: var(--qorg-muted-text, var(--text-muted)); font-size: var(--font-size-sm, 12px); }
.qorg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--qorg-web-section-gap);
}
.qorg-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.qorg-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    color: var(--qorg-brand-primary, var(--primary-color));
    background: color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 9%, var(--qorg-surface-bg, var(--card-bg)));
    border: 1px solid color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 22%, var(--qorg-border, var(--border-color)));
    border-radius: 999px;
    font-size: var(--font-size-xs, 11px);
    font-weight: 600;
}
.qorg-pill.is-open {
    color: var(--qorg-brand-primary, var(--primary-color));
}
.qorg-pill.is-closed {
    color: var(--qorg-muted-text, var(--text-muted));
    background: var(--qorg-control-bg, var(--control-bg));
    border-color: var(--qorg-border, var(--border-color));
}
.qorg-deadline {
    color: var(--qorg-muted-text, var(--text-muted));
    font-size: var(--font-size-xs, 11px);
    font-weight: 600;
}
.qorg-deadline.is-urgent { color: var(--red-600, #c92a2a); }
.qorg-summary { flex: 1 1 auto; }
.qorg-opportunity-card > .btn { align-self: flex-start; margin-top: auto; }
.qorg-opportunity-card h3 {
    margin: 14px 0 8px;
    color: var(--qorg-text, var(--text-color));
    font-size: var(--font-size-xl, 18px);
}
.qorg-opportunity-card h3 a { color: inherit; text-decoration: none; }
.qorg-opportunity-card h3 a:hover { color: var(--qorg-link, var(--primary-color)); }
.qorg-opportunity-card .qorg-meta-list { margin: 4px 0 18px; }
.qorg-opportunity-card .qorg-meta-list > div { padding: 7px 0; }
.qorg-detail-header {
    margin-bottom: var(--qorg-web-section-gap);
    padding: clamp(24px, 4vw, 42px);
    color: var(--qorg-text, var(--text-color));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--qorg-brand-primary, var(--primary-color)) 8%, var(--qorg-surface-bg, var(--card-bg))),
            var(--qorg-surface-bg, var(--card-bg)) 65%);
    border: 1px solid var(--qorg-border, var(--border-color));
    border-radius: var(--qorg-web-card-radius, var(--qorg-default-card-radius, var(--card-border-radius)));
    box-shadow: var(--qorg-web-card-shadow);
}
.qorg-detail-header h1 {
    margin: 14px 0 10px;
    color: var(--qorg-text, var(--text-color));
    font-size: clamp(28px, 4vw, var(--font-size-4xl, 42px));
    line-height: var(--qorg-heading-line-height, 1.2);
}
.qorg-detail-header > p { max-width: 800px; color: var(--qorg-muted-text, var(--text-muted)); }
.qorg-detail-header .qorg-detail-actions { margin-top: 20px; }

@media (max-width: 575px) {
    .qorg-results-heading,
    .qorg-card-topline { align-items: flex-start; flex-direction: column; }
    .qorg-opportunity-card > .btn { width: 100%; }
}