/**
 * Place your custom styles here.
 *
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
@import url(https://fonts.googleapis.com/css?family=Play:400,700);
*/

/* ==========================================================================
   Design tokens
   See docs/superpowers/specs/2026-08-13-ji-bootstrap-visual-refresh-design.md
   ========================================================================== */
:root{
  /* Brand */
  --jc-primary: #0b7b96;
  --jc-primary-light: #159cbb;
  --jc-primary-dark: #095e73;
  --jc-primary-tint: #e5f3f6;

  /* Darkened from the original brand green (#18bc9c) for WCAG AA contrast —
     white text on the raw brand green measured 2.41:1; this button color is
     now the primary submit action sitewide so contrast actually matters
     here, not just decoratively. #18bc9c is still used elsewhere (badges,
     the flag-badge "on" state uses primary, not this) where it's not
     carrying white text directly. */
  --jc-success: #107a65;
  --jc-success-dark: #0d6453;

  --jc-danger: #e74c3c;
  --jc-danger-dark: #c0392b;
  --jc-warning: #f39c12;
  --jc-info: #3498db;

  /* Neutrals */
  --jc-gray-50:  #f9fafb;
  --jc-gray-100: #f3f4f6;
  --jc-gray-200: #e5e7eb;
  --jc-gray-300: #d1d5db;
  --jc-gray-400: #9ca3af;
  --jc-gray-500: #6b7280;
  --jc-gray-600: #4b5563;
  --jc-gray-700: #374151;
  --jc-gray-800: #1f2937;
  --jc-gray-900: #111827;

  /* Typography */
  --jc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --jc-fs-sm: 12px;
  --jc-fs-base: 13px;
  --jc-fs-lg: 15px;
  --jc-fs-xl: 18px;

  /* Spacing (4px scale) */
  --jc-space-1: 4px;
  --jc-space-2: 8px;
  --jc-space-3: 12px;
  --jc-space-4: 16px;
  --jc-space-5: 24px;
  --jc-space-6: 32px;

  /* Shape */
  --jc-radius: 6px;
  --jc-radius-sm: 4px;
  --jc-shadow-sm: 0 1px 3px rgba(17, 24, 39, .08);
  --jc-shadow-md: 0 4px 12px rgba(17, 24, 39, .10);
}

/* ==========================================================================
   Base / typography
   ========================================================================== */
body{
  font-family: var(--jc-font-family);
  font-size: var(--jc-fs-base);
  color: var(--jc-gray-800);
}
h1, h2, h3, h4, h5, h6,
.page-header,
.block-title{
  font-family: var(--jc-font-family);
  color: var(--jc-gray-900);
}

/* Visible keyboard focus everywhere (accessibility — do not remove without an equally visible replacement) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus{
  outline: 2px solid var(--jc-primary-light);
  outline-offset: 2px;
}

/* ==========================================================================
   Navigation bar
   ========================================================================== */
#navbar{
  background: var(--jc-primary) !important;
  border-bottom: none;
  box-shadow: var(--jc-shadow-sm);
}
.navbar-header .logo{margin-top:4px; margin-bottom:4px;}
.navbar-header .logo img{max-height:40px;}
.navbar-inverse .navbar-brand{color: #fff !important; font-weight: 700;}
.navbar-inverse .navbar-nav > li > a{
  padding-right: var(--jc-space-3);
  padding-left: var(--jc-space-3);
  color: rgba(255,255,255,.9) !important;
  font-weight: 400;
  font-size: var(--jc-fs-lg);
  border-radius: var(--jc-radius-sm);
  transition: background-color .15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{
  background-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.navbar-default .navbar-nav > li > a{
  padding-right: var(--jc-space-3);
  padding-left: var(--jc-space-3);
  font-size: var(--jc-fs-base);
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover{
  background-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Secondary page-header bar: kept as a light neutral title bar instead of a
   second block of the identical brand teal directly under the navbar. */
#page-header{
  background: var(--jc-gray-50) !important;
  color: var(--jc-gray-800);
  padding: var(--jc-space-2) 0;
  margin-bottom: var(--jc-space-3);
  border-radius: var(--jc-radius);
  border: 1px solid var(--jc-gray-200);
  text-align: right;
}
#page-header a{color: var(--jc-gray-700);}
#page-header .nav > li > a:hover,
#page-header .nav > li > a:focus{background:none; color: var(--jc-primary);}
#page-header .nav > li.first a{padding: 10px 0 10px 20px;}

/* Core admin Toolbar sits above this app's nav for admin-permission users —
   left functionally alone (out of scope), just a hairline seam so the two
   bars don't read as unrelated/stacked by accident. */
body.toolbar-fixed #navbar{border-top: 1px solid rgba(255,255,255,.15);}

/**** Menu ****/
.navbar-nav .dropdown-menu{max-height: 80vh; overflow-y: auto;}
.navbar-nav .dropdown-menu .specialmenuitem{
  font-weight: bold;
  background: var(--jc-primary-tint);
  padding: var(--jc-space-1) var(--jc-space-4);
  letter-spacing: 0;
}
.navbar-nav .dropdown-menu li.first .specialmenuitem{margin-top:-5px;}

.custom-user-menu{position: relative; float: right;}
.custom-user-menu a{margin-left: auto; color: #fff; text-decoration: none; font-size: var(--jc-fs-base);}

/* Fix: navigation_collapsible places branding, the account-menu block, the
   custom user-links block ("My incomes"/"Log out"), and the main-menu block
   as separate full-width block wrappers in one region. Bootstrap 3 only
   floats the inner .navbar-nav <ul>, not the block wrapper, so a menu
   block's floated items collapse their wrapper to height:0 and the next
   block paints over it at the same top position -- links are visible but
   unclickable (elementFromPoint returns the overlaying block, not the
   link). Same root cause/fix as satsang-finance (see drupal-frontend-design
   skill learnings.md, 2026-07-09). Real DOM order confirmed via browser
   inspection: a.navbar-brand, nav#block-ji-bootstrap-account-menu,
   section#block-ji-bootstrap-usermenulinksblock,
   nav#block-ji-bootstrap-main-menu. Scoped to >=768px so the mobile
   hamburger's already-correct stacked layout is untouched. */
@media (min-width: 768px){
  #navbar .navbar-collapse .region-navigation-collapsible{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #navbar .navbar-collapse .region-navigation-collapsible > *{
    float: none;
  }
  /* Account menu + user-links stay right-aligned on the brand's row. */
  #navbar .navbar-collapse .region-navigation-collapsible #block-ji-bootstrap-account-menu{
    margin-left: auto;
  }
  /* Main menu (9 items) wraps to its own full-width row below, same as
     before the fix -- flex-wrap only kicks in because this item can't fit
     the remaining space on the brand's row. */
  #navbar .navbar-collapse .region-navigation-collapsible #block-ji-bootstrap-main-menu{
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Buttons — one consistent hierarchy sitewide
   primary submit = solid success green · secondary/add-item = outlined teal
   destructive/remove = outlined red
   ========================================================================== */
.btn{
  font-size: var(--jc-fs-base);
  padding: var(--jc-space-2) var(--jc-space-3);
  border-radius: var(--jc-radius-sm);
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-success{
  color: #fff;
  background-color: var(--jc-success);
  border-color: var(--jc-success);
}
.btn-success:hover,
.btn-success:focus{
  color: #fff;
  background-color: var(--jc-success-dark);
  border-color: var(--jc-success-dark);
}
.btn-primary,
a.btn.btn-primary{
  color: var(--jc-primary);
  background-color: #fff;
  border-color: var(--jc-primary);
}
.btn-primary:hover,
.btn-primary:focus{
  color: #fff;
  background-color: var(--jc-primary);
  border-color: var(--jc-primary);
}
.btn-danger{
  color: var(--jc-danger);
  background-color: #fff;
  border-color: var(--jc-danger);
}
.btn-danger:hover,
.btn-danger:focus{
  color: #fff;
  background-color: var(--jc-danger);
  border-color: var(--jc-danger-dark);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-group{margin-bottom: var(--jc-space-3);}
form .control-label{width:180px; vertical-align: top; margin-right: var(--jc-space-2);}
form .form-control{
  display: inline-block;
  padding: var(--jc-space-2);
  font-size: var(--jc-fs-lg);
  border: 1px solid var(--jc-gray-300);
  border-radius: var(--jc-radius-sm);
}
form .form-control:focus{
  border-color: var(--jc-primary-light);
  box-shadow: 0 0 0 3px var(--jc-primary-tint);
}

/* Fieldset / details sections (e.g. "User Record", "Asset" on node forms):
   restyle the existing thin gray boundary as a labeled card section instead
   of adding new grouping markup. */
form fieldset,
form details{
  background: #fff;
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius);
  margin-bottom: var(--jc-space-4);
  box-shadow: var(--jc-shadow-sm);
}
form fieldset > legend,
form details > summary,
form .fieldset-legend,
form summary.fieldset-legend{
  background: var(--jc-gray-50);
  border-bottom: 1px solid var(--jc-gray-200);
  color: var(--jc-gray-800);
  font-weight: 600;
  font-size: var(--jc-fs-lg);
  padding: var(--jc-space-2) var(--jc-space-3);
  margin: calc(-1 * var(--jc-space-1)) 0 var(--jc-space-3) 0;
  border-radius: var(--jc-radius) var(--jc-radius) 0 0;
}

/* Nested paragraph / field-collection sub-item headers (e.g. "Grant",
   "Freetagging" repeating rows) — one level below the parent section, so the
   hierarchy reads instead of every level looking like the same brand-teal
   bar. */
form .field-multiple-table > thead,
form .paragraphs-tabs-wrapper .paragraphs-icon-wrapper,
form .field-type-field-collection table thead{
  background: var(--jc-gray-100) !important;
  color: var(--jc-gray-800) !important;
}
/* Drupal core wraps this header's field title in a bare `class="label"`
   (FieldPreprocess::preprocessFieldMultipleValueForm()), which collides
   with Bootstrap 3's `.label` badge component — that component always
   sets `color: #fff`, expecting a `.label-*` modifier to supply a
   background. Drupal never adds one here, so the title renders white
   text on the light thead background above (invisible). Every real badge
   in this codebase pairs `.label` with a `.label-*` modifier, so scoping
   to the multi-value table header only fixes this collision without
   touching real badges elsewhere. */
form .field-multiple-table thead .label{
  color: var(--jc-gray-800) !important;
}
form .field-type-field-collection table thead{display:inline-block;}
form .field-type-field-collection table tbody{display:inline-block;}
form .field-type-field-collection table th.field-label{display: table-cell;background: #fff;border: none;color: initial;text-align: right;}
form .field-type-field-collection table th.tabledrag-hide{display:none;}
form .field-type-field-collection table td .control-label{width:auto;}

/* ==========================================================================
   Calendar
   ========================================================================== */
.view .date-nav-wrapper .date-nav{max-height:30px !important;}
.ui-datepicker-calendar{width:100% !important;}

/* ==========================================================================
   Login / user auth pages (login, register, password reset)

   NOTE: the previous stylesheet had a whole `.not-logged-in` block
   (background image + centered white card) that never actually applied —
   this D9-11 Bootstrap-3 sub-theme's html.html.twig only ever adds
   `user-logged-in` to <body> when authenticated, never `not-logged-in`
   when anonymous (that class is D7-era carryover). Scoping correctly here
   via the real `path-user` body class Drupal does add on /user/* routes.
   ========================================================================== */
body.path-user .region-content{
  max-width: 420px;
  margin: var(--jc-space-6) auto;
  padding: var(--jc-space-5);
  background: #fff;
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius);
  box-shadow: var(--jc-shadow-md);
}
body.path-user .region-content .page-header{margin-top:0;}
body.path-user form#user-login-form,
body.path-user form#user-register-form,
body.path-user form#user-pass{max-width: 100%; margin:auto;}
body.path-user .control-label{width:auto; display:block;}
body.path-user #block-user-login ul{padding:0;}
body.path-user #block-user-login ul li{padding:0; list-style:none;}

/* ==========================================================================
   Views exposed filters
   ========================================================================== */
.view-filters{
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius);
  padding: var(--jc-space-3);
  position: relative;
  background: var(--jc-gray-50);
  font-size: var(--jc-fs-sm);
  margin-bottom: var(--jc-space-3);
}
.view-filters .views-exposed-widgets{margin-bottom: 2.7em; display:flex; flex-wrap: wrap;}
.view-filters .views-exposed-form .views-exposed-widget{
  padding: var(--jc-space-2) var(--jc-space-1);
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius-sm);
  background: #fff;
  margin: var(--jc-space-1);
}
.view-filters .views-submit-button{position:absolute; bottom:0; right: var(--jc-space-2); border:none !important;}
.view-filters .views-submit-button .btn,
.view-filters .views-reset-button .btn{margin-top:0;}
.view-filters .views-reset-button{position:absolute; bottom:0; right: 85px; margin:0; padding:0; border:none !important;}
.view-filters form .form-control{font-size: var(--jc-fs-sm);}
.view-filters .date-padding{float:left;}
.view-filters form .control-label{width:auto; float:left; margin:10px 15px 39px 0;}

.view-filters #edit-field-date-of-collection-value-wrapper,
.view-filters .panel-default{
  width:auto;
  display:inline-block;
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius-sm);
  box-shadow: none;
  margin: var(--jc-space-1) var(--jc-space-2) 0 0;
  background: #fff;
  padding: var(--jc-space-1);
}
.view-filters .panel-heading{float:left; background:none !important; border:0; padding:0;}
.view-filters .panel-title{font-size: var(--jc-fs-sm); font-weight:bold; background:transparent; padding:0; margin: 11px 8px 11px 5px;}
.view-filters .panel-body{float:left; padding:0;}
.view-filters .views-exposed-form .panel-body .form-group{border:0; margin:0; padding: var(--jc-space-1);}

.view-filters .bef-secondary-options .form-group,
.view-filters .bef-secondary-options #edit-date-filter-min-wrapper,
.view-filters .bef-secondary-options #edit-date-filter-max-wrapper{
  display:inline-block;
  vertical-align: top;
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius-sm);
  margin: var(--jc-space-1) !important;
  padding: var(--jc-space-1);
}
.view-filters .bef-secondary-options #edit-date-filter-min-wrapper .form-group,
.view-filters .bef-secondary-options #edit-date-filter-max-wrapper .form-group{border:none; margin:0; padding:0;}

.view-filters .chosen-container-multi ul.chosen-choices{max-height:70px; overflow-y:scroll !important;}
.view-filters .form-item{margin: var(--jc-space-1); vertical-align: top; border: 1px solid var(--jc-gray-200); padding: var(--jc-space-1); border-radius: var(--jc-radius-sm); background:#fff;}
.view-filters input{max-width:200px;}
.view-filters .chosen-container{max-width:250px;}
.view-filters select{max-height:82px;}

/* ==========================================================================
   Tables / listing views
   ========================================================================== */
table.table{width:auto !important;}
table.full, .calendar-calendar table{width:100% !important;}

thead, thead a{background-color: var(--jc-gray-100); color: var(--jc-gray-800);}
thead th.active{background-color: var(--jc-gray-200) !important;}
.table-bordered{border-color: var(--jc-gray-200);}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{border-color: var(--jc-gray-200);}
.table-striped > tbody > tr:nth-of-type(odd){background-color: var(--jc-gray-50);}
.table-hover > tbody > tr:hover{background-color: var(--jc-primary-tint);}

/* Wide (many-column) Views tables scroll horizontally in their own
   container instead of the whole page scrolling sideways. */
.view-content{overflow-x: auto; -webkit-overflow-scrolling: touch;}
.view-content table.table{margin-bottom: 0;}

.sticky-header{top:55px !important; background: var(--jc-gray-100); box-shadow: var(--jc-shadow-sm);}
.sticky-header th{padding: var(--jc-space-2); border: 1px solid var(--jc-gray-200);}

table > thead h4.label{font-size: var(--jc-fs-base);}

/* Pager */
.pagination > li > a,
.pagination > li > span,
.page-link{
  color: var(--jc-primary);
  border-color: var(--jc-gray-200);
}
.pagination > li > a:hover,
.pagination > li > a:focus{
  color: var(--jc-primary-dark);
  background-color: var(--jc-primary-tint);
  border-color: var(--jc-gray-200);
}
.pagination > .active > a,
.pagination > .active > span{
  background-color: var(--jc-primary);
  border-color: var(--jc-primary);
}

/* Custom (non-Views) tables */
table.ji-custom-table{width:auto;}
table.ji-custom-table td{min-width:50px; text-align:center; vertical-align:middle !important;}
table.ji-custom-table td a{font-weight:bold; font-size: var(--jc-fs-lg);}
table.ji-custom-table td a.status-near-expiry{
  font-weight:bold;
  font-size: var(--jc-fs-lg);
  background: var(--jc-danger);
  color:#fff;
  border-radius: 15px;
  display:inline-block;
  padding: 1px 10px;
  width:auto;
}
table.jc-current-status-group-wise-table tbody tr:nth-child(15){font-size: var(--jc-fs-lg); font-weight:bold;}

/* Boolean "flagged"/Approved badge — companion CSS for
   templates/views/views-view-field--expenses--flagged.html.twig */
.jc-flag-badge{
  display:inline-block;
  padding: 1px 10px;
  border-radius: 12px;
  font-size: var(--jc-fs-sm);
  font-weight: 600;
}
.jc-flag-badge--on{background: var(--jc-primary-tint); color: var(--jc-primary-dark);}
.jc-flag-badge--off{background: var(--jc-gray-100); color: var(--jc-gray-500);}

/* ==========================================================================
   Date calendar prev/next
   ========================================================================== */
.date-prev{background:none !important; padding:0; margin:0;}
.date-next{background:none !important; padding:0; margin:0;}
.date-prev a{margin:0 !important; padding:0; color: var(--jc-primary) !important;}
.date-prev a:hover, .date-next a:hover{background-color: var(--jc-primary-tint) !important;}
.date-prev a:active, .date-next a:active{background-color: var(--jc-primary-tint); border-color: var(--jc-gray-200);}
.date-next a{margin:0 !important; padding:0; color: var(--jc-primary) !important;}
.nav-tabs.nav-pills{font-size: var(--jc-fs-lg); font-weight:bold;}

/* ==========================================================================
   Dashboard / front page — block cards
   ========================================================================== */
.region-content section.block,
.region-content > article.full.todo,
.region-sidebar-first section,
.region-sidebar-second section{
  background:#fff;
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius);
  box-shadow: var(--jc-shadow-sm);
  padding: var(--jc-space-4);
  margin-bottom: var(--jc-space-4);
}
.region-content section.block > h2.block-title,
.region-sidebar-first section > h2.block-title,
.region-sidebar-second section > h2.block-title{
  margin-top:0;
  padding-bottom: var(--jc-space-2);
  border-bottom: 1px solid var(--jc-gray-200);
  font-size: var(--jc-fs-xl);
}
.region-sidebar-first h2.block-title{
  text-align:center;
  line-height: 1.8;
  font-size: var(--jc-fs-lg);
  letter-spacing: 0;
}
.region-sidebar-first ol,
.region-sidebar-first ul{padding-left: var(--jc-space-4);}
.region-sidebar-first section .btn{width:100%;}
section#block-ji-custom-units-issued-up-to-date{text-align:center; font-weight:bold; line-height:3;}

/* Drupal's own "block is broken or missing" notice — styled consistently
   with the card chrome above, not fixed (see docs/OPEN-QUESTIONS.md). */
.region-content section.block:has(> .messages--warning),
.region-content section.block:has(> .alert-warning){
  border-color: var(--jc-warning);
  background: #fffaf0;
}

/* Single node full-view page (e.g. a Todo): the fields sat with almost no
   vertical rhythm and the "Add new comment" form read as a continuation of
   the same block of text — no boundary at all between the two. */
.region-content > article.full.todo > footer .author{
  color: var(--jc-gray-500);
  font-size: var(--jc-fs-sm);
  margin-bottom: var(--jc-space-3);
  padding-bottom: var(--jc-space-3);
  border-bottom: 1px solid var(--jc-gray-200);
}
.region-content > article.full.todo > .content > .field{
  margin-bottom: var(--jc-space-3);
  clear: both;
}
/* Label + value row for inline-label fields (Assigned to / Status / Start
   Date). This theme's own field.html.twig (themes/contrib/bootstrap, NOT
   Drupal core's -- different class convention, field--label/--items/--item
   with a double dash) has no CSS of its own controlling label-inline
   layout, so it was at the mercy of whatever the Bootstrap CDN stylesheet
   does with a bare <div>. A multi-value field (4 stacked "Assigned to"
   values) ended up narrower/shorter fields (Status, Start Date) flowing up
   beside it instead of below -- taking explicit control with flexbox here
   removes that dependency entirely rather than guessing at the CDN CSS. */
.region-content > article.full.todo > .content > .field--label-inline{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--jc-space-2);
}
.region-content > article.full.todo > .content > .field--label-inline > .field--label{
  flex: 0 0 120px;
  font-weight: 600;
  color: var(--jc-gray-700);
}
.region-content > article.full.todo > .content > .field--label-inline > .field--items,
.region-content > article.full.todo > .content > .field--label-inline > .field--item{
  flex: 1 1 auto;
  min-width: 0;
}
.region-content > article.full.todo > .content > section{
  margin-top: var(--jc-space-5);
  padding-top: var(--jc-space-4);
  border-top: 1px solid var(--jc-gray-200);
}

/* ==========================================================================
   Search / finder blocks
   ========================================================================== */
#block-views-drive-calendar-block-1{margin-bottom: var(--jc-space-4);}
#bbsearch-block-form{max-width:300px;}
#bbsearch-block-form .form-item-search-type,
#bbsearch-block-form .form-item-search-text{display:inline-block; width:42%;}
#bbsearch-block-form .form-item-search-type select{width:100%; height:30px; font-size: var(--jc-fs-sm); border-radius: var(--jc-radius-sm) 0 0 var(--jc-radius-sm);}
#bbsearch-block-form .form-item-search-text input{height:30px; vertical-align:middle; margin:0; font-size: var(--jc-fs-sm); border-radius:0; margin-bottom:1px;}
#bbsearch-block-form button{border-radius: 0 var(--jc-radius-sm) var(--jc-radius-sm) 0; margin-bottom:3px;}

#finder-block-content_finder{max-width:350px; display:inline-block; vertical-align:top;}
#finder-block-content_finder .finder-form-element-title{display:inline-block; width:80%;}
#finder-block-content_finder .finder-form-element-title .control-label{text-align:left;}
#finder-block-content_finder .finder-form-element-title input{padding: var(--jc-space-2) var(--jc-space-3); border-radius: var(--jc-radius-sm) 0 0 var(--jc-radius-sm);}
#finder-block-content_finder button{display:inline-block; border-radius: 0 var(--jc-radius-sm) var(--jc-radius-sm) 0; line-height:1.25;}

.jc-fieldset-hidden{display:none;}

#block-system-user-menu{display:inline-block;}
#block-system-user-menu ul li{display:inline-block;}
#block-block-9{display:inline-block;}
#block-block-9 ul li{display:inline-block;}
#block-ji-custom-ji-user-login-logout-block{display:inline-block;}
#block-ji-custom-ji-user-login-logout-block ul li{display:inline-block;}

.jc-expiry-warning{background: var(--jc-warning); color:#fff; padding: 2px var(--jc-space-1); border-radius: var(--jc-radius-sm);}
.jc-expiry-danger{background: var(--jc-danger); color:#fff; padding: 2px var(--jc-space-1); border-radius: var(--jc-radius-sm);}

/* ==========================================================================
   Masquerade
   ========================================================================== */
.form-item-masquerade-user-field.form-autocomplete .dropdown{display:block;}

/* ==========================================================================
   Updates banner (was an auto-scrolling marquee — replaced with a static
   banner per user decision; no markup change needed)
   ========================================================================== */
#block-block-8{
  display:flex;
  align-items:center;
  line-height:1.5;
  font-size: var(--jc-fs-base);
  margin: 0 0 var(--jc-space-4) 0;
  padding: var(--jc-space-2) var(--jc-space-3);
  background: var(--jc-primary-tint);
  border: 1px solid var(--jc-gray-200);
  border-radius: var(--jc-radius);
  width:auto;
  max-width: 100%;
}
#block-block-8 .scroll{
  display:block;
  width:auto;
  overflow:visible;
  white-space:normal;
  animation:none;
  text-indent:0;
}

/* ==========================================================================
   Taskbar
   ========================================================================== */
#taskbar{font-size: var(--jc-fs-lg);}
#taskbar li a{padding: 3px var(--jc-space-3);}
#taskbar h2.block-title{display:none;}
#taskbar .taskbar-item-titlebar{padding: var(--jc-space-2) var(--jc-space-3) 7px 15px; font-size: var(--jc-fs-lg); font-weight:bold;}

/* Negative-margin layout hack — left as-is; purpose isn't derivable from
   sparse local data, verify live before changing (see design spec). */
.expense-summary div{margin-top:-200px;}
.expense-summary .table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th{
  padding: var(--jc-space-3);
  width: 500px;
}
.turn-around-time-summary div{margin-top:-250px;}
.turn-around-time-summary .table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th{
  padding: var(--jc-space-3);
  width: 500px;
}

/* ==========================================================================
   Misc
   ========================================================================== */
.logo{margin:0;}
.logo img{max-height:50px;}

/* Rich-text fields (comment bodies, the Details field, etc.) can contain an
   inline image pasted via CKEditor at its full native resolution -- e.g. a
   screenshot saved at 3152x1347px, seen on a real comment reply. Bootstrap 3
   only constrains images via the opt-in .img-responsive class, which
   CKEditor never adds to a pasted image, so the raw <img> blows out its
   container's width uncontrolled and distorts everything positioned after
   it (a threaded reply ends up rendering beside the oversized comment
   instead of below it). All projects on this Bootstrap 3 lineage should
   have this, not just finance8 -- scoped to text-long fields generally
   (field--type-text-long covers both comment-body and Details), not just
   the todo bundle. */
.field--type-text-long img{
  max-width: 100%;
  height: auto;
}

article.js-comment{
  box-shadow: var(--jc-shadow-sm);
  width:100%;
  background:#fff;
  border-radius: var(--jc-radius);
  padding: 1em;
  margin-bottom: 1em;
  border: 1px solid var(--jc-gray-100);
  display: flow-root;
}

/* Threaded replies (Drupal core wraps each reply level in a plain
   .indented div, see CommentViewBuilder) previously looked identical to a
   top-level comment. Indent + a teal left accent (no shadow, no tint)
   reads as "part of the conversation above" rather than a fresh comment
   -- compounds naturally at deeper reply levels since each nested
   .indented adds its own margin. */
.indented{
  margin-left: var(--jc-space-5);
}
.indented article.js-comment{
  background: none;
  border: none;
  border-left: 3px solid var(--jc-primary-light);
  border-radius: 0 var(--jc-radius) var(--jc-radius) 0;
  box-shadow: none;
  padding: var(--jc-space-3) var(--jc-space-4);
}

/* Posted-comment byline ("Submitted by ... on ..."), Todo node page only
   (comment_node_todo is a dedicated comment bundle for this content type) --
   same muted/divider treatment as the node's own author line, so a comment
   thread doesn't read as a continuation of the comment body above it. */
.region-content > article.full.todo article.js-comment > footer{
  color: var(--jc-gray-500);
  font-size: var(--jc-fs-sm);
  margin-bottom: var(--jc-space-2);
  padding-bottom: var(--jc-space-2);
  border-bottom: 1px solid var(--jc-gray-200);
}
.region-content > article.full.todo article.js-comment > footer p{
  margin: 0;
}

/* Generate Payment File: views_data_export's default .csv-feed styling
   hides link text off-screen and shows a fixed csv.png icon instead, so
   the HDFC RTGS/NEFT export button was indistinguishable from the other
   two CSV exports even after relabeling its text. Restore real text for
   just that one button. */
.views-data-export-feed--data-export-3 .feed-icon{
  display:inline-block;
  width:auto;
  text-indent:0;
  background:none;
}