/* CONSTANTS BEGIN */
:root {
    /* IA GOOD COLOUR CONSTANTS */
    --iaorange:#FFA500;
    --iared:#e53838;
    --iagreen:#0c8946;
    --iapurple:#603e95;
    --iablue:#348bd1;
    --iagrey:#404040;

    /* IA ELEMENT-SPECIFIC COLOUR CONSTANTS/DEFAULTS */
    --iabuttonbg: var(--userColor);
    --iabuttonfg:#ffffff;

    --iabigboxcolor: var(--userColor);
    --iamessagecolor: var(--userColor);


    --iatr4-1:#ffffff;
    --iatr4-2:#eeeeee;
    --iatr4-3:#dddddd;
    --iatr4-4:#cccccc;

    --iafieldsetborder: var(--userColor) ;
    --iafieldsetbackground: var(--userColorLightest);
}
/* CONSTANTS END */
table.border {
    border: 1px solid var(--userColorDark);
}

/* COLLBOX BEGIN */
div.collbox
{
    border:1px solid var(--userColorLight);
    border-bottom:2px dashed var(--userColor);
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    overflow:hidden;
    margin-bottom:10px;
}
div.collbox.open
{
    border-bottom:1px solid var(--userColorLight);
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
div.collbox > label
{
    text-align:left;
    width:100%;
    display:block;
    background-color:var(--userColorLightest);
    padding-left:8px;
    font-size:12pt;
    font-weight:normal;
    cursor:pointer;
    color:var(--userColorDarkest);
}
div.collbox.smallcollbox label
{
    font-size:9pt;
}
div.collbox.smallcollbox
{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
div.collbox.smallcollbox.open
{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

div.collbox.open > label,
div.collbox > label:hover
{
    background-color:var(--userColorLighter);
    color:var(--userColorDarkest);
}
div.collbox > label:before
{
/*    content:'arrow-alt-square-down'; THIS DOES NOT WORK - you cannot put a fontawesome classname in content like this */
    content:'\21F2';
    font-family:'Font Awesome 5 Pro';

    font-size:calc(120%);
    margin-right:10px;
    font-family: 'Arial', 'Segoe UI', 'Helvetica Neue', sans-serif; /* Add fallback fonts */
}
div.collbox.open > label:before
{
/*    content:'arrow-alt-square-up'; THIS DOES NOT WORK - you cannot put a fontawesome classname in content like this */
    content:'\21F1';
    font-family: 'Arial', 'Segoe UI', 'Helvetica Neue', sans-serif; /* Add fallback fonts */
}
div.collbox > div.content
{
    display:none;
}
div.collbox.open > div.content
{
    display:inline-block;
    background-color:var(--userColorLightest);
    border: none;
    padding:10px;
    width:calc(100% - 20px);
    overflow:auto;
}
/* COLLBOX END */
/* IA_MESSAGE BEGIN */
div.ia_message_container
{
    margin:0;
    padding:0;
    width:100%;
    max-width:calc(100vw - 30px);
    display:inline-block;
}
div.ia_message
{
    border:2px solid var(--iamessagecolor);
    color:var(--iamessagecolor);
    background-color:color-mix(in srgb, var(--iamessagecolor), var(--white,white) 90%);
    font-size:10pt;
    border-radius:10px;
    text-align:left;
    max-width:1000px;
    width:100%;
    margin-bottom:10px;
    margin-left:0;
    margin-right:0;
    display:inline-block;
    padding:5px;
}
div.ia_message > h1 > span.icon
{   float:left;
    width:50px;
}
div.ia_message > h1
{
    font-size:25px;
    margin-top:0;
}
div.ia_message > .messagecontent
{
    padding-left:50px;
    display:block;
}
div.ia_message.black    { --iamessagecolor:#000000; }
div.ia_message.error    { --iamessagecolor:var(--iared); }
div.ia_message.success  { --iamessagecolor:var(--iagreen); }
div.ia_message.priority { --iamessagecolor:#FF0000; }
div.ia_message.warning  { --iamessagecolor:#AA822E; }
div.ia_message.none     { --iamessagecolor:#6D5FDF; }
div.ia_message.back     { --iamessagecolor:#6D5FDF; }
div.ia_message.info     { --iamessagecolor:#6D5FDF; }
div.ia_message.tip      { --iamessagecolor:#800080; }
div.ia_message.links    { --iamessagecolor:#000080; }
div.ia_message.question { --iamessagecolor:#59a1ff; }
div.ia_message.reminder { --iamessagecolor:#f28500; }
div.ia_message.gotmail  { --iamessagecolor:#5C3317; }
div.ia_message.mike  	{ --iamessagecolor:#000000; }
div.ia_message.ian   	{ --iamessagecolor:#000000; }
div.ia_message.kateri   { --iamessagecolor:#000000; }
div.ia_message.todo   	{ --iamessagecolor:#dddddd; }
/* IA_MESSAGE END*/

/* IA_BUTTON START */
.ia-button
{
    border:2px solid color-mix(in srgb,var(--iabuttonbg),#555);
    background-color:var(--iabuttonbg);
    color:var(--iabuttonfg);
    white-space: nowrap;
    cursor:pointer;
    display:inline-block;
    padding:5px 10px 5px 10px;
    margin:2px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: all .2s ease;
}
.ia-button.narrow
{
    font-size:9px;
    padding:3px 10px 3px 10px;
    margin-bottom:3px;
}
.ia-button.selected,
.ia-button:hover
{
    color:var(--iabuttonbg);
    background-color:var(--iabuttonfg);
}
/* IA_BUTTON END */
/* IA_BIGBOX START */
div.ia_bigbox
{
    border:2px solid var(--iabigboxcolor);
    color:var(--iabigboxcolor);
    background-color:color-mix(in srgb, var(--iabigboxcolor), var(--white,white) 80%);
    font-size:10pt;
    border-radius:10px;
    text-align:left;
    max-width:1000px;
    width:100%;
    margin-bottom:20px;
    display:inline-block;
    padding:5px;
    width:500px;
    box-shadow:5px 10px 8px color-mix(in srgb, var(--iabigboxcolor), transparent 85%);
}
div.ia_bigbox > div.icon
{
    float:left;
    display:inline-block;
    font-size: 100px;
    width:150px;
    text-align:center;
}
div.ia_bigbox > div.allcontent
{
    float:left;
    display:inline-block;
    width:calc(100% - 150px);
    margin-top:10px;
    margin-bottom:10px;
}
div.ia_bigbox > div.allcontent > div.title
{
    font-size:25px;
    font-family:InfoAnywhere, impact, verdana;
}
div.ia_bigbox > div.allcontent > div.content
{
    font-size:14px;
    margin-top:10px;
}

div.ia_bigbox.small > div.icon
{
    font-size: 40px;
    width:50px;
    padding-top:10px;
}
div.ia_bigbox.small > div.allcontent
{
    width:calc(100% - 50px);
}
div.ia_bigbox.small > div.allcontent > div.title
{
    font-size:18px;
}
/* IA_BIGBOX END */
/* IA_STICKYHEAD START */
/* CLAUDE 2026-06-12 (design-language review session): opt-in sticky table headers.
   Put class "ia_stickyhead" on a <table> whose header row is wrapped in <thead><tr>...</tr></thead>
   and the header sticks to the top of the screen while the table scrolls — this replaces the old
   pattern of re-printing the header row every N data rows.  (A single <thead> is also repeated
   automatically by browsers at the top of every page when printing, so print output improves too.)
   - "top" defaults to --iastickytop = 0 (the standard page templates' menu scrolls away with the
     page, so the viewport top is the right anchor).  CLAUDE 2026-06-12 fix: this was first shipped
     as 60px to clear the fixed black .header bar from style.2024.css, but that bar is only used by
     a few standalone pages (calendar_checkin etc.), NOT the main templates — so the header stuck
     60px below the viewport top, floating over the first data row and leaving an empty colored
     band at its natural position.  If a page DOES have its own fixed top bar, override
     --iastickytop to that bar's height on that page.
   - An explicit header background is required so data rows don't show through the stuck header;
     colours follow the user palette like the collbox label scheme above. Override --iastickyheadbg
     if a specific table needs its own header colour. */
table.ia_stickyhead { --iastickytop:0px; }
table.ia_stickyhead thead th
{
    position:sticky;
    top:var(--iastickytop);
    z-index:2;
    background-color:var(--iastickyheadbg, var(--userColorLighter, #999999));
    color:var(--userColorDarkest, #ffffff);
    /* CLAUDE 2026-06-12 (scroll-affordance pass): the stuck header casts a soft shadow onto the
       rows scrolling beneath it. Doubles as the "top" cue — content visibly tucks under a floating
       header — and reinforces that the header is pinned while the body moves. */
    box-shadow:0 3px 4px -1px rgba(0,0,0,0.25);
}
/* CLAUDE 2026-06-12 (design-language review session): sticky-header SCROLL CONTAINER.
   position:sticky needs a scrolling ancestor to stick within.  This app's body has
   "overflow-x:hidden!important" (style.2024.css), which turns the body into the scroll
   container and TRAPS whole-page sticky so it never engages (a plain ia_stickyhead table on
   a normal page won't stick — confirmed on report-volbday.php).  Rather than change that
   site-wide body rule, wrap a sticky table in <div class=ia_stickyscroll> to give it its own
   scrolling box (this is exactly what the already-working coha report does by hand).  The box
   is height-capped so the table scrolls inside it while the header stays pinned to its top.
   pdo_report() adds this wrapper automatically when $repeatHeadersEvery is set; hand-rolled
   sticky tables need the <div> added around them.
   --iastickymaxheight is overridable per page (e.g. a page with a tall menu can shrink it). */
div.ia_stickyscroll
{
    --iastickymaxheight: calc(100vh - 120px);
    max-height: var(--iastickymaxheight);
    overflow: auto;
    display: block;
    /* CLAUDE 2026-06-12 (scroll-affordance pass): FRAME — a bordered, rounded panel so the region
       visibly reads as a contained scrollable box rather than just more page. */
    border:1px solid var(--userColorLight, #b9c4d4);
    border-radius:8px;
    /* PERSISTENT SCROLLBAR — force the bar to always show and tint it with the palette.  macOS
       hides overlay scrollbars by default, which is why the box looked non-scrollable; this
       overrides that.  Firefox uses scrollbar-width/color; WebKit/Blink use ::-webkit-scrollbar below. */
    overflow-y:scroll;
    scrollbar-width:thin;
    scrollbar-color:var(--userColor, #4a688c) var(--userColorLightest, #eef1f6);
}
div.ia_stickyscroll::-webkit-scrollbar { width:12px; height:12px; }
div.ia_stickyscroll::-webkit-scrollbar-track { background:var(--userColorLightest, #eef1f6); border-radius:8px; }
div.ia_stickyscroll::-webkit-scrollbar-thumb { background:var(--userColor, #4a688c); border-radius:8px; border:2px solid var(--userColorLightest, #eef1f6); }

/* CLAUDE 2026-06-12 (scroll-affordance pass): BOTTOM FADE + "scroll for more" HINT.
   Table cells are opaque, so a pure-CSS background scroll-shadow can't show through — instead a tiny
   vanilla-JS enhancer (emitted once by add2024CSS) wraps each .ia_stickyscroll in .ia_stickywrap and
   appends the .ia_scrollfade overlay below, toggling .atbottom when the box is scrolled to the end (or
   isn't scrollable at all).  CSS hides the cue at the bottom so it never lies about there being more. */
div.ia_stickywrap { position:relative; display:block; max-width:100%; }
div.ia_stickywrap > div.ia_scrollfade
{
    position:absolute; left:1px; right:14px; bottom:1px;   /* right:14px clears the scrollbar; 1px insets keep the panel border visible */
    height:46px; pointer-events:none;
    border-bottom-left-radius:8px; border-bottom-right-radius:8px;
    background:linear-gradient(transparent, rgba(0,0,0,0.45));
    display:flex; align-items:flex-end; justify-content:center;
    opacity:1; transition:opacity .2s ease;
}
div.ia_stickywrap > div.ia_scrollfade > span.ia_scrollhint
{
    color:#ffffff; font-size:11px; font-weight:bold; padding-bottom:5px;
    letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
div.ia_stickywrap.atbottom > div.ia_scrollfade { opacity:0; }
@media print
{
    /* never clip a printed report to one screenful; let it flow and rely on the browser
       repeating <thead> on each printed page (sticky is meaningless on paper). */
    /* !important so the JS-set inline max-height (see add2024CSS enhancer) can't clip the printed report */
    div.ia_stickyscroll { max-height:none !important; overflow:visible !important; border:none; }
    table.ia_stickyhead thead th { position:static; box-shadow:none; }
    div.ia_stickywrap > div.ia_scrollfade { display:none; }
}
/* CLAUDE 2026-06-12 (report-volunteers hours/sessions tables): per-request, the header AND footer
   (TOTALS) lines of these tables get white text and a slightly smaller font so the month columns can
   pack narrower.  Scoped to the opt-in ia_hoursreport class so it does NOT touch the other site-wide
   ia_stickyhead tables (which keep the --userColorDarkest header text from the rule above).  Both the
   header row and the footer row are built from <th> cells (data cells are <td>), so one th rule covers
   both lines.  !important is needed only to override the global "thead th" colour above. */
table.ia_hoursreport th
{
    color:#ffffff !important;
    font-size:0.85em;
}
/* IA_STICKYHEAD END */
/* IA_BADGE START */
div.ia_badge
{
    --iabadgecolor:#FFA500;
    display: inline-block;
    padding: 5px;
    min-width: 100px;
    border:2px solid var(--iabadgecolor);
    color:var(--iabadgecolor);
    background-color:color-mix(in srgb, var(--iabadgecolor), white 90%);
    border-radius: 7px;
    margin-left: 8px;
    margin-bottom: 8px;
    box-shadow: 2px 3px 6px #888;
}
div.ia_badge > div.badge_top
{
    font-size:9px;
    margin-bottom: 5px;
}
div.ia_badge > div.badge_icon
{
    font-size:32px;
}
div.ia_badge > div.badge_icon span.text
{
    font-size:40px;
    line-height:32px;
    font-weight:bold;
}
div.ia_badge > div.badge_bottom
{
    font-size:12pt;
    font-weight:bold;
    margin-top: 3px;
}
div.ia_badge_smalltext
{
    display:inline-block;
    display:inline-flex;
}
div.ia_badge_smalltext div.ia_badge
{
    max-width:150px;
    min-height:75px;
}
div.ia_badge_smalltext div.ia_badge > div.badge_bottom
{
    font-size:8pt;
    font-weight:normal;

}
/* IA_BADGE_END */
/* IA_FLOAT_START */
div.ia_float_wrapper
{
    border: 0 solid black;
    overflow:auto;
    text-align: center;
    width: 100%;
}
div.ia_float
{
    color: var(--userColorDarker)!important;
    border: 1px solid var(--userColor);
    padding: 5px;
    margin: 5px;
    border-radius: 8px;
    float:left;
    background-color: var(--userColorLightest);
    /*box-shadow: 1px 1px 2px #888;*/
}
div.ia_float_wrapper > center > div.ia_float_plain,
div.ia_float_wrapper > div.ia_float_plain
{
    float:left;
}
/* IA_FLOAT_END */
/* IA_TR_START */
table tr.ia-tr
{
    background-color:var(--iaoddcolor);
}
table tr.ia-tr:nth-child(even)
{
    background-color:var(--iaevencolor);
}
table tr.ia-tr:nth-child(odd)
{
    background-color:var(--iaoddcolor);
}
/* IA_TR_END */
/* IA_TR4_START */
table tr.ia-tr4
{
    background-color:var(--iatr4-1);
}
table tr.ia-tr4:nth-child(4n + 1)
{
    background-color:var(--iatr4-4);
}
table tr.ia-tr4:nth-child(4n + 3)
{
    background-color:var(--iatr4-2);
}
table tr.ia-tr4:nth-child(4n + 4)
{
    background-color:var(--iatr4-3);
}
/* IA_TR4_END */
/* IA_FIELDSET_START */
fieldset.ia-fieldset
{
    border: 2px solid var(--iafieldsetborder);
    background-color: var(--iafieldsetbackground);
    padding: 6px;
    zzz-margin-right: 13px; /* this is needed for the admissions section of the careplan_recentchanges MIKE: THEN IT SHOULD BE IN A STYLE BLOCK ON THAT PAGE - REMOVED*/
    border-radius: 8px;
    text-align: center;
    /*width: 100%;*/
    max-width:100%;
}
fieldset.ia-fieldset > legend
{
    margin-left: 10px;
    padding: 3px 7px 3px 7px;
    text-align: left;
    background-color:var(--iafieldsetborder);
    color:white;
    border-radius: 5px;
    font-size: 14px;
    font-weight:bold;
}
.collbox.open > .content > fieldset.ia-fieldset
{
    max-width:calc(100% - 40px);
}
div.ia-fieldset2
{
    text-align: left;
    background-color: color-mix(in srgb, var(--iafieldsetborder), var(--white,white) 90%);
    border-radius: 12px;
    xbox-shadow: 3px 6px 4px #cccccc;
    margin-bottom: 10px;
    border: solid 1px var(--iafieldsetborder);
    padding: 0 6px 6px 6px;
}
div.ia-fieldset2 > hr
{
    border-top: 3px solid var(--iafieldsetborder);
    border-color:var(--iafieldsetborder);
    margin-top:12px;
}
div.ia-fieldset2 > div.fsheader
{
    text-align: left; margin-top: -26px; margin-left: 30px;  padding: 10px;
}
div.ia-fieldset2 > div.fsheader span
{
/*color-mix(in srgb, var(--iafieldsetborder), var(--white,white) 90%);*/
    padding: 5px 10px;
    font-size: 15px;
    font-weight:bold;
    /*color:var(--iafieldsetborder);*/
    /*background-color: white;*/
    color:white;
    background-color: var(--iafieldsetborder);
    border-radius: 5px;
}
/* IA_FIELDSET_END */

div.rainbowMenu {
    /*margin: 10px 6px 5px 0px;*/
}

.rainbowMenu ul li {
    font-size: 13px;
    xline-height: 14px;
    min-height: 27px;
}

form {
    margin: 0;
}
span.floating_submit
{
    position:fixed;
    bottom:50px;
    right:0px;
    border-left:5px solid var(--userColor);
    border-top:5px solid var(--userColor);
    border-top-left-radius:15px;
    background-color:var(--userColorLightest);
}
.reportbutton
{
    background-color:#000 !important;
    color:#fff !important;
    border:2px solid #888;
    text-decoration:none;
    border-radius:10px;
    border-radius:10px;
    padding-left:10px;
    padding-right:10px;
    cursor:pointer;
}
.reportbutton .ia-faicon
{
    color:#fff !important;
}
.reportbutton:hover,
.reportbutton.selected
{
    color:#000 !important;
    background-color:#fff !important;
}
.reportbutton:hover .ia-faicon,
.reportbutton.selected .ia-faicon
{
    color:#000 !important;
}
.colorpicker,.ia_color_picker,.ia_colour_picker
{
    max-width:100px;
    min-width:100px;
}
.allCellsCentered tr td {
    text-align: center;
}
input.searchText
{
    width:100%;
    text-align:center;
    border: mediumseagreen solid 1px!important;
    /*color: var(--white,white)!important;*/
    /*background-color: var(--black,black)!important;*/
}
.msgbox5_outer {
    padding-bottom: 15px;
}
.msgbox5_middle {
    box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.31);
}
.msgbox5_iconContainer {
    width: 50px;
    padding: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 8px solid var(--msgbox5_color);
    border-bottom: 1px solid var(--msgbox5_color);
    background-color: color-mix(in srgb, var(--msgbox5_color), var(--white,white) 60%);
}
.msgbox5_textContainer {
    padding: 10px;
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    border-top: 8px solid var(--msgbox5_color);
    border-bottom: 1px solid var(--msgbox5_color);
    background-color: color-mix(in srgb, var(--msgbox5_color), var(--white,white) 90%);
}
.msgbox5_textContainerWrapper {
    display: flex; align-items: center; width: 100%; padding: 0; margin: 0;
}
.msgbox5_textContainer_intro {
    white-space: nowrap;
    margin-right: 6px;
    text-align: left;
    font-weight: bold;
    background-color: color-mix(in srgb, var(--msgbox5_color), var(--white,white) 90%);
    color: color-mix(in srgb, var(--msgbox5_color), var(--black,black) 30%);
}
.msgbox5_textContainer_text {
    text-align: left;
    color: color-mix(in srgb, var(--msgbox5_color), var(--black,black) 90%);
}
.msgbox5_textContainer_text a {
    text-decoration: underline;
    color: var(--userColorDark);
}