/*
 * Shared component styles.
 *
 * These rules were previously duplicated in <style> blocks inside CaseList,
 * JournalList, MoneyAccountList, TaxCodeList and the HMRC pages. They target
 * DOM rendered by Syncfusion components (toolbars, grids) or classes applied
 * from C# at runtime, so they cannot live in a scoped .razor.css file and are
 * kept global here instead.
 */

/*
 * Teal toolbar buttons. Opt-in only: pass CssClass="grid-toolbar-teal" to the
 * SfGrid that owns the toolbar. Originally this rule lived in the <style> block
 * of CaseList, JournalList, MoneyAccountList and TaxCodeList only -- making it
 * unconditional would also repaint the toolbars on the Accountancy and HMRC
 * pages, which were never teal.
 */
.grid-toolbar-teal .e-toolbar .e-toolbar-item .e-tbar-btn {
    background: #55D5B7 !important;
    padding: 2px 2px 2px 2px;
}

.grid-toolbar-teal .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: #ffffff !important;
}



/* Green button for Create Case */
.btn-green {
    background-color: #28a745; /* Bootstrap Success Green */
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

    .btn-green:hover {
        background-color: #218838;
    }

/* Blue button for Export */
.btn-blue {
    background-color: #007bff; /* Bootstrap Primary Blue */
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

    .btn-blue:hover {
        background-color: #0056b3;
    }

/* Purple button for Search */
.btn-purple {
    background-color: #6f42c1; /* Bootstrap Purple */
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

    .btn-purple:hover {
        background-color: #5936a4;
    }

/* Red button for Go Back */
.btn-red {
    background-color: #dc3545; /* Bootstrap Danger Red */
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.btn-red:hover {
    background-color: #c82333;
}
/* Make the DateRangePicker wider */
.wider-picker {
    width: 300px !important; /* Adjust width as needed */
}

/* Make the TextBox wider */
.wider-textbox {
    width: 300px !important; /* Adjust width as needed */
}
/* More specific selector to override Syncfusion's default */
.e-grid .btn-delete .e-icons.e-delete {
    color: #dc3545 !important;
}

.e-grid .btn-delete:hover .e-icons.e-delete {
    color: #c82333 !important;
}

/* Groups controls inside a Syncfusion ToolbarItem template. */
.toolbar-item-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Applied to grid cells from QueryCellInfo handlers on the HMRC pages. */
.hmrc_success {
    color: green !important;
}

.row-green {
    color: green !important;
}

.row-orange {
    color: orange !important;
}

/*
 * Report actions. Print and PDF sit next to the existing blue Export button on
 * the list toolbars; slate keeps them secondary to the primary page action.
 */
.btn-slate {
    background-color: #0B5B4E;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

    .btn-slate:hover {
        background-color: #084439;
    }

/*
 * Toolbar above a ReportView. Anchors the actions to the sheet below rather than
 * leaving them floating over the page background.
 */
.report-toolbar.e-toolbar {
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid #d7dde3;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.report-toolbar .e-toolbar-item .e-tbar-btn {
    font-weight: 600;
}

@media print {
    .report-toolbar,
    #container {
        display: none !important;
    }
}

/*
 * Register pages (cases, journals).
 *
 * These pages stay interactive grids - they create, search and delete - but they
 * are the same registers a client receives as a report, so they are presented as
 * one bound sheet: a masthead in the charity's accent, a strip of summary figures
 * beneath it, then the grid. The page behind them is plain white, so the heading
 * carries its own ground rather than relying on the page for contrast - hairline
 * borders on white simply read as loose text.
 */
.page-shell {
    --page-accent: #0B5B4E;
    --page-accent-dark: #07443A;
    --page-secondary: #55D5B7;
    --page-ink: #14181d;
    --page-muted: #5b6672;
    --page-line: #d7dde3;
    --page-band: #f5f8f9;
    --page-negative: #a4262c;
    --page-positive: #1e7d52;
    max-width: 1680px;
    margin: 1.25rem auto 2rem;
    color: var(--page-ink);
}

/* One container for masthead, figures and grid, so they read as a single sheet. */
.page-sheet {
    background: #fff;
    border: 1px solid var(--page-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 24, 29, .05), 0 10px 28px rgba(20, 24, 29, .07);
}

/* ---------------------------------------------------------------- masthead */

.page-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    padding: 1.15rem 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--page-accent-dark) 0%, var(--page-accent) 55%, #0f6d5c 100%);
    color: #fff;
}

.page-eyebrow {
    margin: 0 0 .15rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--page-secondary);
}

.page-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: #fff;
}

.page-subtitle {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .82);
}

.page-period {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

    .page-period::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--page-secondary);
    }

/* ------------------------------------------------------------ figure strip */

.page-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: var(--page-band);
    border-bottom: 1px solid var(--page-line);
}

.page-kpi {
    position: relative;
    padding: .85rem 1.25rem .9rem 1.6rem;
    border-right: 1px solid var(--page-line);
    min-width: 0;
}

    /* The accent bar does the separating work that a border on white cannot. */
    .page-kpi::before {
        content: "";
        position: absolute;
        left: .8rem;
        top: 1rem;
        bottom: 1rem;
        width: 3px;
        border-radius: 2px;
        background: var(--page-accent);
    }

    .page-kpi:last-child {
        border-right: 0;
    }

    .page-kpi.positive::before {
        background: var(--page-positive);
    }

    .page-kpi.negative::before {
        background: var(--page-negative);
    }

.page-kpi-label {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--page-muted);
}

.page-kpi-value {
    margin-top: .1rem;
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--page-ink);
    overflow-wrap: anywhere;
}

.page-kpi.positive .page-kpi-value {
    color: var(--page-positive);
}

.page-kpi.negative .page-kpi-value {
    color: var(--page-negative);
}

.page-kpi-caption {
    margin-top: .15rem;
    font-size: .68rem;
    color: var(--page-muted);
}

/* -------------------------------------------------------- grid, in the sheet */

.page-grid .e-grid {
    border: 0;
    border-radius: 0;
}

    /* Column headings in the register's own voice rather than the theme default. */
    .page-grid .e-grid .e-gridheader {
        border-top: 0;
        background: #fff;
    }

    .page-grid .e-grid .e-headercell,
    .page-grid .e-grid .e-headercelldiv,
    .page-grid .e-grid .e-headertext {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--page-accent);
    }

    .page-grid .e-grid .e-rowcell {
        font-size: .84rem;
        font-variant-numeric: tabular-nums;
    }

    .page-grid .e-grid .e-altrow .e-rowcell {
        background: #fafcfd;
    }

    .page-grid .e-grid .e-row:hover .e-rowcell {
        background: var(--page-band);
    }

    .page-grid .e-grid .e-toolbar {
        border-bottom: 1px solid var(--page-line);
    }

@media (max-width: 900px) {
    .page-hero {
        align-items: flex-start;
    }

    .page-title {
        font-size: 1.4rem;
    }
}

/* ------------------------------------------------ yes/no cells in a listing */

/*
   Reference data is mostly flags — active, gift aid, expenditure — and a column of
   raw True/False is hard to scan. A pill carries the same answer at a glance, and
   the muted "no" keeps the eye on the rows that are switched on.
*/
.pill {
    display: inline-block;
    min-width: 4.25rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
}

.pill--yes {
    background: #e6f4ec;
    border-color: #b7dfc8;
    color: #1e7d52;
}

.pill--no {
    background: #f2f4f6;
    border-color: #dde2e7;
    color: #6b7783;
}

/* ----------------------------------------------- a listing with nothing in it */

.page-empty {
    padding: 2.75rem 1.5rem;
    text-align: center;
    color: var(--page-muted);
}

.page-empty-title {
    margin: 0 0 .3rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--page-ink);
}

.page-empty-note {
    margin: 0;
    font-size: .85rem;
}

/* The page furniture belongs on screen only; printing goes through hopeReports. */
@media print {
    .page-hero,
    .page-kpis,
    .page-grid .e-toolbar {
        display: none !important;
    }

    .page-sheet {
        border: 0;
        box-shadow: none;
    }
}