/* ================================
   Muktinath ARC – Global Theme
   Put this in wwwroot/css/mukt-theme.css
   ================================ */

/* ---- Color tokens (variables) ---- */
:root {
    --mukt-primary: #015F05; /* brand green */
    --mukt-primary-dark: #013c03;
    --mukt-primary-soft: rgba(1, 95, 5, 0.06);
    --mukt-blue: #0F253A; /* header / title */
    --mukt-orange: #F58220; /* accent / warning */
    --mukt-danger: #D32F2F;
    --mukt-border: #d3d7df;
    --mukt-bg: #f4f5f7;
    --mukt-bg-card: #ffffff;
    --mukt-radius-lg: 16px;
    --mukt-radius-md: 12px;
    --mukt-radius-sm: 8px;
}

/* ---- Basic body tweaks ---- */
body {
    background-color: var(--mukt-bg);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #222;
}

/* ================================
   1. Page layout helpers
   ================================ */

.mukt-page-root {
    padding: 16px;
}

.mukt-page-card {
    padding: 24px;
    margin: 16px;
    border-radius: var(--mukt-radius-lg);
    background-color: var(--mukt-bg-card);
    box-shadow: 0 4px 18px rgba(15, 37, 58, 0.08);
}

/* Header (title + breadcrumb area) */
.mukt-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.mukt-page-title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mukt-blue);
    text-transform: uppercase;
}

.mukt-page-subtitle {
    font-size: 0.80rem;
    color: #6b7280;
}

/* small chip on right side (module name) */
.mukt-page-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--mukt-primary-soft);
    color: var(--mukt-primary-dark);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ================================
   2. Sections inside a page
   ================================ */

.mukt-section {
    padding: 16px 16px 8px 16px;
    border-radius: var(--mukt-radius-md);
    background-color: var(--mukt-primary-soft);
    margin-bottom: 16px;
}

.mukt-section-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mukt-blue);
    margin-bottom: 10px;
}

/* content inside a section */
.mukt-section-body {
    margin-top: 4px;
}

/* ================================
   3. Form layout
   ================================ */

/* two-column form on desktop, one-column on small devices */
.mukt-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

@media (max-width: 768px) {
    .mukt-form-grid {
        grid-template-columns: 1fr;
    }
}

/* label helper text */
.mukt-field-help {
    font-size: 0.75rem;
    color: #6b7280;
}

/* ================================
   4. Buttons (use with MudButton Class="")
   ================================ */

.mukt-btn-primary {
    background-color: var(--mukt-primary) !important;
    color: #ffffff !important;
    border-radius: var(--mukt-radius-sm) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding-inline: 18px !important;
}

    .mukt-btn-primary:hover {
        background-color: var(--mukt-primary-dark) !important;
    }

.mukt-btn-secondary {
    border-radius: var(--mukt-radius-sm) !important;
    text-transform: none !important;
    border: 1px solid var(--mukt-border) !important;
}

.mukt-btn-danger {
    background-color: var(--mukt-danger) !important;
    color: #fff !important;
    border-radius: var(--mukt-radius-sm) !important;
    text-transform: none !important;
}

/* small quiet text button */
.mukt-btn-link {
    text-transform: none !important;
    font-size: 0.8rem !important;
}

/* ================================
   5. Cards / data blocks (lists, grids)
   ================================ */

.mukt-data-card {
    border-radius: var(--mukt-radius-md);
    background-color: #ffffff;
    border: 1px solid var(--mukt-border);
    padding: 12px 14px;
}

.mukt-data-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mukt-blue);
}

.mukt-data-card-footer {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

/* ag-grid / mud-table custom header row (if used later) */
.mukt-table-header {
    background-color: #e3e7ef;
    font-weight: 600;
}

/* ================================
   6. Photo / signature box (used in membership)
   ================================ */

.mukt-photo-box {
    padding: 12px 14px;
    border-radius: var(--mukt-radius-md);
    background-color: #ffffff;
    border: 1px dashed var(--mukt-border);
}

.mukt-photo-preview {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    /* if we show real image later */
    .mukt-photo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ================================
   7. Top app bar / header overrides
   ================================ */

/* if your MudAppBar has Class="mukt-appbar" */
.mukt-appbar {
    background-color: var(--mukt-blue) !important;
    color: #ffffff !important;
}

.mukt-appbar-title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* ================================
   8. Sidebar tweaks (MudDrawer)
   ================================ */

/* if your drawer has Class="mukt-drawer" */
.mukt-drawer {
    background-color: #0b1a28;
    color: #e5e7eb;
}

/* top part with logo / title */
.mukt-drawer-header {
    padding: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* nav items */
.mukt-nav-item {
    border-radius: 999px;
    margin: 2px 8px;
    padding-inline: 10px;
}

    .mukt-nav-item .mud-nav-link-text {
        font-size: 0.85rem;
    }

/* active nav item */
.mukt-nav-item-active {
    background-color: rgba(245, 130, 32, 0.16); /* orange tint */
    color: #ffffff;
}

/* group header (Master, Daily Operations, etc.) */
.mukt-nav-group-header {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ================================
   9. Small utility classes
   ================================ */

.mukt-badge-pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    background-color: var(--mukt-primary-soft);
    color: var(--mukt-primary-dark);
}

.mukt-kpi-number {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--mukt-primary-dark);
}

.mukt-kpi-label {
    font-size: 0.75rem;
    color: #6b7280;
}
/* Overall smaller/tighter look for membership page */
.mukt-membership {
    font-size: 0.9rem;
}

    /* Make all Mud inputs look like big rounded boxes */
    .mukt-membership .mud-input-root {
        border-radius: 10px;
        background-color: #fbfbfd;
        border: 1px solid #e0e4ec;
        min-height: 34px;
        padding-inline: 12px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

        /* Text inside the input */
        .mukt-membership .mud-input-root .mud-input-input {
            font-size: 0.9rem;
            padding-top: 8px;
            padding-bottom: 8px;
        }

    /* Labels like small grey text */
    .mukt-membership .mud-input-label {
        font-size: 0.8rem;
        color: #6b7280;
    }

    /* Focus state – blue border + subtle glow */
    .mukt-membership .mud-input-root.mud-input-root-focused {
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    /* Selects & pickers same font */
    .mukt-membership .mud-select,
    .mukt-membership .mud-picker {
        font-size: 0.9rem;
    }
/* ────────────────────────────────────────────────
   Muktinath ARC – Membership (mkcl) input style
   ──────────────────────────────────────────────── */

/* Form card – cleaner white card with soft shadow */
.mukt-form-card {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(148, 163, 184, 0.20);
}

/* Smaller, clean labels like mkcl */
.mukt-input .mud-input-label,
.mukt-input .mud-input-label.mud-input-label-animated {
    font-size: 0.80rem;
    letter-spacing: 0.02em;
    color: #6b7280; /* gray-500 */
}

/* Base text style inside inputs */
.mukt-input .mud-input-slot,
.mukt-input input,
.mukt-input textarea,
.mukt-input .mud-select-input {
    font-size: 0.85rem;
    color: #111827; /* gray-900 */
}

/* The actual textbox “container” */
.mukt-input .mud-input-root {
    border-radius: 10px;
    border: 1px solid #e1e5f0; /* light border like mkcl */
    background-color: #fbfcff; /* very light blue/gray fill */
    min-height: 44px;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); /* no default glow */
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    /* When focused – blue outline like modern UI */
    .mukt-input .mud-input-root.mud-input-focused {
        border-color: #3b82f6; /* blue-500 */
        background-color: #ffffff;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
    }

    /* Error state – red border */
    .mukt-input .mud-input-root.mud-input-error {
        border-color: #ef4444; /* red-500 */
        box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
    }

/* Select + DatePicker arrow/button alignment */
.mukt-input .mud-input-adornment,
.mukt-input .mud-select-input,
.mukt-input .mud-picker {
    font-size: 0.85rem;
}

/* Validation message style (small & subtle) */
.mukt-input .mud-input-helper-text,
.mukt-input .mud-input-error-text {
    font-size: 0.75rem;
}

/* Slightly smaller section headings in forms */
.mukt-form-title {
    font-size: 1.10rem;
    font-weight: 600;
}