/*********************************************************
  FIDO — Sage/Grey UI polish for APEX Universal Theme
  (place as the LAST CSS file so it wins the cascade)
**********************************************************/

/* --------- Theme Tokens (tweak here) --------- */
:root{
  --fido-text:            #374151;   /* slate */
  --fido-text-strong:     #1f2937;   /* darker slate */
  --fido-pill:            #e3f2ed;   /* pale sage */
  --fido-pill-active:     #d1e7dd;   /* muted sage */
  --fido-underline:       #6ba292;   /* sage line */
  --fido-underline-strong:#4f7c66;   /* darker sage line */
  --fido-radius:          10px;
  --fido-caret-size:      .75rem;
}

/* =======================================================
   HEADER (branding strip)
======================================================= */
.t-Header,
.t-Header-branding,
.t-Header-branding .t-Header-logo,
.t-Header-branding .t-Header-controls{
  background: #f7faf9 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.t-Header{ padding:6px 16px !important; min-height:48px !important; }
.t-Header-logo, .t-Header-logo a{
  color: var(--fido-text) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
}

/* Top-right nav buttons (Application Settings, Logout, etc.) */
.t-NavigationBar-item a, .t-NavigationBar-item .t-Icon{
  color: var(--fido-text) !important;
  font-size: .95rem !important;
  font-weight: 500;
  opacity: .9;
}
.t-NavigationBar-item a:hover,
.t-NavigationBar-item a:focus,
.t-NavigationBar-item .t-Icon:hover{
  color: var(--fido-text-strong) !important;
  opacity: 1;
}
.t-Button--header.t-Button--navBar{
  color: var(--fido-text) !important;
  background: transparent !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
  transition: color .2s, background .2s;
}
.t-Button--header.t-Button--navBar:hover,
.t-Button--header.t-Button--navBar:focus{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill) !important;
  border-radius: 6px;
}
.t-Button--header.t-Button--navBar.is-active,
.t-Button--header.t-Button--navBar:active{
  color: #111827 !important;
  background: var(--fido-pill-active) !important;
  font-weight: 600 !important;
}

/* =======================================================
   TOP MENUBAR (Home, Children, Registration, …)
======================================================= */

/* Neutral background + no UT shadows/bands */
.t-Header-nav,
.t-Header-nav .a-MenuBar,
.t-Header-nav .a-MenuBar-items{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Override UT menubar variables so it never paints dark bands */
.t-Header-nav{
  --ut-header-menubar-item-current-background-color: transparent;
  --ut-header-menubar-item-hover-background-color:   transparent;
  --ut-header-menubar-item-current-text-color:       var(--fido-text-strong);
  --ut-header-menubar-item-hover-text-color:         var(--fido-text-strong);

  --a-menubar-item-text-color:                       var(--fido-text);
  --a-menubar-item-current-text-color:               var(--fido-text-strong);
  --a-menubar-item-hover-text-color:                 var(--fido-text-strong);
}

/* Reset the item wrapper in ALL states (kills black bars) */
.t-Header-nav .a-MenuBar .a-MenuBar-item,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-hover,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-focused,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-expanded,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-current,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-active,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-selected{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.t-Header-nav .a-MenuBar .a-MenuBar-item::before,
.t-Header-nav .a-MenuBar .a-MenuBar-item::after{ content:none !important; }

/* Label styling */
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item > a.a-MenuBar-label{
  position: relative;
  color: var(--fido-text) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: var(--fido-radius);
  transition: color .2s ease, background .2s ease;
}

/* Hover/focus pill */
.t-Header-nav .a-MenuBar-item.is-hover > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-focused > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label:hover{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill) !important;
}

/* Active/current pill */
.t-Header-nav .a-MenuBar-item.is-active   > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-current  > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-selected > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-expanded > .a-MenuBar-label{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill-active) !important;
  font-weight: 600 !important;
}

/* Underline animation */
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label::after{
  content:"";
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:0; height:2px; background:var(--fido-underline); transition:width .25s ease;
}
.t-Header-nav .a-MenuBar-item:hover   > .a-MenuBar-label::after{ width:60%; }
.t-Header-nav .a-MenuBar-item.is-active   > .a-MenuBar-label::after,
.t-Header-nav .a-MenuBar-item.is-current  > .a-MenuBar-label::after,
.t-Header-nav .a-MenuBar-item.is-selected > .a-MenuBar-label::after{
  width:60%; background:var(--fido-underline-strong);
}

/* Keep the little caret cell transparent */
.t-Header-nav .a-Menu-subMenuCol,
.t-Header-nav .a-MenuBar-item.is-hover    .a-Menu-subMenuCol,
.t-Header-nav .a-MenuBar-item.is-expanded .a-Menu-subMenuCol{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =======================================================
   CARETS (replace UT block glyphs)
======================================================= */

/* Neutralise UT icon glyph everywhere */
.a-Icon.icon-menu-drop-down{
  font-size:0 !important;
  color:transparent !important;
  background:none !important;
  border:0 !important;
  line-height:1;
}

/* Top menubar caret: ▼ */
.t-Header-nav .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  content:"▾";
  font-size: var(--fido-caret-size);
  color: var(--fido-text);
  vertical-align: middle;
  transition: color .2s ease;
}
.t-Header-nav .a-MenuBar-item.is-hover .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before,
.t-Header-nav .a-MenuBar-item.is-focused .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  color: var(--fido-text-strong);
}

/* Dropdown menu caret: ▶ turns ▼ when expanded */
.a-Menu .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  content:"▸";
  font-size: calc(var(--fido-caret-size) - .05rem);
  color: var(--fido-text);
  vertical-align: middle;
  transition: transform .2s ease, color .2s ease;
}
.a-Menu-item[aria-expanded="true"] .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  transform: rotate(90deg);
  color: var(--fido-text-strong);
}

/* Remove any top “callout” band on the dropdown panel */
.a-Menu.a-Menu--top,
.a-Menu.a-Menu--top .a-Menu-content{ background-image:none !important; border-top:0 !important; }
.a-Menu.a-Menu--top::before,
.a-Menu.a-Menu--top::after,
.a-Menu.a-Menu--top .a-Menu-content::before,
.a-Menu.a-Menu--top .a-Menu-content::after{ content:none !important; }

/* =======================================================
   FINAL SAFETY: readable current tab in every state
======================================================= */
.t-Header-nav .a-MenuBar .a-MenuBar-item:not(.is-disabled){ opacity:1 !important; filter:none !important; }
.t-Header-nav .a-MenuBar .a-MenuBar-item > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item > a.a-MenuBar-label{
  -webkit-text-fill-color: var(--fido-text) !important;
}
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-current  > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-active   > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-selected > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-expanded > .a-MenuBar-label{
  -webkit-text-fill-color: var(--fido-text-strong) !important;
}
/* Remove vertical separators between top menu items */
.t-Header-nav{
  --a-menubar-item-border-width: 0px !important;
  --a-menubar-item-border-color: transparent !important;
  --a-menubar-item-split-border-width: 0px !important;   /* safety */
  --a-menubar-item-split-border-color: transparent !important;
}

/* Belt & braces in case a theme hard-codes borders */
.t-Header-nav .a-MenuBar .a-MenuBar-item{
  border: 0 !important;
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
  box-shadow: none !important;   /* some skins draw the separator as an inset shadow */
  margin-inline-start: 0 !important;  /* neutralise the -1px offset used when borders exist */
}
/* ================================================================
   SmartNursery — Invoicing Theme (Pastel Palette)
   ================================================================
   
   Colour palette derived from existing FIDO dashboard cards:
   
   Primary (teal/mint):   #7ecac1 / bg: #e8f6f4
   Secondary (green):     #8cc63f / bg: #edf7e1
   Accent (rose/pink):    #d4a0a0 / bg: #faf0f0
   Info (lavender):       #a8b5d6 / bg: #eef1f8
   Warning (gold):        #d4c36a / bg: #faf6e4
   Purple:                #b8a9d4 / bg: #f3eff8
   
   Text:                  #4a4a4a (dark grey, not black)
   Text secondary:        #777777
   Borders:               #e8e8e8
   Background:            #f9fafb
   White cards:           #ffffff
   
   ================================================================ */

/* ================================================================
   SHARED ACROSS ALL INVOICING PAGES
   Add to Application > Shared Components > User Interface > CSS
   or paste into each page's Inline CSS
   ================================================================ */

/* -- Selection Bar (replaces navy gradient) -- */
.sn-selection-bar {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: 0 4px 16px rgba(126, 202, 193, 0.25);
    color: #fff;
    margin-bottom: 16px;
}
.sn-selection-bar .t-Form-label {
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* -- Funding Info Cards -- */
.sn-funding-cards {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}
.sn-funding-card {
    flex: 1;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
}
.sn-funding-card-label {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.sn-funding-card-value {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

/* -- Alternative: Cards on light background -- */
.sn-funding-card--light {
    flex: 1;
    background: #e8f6f4;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    border: 1px solid #cce8e4;
}
.sn-funding-card--light .sn-funding-card-label {
    color: #5bb8ad;
}
.sn-funding-card--light .sn-funding-card-value {
    color: #3a8a80;
}

/* -- Pattern Grid -- */
.sn-pattern-grid {
    background: #fff;
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e8e8e8;
}
.sn-pattern-grid .t-Form-fieldContainer {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
}
.sn-pattern-grid .t-Form-label {
    font-weight: 600;
    color: #4a4a4a;
    font-size: 14px;
}
.sn-pattern-grid .apex-item-text {
    width: 90px !important;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    padding: 6px;
    transition: border-color 0.2s;
}
.sn-pattern-grid .apex-item-text:focus {
    border-color: #7ecac1;
    box-shadow: 0 0 0 3px rgba(126, 202, 193, 0.15);
}

/* -- Breakdown Table -- */
.sn-breakdown .t-Report-report {
    border-radius: 8px;
    overflow: hidden;
}
.sn-breakdown .t-Report-report thead th {
    background: #4a4a4a;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 12px;
}
.sn-breakdown .t-Report-report tbody td {
    padding: 8px 12px;
    font-size: 13px;
    color: #4a4a4a;
    border-bottom: 1px solid #f0f0f0;
}

/* -- Weekly Total Banner -- */
.sn-weekly-total {
    background: linear-gradient(135deg, #8cc63f 0%, #6ba830 100%);
    border-radius: 12px;
    padding: 16px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(140, 198, 63, 0.25);
}
.sn-weekly-total-label {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sn-weekly-total-amount {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
}

/* -- Save / Action Buttons -- */
.sn-save-btn .t-Button,
.sn-generate-btn .t-Button {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(126, 202, 193, 0.3);
    transition: all 0.2s ease;
    color: #fff;
}
.sn-save-btn .t-Button:hover,
.sn-generate-btn .t-Button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(126, 202, 193, 0.4);
}

/* -- Invoice Preview -- */
.sn-invoice-preview {
    background: #fff;
    border-radius: 12px;
    padding: 32px 40px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    border: 1px solid #e8e8e8;
    max-width: 800px;
    margin-top: 16px;
    font-family: 'Georgia', serif;
}
.sn-invoice-preview-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid #8cc63f;
}
.sn-invoice-preview-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #b8ddb3 0%, #6ba830 100%);
    border-radius: 50%;
    flex-shrink: 0;
}
.sn-invoice-preview-org h2 {
    margin: 0 0 4px 0;
    color: #5bb8ad;
    font-size: 24px;
    font-weight: 700;
}
.sn-invoice-preview-org p {
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.4;
}

.sn-inv-title {
    font-size: 20px;
    font-weight: 700;
    color: #4a4a4a;
    margin: 16px 0;
}
.sn-inv-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 13px;
    color: #777;
}
.sn-inv-to {
    margin-bottom: 16px;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
}
.sn-inv-child {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
}
.sn-inv-charges-title {
    color: #5bb8ad;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    border-bottom: 2px solid #7ecac1;
    padding-bottom: 6px;
}

.sn-inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 20px;
}
.sn-inv-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}
.sn-inv-table td:nth-child(2),
.sn-inv-table td:nth-child(3),
.sn-inv-table td:nth-child(4) {
    text-align: right;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}
.sn-inv-table tr.sn-inv-total td {
    border-top: 2px solid #4a4a4a;
    border-bottom: none;
    font-weight: 700;
    font-size: 16px;
    padding-top: 12px;
}
.sn-inv-footer {
    margin-top: 24px;
    font-size: 12px;
    font-style: italic;
    color: #999;
    line-height: 1.6;
}
.sn-inv-company {
    margin-top: 40px;
    font-size: 11px;
    color: #bbb;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

/* -- Status Badges (Invoice Listing) -- */
.sn-status-draft {
    display: inline-block;
    background: #d4c36a;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.sn-status-issued {
    display: inline-block;
    background: #7ecac1;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.sn-status-paid {
    display: inline-block;
    background: #8cc63f;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.sn-status-overdue {
    display: inline-block;
    background: #d4a0a0;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* -- Funding Type Badges -- */
.sn-badge-30hr {
    display: inline-block;
    background: #8cc63f;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.sn-badge-15hr {
    display: inline-block;
    background: #7ecac1;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.sn-badge-none {
    display: inline-block;
    background: #bbb;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* -- Amount Display -- */
.sn-amount {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #3a8a80;
}
.sn-hrs {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #5bb8ad;
}

/* -- Setup Page Header -- */
.sn-setup-header {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(126, 202, 193, 0.25);
    color: #fff;
}
.sn-setup-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* -- Calculated Hours Display (Child Funding form) -- */
.sn-calc-hours {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    max-width: 700px;
}
.sn-calc-hours-label {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sn-calc-hours-value {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
}

/* -- Invoice Created Banner -- */
.sn-invoice-created {
    background: linear-gradient(135deg, #8cc63f 0%, #6ba830 100%);
    border-radius: 12px;
    padding: 20px 28px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* -- General Form Styling -- */
.sn-gen-form,
.sn-cf-form {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e8e8e8;
    max-width: 700px;
}
.sn-gen-form .t-Form-label,
.sn-cf-form .t-Form-label {
    font-weight: 600;
    color: var(--fido-text); 
}