/* Shared layout styles for FlexibleX layouts (FlexibleX, FlexibleX2, Subscribers)
   - Modern, crisp sidebar + overlay + toggle styles
   - Apply to both #flx-sidebar (FlexibleX) and #sidebar (Subscribers)
*/
:root{
  --fx-sidebar-width: 280px;
  --fx-header-height: 70px;
  --fx-bg: #ffffff;
  --fx-text: #343a40;
  --fx-accent: #0d6efd; /* bootstrap primary */
  --fx-accent-600: #0b5ed7;
  --fx-active-bg: #f1f5ff;
  --fx-sep: #e9ecef;
  --fx-shadow: rgba(15, 23, 42, 0.08);
}

/* Layout wrappers */
.flx-wrapper, .wrapper {
  display:flex;
  width:100%;
  align-items:stretch;
  min-height:100vh;
  background-color: var(--fx-bg);
}

/* Overlay used to dim content when sidebar open */
.overlay, .flx-overlay {
  display:none;
  position:fixed;
  width:100%;
  height:calc(100vh - var(--fx-header-height));
  top:var(--fx-header-height);
  left:0;
  background: rgba(3, 9, 23, 0.45);
  z-index:1035;
  opacity:0;
  transition: opacity .24s ease-in-out;
}
.overlay.active, .flx-overlay.flx-active{
  display:block;
  opacity:1;
}

/* Sidebar base (applies to both #sidebar and #flx-sidebar) */
#sidebar, #flx-sidebar{
  width:var(--fx-sidebar-width);
  max-width:var(--fx-sidebar-width);
  position:fixed;
  top:var(--fx-header-height);
  left:calc(-1 * var(--fx-sidebar-width));
  height:calc(100vh - var(--fx-header-height));
  background: var(--fx-bg);
  color: var(--fx-text);
  box-shadow: 2px 8px 30px var(--fx-shadow);
  overflow-y:auto;
  transition: left .28s cubic-bezier(.2,.9,.2,1), box-shadow .2s;
  z-index:1040;
}

/* visible state */
#sidebar.active, #flx-sidebar.flx-active{
  left:0;
}

/* Sidebar header */
#sidebar .sidebar-header, #flx-sidebar .flx-sidebar-header{
  padding:18px 16px;
  border-bottom:1px solid var(--fx-sep);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

/* close button */
.flx-close-btn, #dismiss{
  background:transparent;
  border:none;
  width:36px;height:36px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--fx-text);
}
.flx-close-btn:hover, #dismiss:hover{ background:var(--fx-sep); }

/* menu items */
#sidebar ul, #flx-sidebar ul{ list-style:none;padding:0;margin:0; }
#sidebar ul li a, #flx-sidebar ul li a{
  display:block;padding:10px 18px;color:var(--fx-text);text-decoration:none;border-left:3px solid transparent;transition: all .12s ease-in-out;font-size:0.95rem;
}
#sidebar ul li a:hover, #flx-sidebar ul li a:hover{ background:var(--fx-active-bg); color:var(--fx-accent); }
#sidebar ul li a .fa, #flx-sidebar ul li a .fa{ margin-right:12px; min-width:18px; text-align:center; }

/* accordion/accordion-button compatibility */
#flx-sidebar .accordion-button, #sidebar .dropdown-toggle{ padding:12px 18px; }

/* page content shift (optional) - left margin when sidebar visible on wider screens */
@media(min-width:992px){
  .content-with-sidebar{ margin-left:var(--fx-sidebar-width); transition: margin-left .25s ease-in-out; }
}

/* Toggle buttons - matching look */
.flx-menu-toggle, #sidebarCollapse, .btn-toggle-menu{
  background:var(--fx-accent); color:#fff; border:none; border-radius:6px; height:34px; line-height:34px; padding:0 10px; display:inline-flex;align-items:center;gap:.5rem;cursor:pointer; box-shadow: 0 4px 12px rgba(13,110,253,0.12);
}
.flx-menu-toggle:hover, #sidebarCollapse:hover, .btn-toggle-menu:hover{ background:var(--fx-accent-600); }

/* small utility styles for subscribers list */
.accounts-list{ padding:8px; }
.accounts-list li{ padding:10px;border-bottom:1px solid var(--fx-sep); }
.accounts-list li a{ color:var(--fx-text); display:block; }

/* subtle card-like look for sidebar content */
.sidebar-card{ padding:12px;background:#fbfcff;border-radius:6px;margin:10px;box-shadow:0 2px 6px rgba(15,23,42,0.03); }

/* loader fade helper */
.loader{ transition: opacity .5s ease; }

/* small responsive tweaks */
@media(max-width:991px){
  #sidebar, #flx-sidebar{ left: calc(-1 * var(--fx-sidebar-width)); }
  #sidebar.active, #flx-sidebar.flx-active{ left:0; }
  .overlay, .flx-overlay{ top:56px; height: calc(100vh - 56px); }
}

/* Period Utilities (calendar) compact/clarity tweaks
   Moved from inline layout styles to this shared CSS file so multiple
   FlexibleX layouts can reuse the small calendar UI rules. Uses
   --fx-* variables with fallbacks to --flx-* where present. */
.flx-calendar-block { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.flx-calendar-block .year-pill a.year-link {
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem; /* slightly smaller */
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.flx-calendar-block table { font-size: 0.78rem; }
.flx-calendar-block td { padding: 2px 6px; }
.flx-calendar-block a.flx-month-link {
  display: block; /* ensure anchor fills the cell */
  width: 100%;
  box-sizing: border-box;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--fx-text, var(--flx-text, #495057));
  background: transparent;
  border-radius: 4px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center; /* center the label within the anchor */
}

.flx-calendar-block a.flx-month-link:hover {
  background-color: rgba(0,0,0,0.04);
  color: var(--fx-accent, var(--flx-accent, #007bff));
}

/* Improved fixed layout for month grid
   - Force a 4-column fixed table so each month cell is predictable
   - Reduce padding and font-size so 3-letter abbreviations fit
   - Ensure the calendar block can scroll horizontally on very small viewports
   - Apply same compact rules to anchors that do not have .flx-month-link class */
.flx-calendar-block {
  box-sizing: border-box;
  max-width: 100%;
  padding: 10px;
}
.flx-calendar-block table {
  /* Use Bootstrap's table sizing; keep it full-width so columns distribute evenly */
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.flx-calendar-block .year-pill {
  display: block;
  width: 100%;
  margin-bottom: 6px;
}
.flx-calendar-block .year-pill .year-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: .4rem .6rem;
  border-radius: .35rem;
  color: #fff;
  background: var(--fx-accent, var(--flx-accent, #007bff));
  text-decoration: none;
}

.flx-calendar-block td {
  width: 33.3333%; /* three columns */
  text-align: center;
  vertical-align: middle;
}

/* Style form submit buttons used inside the sidebar so they match anchor menu items */
#flx-sidebar ul li form .sidebar-link-btn,
#flx-sidebar ul li form button.sidebar-link-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px; /* match anchor padding */
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none !important;
  cursor: pointer;
}

#flx-sidebar ul li form .sidebar-link-btn .fa,
#flx-sidebar ul li form .sidebar-link-btn .fas {
  min-width: 28px;
  font-size: 1.15rem;
  color: var(--flx-accent);
}

#flx-sidebar ul li form .sidebar-link-btn:hover {
  background-color: var(--flx-active-bg);
  color: var(--flx-accent);
}

.flx-month-link {
  display: block; /* fill cell */
  width: 100%;
  box-sizing: border-box; /* include padding in width calculations */
  padding: .375rem .5rem; /* match btn-sm like spacing */
  font-size: .9rem;
  line-height: 1;
  text-align: center;
  color: var(--fx-text, var(--flx-text, #495057));
  border: none;
  border-radius: .25rem;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis; /* prevent piercing through */
}

/* Consolidated form-control / input contrast improvements used by multiple layouts */
:root {
  --fx-form-bg: #fbfdff; /* light tint that contrasts on white */
  --fx-form-border: #dfe7ee; /* soft border */
}

/* --------------------------------------------------------------------------
   Subscribers layout overrides (moved from Views/Shared/_LayoutSubscribers.cshtml)
   Keeps sidebar, accounts-list and card tweaks centralized for reuse.
----------------------------------------------------------------------------- */

/* layout tokens used by subscribers layout */
:root { --fx-topbar-height: 64px; --fx-subs-purple: #2E0057; --fx-subs-accent: #8A2BE2; }

/* Sidebar adjustments specific to Subscribers child layout */
#sidebar {
  width: 280px;
  z-index: 1050; /* below header (header uses 1100) */
  position: fixed;
  top: var(--fx-topbar-height);
  left: -280px;
  height: calc(100vh - var(--fx-topbar-height));
  overflow-y: auto;
  overflow-x: hidden; /* prevent horizontal scroll */
  padding: 12px; /* inset content so cards are visible inside the sidebar */
  transition: left 0.25s ease;
  background: whitesmoke;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
#sidebar.active { left: 0; }
#sidebar .sidebar-header h4 { margin: 0; font-size: 1rem; padding-left: 6px; }

/* Sidebar header/link colors for a light background */
#sidebar .sidebar-header h4 a, #sidebar .sidebar-header h4 { color: var(--fx-subs-purple); }
#sidebar a { color: var(--fx-subs-purple); }

/* Overlay when sidebar is active: cover page content but sit below header */
.overlay { position: fixed; top: var(--fx-topbar-height); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 1040; display: none; }
.overlay.active { display: block; }

/* Ensure top nav (if fixed) sits above content */
.navbar, header { z-index: 1100; }

/* Accounts list: responsive cards */
.accounts-list, .accounts-list-1 { display:flex; flex-wrap:wrap; gap:12px; padding-left:0; margin:0; list-style:none; }
/* When inside the narrow sidebar, list items should be full-width and respect box-sizing */
#sidebar .accounts-list-1, #sidebar .accounts-list { flex-direction:column; gap:8px; }
#sidebar .accounts-list-1 li, #sidebar .accounts-list-1 li { width:100%; box-sizing:border-box; margin-bottom:0; }
.accounts-list li, .accounts-list-1 li { flex: 1 1 calc(50% - 12px); min-width:220px; box-sizing:border-box; }
@media (min-width: 992px) { .accounts-list li, .accounts-list-1 li { flex: 1 1 calc(33.333% - 12px); } }

.accounts-list .card { height:100%; display:flex; flex-direction:column; cursor:pointer; transition: box-shadow .15s ease, transform .08s ease; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #fff; border-radius:6px; }
.accounts-list .card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.25); transform: translateY(-3px); background: rgba(255,255,255,0.06); }

/* Card body: dark purple gradient with clear contrast for main view (non-sidebar) */
.accounts-list .card-body {
    padding: .75rem;
    flex:1 1 auto;
    min-height: 0;
    color: #fff;
    background: linear-gradient(180deg, rgba(46,0,87,0.92) 0%, rgba(58,8,120,0.92) 100%);
    border-radius: 6px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow: visible;
}

.accounts-list .card .fa { margin-right:8px; color: rgba(255,255,255,0.95); }

.accounts-list .cta { display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; }

.accounts-list .card { height:100%; display:flex; flex-direction:column; cursor:pointer; transition: box-shadow .15s ease, transform .08s ease; }
.accounts-list a.card { display:block; color:inherit; text-decoration:none; }
.accounts-list .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #fff; }
.accounts-list .card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.25); transform: translateY(-3px); background: rgba(255,255,255,0.06); }

.accounts-list .card { position:relative; }
.accounts-list .card::before { content: ''; position:absolute; left:0; top:0; bottom:0; width:6px; background: var(--fx-subs-accent); border-top-left-radius:4px; border-bottom-left-radius:4px; }

.accounts-list .card-body { padding: .75rem; flex:1 1 auto; color: #fff; }
.accounts-list .card .fa { margin-right:8px; color: rgba(255,255,255,0.9); }

.accounts-list .card h5, .accounts-list .card .fw-bold { color: #fff; }
.accounts-list .card .text-muted { color: rgba(255,255,255,0.75) !important; }

/* Ensure long account names wrap inside the card and do not overflow the flex container */
.flx-account-name { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.2; margin-bottom: 0; }

/* Sidebar-specific sizing and spacing (cards inside the padded sidebar) */
#sidebar .card { width: calc(100% - 24px); margin: 0 0 6px 0; box-sizing: border-box; }
#sidebar .card.w-100 { width: 100%; }
#sidebar .card .card-body { padding-left: 8px; padding-right: 8px; box-sizing: border-box; }

/* Sidebar-specific look: light card, dark-purple text, thin purple border */
#sidebar .accounts-list-1 .card, #sidebar .accounts-list .card {
    background: #ffffff;
    color: var(--fx-subs-purple);
    border: 1px solid rgba(46,0,87,0.18);
    border-radius: 5px;
    box-shadow: none;
}
#sidebar .accounts-list-1 .card .card-body, #sidebar .accounts-list .card .card-body {
    background: transparent !important;
    color: var(--fx-subs-purple) !important;
    padding-top: .5rem; padding-bottom: .5rem;
}
#sidebar .accounts-list .card .text-muted, #sidebar .accounts-list-1 .card .text-muted { color: rgba(0,0,0,0.6) !important; }

/* Button styling utilities were removed per revert request. Legacy button
   styles from `site.css` will apply. If you want to reintroduce a global
   strong button utility, add the .fx-btn-strong rules here. */

/* Restore flx-action-button rules with higher specificity so they are not
   accidentally overridden by Bootstrap or other global utilities. These
   selectors target anchors, buttons and input elements that carry both
   the .btn and .flx-action-button-* classes. Adjust colors here if you
   want a single centralized look for subscriber/BDVR action buttons. */
.btn.flx-action-button-1,
button.btn.flx-action-button-1,
input.btn.flx-action-button-1,
a.btn.flx-action-button-1 {
  background-color: lightslategray !important;
  color: #fff !important;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  min-width: 50px;
  display: inline-block;
}

.btn.flx-action-button-1:hover,
.btn.flx-action-button-1:focus,
button.btn.flx-action-button-1:hover,
input.btn.flx-action-button-1:hover,
a.btn.flx-action-button-1:hover {
  background-color: #4b4f57 !important; /* slightly darker on hover */
  color: #fff !important;
}

.btn.flx-action-button-2,
button.btn.flx-action-button-2,
input.btn.flx-action-button-2,
a.btn.flx-action-button-2 {
  background-color: lightslategray !important;
  color: #fff !important;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  height: 30px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  min-width: 140px;
  float: left;
}

.btn.flx-action-button-2:hover,
.btn.flx-action-button-2:focus,
button.btn.flx-action-button-2:hover,
input.btn.flx-action-button-2:hover,
a.btn.flx-action-button-2:hover {
  background-color: #4b4f57 !important;
  color: #fff !important;
}

/* Ultra-specific rule for the Save Changes button in EditDocument (name="Savetransdocs").
   This ensures the intended .fx-btn-strong styling is applied even if other
   broad rules attempt to override it. */
/* Removed per-input ultra-specific override for Savetransdocs to prefer class-based
   styling (.fx-btn-strong, and the flx-action-button-2.fx-btn-strong higher-specificity
   rule above). This avoids having to special-case many save buttons across views. */

/* Sidebar icon sizing and alignment: keep icon small, align with h5, and allow adjacent text to shrink */
#sidebar .card-body .d-flex.align-items-center > i.fa,
#sidebar .card-body .d-flex.align-items-center > i.fas,
#sidebar .card-body .d-flex.align-items-center > i.far {
  font-size: 1.1rem; /* reduced size compared to fa-2x */
  margin-right: 0.5rem;
  flex: 0 0 auto;
  line-height: 1; /* ensure vertical alignment */
}

/* Make the content next to the icon a flexible column that can shrink (prevents overflow) */
#sidebar .card-body .d-flex.align-items-center > div {
  flex: 1 1 auto;
  min-width: 0; /* important for text truncation inside flex */
}

/* Client ref and value: compact single-line with ellipsis if too long */
#sidebar .card-body .d-flex.align-items-center > div span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Slightly reduce the h5 size inside sidebar cards for better line fit */
#sidebar .card-body .d-flex.align-items-center > div h5 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}


/* Target controls inside cards and main screen body areas */

/* Mobile-first compacting for Subscribers to mimic a mobile app */
@media (max-width: 767.98px) {
  /* Make wrapper and content use full viewport width and reduce gaps */
  .wrapper, .flx-wrapper { padding-left: 0; padding-right: 0; }

  /* Sidebar becomes full-screen drawer; reduce top inset */
  #sidebar { width: 100%; left: -100%; top: 56px; height: calc(100vh - 56px); padding:8px; }
  #sidebar.active { left: 0; }

  /* Reduce header spacing inside sidebar */
  #sidebar .sidebar-header { padding:10px 8px; }

  /* Tighten sidebar items */
  #sidebar .accounts-list-1 li { padding:4px 0; }
  #sidebar .card.w-100 { padding:4px; }
  #sidebar .card .card-body { padding:6px 8px; }

  /* Shrink top nav buttons and float to the edges */
  nav > .btn, nav a.btn { padding:6px 8px; height:auto; line-height:1; }

  /* Main content: remove container side padding and use edge-to-edge content */
  .container { padding-left:6px !important; padding-right:6px !important; }
  .subs-body-content.page-content { padding:4px !important; margin:0 !important; }

  /* Reduce fonts slightly for compact mobile display */
  body, .subs-body-content, #sidebar { font-size: 0.94rem; }

  /* Make Add Account button full width but small vertical padding */
  #sidebar a.btn { width:100%; padding:8px 10px; font-size:0.95rem; }

  /* Ensure list items don't create extra spacing */
  .accounts-list, .accounts-list-1 { gap:6px; }

  /* Make icons slightly smaller to save space */
  #sidebar .card-body .fa { font-size:1rem; margin-right:6px; }

  /* Minimize overlay top offset on small screens */
  .overlay { top:56px; }
}

/* BDVR templates - compact spacing to avoid wasted vertical whitespace */
.bdvr-compact, .template-entry-form, .flx-container-cool-white.subs-entry-form-details {
  margin: 0;
  padding: 6px; /* small padding but readable */
}

.template-entry-form p { margin: 0 0 6px 0; padding: 0; }
.template-entry-form h5, .template-entry-form h6 { margin-top:6px; margin-bottom:6px; }

.template-entry-form .form-group { margin-bottom:8px; }
.template-entry-form dl.dl-horizontal dt { margin:0 0 4px 0; font-weight:600; }
.template-entry-form dl.dl-horizontal dd { margin:0 0 8px 0; }

/* Reduce HR spacing in BDVR screens */
.template-entry-form hr, .bdvr-compact hr { margin:6px 0; border-width:thin; }

/* Compact action lists */
.document-entry-mode-list { margin:0; padding:0; }
.document-entry-mode-list li { margin:0 6px 0 0; display:inline-block; }

/* Make small detail panels compact */
.flexiblex-theme-color-1 { padding:6px; margin-bottom:6px; }

/* Slightly reduce font-size for dense BDVR areas to fit more content vertically */
.template-entry-form, .bdvr-compact { font-size:0.96rem; }

/* Prevent nested padding: when a data-entry form sits inside the page content, avoid double padding */
.subs-body-content.page-content .subs-data-entry-form,
.subs-body-content.page-content .template-entry-form {
  padding: 0 !important;
  margin: 0 !important;
}

/* Compact description lists inside BDVR/subscriber content */
.subs-body-content.page-content dl.dl-horizontal,
.template-entry-form dl.dl-horizontal,
.bdvr-compact dl.dl-horizontal {
  margin-bottom: 6px; /* reduce default 20px */
}
.subs-body-content.page-content dl.dl-horizontal dt,
.template-entry-form dl.dl-horizontal dt,
.bdvr-compact dl.dl-horizontal dt {
  margin: 0 0 4px 0;
  padding: 0;
  font-weight: 600;
}
.subs-body-content.page-content dl.dl-horizontal dd,
.template-entry-form dl.dl-horizontal dd,
.bdvr-compact dl.dl-horizontal dd {
  margin: 0 0 8px 0;
  padding: 0;
}

/* Force left-aligned labels for horizontal dl in subscriber/BDVR areas */
.subs-body-content.page-content dl.dl-horizontal dt,
.template-entry-form dl.dl-horizontal dt,
.bdvr-compact dl.dl-horizontal dt {
  float: none !important;
  width: auto !important;
  text-align: left !important;
  display: block !important;
}
.subs-body-content.page-content dl.dl-horizontal dd,
.template-entry-form dl.dl-horizontal dd,
.bdvr-compact dl.dl-horizontal dd {
  margin-left: 0 !important;
}


/* Slightly larger mobiles / phablets - gentle padding but still compact */
@media (min-width:768px) and (max-width:991.98px) {
  .wrapper, .flx-wrapper { padding-left:0; padding-right:0; }
  #sidebar { width:260px; left:-260px; padding:10px; }
  #sidebar .sidebar-header { padding:12px; }
  .container { padding-left:8px !important; padding-right:8px !important; }
  .subs-body-content.page-content { padding:6px; }
}
.card .form-control, .card input, .card textarea, .card select,
#flx-screen-body .form-control, #flx-screen-body input, #flx-screen-body textarea, #flx-screen-body select,
.subs-body-content .form-control, .subs-body-content input, .subs-body-content textarea, .subs-body-content select {
  background-color: var(--fx-form-bg) !important;
  border: 1px solid var(--fx-form-border) !important;
  color: #1f2933 !important;
}

/* Readonly / disabled fields should remain clearly visible */
.card input[readonly], .card input:disabled,
#flx-screen-body input[readonly], #flx-screen-body input:disabled,
.subs-body-content input[readonly], .subs-body-content input:disabled {
  background-color: #f7f9fb !important;
  opacity: 1 !important;
  color: #495057 !important;
}

/* Focus ring for keyboard users */
.card .form-control:focus, #flx-screen-body .form-control:focus, .subs-body-content .form-control:focus {
  box-shadow: 0 0 0 0.15rem rgba(0,123,255,0.12) !important;
  border-color: #80bdff !important;
  outline: none !important;
}