/* Kuku Admin: brand theme and small additions on top of AdminLTE */

/* ---- Brand colours, sampled from the Kuku logo. Bootstrap "primary" is remapped to Kuku green. ---- */
:root {
  --kuku-green: #2e7013;       /* primary: buttons, links, active menu (6:1 contrast on white) */
  --kuku-green-dark: #1a5c14;  /* hover */
  --kuku-green-deep: #0d4618;  /* pressed, headings */
  --kuku-leaf: #7cb82f;        /* light accent: focus rings */
  --kuku-tint: #f3f8ec;        /* page tint behind sign-in */
  --kuku-comb: #ca0404;        /* rooster red */
  --kuku-yolk: #fcb917;        /* chick yellow */
}
a { color: var(--kuku-green); }
a:hover { color: var(--kuku-green-dark); }
.text-primary { color: var(--kuku-green) !important; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { background-color: var(--kuku-green); border-color: var(--kuku-green); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--kuku-green-dark); border-color: var(--kuku-green-dark); }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--kuku-green-deep); border-color: var(--kuku-green-deep); }
.btn-primary:focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem rgba(124, 184, 47, .5); }
.btn-outline-primary { color: var(--kuku-green); border-color: var(--kuku-green); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--kuku-green); border-color: var(--kuku-green); color: #fff; }
.card-primary.card-outline { border-top-color: var(--kuku-green); }
.card-primary:not(.card-outline) > .card-header { background-color: var(--kuku-green); }
.page-item.active .page-link { background-color: var(--kuku-green); border-color: var(--kuku-green); color: #fff; }
.page-link { color: var(--kuku-green); }
.form-control:focus, .custom-select:focus { border-color: var(--kuku-leaf); box-shadow: 0 0 0 .2rem rgba(124, 184, 47, .25); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--kuku-green); border-color: var(--kuku-green); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(124, 184, 47, .25); }

/* ---- Sidebar (light) with the Kuku wordmark; the rooster icon shows only when the menu is collapsed ---- */
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active { background-color: var(--kuku-green); color: #fff; }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:not(.active):hover { background-color: var(--kuku-tint); color: var(--kuku-green-deep); }
.nav-sidebar .nav-header { color: #6c757d; font-size: .75rem; letter-spacing: .04em; }
.main-sidebar .brand-link { display: flex; align-items: center; height: 57px; padding: .25rem .75rem; border-bottom: 1px solid #e6eadf; }
.main-sidebar .brand-link .brand-image { display: none; float: none; margin: 0 auto; max-height: 36px; width: 36px; border-radius: 8px; box-shadow: none; opacity: 1; }
.main-sidebar .brand-text { display: flex; align-items: center; }
.brand-wordmark { height: 49px; width: auto; }
.brand-suffix { margin-left: .5rem; padding: .1rem .45rem; border-radius: 4px; background: var(--kuku-tint); color: var(--kuku-green-deep); font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
@media (min-width: 992px) {
  .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .brand-image { display: block; }
  .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link { padding: .25rem 0; }
}

/* ---- Sign-in and error pages ---- */
.login-page { background: var(--kuku-tint); }
.login-logo { margin-bottom: 1rem; }
.login-card-body .login-logo .login-wordmark { max-width: 260px; }
.login-wordmark { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.login-subtitle { margin-top: -.25rem; color: var(--kuku-green-deep); font-size: 1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.table td, .table th { vertical-align: middle; }
.rate-input { min-width: 88px; max-width: 170px; font-weight: 600; }
.change-input { min-width: 78px; }
.rate-board .table th, .rate-board .table td { padding-left: .5rem; padding-right: .5rem; }
.rate-board .card-header .badge { text-transform: capitalize; font-weight: 500; }
.sticky-actions {
  position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid #dee2e6;
  margin: 0 -7.5px 1rem; padding: .75rem 1rem; box-shadow: 0 -2px 6px rgba(0, 0, 0, .06);
}
.info-box .info-box-number small { font-weight: 400; font-size: .75rem; }
.main-header .btn-link.nav-link { color: rgba(0, 0, 0, .5); padding: .5rem 1rem; }
.main-header .btn-link.nav-link:hover { color: rgba(0, 0, 0, .7); }
details > summary { list-style: none; }
.share-text, .push-preview { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .875rem; background: var(--kuku-tint); border: 1px solid #e6eadf; border-radius: 6px; padding: .6rem .75rem; margin-bottom: .75rem; }
.share-text { max-height: 320px; overflow: auto; }
.push-preview { margin-bottom: 0; }
.message-card .card-title { font-size: 1rem; }
.import-preview { max-height: 480px; overflow: auto; }
.code-input { letter-spacing: .2em; font-weight: 600; }
.code-group { max-width: 16rem; }
.template-input { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; resize: vertical; }
.placeholder-chip { cursor: help; }
.sub-actions summary { display: inline-block; }
.delay-input { width: 4.5rem; }
.sub-actions[open] .sub-actions-panel { position: absolute; right: 1rem; z-index: 10; width: 220px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: .6rem; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.sub-actions-panel { white-space: normal; }
.recovery-codes { columns: 2; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; background: var(--kuku-tint); border-radius: 6px; padding: .75rem 1rem; }
.qr-box img { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid #e6eadf; border-radius: 6px; }
details pre { max-width: 360px; overflow: auto; background: #f8f9fa; padding: .4rem; border-radius: 4px; }

/* phones: keep City | Previous | Rate | Change on one screen without sideways scrolling */
@media (max-width: 575.98px) {
  .rate-board .table th, .rate-board .table td { padding-left: .3rem; padding-right: .3rem; font-size: .9rem; }
  .rate-input { min-width: 76px; }
  .change-input { min-width: 64px; }
  .rate-board .form-control-sm { padding-left: .35rem; padding-right: .35rem; }
}