/* ==========================================================================
   nubarchiva – components.css (Bootstrap 3.2 friendly)
   Requires: tokens.css
   Load after bootstrap.css
   ========================================================================== */

html {
    direction: var(--nb-direction);
    font-size: var(--nb-root-font-size);
}

body {
    background: var(--nb-bg-body);
    color: var(--nb-text-primary);
    font-family: var(--nb-font-body-family);
    font-size: var(--nb-font-body-size);
    line-height: var(--nb-font-body-line);
}

/* Links */
a {
    color: var(--nb-text-link);
}

a:hover, a:focus {
    color: var(--nb-text-link-hover);
    text-decoration: none;
}

/* Focus accessible */
:focus {
    outline: none;
    box-shadow: 0 0 0 var(--nb-focus-ring);
}

/* Headings with typography semantics */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--nb-font-heading-family);
    font-weight: var(--nb-font-heading-weight);
    letter-spacing: var(--nb-letter-spacing-tight);
    line-height: var(--nb-font-heading-line);
    margin-top: 0;
    margin-bottom: var(--nb-space-4);
}

h1, .h1 {
    font-size: var(--nb-h1-size);
    color: var(--nb-h1-color);
}

h2, .h2 {
    font-size: var(--nb-h2-size);
    color: var(--nb-h2-color);
}

h3, .h3 {
    font-size: var(--nb-h3-size);
    color: var(--nb-h3-color);
}

h4, .h4 {
    font-size: var(--nb-h4-size);
    color: var(--nb-h4-color);
}

h5, .h5 {
    font-size: var(--nb-h5-size);
    color: var(--nb-h5-color);
}

h6, .h6 {
    font-size: var(--nb-h6-size);
    color: var(--nb-h6-color);
}

small, .small {
    color: var(--nb-text-muted);
}

.lead {
    font-size: var(--nb-font-size-lg);
    color: var(--nb-text-secondary);
}

hr {
    border-color: var(--nb-border-default);
}

.page-header {
    border-bottom-color: var(--nb-border-default);
    margin: var(--nb-space-6) 0 var(--nb-space-4);
}

/* Code / monospace */
code, kbd, pre, samp {
    font-family: var(--nb-font-code-family);
    font-size: var(--nb-code-font-size);
}

pre {
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
}

/* Labels (elements) */
label, .control-label {
    color: var(--nb-label-fg);
    font-family: var(--nb-font-body-family);
    font-weight: var(--nb-font-weight-medium);
    letter-spacing: var(--nb-letter-spacing-normal);
}

label.required::after {
    content: " *";
    color: var(--nb-status-error);
}

.help-block {
    color: var(--nb-text-muted);
    margin-top: var(--nb-space-2);
}

/* Navbar */
.navbar {
    min-height: var(--nb-navbar-height);
    border: none;
    border-radius: 0;
}

.navbar-default {
    background-color: var(--nb-navbar-bg);
    color: var(--nb-navbar-fg);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--nb-navbar-fg);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:hover {
    opacity: .9;
}

/* Navbar inverse variant */
.navbar-inverse {
    background-color: var(--nb-text-primary);
    color: var(--nb-text-inverse);
    border: none;
}

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {
    color: var(--nb-text-inverse);
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--nb-text-inverse);
}

.navbar-toggle {
    border-color: transparent;
}

.navbar span.btn,
.navbar span.btn:hover {
    color: var(--nb-text-primary);
    cursor: default;
    font-weight: var(--nb-font-weight-medium);
    padding: 13px 15px 15px;
    text-decoration: none;
}

/* Buttons */
.btn {
    font-size: var(--nb-font-body-size);
    font-weight: var(--nb-font-weight-normal);
    line-height: var(--nb-font-body-line);
    border-radius: var(--nb-btn-radius);
    padding: var(--nb-btn-pad-y) var(--nb-btn-pad-x);
    transition: transform var(--nb-duration-fast) var(--nb-ease-out),
                filter var(--nb-duration-fast) var(--nb-ease-out);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled, .btn.disabled {
    opacity: var(--nb-btn-disabled-opacity);
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--nb-btn-primary-bg);
    border-color: var(--nb-btn-primary-border);
    color: var(--nb-primary-contrast);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--nb-btn-primary-bg-hover);
    border-color: var(--nb-btn-primary-border-hover);
    color: var(--nb-btn-primary-fg);
}

.btn-default {
    background: var(--nb-btn-default-bg);
    color: var(--nb-btn-default-fg);
    border: 1px solid var(--nb-btn-default-border);
}

.btn-default:hover, .btn-default:focus {
    background: var(--nb-btn-default-bg-hover);
    border-color: var(--nb-btn-default-border-hover);
}

/* btn-link */
.btn-link {
    color: var(--nb-btn-link-fg);
    font-weight: var(--nb-font-weight-medium);
    border-color: transparent;
}

.btn-link:hover, .btn-link:focus {
    color: var(--nb-btn-link-fg-hover);
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

.btn-link[disabled], fieldset[disabled] .btn-link {
    color: var(--nb-text-muted);
    text-decoration: none;
    pointer-events: none;
}

/* Contextual buttons */
.btn-success {
    background: var(--nb-btn-success-bg);
    color: var(--nb-btn-success-fg);
    border-color: var(--nb-btn-success-border);
}

.btn-success:hover, .btn-success:focus {
    background: var(--nb-btn-success-bg-hover);
    border-color: var(--nb-btn-success-border-hover);
}

.btn-info {
    background: var(--nb-btn-info-bg);
    color: var(--nb-btn-info-fg);
    border-color: var(--nb-btn-info-border);
}

.btn-info:hover, .btn-info:focus {
    background: var(--nb-btn-info-bg-hover);
    border-color: var(--nb-btn-info-border-hover);
}

.btn-warning {
    background: var(--nb-btn-warning-bg);
    color: var(--nb-btn-warning-fg);
    border-color: var(--nb-btn-warning-border);
}

.btn-warning:hover, .btn-warning:focus {
    background: var(--nb-btn-warning-bg-hover);
    border-color: var(--nb-btn-warning-border-hover);
}

.btn-danger {
    background: var(--nb-btn-danger-bg);
    color: var(--nb-btn-danger-fg);
    border-color: var(--nb-btn-danger-border);
}

.btn-danger:hover, .btn-danger:focus {
    background: var(--nb-btn-danger-bg-hover);
    border-color: var(--nb-btn-danger-border-hover);
}

/* Forms */
.form-group {
    margin-bottom: calc(var(--nb-space-4) * var(--nb-density-scale));
}

.form-control {
    background-color: var(--nb-input-bg);
    border: 1px solid var(--nb-input-border);
    border-radius: var(--nb-control-radius);
    box-shadow: none;
    color: var(--nb-input-fg);
    font-size: var(--nb-control-font);
    min-height: var(--nb-control-min-height);
    padding: var(--nb-control-pad-y) var(--nb-control-pad-x);
    transition: border-color var(--nb-duration-normal) var(--nb-ease-in-out),
                box-shadow var(--nb-duration-normal) var(--nb-ease-in-out);
}

.form-control::placeholder {
    color: var(--nb-input-placeholder);
}

.form-control[readonly],
.form-control[readonly="readonly"] {
    background-color: var(--nb-input-bg-readonly);
    color: var(--nb-input-fg-muted);
}

.form-control:focus {
    border-color: var(--nb-input-border-focus);
    box-shadow: 0 0 0 var(--nb-focus-ring);
    outline: none;
}

.has-error .control-label, .has-error .help-block {
    color: var(--nb-status-error);
}

.has-error .form-control {
    border-color: var(--nb-status-error);
    box-shadow: none;
}

.has-success .control-label, .has-success .help-block {
    color: var(--nb-status-success);
}

.has-success .form-control {
    border-color: var(--nb-status-success);
}

.has-warning .control-label, .has-warning .help-block {
    color: var(--nb-status-warning);
}

.has-warning .form-control {
    border-color: var(--nb-status-warning);
}

.has-info .control-label, .has-info .help-block {
    color: var(--nb-status-info);
}

.has-info .form-control {
    border-color: var(--nb-status-info);
}

.input-group-addon {
    border-radius: var(--nb-control-radius);
    background: color-mix(in srgb, var(--nb-bg-surface) 85%, #fff 15%);
    border-color: var(--nb-border-default);
    color: var(--nb-text-primary);
}

/* ---------- Fieldset / Legend ---------- */
fieldset {
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
    padding: calc(var(--nb-space-4) * var(--nb-density-scale));
    background: var(--nb-bg-surface);
}

legend {
    font-size: var(--nb-font-size-md);
    padding: 0 var(--nb-space-2);
    color: var(--nb-text-primary);
    border: none;
    width: auto;
    margin-bottom: var(--nb-space-3);
    font-weight: var(--nb-font-weight-medium);
}

.panel > legend {
    margin-left: var(--nb-space-3);
    margin-right: var(--nb-space-3);
}


/* Panels (cards) */
.panel {
    background-color: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
    box-shadow: var(--nb-shadow-sm);
}

.panel-heading {
    background-color: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border-bottom: 1px solid var(--nb-border-default);
    border-top-left-radius: var(--nb-border-radius-base);
    border-top-right-radius: var(--nb-border-radius-base);
}

.panel-footer {
    background-color: var(--nb-bg-surface);
    border-top: 1px solid var(--nb-border-default);
}

.panel-title {
    font-size: var(--nb-font-size-md);
    font-weight: var(--nb-font-heading-weight);
    color: var(--nb-text-primary);
    margin: 0;
}

/* Panel variants */
.panel-primary {
    border-color: color-mix(in srgb, var(--nb-primary) 60%, #fff 40%);
}

.panel-primary > .panel-heading {
    color: var(--nb-primary-contrast);
    background-color: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 75%, #000 25%);
}

.panel-success {
    border-color: color-mix(in srgb, var(--nb-status-success) 60%, #fff 40%);
}

.panel-success > .panel-heading {
    color: var(--nb-status-contrast);
    background-color: var(--nb-status-success);
    border-color: color-mix(in srgb, var(--nb-status-success) 75%, #000 25%);
}

.panel-info {
    border-color: color-mix(in srgb, var(--nb-status-info) 60%, #fff 40%);
}

.panel-info > .panel-heading {
    color: var(--nb-status-contrast);
    background-color: var(--nb-status-info);
    border-color: color-mix(in srgb, var(--nb-status-info) 75%, #000 25%);
}

.panel-warning {
    border-color: color-mix(in srgb, var(--nb-status-warning) 60%, #fff 40%);
}

.panel-warning > .panel-heading {
    color: #000;
    background-color: var(--nb-status-warning);
    border-color: color-mix(in srgb, var(--nb-status-warning) 75%, #000 25%);
}

.panel-danger {
    border-color: color-mix(in srgb, var(--nb-status-error) 60%, #fff 40%);
}

.panel-danger > .panel-heading {
    color: var(--nb-status-contrast);
    background-color: var(--nb-status-error);
    border-color: color-mix(in srgb, var(--nb-status-error) 75%, #000 25%);
}

/* Alerts */
.alert {
    border-left: 4px solid var(--nb-border-strong);
    border-radius: var(--nb-border-radius-base);
}

.alert-success {
    background: color-mix(in srgb, var(--nb-status-success) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-success) 35%, #fff 65%);
    color: var(--nb-status-success);
    border-left-color: var(--nb-status-success);
}

.alert-info {
    background: color-mix(in srgb, var(--nb-status-info) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-info) 35%, #fff 65%);
    color: var(--nb-status-info);
    border-left-color: var(--nb-status-info);
}

.alert-warning {
    background: color-mix(in srgb, var(--nb-status-warning) 14%, #fff 86%);
    border-color: color-mix(in srgb, var(--nb-status-warning) 40%, #fff 60%);
    color: var(--nb-status-warning);
    border-left-color: var(--nb-status-warning);
}

.alert-danger {
    background: color-mix(in srgb, var(--nb-status-error) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-error) 35%, #fff 65%);
    color: var(--nb-status-error);
    border-left-color: var(--nb-status-error);
}

/* Tables */
.table {
    border-color: var(--nb-table-border);
}

.table > thead > tr > th {
    background: var(--nb-table-header-bg);
    color: var(--nb-table-header-fg);
    border-bottom: 1px solid var(--nb-table-border);
}

.table > tfoot > tr > th,
.table > tfoot > tr > td {
    background: var(--nb-table-footer-bg);
    color: var(--nb-table-footer-fg);
    border-top: 1px solid var(--nb-table-border);
}

.table > tbody > tr:hover {
    background: var(--nb-table-row-hover-bg);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--nb-gray-100);
}

.table-bordered {
    border: 1px solid var(--nb-table-border);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid var(--nb-table-border);
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 6px;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active {
    background-color: var(--nb-gray-100);
}

/* Table responsive wrapper */
.table-responsive {
    border: 1px solid var(--nb-border-default);
}

/* Badges */
.badge {
    border-radius: var(--nb-radius-pill);
    font-weight: var(--nb-font-weight-medium);
}

/* Labels */
.label {
    border-radius: var(--nb-border-radius-base);
    font-weight: var(--nb-font-weight-medium);
}

.label-default {
    background: var(--nb-gray-600);
    color: #fff;
}

.label-primary {
    background: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

.label-info {
    background: var(--nb-status-info);
    color: var(--nb-status-contrast);
}

.label-success {
    background: var(--nb-status-success);
    color: var(--nb-status-contrast);
}

.label-warning {
    background: var(--nb-status-warning);
    color: #000;
}

.label-danger {
    background: var(--nb-status-error);
    color: var(--nb-status-contrast);
}

/* Sidebar helper */
.nb-sidebar {
    background: var(--nb-sidebar-bg);
    color: var(--nb-sidebar-fg);
    width: var(--nb-sidebar-width);
    border-right: 1px solid var(--nb-border-default);
}

/* Modals */
.modal-content {
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
    box-shadow: var(--nb-shadow-lg);
}

/* Dropdowns */
.dropdown-menu {
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
}

.dropdown-menu > li > a {
    color: var(--nb-text-primary);
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--nb-table-row-hover-bg);
    color: var(--nb-text-primary);
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

/* Tooltip */
.tooltip-inner {
    background: var(--nb-text-primary);
    color: var(--nb-text-inverse);
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--nb-text-primary);
}

/* Pagination & Pager */
.pagination > li > a, .pagination > li > span {
    color: var(--nb-text-primary);
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
}

.pagination > li > a:hover, .pagination > li > span:hover {
    background: var(--nb-gray-100);
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 85%, #000 15%);
    color: var(--nb-primary-contrast);
}

.pager li > a, .pager li > span {
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
    color: var(--nb-text-primary);
}

.pager li > a:hover {
    background: var(--nb-gray-100);
}

/* List groups */
.list-group-item {
    color: var(--nb-text-primary);
    border-color: var(--nb-border-default);
}

.list-group-item:hover {
    background: var(--nb-table-row-hover-bg);
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 85%, #000 15%);
    color: var(--nb-primary-contrast);
}

.list-group-item-success {
    color: var(--nb-status-success);
    background: color-mix(in srgb, var(--nb-status-success) 10%, #fff 90%);
}

.list-group-item-info {
    color: var(--nb-status-info);
    background: color-mix(in srgb, var(--nb-status-info) 10%, #fff 90%);
}

.list-group-item-warning {
    color: var(--nb-status-warning);
    background: color-mix(in srgb, var(--nb-status-warning) 10%, #fff 90%);
}

.list-group-item-danger {
    color: var(--nb-status-error);
    background: color-mix(in srgb, var(--nb-status-error) 10%, #fff 90%);
}

/* Jumbotron */
.jumbotron {
    background: color-mix(in srgb, var(--nb-primary) 6%, #fff 94%);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
}

/* Media */
.media, .media-body, .media-left, .media-right {
    color: var(--nb-text-primary);
}

.media-heading {
    color: var(--nb-text-primary);
    font-weight: var(--nb-font-heading-weight);
}

/* Progress bars */
.progress {
    background-color: var(--nb-gray-100);
    border-radius: var(--nb-border-radius-base);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}

.progress-bar {
    background-color: var(--nb-primary);
}

.progress-bar-success {
    background-color: var(--nb-status-success);
}

.progress-bar-info {
    background-color: var(--nb-status-info);
}

.progress-bar-warning {
    background-color: var(--nb-status-warning);
}

.progress-bar-danger {
    background-color: var(--nb-status-error);
}

/* Popovers */
.popover {
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
    box-shadow: var(--nb-shadow-md);
}

.popover-title {
    background: var(--nb-gray-100);
    color: var(--nb-text-primary);
    border-bottom: 1px solid var(--nb-border-default);
}

.popover.right .arrow:after {
    border-right-color: var(--nb-bg-surface);
}

.popover.left .arrow:after {
    border-left-color: var(--nb-bg-surface);
}

.popover.top .arrow:after {
    border-top-color: var(--nb-bg-surface);
}

.popover.bottom .arrow:after {
    border-bottom-color: var(--nb-bg-surface);
}

/* Carousel */
.carousel-control.left, .carousel-control.right {
    background-image: none;
    color: var(--nb-text-inverse);
    text-shadow: none;
}

.carousel-control:hover, .carousel-control:focus {
    color: var(--nb-primary-contrast);
}

.carousel-indicators li {
    border: 1px solid var(--nb-border-default);
    background: var(--nb-gray-200);
}

.carousel-indicators .active {
    background: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 85%, #000 15%);
}

.carousel-caption {
    background: rgba(0, 0, 0, .45);
    color: #fff;
    border-radius: var(--nb-border-radius-base);
    padding: var(--nb-space-3) var(--nb-space-4);
}

/* Close button */
.close {
    color: var(--nb-text-secondary);
    text-shadow: none;
    opacity: .8;
}

.close:hover, .close:focus {
    color: var(--nb-text-primary);
    opacity: 1;
}

/* Utilities mapping */
.text-muted {
    color: var(--nb-text-muted);
}

.text-primary {
    color: var(--nb-primary);
}

.text-success {
    color: var(--nb-status-success);
}

.text-info {
    color: var(--nb-status-info);
}

.text-warning {
    color: var(--nb-status-warning);
}

.text-danger {
    color: var(--nb-status-error);
}

.bg-primary {
    background-color: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

.bg-info {
    background-color: color-mix(in srgb, var(--nb-status-info) 15%, #fff 85%);
}

.bg-success {
    background-color: color-mix(in srgb, var(--nb-status-success) 15%, #fff 85%);
}

.bg-warning {
    background-color: color-mix(in srgb, var(--nb-status-warning) 18%, #fff 82%);
}

.bg-danger {
    background-color: color-mix(in srgb, var(--nb-status-error) 15%, #fff 85%);
}