/* =========================================================
   SATCRAFTS MODERN UI ACTION SYSTEM (v4)
   Soft-filled controls, rounded icons and clear action hierarchy.
   ========================================================= */
:root {
    --sc-primary: #1769e0;
    --sc-primary-hover: #0f5aca;
    --sc-primary-soft: #eaf2ff;
    --sc-ink: #172033;
    --sc-muted: #667085;
    --sc-surface: #ffffff;
    --sc-soft: #f3f5f7;
    --sc-soft-hover: #e9edf2;
    --sc-border: #e5e9ef;
    --sc-danger: #c92c3a;
    --sc-danger-soft: #fff0f1;
    --sc-success: #157347;
    --sc-success-soft: #eaf8f0;
    --sc-warning: #996000;
    --sc-warning-soft: #fff5d9;
}

.sc-icon {
    width: 1.08rem;
    height: 1.08rem;
    flex: 0 0 1.08rem;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .46rem;
    white-space: nowrap;
    font-weight: 650;
    letter-spacing: -.01em;
}

/* ---------------------------------------------------------
   Bootstrap button modernization - project wide
   --------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: .72rem;
    min-height: 40px;
    padding: .52rem .9rem;
    border-width: 0 !important;
    font-weight: 650;
    box-shadow: none;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .18) !important;
}

.btn-sm {
    min-height: 34px;
    padding: .38rem .68rem;
    border-radius: .6rem !important;
    font-size: .82rem;
}

.btn-primary {
    background: var(--sc-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(23, 105, 224, .18);
}
.btn-primary:hover { background: var(--sc-primary-hover) !important; box-shadow: 0 6px 16px rgba(23,105,224,.23); }

.btn-secondary,
.btn-outline-secondary {
    background: var(--sc-soft) !important;
    color: #344054 !important;
    border: 0 !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover { background: var(--sc-soft-hover) !important; color: #172033 !important; }

.btn-outline-primary {
    background: var(--sc-primary-soft) !important;
    color: #125fcf !important;
    border: 0 !important;
}
.btn-outline-primary:hover { background: #dceaff !important; color: #0b55bd !important; }

.btn-success,
.btn-outline-success {
    background: var(--sc-success-soft) !important;
    color: var(--sc-success) !important;
    border: 0 !important;
}
.btn-success:hover,
.btn-outline-success:hover { background: #d9f2e4 !important; color: #0e623a !important; }

.btn-danger,
.btn-outline-danger {
    background: var(--sc-danger-soft) !important;
    color: var(--sc-danger) !important;
    border: 0 !important;
}
.btn-danger:hover,
.btn-outline-danger:hover { background: #ffe1e4 !important; color: #ad2030 !important; }

.btn-warning,
.btn-outline-warning {
    background: var(--sc-warning-soft) !important;
    color: var(--sc-warning) !important;
    border: 0 !important;
}

.btn-dark,
.btn-outline-dark {
    background: #20242b !important;
    color: #fff !important;
    border: 0 !important;
}

.btn:disabled,
.btn.disabled {
    opacity: 1 !important;
    background: #f2f4f7 !important;
    color: #98a2b3 !important;
    box-shadow: none !important;
}

/* Compact table actions look like modern action chips. */
.table td .btn.sc-icon-btn,
.table td .btn-sm {
    min-height: 32px;
    border-radius: .58rem !important;
}

/* Icon-only controls (menu, tiny row utilities). */
.sc-icon-only,
.admin-menu-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
    border-radius: .72rem !important;
    background: #f2f4f7 !important;
    color: #344054 !important;
}
.sc-icon-only .sc-action-label { display: none; }

/* Header action style */
.top-header .btn {
    min-height: 36px;
}

/* ---------------------------------------------------------
   Sidebar icons
   --------------------------------------------------------- */
.sidebar .nav-link,
.sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: .72rem;
}
.sidebar .nav-link .sc-icon,
.sidebar .sidebar-link .sc-icon {
    width: 1.08rem;
    height: 1.08rem;
    opacity: .9;
}

/* ---------------------------------------------------------
   Product management module links
   --------------------------------------------------------- */
.sc-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
.sc-module-link {
    min-height: 72px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    padding: .85rem .95rem !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: .85rem !important;
    background: #fff !important;
    color: var(--sc-ink) !important;
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(16,24,40,.04);
}
.sc-module-link:hover {
    transform: translateY(-2px);
    border-color: #cad8ec !important;
    box-shadow: 0 8px 18px rgba(16,24,40,.08);
    color: var(--sc-primary) !important;
}
.sc-module-link .sc-icon {
    width: 1.25rem;
    height: 1.25rem;
    padding: .5rem;
    box-sizing: content-box;
    border-radius: .68rem;
    background: var(--sc-primary-soft);
    color: var(--sc-primary);
}
.sc-module-link.is-current {
    background: #f8fafc !important;
    color: #98a2b3 !important;
    box-shadow: none;
}
.sc-module-link.is-current .sc-icon {
    background: #eef1f4;
    color: #98a2b3;
}

/* ---------------------------------------------------------
   Customer storefront - rounded commerce CTAs
   --------------------------------------------------------- */
.store-body .btn:not(.btn-sm),
.store-body a.sc-icon-btn,
.store-body button.sc-icon-btn {
    min-height: 44px;
    border-radius: 999px !important;
}

.store-body .btn-primary,
.store-body .btn-dark {
    box-shadow: 0 5px 14px rgba(20, 24, 31, .14);
}

/* Primary commerce action: high visibility, warm and approachable. */
.store-body .sc-commerce-primary {
    background: #f4b400 !important;
    color: #151515 !important;
    box-shadow: 0 4px 11px rgba(177,121,0,.18);
}
.store-body .sc-commerce-primary:hover { background: #e7aa00 !important; }

.store-body .sc-whatsapp {
    background: #168f50 !important;
    color: #fff !important;
}
.store-body .sc-whatsapp:hover { background: #117c44 !important; }

@media (max-width: 991.98px) {
    .sc-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .admin-main-content .table .btn-sm.sc-icon-btn { padding: .36rem .5rem; }
    .admin-main-content .d-flex.justify-content-between { gap: .75rem; }
    .sc-module-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .sc-module-link {
        min-height: 64px;
        padding: .7rem !important;
        font-size: .86rem;
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .sc-module-link .sc-icon {
        width: 1.05rem;
        height: 1.05rem;
        padding: .38rem;
    }
}


/* =========================================================
   SATCRAFTS UI v5 - navigation alignment + mobile commerce bar
   ========================================================= */

/* One geometry for every admin menu item.  This removes the visual
   drift caused by mixing Bootstrap nav-link and custom sidebar-link. */
.admin-sidebar-nav {
    padding: .65rem .7rem 1.25rem !important;
}
.admin-sidebar-nav .nav-link,
.admin-sidebar-nav .sidebar-link {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: .72rem;
    width: 100%;
    min-height: 42px;
    margin: 2px 0 !important;
    padding: .62rem .72rem !important;
    border-radius: .72rem !important;
    color: #f8fafc !important;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
}
.admin-sidebar-nav .nav-link .sc-icon,
.admin-sidebar-nav .sidebar-link .sc-icon {
    grid-column: 1;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    opacity: .86;
}
.admin-sidebar-nav .nav-link:not(.sc-icon-btn)::before,
.admin-sidebar-nav .sidebar-link:not(.sc-icon-btn)::before {
    content: "";
    width: 18px;
    height: 18px;
}
.admin-sidebar-nav .nav-link:hover,
.admin-sidebar-nav .sidebar-link:hover {
    background: rgba(255,255,255,.085) !important;
}
.admin-sidebar-nav .menu-title,
.admin-sidebar-nav .sidebar-section-title {
    margin: 1.15rem 0 .35rem !important;
    padding: 0 .72rem !important;
    color: #8d98a4;
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .07em;
}

/* Admin header controls: no outlined Bootstrap rectangles. */
.admin-header-actions .admin-logout-btn {
    min-height: 36px;
    padding: .45rem .72rem;
    background: #eef1f4 !important;
    color: #344054 !important;
    border-radius: .65rem !important;
}
.admin-header-actions .admin-logout-btn:hover {
    background: #e2e7ec !important;
    color: #111827 !important;
}

/* Mobile storefront behaves as a compact commerce toolbar. */
.store-mobile-actions {
    display: flex;
    align-items: center;
    gap: .34rem;
}
.store-mobile-action {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f1ec;
    color: #27231f;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease, transform .12s ease;
}
.store-mobile-action:hover,
.store-mobile-action:focus-visible {
    background: #ece5dd;
    color: #171513;
}
.store-mobile-action:active { transform: scale(.96); }
.store-mobile-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.store-mobile-cart {
    background: #1f1b18;
    color: #fff;
}
.store-mobile-cart:hover,
.store-mobile-cart:focus-visible {
    background: #3a312a;
    color: #fff;
}
.store-mobile-account-menu {
    width: 218px;
    margin-top: .55rem !important;
    padding: .5rem;
    border: 1px solid #ebe4dc;
    border-radius: 14px;
    background: #fffdfa;
}
.store-mobile-account-name {
    display: flex;
    flex-direction: column;
    padding: .55rem .65rem .65rem;
}
.store-mobile-account-name small { color: #8a8179; font-size: .68rem; }
.store-mobile-account-name strong { color: #211d19; font-size: .9rem; }
.store-mobile-account-menu .dropdown-item {
    border-radius: .55rem;
    padding: .58rem .65rem;
    color: #39332e;
    font-size: .84rem;
}
.store-mobile-account-menu .dropdown-item:hover { background: #f5f1ec; }
.store-mobile-account-menu .store-mobile-logout {
    color: #b42332;
    font-weight: 700;
}

/* Desktop public header actions also lose the old pill/outline feel. */
.store-nav-links > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .45rem .7rem !important;
    border-radius: .65rem;
    color: #3d3732;
    font-weight: 650;
}
.store-nav-links > .nav-item > .nav-link:hover { background: #f5f1ec; }
.store-cart-btn {
    min-width: 42px;
    border-radius: .7rem !important;
    background: #211d19 !important;
    color: #fff !important;
    box-shadow: none !important;
}

@media (max-width: 575.98px) {
    .store-navbar .store-container {
        flex-wrap: nowrap;
        gap: .5rem;
    }
    .store-brand-v2 { margin-right: auto !important; min-width: 0; }
    .store-brand-mark { width: 34px; height: 34px; flex: 0 0 34px; }
    .store-brand-copy strong { font-size: .75rem; letter-spacing: .15em; }
    .store-brand-copy small { font-size: .48rem; }
    .store-mobile-action { width: 36px; height: 36px; }
    .store-mobile-action svg { width: 17px; height: 17px; }
    .admin-header-actions > span { display: none; }
    .admin-header-actions .admin-logout-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        font-size: 0;
        border-radius: 50% !important;
    }
    .admin-header-actions .admin-logout-btn::before {
        content: "↪";
        font-size: 1.1rem;
        line-height: 1;
    }
}