/*
 * nCapsule Component Library
 * Ported from gwstoolbox UI guide (gwstoolbox-main/gws-toolbox/public/ncapsule.html)
 * Theme: red (#EA4335) — nCapsule per the gwstoolbox UI-GUIDE.md product-accent mapping
 */

/* ---------- Tokens ---------- */
:root {
    /* Brand mark color (kept for the nCapsule shield icon and danger states) */
    --ncapsule-red:        #EA4335;
    --ncapsule-red-dark:   #d33426;
    --ncapsule-red-50:     #fef2f2;
    --ncapsule-red-100:    #fee2e2;

    /* Interactive accent — Google Blue (matches gwstoolbox's .text-google-blue / .from-google-blue) */
    --accent:              #4285F4;   /* brand blue, used everywhere visible */
    --accent-dark:         #2563eb;   /* darker blue for hover / gradient end (Tailwind blue-600) */
    --accent-50:           #e8f0fe;   /* light tint for active-state backgrounds */
    --accent-100:          #d2e3fc;
    --accent-300:          #aecbfa;
    --accent-500:          #4285F4;

    --google-gray-50:      #f8f9fa;
    --google-gray-100:     #f1f3f4;
    --google-gray-200:     #e5e7eb;
    --google-gray-300:     #dadce0;
    --google-gray-500:     #5f6368;
    --google-gray-700:     #3c4043;
    --google-gray-900:     #202124;

    --shadow-google:       0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --shadow-google-hover: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    --shadow-google-lg:    0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
}

/* ---------- Cards ---------- */
.google-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--google-gray-200);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.google-card:hover {
    box-shadow: var(--shadow-google-hover);
    transform: translateY(-4px);
}
.google-card-static {
    /* Same look but no hover lift — for static cards (tables, full-page content) */
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--google-gray-200);
    box-shadow: var(--shadow-google);
}

/* ---------- Buttons ---------- */
.btn-google-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.25px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-google);
    border: none;
    cursor: pointer;
    line-height: 1.25;
}
.btn-google-primary:hover {
    background: var(--accent-dark);
    box-shadow: var(--shadow-google-hover);
    color: #fff;
    text-decoration: none;
}
.btn-google-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-google-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--accent);
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.25px;
    border: 1px solid var(--google-gray-300);
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.25;
}
.btn-google-secondary:hover {
    background: var(--google-gray-50);
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.btn-google-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f59e0b;
    color: #fff;
    padding: 8px 20px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.25px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-google);
    border: none;
    cursor: pointer;
    line-height: 1.25;
}
.btn-google-amber:hover {
    background: #d97706;
    box-shadow: var(--shadow-google-hover);
    color: #fff;
    text-decoration: none;
}

/* Smaller compact button variant (for in-row CTAs, "Pay", "Change") */
.btn-google-primary-sm,
.btn-google-secondary-sm,
.btn-google-amber-sm {
    padding: 6px 16px;
    font-size: 12.5px;
}

/* Danger button */
.btn-google-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #dc2626;
    color: #fff;
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-google);
    border: none;
    cursor: pointer;
    line-height: 1.25;
}
.btn-google-danger:hover { background: #b91c1c; box-shadow: var(--shadow-google-hover); color: #fff; }

/* ---------- Form inputs ---------- */
.input-google,
.input-field,
.google-input,
.google-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--google-gray-900);
    background: #fff;
    border: 1px solid var(--google-gray-300);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-google:focus,
.input-field:focus,
.google-input:focus,
.google-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.18);
}
.input-google.is-invalid,
.input-field.is-invalid,
.google-input.is-invalid,
.google-select.is-invalid {
    border-color: #ef4444;
}
.input-google.is-invalid:focus,
.input-field.is-invalid:focus,
.google-input.is-invalid:focus,
.google-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.input-google:disabled,
.input-field:disabled,
.google-input:disabled {
    background: var(--google-gray-50);
    color: var(--google-gray-500);
    cursor: not-allowed;
}
/* Select dropdowns get an arrow indicator */
select.input-field,
select.input-google,
.google-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Form label (gwstoolbox convention) */
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--google-gray-700);
    margin-bottom: 6px;
}
.form-label .required {
    color: var(--ncapsule-red);
    margin-left: 2px;
}
.field-error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
}
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--google-gray-700);
    margin-bottom: 6px;
}

/* ---------- Alerts (Google Material flavor) ---------- */
.alert-google {
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert-google-success { background: #e6f4ea; border-color: #34a85333; color: #137333; }
.alert-google-danger  { background: #fce8e6; border-color: #ea433533; color: #c5221f; }
.alert-google-warning { background: #fef7e0; border-color: #fbbc0533; color: #ea8600; }
.alert-google-info    { background: #e8f0fe; border-color: #4285f433; color: #1967d2; }

/* ---------- Tables ---------- */
.table-google {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}
.table-google thead {
    background: var(--google-gray-50);
    border-bottom: 1px solid var(--google-gray-200);
}
.table-google th {
    text-align: left;
    padding: 12px 24px;
    font-size: 11px;
    font-weight: 600;
    color: var(--google-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table-google td {
    padding: 14px 24px;
    color: var(--google-gray-700);
    border-bottom: 1px solid var(--google-gray-100);
}
.table-google tbody tr:hover { background: #fafbfc; }
.table-google tbody tr:last-child td { border-bottom: 0; }
.table-google a { color: var(--accent); font-weight: 500; }
.table-google a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------- Status pills ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pill-success { background: #e6f4ea; color: #137333; }
.pill-danger  { background: #fce8e6; color: #c5221f; }
.pill-warning { background: #fef7e0; color: #ea8600; }
.pill-info    { background: #e8f0fe; color: #1967d2; }
.pill-neutral { background: var(--google-gray-100); color: var(--google-gray-700); }

/* ---------- Stat card ---------- */
.stat-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--google-gray-200);
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
    box-shadow: var(--shadow-google-hover);
    transform: translateY(-2px);
}
.stat-card-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--google-gray-500);
}
.stat-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--google-gray-900);
    margin-top: 8px;
    line-height: 1.1;
}
.stat-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: var(--shadow-google);
}
.stat-card-icon-red    { background: var(--ncapsule-red); }
.stat-card-icon-orange { background: #ff7a00; }
.stat-card-icon-blue   { background: #4285f4; }
.stat-card-icon-green  { background: #34a853; }
.stat-card-icon-amber  { background: #f59e0b; }

/* Pastel variants (gwstoolbox pattern: tinted bg + colored icon, calmer) */
.stat-card-icon-soft {
    box-shadow: none;
    font-size: 22px;
}
.stat-card-icon-soft.stat-card-icon-red    { background: #fee2e2; color: var(--ncapsule-red); }
.stat-card-icon-soft.stat-card-icon-orange { background: #ffedd5; color: #ea580c; }
.stat-card-icon-soft.stat-card-icon-blue   { background: #dbeafe; color: #1d4ed8; }
.stat-card-icon-soft.stat-card-icon-green  { background: #dcfce7; color: #15803d; }
.stat-card-icon-soft.stat-card-icon-amber  { background: #fef3c7; color: #b45309; }
.stat-card-icon-soft.stat-card-icon-yellow { background: #fef9c3; color: #a16207; }
.stat-card-icon-soft.stat-card-icon-purple { background: #ede9fe; color: #6d28d9; }

/* Smaller, restrained value typography (matches gwstoolbox calm look) */
.stat-card-value-sm {
    font-size: 22px;
    font-weight: 600;
    color: var(--google-gray-900);
    margin-top: 4px;
    line-height: 1.2;
}
.stat-card-label-sm {
    font-size: 13px;
    font-weight: 500;
    color: var(--google-gray-500);
}

/* ---------- Hero Welcome Banner ---------- */
.hero-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    padding: 32px;
    background:
        linear-gradient(135deg, var(--ncapsule-red) 0%, #c5331f 100%);
    box-shadow: var(--shadow-google);
}
.hero-banner-blue {
    background: linear-gradient(135deg, #4285F4 0%, #1d4ed8 100%);
}
.hero-banner h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
}
.hero-banner p {
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    margin: 0;
    max-width: 640px;
}
.hero-banner-decoration {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none;
}
.hero-banner-decoration svg {
    width: 110px;
    height: 110px;
}

/* ---------- Sidebar bottom: user identity card ---------- */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}
.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ncapsule-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.sidebar-user-info {
    min-width: 0;
    flex: 1;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--google-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-email {
    font-size: 11px;
    color: var(--google-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Sidebar collapse button ---------- */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--google-gray-100);
    color: var(--google-gray-500);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
    background: var(--google-gray-200);
    color: var(--google-gray-900);
}

/* Collapsed sidebar state — icon-only, narrower */
body.sidebar-collapsed aside {
    width: 72px !important;
}
body.sidebar-collapsed aside .truncate,
body.sidebar-collapsed aside details > div,
body.sidebar-collapsed aside .sidebar-user-info,
body.sidebar-collapsed aside summary .fa-chevron-down,
body.sidebar-collapsed aside summary > span > span:not(.w-5),
body.sidebar-collapsed aside a > span:not(.w-5),
body.sidebar-collapsed aside button > span:not(.w-5) {
    display: none !important;
}
body.sidebar-collapsed aside summary,
body.sidebar-collapsed aside .sidebar-user,
body.sidebar-collapsed aside form {
    justify-content: center;
}
body.sidebar-collapsed aside .sidebar-collapse-btn .fa-angles-left {
    transform: rotate(180deg);
}

/* ---------- Hero / page-section backgrounds ---------- */
.hero-bg {
    background: linear-gradient(180deg, #ffffff 0%, var(--ncapsule-red-50) 100%);
    position: relative;
    overflow: hidden;
}
.hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(234, 67, 53, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ---------- Product icon (Google rounded square) ---------- */
.product-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.product-icon:hover { transform: scale(1.1); }

/* ---------- Page title block ---------- */
.page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--google-gray-900);
    line-height: 1.3;
}
.page-subtitle {
    font-size: 14px;
    color: var(--google-gray-500);
    margin-top: 4px;
}

/* ---------- Sidebar nav (ported from gwstoolbox organization/dashboard.html) ---------- */
.sidebar-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 4px 12px;
    border-radius: 12px;
    color: var(--google-gray-500);
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar-menu-item:hover {
    background: var(--google-gray-100);
    color: var(--google-gray-900);
    text-decoration: none;
}
.sidebar-menu-item.active {
    background: var(--accent-50);
    color: var(--accent);
}
.sidebar-menu-item .menu-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-menu-item .menu-label {
    margin-left: 16px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}
.sidebar-menu-item .menu-chevron {
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.2s ease;
}
/* Sub-items (dropdown children) */
.sidebar-submenu {
    margin: 4px 12px 4px 40px;
    padding: 4px 0;
    border-left: 1px solid var(--google-gray-200);
}
.sidebar-submenu a {
    display: block;
    padding: 6px 12px;
    margin: 2px 0 2px 8px;
    border-radius: 8px;
    color: var(--google-gray-500);
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.sidebar-submenu a:hover {
    background: var(--google-gray-100);
    color: var(--google-gray-900);
    text-decoration: none;
}

/* ---------- Argon residue suppression on migrated pages ---------- */
/* These Argon defaults can leak onto Tailwind cards/buttons; pin them back. */
/* Static variants get a subtle resting shadow (no hover lift); .google-card stays flat at rest. */
.google-card-static {
    box-shadow: var(--shadow-google);
}
.google-card .table,
.google-card-static .table {
    margin-bottom: 0;
}

/* Soft-disable Argon's default body shadow underline on links inside our cards */
.google-card a,
.google-card-static a,
.stat-card a {
    text-decoration: none;
}

/* (Argon scope-out rules removed — Argon CSS no longer loaded as of 2026-05-14.
   Each migrated view now lives in a clean Tailwind environment.) */

/* ---------- Confirm modal ---------- */
.confirm-modal.is-open { display: flex; }
.confirm-modal .confirm-modal-dialog {
    animation: confirmModalIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes confirmModalIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.has-modal { overflow: hidden; }

/* ---------- Table cards with row-action dropdowns ----------
   When a card or wrapper contains a row-action menu (kebab/dropdown), it must NOT clip
   children, or else the dropdown gets cut off. We use :has() to detect the pattern and
   override the overflow + transform behavior.

   Affected: any .google-card or .google-card-static that contains:
     - <details class="row-actions"> (addusers/index pattern)
     - .row-actions-menu (customer/index pattern)
     - <table> with action dropdowns inside cells
*/
.google-card:has(.row-actions-menu),
.google-card:has(details.row-actions),
.google-card-static:has(.row-actions-menu),
.google-card-static:has(details.row-actions) {
    overflow: visible !important;
}

/* Cancel the hover-lift transform on cards that contain tables — the transform
   creates a stacking context that traps absolutely-positioned dropdowns. */
.google-card:has(table):hover {
    transform: none;
}

/* Inner overflow-x-auto wrappers: when they contain a row-action widget, drop the
   horizontal scrolling rather than create a clipping container that traps the dropdown.
   Tables that contain row-actions are already laid out for desktop and should not
   create a separate scroll surface. */
.overflow-x-auto:has(.row-actions-menu),
.overflow-x-auto:has(details.row-actions) {
    overflow: visible !important;
}