/* ============================================================
   DICIP SHARED COMPONENTS
   Reusable UI chrome used across multiple pages.
   Page-specific component styling belongs in that
   component's own .razor.css file, not here.

   SECTIONS:
   1. Page titles
   2. Toggle selects
   3. Popovers / dropdowns
   4. Chips
   5. Tooltips
   6. Cookie consent
   7. Form inputs
   8. Icon buttons
   9. Dialogs — shell, height chain, tabs
  10. Dialog scroll utilities
  11. Dialog panel classes (shared across detail dialogs)
  12. Task property rows
   ============================================================ */


/* ── 1. Page titles ──────────────────────────────────────── */

.dicip-page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--dicip-text-primary);
    line-height: 1.3;
    margin: 0;
}

.dicip-page-subtitle {
    font-size: 13px;
    color: var(--dicip-text-secondary);
    margin: 2px 0 0;
}


/* ── 2. Toggle selects ───────────────────────────────────── */

.dicip-toggle-select {
    background: var(--dicip-bg-hover);
    border-radius: var(--dicip-radius-md);
    padding: 2px;
}

.dicip-toggle-select-active {
    background: var(--dicip-bg-card);
    border-radius: var(--dicip-radius-sm);
    box-shadow: var(--dicip-shadow-sm);
    color: var(--dicip-text-primary);
    font-weight: 600;
}

.dicip-toggle-select .mud-toggle-item {
    color: var(--dicip-text-secondary);
    font-size: 14px;
}

/* MudBlazor renders selected toggle with .mud-button-filled-tertiary —
   override its hardcoded background directly. */
.dicip-toggle-select .mud-button-filled-tertiary {
    background-color: var(--dicip-bg-card) !important;
    color: var(--dicip-text-primary) !important;
}

.dicip-toggle-select .mud-button-outlined-tertiary {
    background-color: transparent !important;
    color: var(--dicip-text-secondary) !important;
    border-color: transparent !important;
}


/* ── 3. Popovers / dropdowns ─────────────────────────────── */

.mud-popover.mud-popover-open .mud-list {
    background-color: var(--dicip-bg-card);
    box-shadow: 0 1px 7px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--dicip-border);
    border-radius: var(--dicip-radius-lg);
    padding: var(--dicip-space-1) 0;
}


/* ── 4. Chips ────────────────────────────────────────────── */

.mud-chip.mud-chip-size-medium {
    height: 28px;
    font-size: 12px;
    border-radius: var(--dicip-radius-sm);
    padding: 0 10px;
}


/* ── 5. Tooltips ─────────────────────────────────────────── */

.hot-tooltip-paper {
    max-width: 280px;
    padding: var(--dicip-space-3);
    border-radius: var(--dicip-radius-lg);
    line-height: 1.4;
    background-color: var(--dicip-text-primary);
    color: #fff;
    box-shadow: var(--dicip-shadow-sm);
}

.hot-tooltip .mud-tooltip {
    padding: 0;
}


/* ── 6. Cookie consent ───────────────────────────────────── */

.cookie-consent {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 600px;
    background-color: var(--dicip-info-bg);
    color: var(--dicip-text-primary);
    border-radius: var(--dicip-radius-lg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    padding: var(--dicip-space-5);
    z-index: 99999;
    font-size: 14px;
}

.cookie-consent-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--dicip-space-2);
    margin-top: var(--dicip-space-4);
}

    .cookie-consent-buttons .btn {
        background-color: var(--dicip-text-primary);
        border: none;
        color: #fff;
        padding: var(--dicip-space-2) var(--dicip-space-4);
        border-radius: var(--dicip-radius-md);
        cursor: pointer;
    }


/* ── 7. Form inputs (outlined, light theme) ──────────────── */

.mud-input.mud-input-outlined {
    color: var(--dicip-text-primary);
    background-color: var(--dicip-bg-card);
}

    .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
        border-width: 2px;
        border-color: var(--dicip-primary);
    }

@media (hover: hover) and (pointer: fine) {
    .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
        border-color: var(--dicip-text-secondary);
    }
}


/* ── 8. Icon buttons ─────────────────────────────────────── */

.dicip-icon-button {
    background-color: transparent;
    border: 1px solid var(--dicip-border);
    color: var(--dicip-text-secondary);
}

    .dicip-icon-button .mud-icon-root {
        color: var(--dicip-text-secondary);
    }

    .dicip-icon-button:hover {
        background-color: var(--dicip-bg-hover);
    }


/* ── 9. Dialogs ──────────────────────────────────────────────
   Height chain: every level must be flex column with
   flex: 1 1 0 and min-height: 0 so children can shrink
   below natural content height and the footer stays visible.

   Chain (outermost → innermost):
     .dicip-dialog.mud-dialog          flex column, fills viewport slot
       .mud-dialog-title               flex-shrink: 0  (fixed top)
       .mud-dialog-content             flex: 1 1 0     (grows to fill)
         .dicip-dialog-content         flex: 1 1 0     (DicipDialog wrapper)
           EditForm.dicip-form-dialog  flex: 1 1 0     (DicipFormDialog)
             .dicip-form-dialog-scroll flex: 1 1 0     (scrollable content)
       .mud-dialog-actions             flex-shrink: 0  (fixed bottom)
   ──────────────────────────────────────────────────────────── */

/* Dialog shell */
.dicip-dialog.mud-dialog {
    display: flex;
    flex-direction: column;
    max-height: 100vh; /* dialogs are position:absolute top:0, not below appbar */
    overflow: hidden;
}

/* Title — fixed height, never shrinks */
.dicip-dialog .mud-dialog-title {
    flex-shrink: 0;
    padding: 20px 24px 0 !important;
    margin: 0 !important;
}

    /* Sibling div after title (e.g. AdOrgFrm wrapper) must grow */
    .dicip-dialog .mud-dialog-title ~ div {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

/* MudBlazor focus trap wrappers must pass height through */
.dicip-dialog .mud-focus-trap,
.dicip-dialog .mud-focus-trap-child-container {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* MudBlazor's generated content wrapper — must grow */
.dicip-dialog .mud-dialog-content {
    flex: 1 1 0;
    min-height: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* DicipDialog's own content div */
.dicip-dialog-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 24px;
}

/* EditForm inside DicipFormDialog */
.dicip-form-dialog {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable content area — this is the only level that scrolls */
.dicip-form-dialog-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 0;
}

/* Actions footer — fixed height, never shrinks */
.dicip-dialog .mud-dialog-actions {
    flex-shrink: 0;
    padding: 0 24px 20px !important;
}

/* ── Dialog tabs ─────────────────────────────────────────── */

.mud-dialog-content .mud-tabs-tabbar .mud-tab {
    text-transform: none;
    font-size: 15px;
    font-weight: 400;
}

    .mud-dialog-content .mud-tabs-tabbar .mud-tab.mud-tab-active,
    .ak-main-Content .mud-tabs-tabbar .mud-tab.mud-tab-active {
        color: var(--dicip-primary);
        background-color: var(--dicip-bg-hover);
        border-radius: var(--dicip-radius-lg);
        font-weight: 500;
    }


/* ── 10. Dialog scroll utilities ─────────────────────────────
   GoalActionMasterFixScroll / Scroll-Cont-fix-HF-Master:
   Used when a dialog contains MudTabs and each tab panel
   must independently scroll within the fixed dialog height.
   ──────────────────────────────────────────────────────────── */

.Scroll-Cont-fix-HF-Master {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .Scroll-Cont-fix-HF-Master .mud-tabs {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .Scroll-Cont-fix-HF-Master .mud-tabs-panels {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .Scroll-Cont-fix-HF-Master .mud-tab-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }


/* ── 11. Dialog panel classes ────────────────────────────────
   Shared by TaskDetailsDialog, HabitDetailsDialog, GoalDetailDialog.
   Must be global — scoped .razor.css won't reach across components.
   ──────────────────────────────────────────────────────────── */

.panel-scrollbar {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background-color: transparent;
}

.goal-detailHeight-h {
    height: 100%;
    background-color: transparent;
}

.panel-scrollbar.notes-panel-host {
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.panel-scrollbar.steps-panel-host {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}


/* ── 12. Task property rows ──────────────────────────────────
   Used in Task, Habit, and Goal detail dialogs.
   ──────────────────────────────────────────────────────────── */

.task-properties {
    padding: 4px 0;
}

.task-property-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--dicip-border-soft);
}

    .task-property-row:last-of-type {
        border-bottom: none;
    }

.task-property-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--dicip-radius-md);
    background: var(--dicip-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .task-property-icon .mud-icon-root {
        font-size: 18px;
        color: var(--dicip-text-secondary);
    }

.task-property-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.task-property-text-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.task-property-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dicip-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-property-value {
    font-size: 15px;
    color: var(--dicip-text-primary);
    line-height: 1.6;
}

.task-property-empty {
    color: var(--dicip-text-tertiary);
    font-style: italic;
}

.task-status-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    color: var(--dicip-warning);
    background: var(--dicip-warning-bg);
    padding: 4px 12px;
    border-radius: var(--dicip-radius-pill);
    margin-top: 2px;
}