/* ==========================================================================
   DairyCore UI kit: the coloured, clearly clickable button and tab look first built for the cooperative
   side, shared by every audience (farm app, cooperative app, public website, sign-in pages).
   Load AFTER dairycore.css. Colours come from the --dc-* tokens there (--dc-green #00b894).
   ========================================================================== */
:root {
    --ui-green:        #00b894;
    --ui-green-dark:   #009a7b;
    --ui-green-ink:    #007a63;
    --ui-green-tint:   #f0fbf8;
    --ui-green-line:   #9fe3d3;
    --ui-blue:         #2f66d0;
    --ui-blue-ink:     #1f4fae;
    --ui-blue-tint:    #eef4ff;
    --ui-blue-line:    #6c97e8;
    --ui-violet:       #6f5bd6;
    --ui-violet-ink:   #5b4bb7;
    --ui-violet-tint:  #f3f1fd;
    --ui-violet-line:  #b9b0ec;
    --ui-ink:          #1a2332;
}

/* ---- Buttons: bold label, a little depth, lift on hover, press on click -------------------------------- */
.btn { font-weight: 600; transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .05s; }
.btn:active:not(:disabled):not(.disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--ui-green-line); outline-offset: 1px; }
.btn-primary, .btn-success { box-shadow: 0 1px 3px rgba(26,35,50,.18); }
.btn-primary:hover, .btn-success:hover { box-shadow: 0 3px 8px rgba(0,184,148,.35); }
.btn-primary { background: var(--ui-green); border-color: #00a383; }
.btn-primary:hover, .btn-primary:focus { background: var(--ui-green-dark); border-color: #008a6f; }
.btn-outline-primary { background: #e8f8f4; border-color: var(--ui-green); color: var(--ui-green-ink); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--ui-green); border-color: var(--ui-green); color: #fff; }

/* Action buttons (header quick actions, page-header actions, card headers, table row actions): bordered, tinted, obvious. */
.dc-topbar__actions .btn, .dc-page-header .btn, .card-header .btn, .dc-actions .btn { box-shadow: 0 1px 3px rgba(26,35,50,.16); }
.dc-topbar__actions .btn:hover, .dc-page-header .btn:hover, .card-header .btn:hover, .dc-actions .btn:hover { box-shadow: 0 3px 8px rgba(26,35,50,.22); }
.dc-topbar__actions .btn-outline-secondary, .dc-page-header .btn-outline-secondary, .card-header .btn-outline-secondary, .dc-actions .btn-outline-secondary {
    background: var(--ui-blue-tint); border-color: var(--ui-blue-line); color: var(--ui-blue-ink); }
.dc-topbar__actions .btn-outline-secondary:hover, .dc-page-header .btn-outline-secondary:hover, .card-header .btn-outline-secondary:hover, .dc-actions .btn-outline-secondary:hover {
    background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; }
.dc-topbar__actions .btn-outline-danger, .dc-page-header .btn-outline-danger { background: #fff1f0; }

/* ---- Tab rows (related pages): mint buttons, green when current. Used by .coop-tabs and any Bootstrap nav-pills. ---- */
.coop-tabs, .nav-pills { gap: .5rem; }
.coop-tabs { flex-wrap: nowrap; overflow-x: auto; padding: .1rem .1rem .6rem; scrollbar-width: thin; }
.nav-pills { padding-bottom: .25rem; }
.coop-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; font-size: .84rem; font-weight: 600; padding: .45rem .95rem; color: var(--ui-green-ink); background: var(--ui-green-tint);
    border: 1px solid var(--ui-green-line); border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,122,99,.12);
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .05s; }
.coop-tabs .nav-link:hover, .nav-pills .nav-link:hover { background: #d9f6ee; border-color: var(--ui-green); color: #00634f; box-shadow: 0 2px 6px rgba(0,184,148,.28); }
.coop-tabs .nav-link:active, .nav-pills .nav-link:active { transform: translateY(1px); box-shadow: none; }
.coop-tabs .nav-link:focus-visible, .nav-pills .nav-link:focus-visible { outline: 3px solid var(--ui-green-line); outline-offset: 1px; }
.coop-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ui-green); border-color: #00a383; color: #fff; box-shadow: 0 2px 6px rgba(0,184,148,.4); }
.coop-tabs__quiet .nav-link { color: var(--ui-violet-ink); background: var(--ui-violet-tint); border: 1px dashed var(--ui-violet-line); box-shadow: none; }
.coop-tabs__quiet .nav-link:hover { background: #e7e3fa; border-color: #7c6bd6; color: #473a99; }
.coop-tabs__quiet .nav-link.active { background: var(--ui-violet); border-style: solid; border-color: var(--ui-violet); color: #fff; }
.coop-tabs__quiet .nav-link::before { content: "\2699\FE0E"; margin-right: .35rem; }

/* ---- Cards: soft lift when they are links or have a hover affordance ------------------------------------ */
.card.dc-stat-card { transition: box-shadow .15s, transform .1s; }
a:hover > .card.dc-stat-card { box-shadow: 0 6px 16px rgba(26,35,50,.14) !important; transform: translateY(-1px); }

/* ---- Public website and sign-in pages ------------------------------------------------------------------- */
.btn-hero-primary, .btn-hero-secondary { transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .08s; }
.btn-hero-primary { background: var(--ui-green); box-shadow: 0 10px 24px -8px rgba(0,184,148,.6), 0 1px 3px rgba(26,35,50,.15); }
.btn-hero-primary:hover { background: var(--ui-green-dark); box-shadow: 0 14px 28px -8px rgba(0,184,148,.7); transform: translateY(-2px); }
.btn-hero-primary:active { transform: translateY(0); }
.btn-hero-secondary { background: var(--ui-blue-tint); border: 1.5px solid var(--ui-blue-line); color: var(--ui-blue-ink); box-shadow: 0 1px 3px rgba(26,35,50,.1); }
.btn-hero-secondary:hover { background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(47,102,208,.5); }
.btn-outline-light { border-width: 1.5px; }
.btn-outline-light:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); }
.dc-public .card.h-100, .landing-feature { transition: box-shadow .2s, transform .15s; }
.dc-public .card.h-100:hover { box-shadow: 0 12px 28px rgba(26,35,50,.14) !important; transform: translateY(-3px); }
.dc-public .landing-nav a.small:hover, .dc-public .dc-mobile-nav__link:hover { color: var(--ui-green-ink) !important; }
.dc-public .form-control:focus, .dc-public .form-select:focus { border-color: var(--ui-green); box-shadow: 0 0 0 .2rem rgba(0,184,148,.2); }

@media (prefers-reduced-motion: reduce) {
    .btn, .btn-hero-primary, .btn-hero-secondary, .coop-tabs .nav-link, .nav-pills .nav-link, .dc-public .card.h-100 { transition: none; transform: none !important; }
}