/* ==========================================================================
   e{Profitify} — Shared UI Stylesheet
   --------------------------------------------------------------------------
   Brand theme built on the logo teal (#268690). Reusable across pages.

   HOW TO USE
     1. Load the fonts and this file AFTER bootstrap.min.css / FontAwesome:
          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
          <link rel="stylesheet" href="../css/eprofitify-ui.css">
     2. Opt in by adding  class="eui"  to <body>.
        Base styles and Bootstrap/SweetAlert overrides only apply inside .eui,
        so linking this file on an existing page changes nothing until then.
     3. Build with the  eui-*  components below. Page-specific styles should
        live in the page and reuse the  --eui-*  tokens.

   CONTENTS
     01. DESIGN TOKENS
     02. BASE
     03. LAYOUT
     04. PAGE HERO / HEADER
     05. SURFACES (CARD)
     06. BUTTONS
     07. FORM CONTROLS
     08. TOOLBAR
     09. BADGES & CHIPS
     10. GRID
     11. PAGINATION
     12. FEEDBACK (SPINNER, SKELETON, EMPTY STATE)
     13. BOOTSTRAP BRIDGE
     14. SWEETALERT2 THEME
     15. UTILITIES
     16. REDUCED MOTION
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Brand — sampled from the logo */
    --eui-primary:        #268690;
    --eui-primary-dark:   #1c6a72;
    --eui-primary-darker: #15555c;
    --eui-primary-deep:   #0d2e32;   /* dark surfaces: sidebars, tooltips */
    --eui-primary-accent: #2fa3ae;   /* gradient ends, highlights */
    --eui-primary-200:    #b5dde0;
    --eui-primary-light:  #e4f3f4;
    --eui-primary-50:     #f2f9f9;
    --eui-primary-rgb:    38, 134, 144;
    --eui-gradient:       linear-gradient(135deg, var(--eui-primary) 0%, var(--eui-primary-dark) 100%);

    /* Teal-tinted neutrals */
    --eui-bg:             #f1f6f6;
    --eui-surface:        #ffffff;
    --eui-border:         #dce8e9;
    --eui-border-strong:  #c3d8da;
    --eui-text:           #0f2528;
    --eui-text-muted:     #4f6a6d;
    --eui-text-faint:     #86999b;

    /* Status colours keep their usual meaning */
    --eui-success:        #10b981;
    --eui-success-light:  #e7f8f1;
    --eui-warning:        #f59e0b;
    --eui-warning-light:  #fef4e2;
    --eui-danger:         #d8464a;
    --eui-danger-light:   #fbeaea;

    /* Type */
    --eui-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --eui-font-display:   'Plus Jakarta Sans', var(--eui-font);

    /* Shape & depth */
    --eui-radius-sm:      8px;
    --eui-radius:         12px;
    --eui-radius-lg:      16px;
    --eui-radius-pill:    999px;
    --eui-shadow-sm:      0 1px 2px rgba(13, 46, 50, 0.06);
    --eui-shadow:         0 1px 2px rgba(13, 46, 50, 0.06), 0 6px 20px -12px rgba(13, 46, 50, 0.18);
    --eui-shadow-lg:      0 4px 10px rgba(13, 46, 50, 0.08), 0 18px 36px -16px rgba(13, 46, 50, 0.30);
    --eui-focus-ring:     0 0 0 3px rgba(var(--eui-primary-rgb), 0.25);

    /* Layout — tight gutters, wide content */
    --eui-gutter:         16px;
    --eui-container:      1360px;
    --eui-sticky-top:     0px;       /* set to the fixed navbar height if a page has one */

    --eui-ease:           cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   02. BASE
   ========================================================================== */

body.eui {
    height: auto;
    min-height: 100vh;
    margin: 0;
    background: var(--eui-bg);
    color: var(--eui-text);
    font-family: var(--eui-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.eui ::selection { background: rgba(var(--eui-primary-rgb), 0.18); }

.eui h1, .eui h2, .eui h3, .eui h4 {
    font-family: var(--eui-font-display);
    color: var(--eui-text);
    letter-spacing: -0.01em;
}

.eui a { color: var(--eui-primary-dark); }
.eui a:hover { color: var(--eui-primary-darker); }

.eui :focus-visible {
    outline: 2px solid var(--eui-primary);
    outline-offset: 2px;
}


/* ==========================================================================
   03. LAYOUT
   ========================================================================== */

.eui-container {
    width: 100%;
    max-width: var(--eui-container);
    margin: 0 auto;
    padding: 0 var(--eui-gutter);
}

.eui-section { padding: 20px 0; }

.eui-stack   { display: flex; flex-direction: column; gap: 12px; }
.eui-row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eui-spacer  { flex: 1; }


/* ==========================================================================
   04. PAGE HERO / HEADER
   ========================================================================== */

.eui-hero {
    position: relative;
    padding: 28px 0 22px;
    background:
        radial-gradient(900px 320px at 0% 0%, var(--eui-primary-light) 0%, transparent 65%),
        radial-gradient(700px 260px at 100% 0%, rgba(var(--eui-primary-rgb), 0.08) 0%, transparent 60%);
}

.eui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--eui-radius-pill);
    background: var(--eui-primary-light);
    color: var(--eui-primary-darker);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.eui-title {
    margin: 10px 0 6px;
    font-family: var(--eui-font-display);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--eui-text);
}

.eui-title .eui-brand { color: var(--eui-primary); }

.eui-subtitle {
    max-width: 640px;
    margin: 0;
    color: var(--eui-text-muted);
    font-size: 15px;
}

/* Numbered "how it works" steps */
.eui-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.eui-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--eui-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.eui-steps li span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--eui-surface);
    border: 1px solid var(--eui-primary-200);
    color: var(--eui-primary-dark);
    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================================
   05. SURFACES (CARD)
   ========================================================================== */

.eui-card {
    background: var(--eui-surface);
    border: 1px solid var(--eui-border);
    border-radius: var(--eui-radius);
    box-shadow: var(--eui-shadow);
}

.eui-card--pad { padding: 16px; }

.eui-card--interactive {
    transition: transform 0.25s var(--eui-ease), box-shadow 0.25s var(--eui-ease), border-color 0.25s;
}

.eui-card--interactive:hover {
    transform: translateY(-3px);
    border-color: var(--eui-primary-200);
    box-shadow: var(--eui-shadow-lg);
}


/* ==========================================================================
   06. BUTTONS
   ========================================================================== */

.eui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--eui-radius-sm);
    background: transparent;
    color: var(--eui-text);
    font-family: var(--eui-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.eui-btn:hover { text-decoration: none; }
.eui-btn:active { transform: translateY(1px); }
.eui-btn:focus-visible { outline: none; box-shadow: var(--eui-focus-ring); }
.eui-btn[disabled], .eui-btn.is-disabled { opacity: 0.55; pointer-events: none; }

.eui-btn--primary,
.eui .eui-btn--primary {
    background: var(--eui-gradient);
    color: #fff;
    box-shadow: 0 1px 2px rgba(13, 46, 50, 0.12), 0 6px 14px -8px rgba(var(--eui-primary-rgb), 0.7);
}
.eui-btn--primary:hover,
.eui .eui-btn--primary:hover {
    background: var(--eui-primary-dark);
    color: #fff;
}

.eui-btn--secondary,
.eui .eui-btn--secondary {
    background: var(--eui-surface);
    border-color: var(--eui-border-strong);
    color: var(--eui-primary-dark);
}
.eui-btn--secondary:hover,
.eui .eui-btn--secondary:hover {
    background: var(--eui-primary-light);
    border-color: var(--eui-primary-200);
    color: var(--eui-primary-darker);
}

.eui-btn--ghost,
.eui .eui-btn--ghost {
    color: var(--eui-primary-dark);
}
.eui-btn--ghost:hover,
.eui .eui-btn--ghost:hover {
    background: var(--eui-primary-light);
    color: var(--eui-primary-darker);
}

.eui-btn--danger,
.eui .eui-btn--danger { background: var(--eui-danger); color: #fff; }
.eui-btn--danger:hover,
.eui .eui-btn--danger:hover { background: #b93a3e; color: #fff; }

.eui-btn--sm    { min-height: 34px; padding: 0 12px; font-size: 13px; }
.eui-btn--lg    { min-height: 48px; padding: 0 22px; font-size: 15px; }
.eui-btn--block { width: 100%; }
.eui-btn--icon  { width: 40px; padding: 0; }


/* ==========================================================================
   07. FORM CONTROLS
   ========================================================================== */

.eui-label {
    display: block;
    margin-bottom: 6px;
    color: var(--eui-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.eui-input,
.eui-select {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--eui-border-strong);
    border-radius: var(--eui-radius-sm);
    background-color: var(--eui-surface);
    color: var(--eui-text);
    font-family: var(--eui-font);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.eui-input::placeholder { color: var(--eui-text-faint); }

.eui-input:hover,
.eui-select:hover { border-color: var(--eui-primary-200); }

.eui-input:focus,
.eui-select:focus {
    outline: none;
    border-color: var(--eui-primary);
    box-shadow: var(--eui-focus-ring);
}

.eui-select {
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23268690' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Input with a leading icon:  <div class="eui-input-icon"><i class="fas fa-search"></i><input class="eui-input"></div> */
.eui-input-icon { position: relative; }

.eui-input-icon > i,
.eui-input-icon > .eui-input-icon__lead {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--eui-primary);
    font-size: 14px;
    pointer-events: none;
}

.eui-input-icon > .eui-input { padding-left: 40px; }

/* Hide WebKit's native clear "x" when a page provides its own. */
.eui-input--no-native-clear::-webkit-search-cancel-button { -webkit-appearance: none; }


/* ==========================================================================
   08. TOOLBAR
   ========================================================================== */

.eui-toolbar {
    padding: 12px 0;
    background: rgba(241, 246, 246, 0.88);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.eui-toolbar--sticky {
    position: -webkit-sticky;
    position: sticky;
    top: var(--eui-sticky-top);
    z-index: 20;
}

/* Add .is-stuck from JS once the page scrolls past the toolbar. */
.eui-toolbar.is-stuck {
    border-bottom-color: var(--eui-border);
    box-shadow: 0 8px 20px -18px rgba(13, 46, 50, 0.45);
}

.eui-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


/* ==========================================================================
   09. BADGES & CHIPS
   ========================================================================== */

.eui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--eui-radius-pill);
    background: var(--eui-primary-light);
    color: var(--eui-primary-darker);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.eui-badge--success { background: var(--eui-success-light); color: #0b7a57; }
.eui-badge--warning { background: var(--eui-warning-light); color: #95600a; }
.eui-badge--danger  { background: var(--eui-danger-light);  color: #a8353a; }

.eui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--eui-border-strong);
    border-radius: var(--eui-radius-pill);
    background: var(--eui-surface);
    color: var(--eui-text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.eui-chip:hover {
    border-color: var(--eui-primary-200);
    background: var(--eui-primary-light);
    color: var(--eui-primary-darker);
    text-decoration: none;
}

.eui-chip.is-active {
    border-color: var(--eui-primary);
    background: var(--eui-primary);
    color: #fff;
}


/* ==========================================================================
   10. GRID
   ========================================================================== */

/* Responsive card grid. Override --eui-grid-min per page to change density. */
.eui-grid {
    --eui-grid-min: 280px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--eui-grid-min), 100%), 1fr));
    gap: 20px;
}

.eui-grid > .eui-grid__full { grid-column: 1 / -1; }


/* ==========================================================================
   11. PAGINATION
   --------------------------------------------------------------------------
   Styles Bootstrap's  ul.pagination > li.page-item > a.page-link  markup.
   ========================================================================== */

.eui-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 28px 0 8px;
    padding: 0;
    list-style: none;
}

.eui-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--eui-border);
    border-radius: var(--eui-radius-sm) !important;
    background: var(--eui-surface);
    color: var(--eui-text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}

.eui-pagination .page-link:hover {
    border-color: var(--eui-primary-200);
    background: var(--eui-primary-light);
    color: var(--eui-primary-darker);
}

.eui-pagination .page-link:focus { box-shadow: var(--eui-focus-ring); }

.eui-pagination .page-item.active .page-link {
    border-color: var(--eui-primary);
    background: var(--eui-primary);
    color: #fff;
    cursor: default;
}

.eui-pagination .page-item.disabled .page-link {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 576px) {
    .eui-pagination .page-link { min-width: 34px; height: 34px; font-size: 13px; }
}


/* ==========================================================================
   12. FEEDBACK (SPINNER, SKELETON, EMPTY STATE)
   ========================================================================== */

.eui-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--eui-primary-light);
    border-top-color: var(--eui-primary);
    border-radius: 50%;
    animation: eui-spin 0.8s linear infinite;
}

.eui-spinner--sm { width: 18px; height: 18px; border-width: 2px; }

@keyframes eui-spin { to { transform: rotate(360deg); } }

/* Shimmering placeholder block. Size it with width/height or aspect-ratio. */
.eui-skeleton {
    display: block;
    border-radius: var(--eui-radius-sm);
    background: linear-gradient(90deg, #e6efef 0%, #f4f9f9 45%, #e6efef 90%);
    background-size: 200% 100%;
    animation: eui-shimmer 1.3s ease-in-out infinite;
}

@keyframes eui-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

.eui-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--eui-text-muted);
}

.eui-empty__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--eui-primary-light);
    color: var(--eui-primary);
    font-size: 24px;
}

.eui-empty__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--eui-text);
}

.eui-empty p { margin: 0 auto 16px; max-width: 420px; }


/* ==========================================================================
   13. BOOTSTRAP BRIDGE
   --------------------------------------------------------------------------
   Re-colours common Bootstrap 4 classes to the brand teal inside .eui pages,
   so legacy markup (and HTML returned by AJAX endpoints) matches the theme.
   ========================================================================== */

.eui .text-primary,
.eui .text-info            { color: var(--eui-primary-dark) !important; }
.eui .bg-primary,
.eui .bg-info              { background-color: var(--eui-primary) !important; }
.eui .border-primary,
.eui .border-info          { border-color: var(--eui-primary) !important; }

.eui .btn-primary,
.eui .btn-info {
    background-color: var(--eui-primary);
    border-color: var(--eui-primary);
    color: #fff;
}
.eui .btn-primary:hover,
.eui .btn-info:hover,
.eui .btn-primary:not(:disabled):not(.disabled):active,
.eui .btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--eui-primary-dark);
    border-color: var(--eui-primary-dark);
    color: #fff;
}
.eui .btn-primary:focus,
.eui .btn-info:focus       { box-shadow: var(--eui-focus-ring); }

.eui .btn-outline-primary,
.eui .btn-outline-info {
    border-color: var(--eui-primary);
    color: var(--eui-primary-dark);
}
.eui .btn-outline-primary:hover,
.eui .btn-outline-info:hover {
    background-color: var(--eui-primary);
    color: #fff;
}

.eui .btn-link            { color: var(--eui-primary-dark); }

.eui .form-control:focus,
.eui .custom-select:focus {
    border-color: var(--eui-primary);
    box-shadow: var(--eui-focus-ring);
}

.eui .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--eui-primary);
    border-color: var(--eui-primary);
}

.eui .badge-primary,
.eui .badge-info           { background-color: var(--eui-primary); }

.eui .page-item.active .page-link {
    background-color: var(--eui-primary);
    border-color: var(--eui-primary);
}
.eui .page-link            { color: var(--eui-primary-dark); }

.eui .dropdown-item.active,
.eui .dropdown-item:active { background-color: var(--eui-primary); }

.eui .tooltip-inner        { background-color: var(--eui-primary-deep); }
.eui .bs-tooltip-top .arrow::before,
.eui .bs-tooltip-auto[x-placement^="top"] .arrow::before       { border-top-color: var(--eui-primary-deep); }
.eui .bs-tooltip-bottom .arrow::before,
.eui .bs-tooltip-auto[x-placement^="bottom"] .arrow::before    { border-bottom-color: var(--eui-primary-deep); }

.eui .modal-content {
    border: 1px solid var(--eui-border);
    border-radius: var(--eui-radius-lg);
    box-shadow: var(--eui-shadow-lg);
}


/* ==========================================================================
   14. SWEETALERT2 THEME
   ========================================================================== */

.eui .swal2-popup {
    border-radius: var(--eui-radius-lg);
    font-family: var(--eui-font);
    color: var(--eui-text);
}

.eui .swal2-title { font-family: var(--eui-font-display); color: var(--eui-text); }

.eui .swal2-styled.swal2-confirm {
    background: var(--eui-primary) !important;
    border-radius: var(--eui-radius-sm);
    font-weight: 600;
}
.eui .swal2-styled.swal2-confirm:hover { background: var(--eui-primary-dark) !important; }
.eui .swal2-styled.swal2-confirm:focus { box-shadow: var(--eui-focus-ring); }

.eui .swal2-styled.swal2-cancel { border-radius: var(--eui-radius-sm); }

.eui .swal2-icon.swal2-success { border-color: var(--eui-primary-200); color: var(--eui-primary); }
.eui .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--eui-primary); }
.eui .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--eui-primary-rgb), 0.3); }
.eui .swal2-icon.swal2-info { border-color: var(--eui-primary-200); color: var(--eui-primary); }


/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.eui-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.eui-muted   { color: var(--eui-text-muted); }
.eui-faint   { color: var(--eui-text-faint); }
.eui-brand   { color: var(--eui-primary); }
.eui-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .eui *,
    .eui *::before,
    .eui *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}