/*----------------------------------------
  Reset & Base
----------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    position: relative;
    min-height: 100%;
    padding-top: 1px; /* counter negative margin */
    margin-top: -1px;
    -webkit-overflow-scrolling: touch;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul li {
        padding: 0 7px 0 12px;
    }

/*----------------------------------------
  App Layout (_LayoutApp)
----------------------------------------*/

/* Left sidebar nav */
.sidebar-nav {
    position: fixed;
    top: 34px;
    left: 0;
    bottom: 0;
    width: 200px;
    overflow-y: auto;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding: 5px 0;
    z-index: 1000;
    transition: transform 0.3s ease;
}
.sidebar-nav.collapsed {
    transform: translateX(-200px);
}
.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-nav li.section-top {
    padding: 8px 10px 4px 10px;
    font-weight: bold;
    font-size: 0.85em;
    color: #333;
    border-top: 1px solid #dee2e6;
    margin-top: 4px;
}
.sidebar-nav li.section-top:first-child {
    border-top: none;
    margin-top: 0;
}
.sidebar-nav li.link {
    padding: 2px 10px 2px 15px;
}
.sidebar-nav li.link a {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.85em;
}
.sidebar-nav li.link a:hover {
    text-decoration: underline;
}

/* Top header bar */
.root-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    background: #e8e8e8;
    border-bottom: 1px solid #ccc;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    gap: 8px;
}
.root-header a {
    color: #000;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.85em;
}
.root-header img {
    height: 17px;
}

/* Compact header buttons — smaller than btn-sm */
.btn-header {
    padding: 1px 7px;
    font-size: 0.75em;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
}

/* display:contents wrapper so child buttons participate in parent flex */
.church-btns-wide { display: none; }
@media (min-width: 992px) {
    .church-btns-wide { display: contents; }
}

/* Ensure dropdown in fixed header renders above everything */
.root-header .dropdown-menu {
    z-index: 1002;
    font-size: 0.85em;
}

/* Church dropdown trigger — visible on header background */
.church-dropdown-toggle {
    background: #fff;
    border-color: #999;
    color: #333;
}
.church-dropdown-toggle:hover,
.church-dropdown-toggle:focus,
.church-dropdown-toggle.show {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* Main content with sidebar offset */
.app-content {
    margin-left: 200px;
    margin-top: 39px;
    padding: 5px 10px;
    transition: margin-left 0.3s ease;
}
.app-content.expanded {
    margin-left: 0;
}

/* Toggle button */
.sidebar-toggle {
    cursor: pointer;
    font-size: 1.2em;
    padding: 0 8px;
    background: none;
    border: none;
    color: #333;
}

/* Menu search select */
.menu-search {
    width: 160px;
    font-size: 0.8em;
    margin: 5px 10px;
}

/* Responsive: auto-collapse sidebar on small screens */
@media (max-width: 1199px) {
    .sidebar-nav {
        transform: translateX(-200px);
    }
    .sidebar-nav.show {
        transform: translateX(0);
    }
    .app-content {
        margin-left: 0;
    }
}

@media print {
    .sidebar-nav, .root-header { display: none !important; }
    .app-content { margin-left: 0 !important; margin-top: 0 !important; max-width: 100% !important; overflow-x: visible !important; }
}

/*----------------------------------------
  Header & Navigation
----------------------------------------*/
.dropdown-menu {
    right: 0;
    left: auto;
    width: 200px;
}

.section-top {
    background-color: #D6DBDF;
    color: #000;
    font-weight: 500;
    font-size: 15px;
    padding: 2px 12px;
}

    .section-top a,
    .section-top a:visited {
        color: #000;
    }

/* App Header (_Layout.cshtml) */
.app-header {
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom-width: 0 !important;
}

/*----------------------------------------
  Custom Buttons
----------------------------------------*/
.btn-head,
.btn-lpurple,
.btn-mauve,
.btn-green,
.btn-purple {
    border-color: currentColor;
}

.btn-head {
    color: #000;
    background-color: #E5EFFA;
}

.btn-green {
    color: #fff;
    background-color: #33cc33;
}

.btn-purple {
    color: #fff;
    background-color: #c498eb;
}

.btn-lpurple {
    color: #fff;
    background-color: #c5a6e0;
}

.btn-mauve {
    color: #fff;
    background-color: #EB98BF;
}

    .btn-head:active,
    .btn-head:focus,
    .btn-head:hover,
    .btn-green:active,
    .btn-green:focus,
    .btn-green:hover,
    .btn-purple:active,
    .btn-purple:focus,
    .btn-purple:hover,
    .btn-lpurple:active,
    .btn-lpurple:focus,
    .btn-lpurple:hover,
    .btn-mauve:active,
    .btn-mauve:focus,
    .btn-mauve:hover {
        filter: brightness(0.9);
    }

/* Tables */
.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    background: transparent;
}

    .table th,
    .table td {
        padding: .5em .75em;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
        text-align: left;
    }

    .table thead th {
        background: #f2f2f2;
        border-bottom: 1px solid #d8d8d8;
        color: #222;
    }

    .table thead tr {
        box-shadow: 0 2px 4px rgba(0,0,0,0.23);
    }

    .table + .table {
        border-top: 1px solid #dee2e6;
    }

.table-bordered {
    border: 1px solid #dee2e6;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }

.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent flex children from overflowing when they contain wide tables */
.d-flex > .flex-grow-1,
.d-flex > [class*="flex-"] {
    min-width: 0;
}

/* DataTables wrapper: constrain width so scrollX stays within parent */
div.dt-container {
    width: 100% !important;
    max-width: 100%;
}

div.dt-scroll {
    width: 100%;
    max-width: 100%;
}

div.dt-scroll-body {
    overflow-x: auto !important;
    max-width: 100%;
}

/* Utilities */
.smallpad {
    padding: 0 1px;
}

.hrthin {
    margin: 2px 0;
}

/*----------------------------------------
  Print Styles
----------------------------------------*/
@media print {
    @page {
        margin: .5in .25in;
    }

    body, table, main-wrap, #main-content, #content-inner {
        font-size: 12px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body {
        padding: 100px 0;
        background: #fff;
    }

    .menu-container,
    #noprint,
    #footer {
        display: none !important;
    }

    .container,
    .container-fluid {
        padding: 0 10px !important;
        margin: 0 !important;
        max-width: 100% !important;
        min-width: 0;
    }

    input,
    select,
    textarea {
        max-width: 280px !important;
    }

    .smallpad,
    .subhead {
        padding: 0 !important;
    }

    .blacklink a {
        color: #000 !important;
    }

    .section-top {
        background: #6B7A8A !important;
        color: #fff !important;
        font-weight: 700 !important;
        padding: 7px 12px !important;
    }

    /* Hide XenDesk Widget on print */
    @media print {
        #webWidget,
        #launcher,
        .zEWidget-launcher,
        .zEWidget-webWidget,
        iframe[src*="zendesk"],
        [id*="ze-snippet"] {
            display: none !important;
            visibility: hidden !important;
        }
    }
}

/* Only show print-header on print */
.print-header {
    display: none;
}

@media print {
    .print-header {
        display: table-row !important;
    }

    /* Reusable print utilities */
    @media print {

        /* Hide on print */
        .no-print {
            display: none !important;
        }

        /* Show only on print */
        .print-only {
            display: block !important;
        }

        /* Keep blocks from splitting across pages */
        .avoid-break {
            break-inside: avoid !important;
            page-break-inside: avoid !important;
        }

        /*
      Force a two-column layout for a "main + aside" section on print,
      regardless of Bootstrap breakpoints / printer viewport quirks.
    */
        .print-two-col {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: flex-start !important;
        }

            .print-two-col > .print-main {
                flex: 1 1 auto !important;
                max-width: none !important;
                min-width: 0 !important;
            }

            .print-two-col > .print-aside {
                flex: 0 0 260px !important; /* tweak width once, reuse everywhere */
                max-width: 260px !important;
                text-align: right !important;
            }

                /* Images in the aside behave nicely */
                .print-two-col > .print-aside img {
                    max-width: 100% !important;
                    height: auto !important;
                }

            /*
      Optional: reduce gutters a bit only on print for tighter layout.
      This is safe and generic.
    */
            .print-two-col > [class*="col-"] {
                padding-left: 6px !important;
                padding-right: 6px !important;
            }
    }

    /* Default for print-only so it doesn't show on screen */
    .print-only {
        display: none;
    }
}

/*----------------------------------------
  Table Action Buttons
----------------------------------------*/
.actions-cell {
    white-space: nowrap;
}
.actions-cell .btn {
    margin-right: 2px;
}

/*----------------------------------------
  Sortable Table Headers
----------------------------------------*/
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px !important;
}
th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 4px;
    opacity: 0.3;
    font-size: 0.75em;
}
th.sortable.sort-asc::after {
    content: '▲';
    opacity: 0.8;
}
th.sortable.sort-desc::after {
    content: '▼';
    opacity: 0.8;
}

/* Sub-navigation bar (mgmt/benefits pages) */
.mgmt-nav .nav-link { padding: 6px 12px; color: #333; font-size: 0.9em; white-space: nowrap; }
.mgmt-nav .nav-link:hover, .mgmt-nav .nav-link:focus { background-color: #D6DBDF; color: #000; }
.mgmt-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
.mgmt-nav .dropdown-item:hover { background-color: #D6DBDF; }
.mgmt-nav .navbar-brand { font-size: 1.1em; }
.mgmt-nav .navbar-collapse { overflow: visible; }
.mgmt-nav .dropdown-menu { left: 0; right: auto; }

/* Summernote fullscreen inside Bootstrap modal — ensure editor fills the modal */
.modal .note-editor.note-frame.note-editor-margin.fullscreen {
    z-index: 1060;
}