/**
 * Theme Mode Toggle - customers area dark theme overrides.
 * Scoped under `html.theme-dark`.
 */

/* ----------------------------------------------------------------------------
 * Top navigation
 * ------------------------------------------------------------------------- */
html.theme-dark .navbar-default {
    background: var(--tt-header) !important;
    border-bottom-color: var(--tt-border);
}

html.theme-dark .navbar-default .navbar-nav > li > a {
    color: var(--tt-text-muted);
}

html.theme-dark .navbar-default .navbar-nav > .active > a,
html.theme-dark .navbar-default .navbar-nav > .active > a:focus,
html.theme-dark .navbar-default .navbar-nav > .active > a:hover {
    background: var(--tt-surface-3);
    color: var(--tt-text-strong);
}

html.theme-dark .navbar-default .navbar-nav > li > a:focus,
html.theme-dark .navbar-default .navbar-nav > li > a:hover {
    background: var(--tt-surface-3);
    color: var(--tt-text-strong);
}

html.theme-dark .navbar-default .navbar-nav > li.customers-nav-item-login > a {
    background: #2563eb !important;
    color: #fff !important;
}

html.theme-dark .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--tt-text-muted);
}

/* ----------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
html.theme-dark footer {
    background: var(--tt-surface-2);
    border-top-color: var(--tt-border);
    color: var(--tt-text-muted);
}

html.theme-dark footer a {
    color: var(--tt-text);
}

/* ----------------------------------------------------------------------------
 * Content areas
 * ------------------------------------------------------------------------- */
html.theme-dark .content,
html.theme-dark .page-full .content,
html.theme-dark .main-content {
    color: var(--tt-text);
}

html.theme-dark .panel-body {
    color: var(--tt-text);
}

/* Invoice / estimate / proposal previews inside panels */
html.theme-dark .viewinvoice .panel-body,
html.theme-dark .viewestimate .panel-body,
html.theme-dark .viewproposal .panel-body {
    background: var(--tt-surface) !important;
    color: var(--tt-text);
}

html.theme-dark .viewinvoice,
html.theme-dark .viewestimate,
html.theme-dark .viewproposal {
    color: var(--tt-text);
}

html.theme-dark .table.items tbody > tr > td,
html.theme-dark .table.items thead > tr > th,
html.theme-dark .table.proposal-items tbody > tr > td,
html.theme-dark .table.proposal-items thead > tr > th,
html.theme-dark .tc-content table > tbody > tr > td {
    color: var(--tt-text);
}

/* Support / ticket replies */
html.theme-dark .client-reply .panel-body {
    background: rgba(245, 158, 11, 0.08) !important;
    color: #fcd34d;
}

/* Comments */
html.theme-dark .jquery-comments,
html.theme-dark .jquery-comments .commenting-field {
    background: var(--tt-surface);
    color: var(--tt-text);
}

html.theme-dark .jquery-comments .commenting-field input,
html.theme-dark .jquery-comments .commenting-field textarea {
    background: var(--tt-surface-2);
    color: var(--tt-text);
}

html.theme-dark .jquery-comments ul.main li.comment .name {
    color: var(--tt-text-strong);
}

/* Knowledge base search box / hero areas */
html.theme-dark .kb-search-jumbotron {
    background: var(--tt-surface-2);
    border-color: var(--tt-border);
}

html.theme-dark .kb-search input[type="search"] {
    background: var(--tt-surface);
    border-color: var(--tt-border);
    color: var(--tt-text);
}