/*
 * OBS Hermes Platform theme
 * Loaded for both the Desk (app_include_css) and the public website
 * (web_include_css). Keep this file free of @import to make Frappe's
 * asset bundler happy.
 */

:root {
    --obs-primary: #1B4D3E;
    --obs-primary-light: #2A6B57;
    --obs-accent: #C8A951;
    --obs-bg: #F8F7F4;
    --obs-text: #1A1A1A;
    --obs-border: #E5E2DC;
}

.navbar-brand img {
    height: 36px;
}

.page-head {
    border-bottom: 2px solid var(--obs-accent);
}

/* Override Frappe primary button color */
.btn-primary {
    background-color: var(--obs-primary);
    border-color: var(--obs-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--obs-primary-light);
    border-color: var(--obs-primary-light);
}

/* Subtle accent on the Desk page title underline */
.page-title h3 {
    color: var(--obs-text);
}

/* Login page polish — Agent C will reference this when finalising the login template. */
.for-login,
.for-signup,
.for-forgot,
.for-email-login {
    background-color: var(--obs-bg);
}

.for-login .page-card-head,
.for-login .login-content {
    border-top: 3px solid var(--obs-accent);
}

.for-login .btn-primary {
    background-color: var(--obs-primary);
    border-color: var(--obs-primary);
}

.obs-demo-login-panel {
    margin: 14px 0 0;
    padding: 14px;
    border-top: 1px solid var(--obs-border);
    background: #fff;
}

.obs-demo-login-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.obs-demo-login-head strong {
    color: var(--obs-primary);
    font-size: 13px;
}

.obs-demo-login-head span,
.obs-demo-login-status {
    color: #667085;
    font-size: 11px;
}

.obs-demo-login-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: min(32vh, 260px);
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.obs-demo-login-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--obs-border);
    border-radius: 6px;
    background: #fbfaf7;
    color: var(--obs-text);
    text-align: left;
    cursor: pointer;
}

.obs-demo-login-card:hover,
.obs-demo-login-card:focus {
    border-color: var(--obs-accent);
    box-shadow: 0 0 0 2px rgba(200, 169, 81, 0.18);
    outline: none;
}

.obs-demo-login-card-top {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.obs-demo-login-card-top strong {
    font-size: 12px;
    line-height: 1.2;
}

.obs-demo-login-card small,
.obs-demo-login-name {
    color: #667085;
    font-size: 10px;
    line-height: 1.3;
}

.obs-demo-login-card code {
    color: var(--obs-primary);
    font-size: 10px;
    white-space: normal;
    word-break: break-word;
}

.obs-demo-login-password {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.obs-demo-login-status {
    margin: 10px 0 0;
}

@media (max-width: 520px) {
    .obs-demo-login-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Web header link accent */
.navbar a:hover {
    color: var(--obs-accent);
}

/* ---------------------------------------------------------------
 * Frappe v16 desk layout fix — body uses display: flex with a fixed
 * sidebar (.body-sidebar-container) and the main page area
 * (.main-section). On some viewports / Workspace types Frappe ships
 * .main-section as flex: 0 1 auto + height: 0, which collapses the
 * entire form/list view. We force it to grow into the remaining
 * horizontal/vertical space so the page is actually visible.
 * --------------------------------------------------------------- */
body.no-breadcrumbs,
body.with-breadcrumbs {
    height: 100vh;
    overflow: hidden;
    flex-direction: row !important;
}
body.no-breadcrumbs > .main-section,
body.with-breadcrumbs > .main-section,
.body-sidebar-container + .main-section {
    flex: 1 1 0% !important;
    min-height: 0;
    min-width: 0;
    height: 100vh;
    overflow: auto;
}
/* Sidebar keeps its intrinsic width and stays on the left. */
body.no-breadcrumbs > .body-sidebar-container,
body.with-breadcrumbs > .body-sidebar-container {
    flex: 0 0 auto !important;
    height: 100vh;
    overflow-y: auto;
}
/* Ensure the inner #body fills its parent. */
.main-section > #body,
.main-section > #body > .content {
    min-height: 100%;
}

/* Visible top-right language switcher (added by obs_hermes_desk.js as
 * a position:fixed chip). Make sure it stays above any other
 * positioned content. */
.obs-lang-switcher {
    z-index: 10000 !important;
}