/* ============================================================ modern-overrides.css Drop-in modernization for Coach Evaluator (Bootstrap 3 base) Layered ON TOP of Bootstrap 3 — does not replace it. Targets dated visual elements without changing markup. To use: drop in /Content/, then add to Site.Master : ============================================================ */ /* ---------- Typography & base ---------- */ body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1f2937; background-color: #f9fafb; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 600; color: #111827; letter-spacing: -0.01em; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 17px; } a { color: #2563eb; transition: color 0.15s; } a:hover, a:focus { color: #1d4ed8; text-decoration: none; } label { color: #374151; font-weight: 500; font-size: 14px; } hr { border-color: #e5e7eb; margin: 20px 0; } /* ---------- Navbar (modernized — Option B style) ---------- Pattern: neutral white chrome + school color used as accent. - White background (not the school's brand color full-strength) - Top 4px border in the school's brand color (set inline by code-behind) - School color used for active-page underline indicator - School color used as nav link text (set inline via ForeColor in code-behind) - Subtle shadow for depth */ .navbar-default { background: white !important; background-color: white !important; border: none; border-top: 4px solid #1f2937; /* fallback if school hasn't set a color; usually overridden */ border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); min-height: 60px; margin-bottom: 0; z-index: 1030; opacity: 1 !important; } /* Ensure navbar fixed-top is fully opaque even if a school's bg color is light/transparent — content must never bleed through */ .navbar-fixed-top { background-clip: padding-box !important; } /* Make sure the inner navbar container/collapse has no transparency */ .navbar-default .container, .navbar-default .navbar-collapse, .navbar-default .navbar-header { background: transparent; } .navbar-default .navbar-brand { font-weight: 600; font-size: 18px; line-height: 30px; color: #111827 !important; /* Brand text always dark on the new white background regardless of inline overrides from older school configs that set color:white assuming dark backgrounds */ } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #1f2937 !important; opacity: 1; } .navbar-default .navbar-nav { font-size: 14px !important; } /* Nav link styling — fall back to dark gray if no inline color is set, but per-school inline ForeColor= still wins. The bottom margin reserves space for the active-page underline indicator. */ .navbar-default .navbar-nav > li > a { font-size: 14px !important; font-weight: 500; padding: 18px 14px; color: #374151; border-bottom: 3px solid transparent; transition: border-color 0.15s, background 0.15s, color 0.15s; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background: #f9fafb; color: #111827; } /* Active page indicator — code-behind adds the .nav-active class to the current page's
  • . The underline color comes from the --school-accent CSS custom property (set inline by code-behind from HEADER_BACK_COLOR). Falls back to a default blue if no school accent is set. */ .navbar-default .navbar-nav > .nav-active > a, .navbar-default .navbar-nav > .nav-active > a:hover, .navbar-default .navbar-nav > .nav-active > a:focus { background: transparent; color: #111827; border-bottom-color: var(--school-accent, #2563eb); font-weight: 600; } /* Keep the .active class working too in case Bootstrap auto-applies it somewhere we haven't accounted for. */ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: transparent; color: #111827; border-bottom-color: var(--school-accent, #2563eb); font-weight: 600; } /* Right-side nav (User Settings + Log Off) — soft separation from main nav. */ .navbar-default .navbar-nav.navbar-right > li > a { color: #6b7280; font-size: 13px !important; text-transform: none; letter-spacing: 0; } .navbar-default .navbar-nav.navbar-right > li > a:hover { color: #111827; background: #f9fafb; } /* Mobile hamburger toggle */ .navbar-toggle { border-color: #d1d5db; margin-top: 13px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: #f3f4f6; } .navbar-default .navbar-toggle .icon-bar { background-color: #4b5563; } /* Kill the red debug wrapper if you can't remove it from markup */ body .navbar-fixed-top, body div[style*="background-color: red"] > .navbar { background-color: transparent; } body div[style*="background-color: red"] { background-color: transparent !important; } /* Body content offset for fixed navbar — bumped a touch for the new top accent stripe */ .body-content { padding-top: 14px; } /* ---------- Buttons ---------- */ .btn { border-radius: 6px; font-weight: 500; font-size: 14px; padding: 8px 16px; border: 1px solid transparent; transition: all 0.15s; text-shadow: none; box-shadow: none; background-image: none !important; } .btn:focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } .btn-primary { background-color: #2563eb; border-color: #2563eb; color: white; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: white; } .btn-info { background-color: #6b7280; border-color: #6b7280; color: white; } .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: #4b5563 !important; border-color: #4b5563 !important; } .btn-success { background-color: #059669; border-color: #059669; } .btn-success:hover, .btn-success:focus { background-color: #047857 !important; border-color: #047857 !important; } .btn-danger { background-color: #dc2626; border-color: #dc2626; } .btn-danger:hover, .btn-danger:focus { background-color: #b91c1c !important; border-color: #b91c1c !important; } .btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: white; } .btn-default { background-color: white; border-color: #d1d5db; color: #374151; } .btn-default:hover, .btn-default:focus { background-color: #f9fafb; border-color: #9ca3af; color: #111827; } /* Modernize the page-level .myButton red gradient button (Evaluations.aspx etc) */ .myButton { background: #2563eb !important; background-image: none !important; box-shadow: none !important; border: none !important; border-radius: 6px !important; font-family: inherit !important; font-weight: 500 !important; font-size: 14px !important; text-shadow: none !important; padding: 8px 16px !important; color: white !important; transition: background-color 0.15s !important; filter: none !important; } .myButton:hover { background: #1d4ed8 !important; background-image: none !important; } /* ---------- Form controls ---------- */ .form-control { border-radius: 6px; border: 1px solid #d1d5db; box-shadow: none; font-size: 14px; color: #111827; transition: border-color 0.15s, box-shadow 0.15s; height: 38px; padding: 8px 12px; } .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); outline: none; } textarea.form-control { height: auto; min-height: 80px; } /* ---------- Tables / GridViews ---------- */ .table, table.table-bordered, .GridView, table[id*="GridView"], table[id*="_GridView"] { background: white; border: 1px solid #e5e7eb; border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; margin-bottom: 16px; } .table > thead > tr > th, table.table-bordered > thead > tr > th, table[id*="GridView"] > tbody > tr:first-child > th, table[id*="GridView"] tr.GridViewHeader > th { background: #f3f4f6; color: #374151; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; border-bottom: 1px solid #e5e7eb !important; border-top: none !important; border-left: none !important; border-right: none !important; padding: 12px; } .table > tbody > tr > td, table.table-bordered > tbody > tr > td, table[id*="GridView"] > tbody > tr > td { padding: 12px; border-top: 1px solid #f3f4f6 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; color: #1f2937; font-size: 14px; vertical-align: middle; } .table > tbody > tr:hover, table[id*="GridView"] > tbody > tr:hover { background-color: #f9fafb; } .table > tbody > tr:first-child > td { border-top: none !important; } /* GridView pager */ .GridViewPager, [class*="pagination"] { margin-top: 12px; } /* ---------- Panels / Wells ---------- */ .panel { border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.04); background: white; margin-bottom: 20px; } .panel-default > .panel-heading { background: #f9fafb; border-bottom: 1px solid #e5e7eb; color: #111827; font-weight: 600; border-radius: 8px 8px 0 0; padding: 12px 16px; } .well { background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: none; padding: 16px; } /* ---------- Modal ---------- */ .modal-content { border-radius: 10px; border: none; box-shadow: 0 20px 50px rgba(0,0,0,0.15); } .modal-header { border-bottom: 1px solid #e5e7eb; padding: 18px 20px; border-radius: 10px 10px 0 0; } .modal-title { color: #111827; font-weight: 600; } .modal-footer { border-top: 1px solid #e5e7eb; padding: 16px 20px; border-radius: 0 0 10px 10px; } .modal-body { padding: 20px; } .close { color: #6b7280; text-shadow: none; opacity: 0.7; } .close:hover { color: #111827; opacity: 1; } /* ---------- "Currently logged in as" banner ---------- */ #ADCoachDiv, #HeadAsstcoachDiv, [id$="ADCoachDiv"], [id$="HeadAsstcoachDiv"] { background: #eff6ff; border-left: 3px solid #2563eb; padding: 12px 16px !important; border-radius: 6px; margin: 0 0 20px 0 !important; } #ADCoachDiv i, #HeadAsstcoachDiv i, [id$="ADCoachDiv"] i, [id$="HeadAsstcoachDiv"] i { font-style: normal; color: #1e40af; font-size: 14px; } /* Override the inline ForeColor="Red" on the LoggedInAs labels. Inline color attributes win unless we use !important. */ #LoggedInAsLabel, #HeadAsstCoachLoggedInAsLabel, [id$="LoggedInAsLabel"], [id$="HeadAsstCoachLoggedInAsLabel"] { color: #1e40af !important; font-weight: 600; } /* ---------- Footer ---------- */ footer { color: #6b7280; font-size: 13px; padding: 24px 0; margin-top: 40px; border-top: 1px solid #e5e7eb; } footer p { margin: 0; } footer a { color: #6b7280; text-decoration: underline; } footer a:hover { color: #2563eb; } /* ---------- LinkButtons inside grids ---------- */ table[id*="GridView"] td a, table[id*="GridView"] td .btn-link { color: #2563eb; font-weight: 500; text-decoration: none; } table[id*="GridView"] td a:hover { color: #1d4ed8; text-decoration: underline; } /* ---------- Bootbox alerts ---------- */ .bootbox.modal .modal-content { border-radius: 10px; } .bootbox.modal .btn-primary { background-color: #2563eb; border-color: #2563eb; } /* ---------- Misc cleanup ---------- */ /* The dark hr divider lines used as section separators */ hr[style*="background-color: #333"], hr[style*="background-color:#333"] { background-color: #e5e7eb !important; height: 1px !important; border: none !important; } /* Inline font-size:small overrides scattered through pages */ [style*="font-size:small"], [style*="font-size: small"] { font-size: 13px !important; } /* Soften XX-Large coach name labels in repeaters */ span[id*="RptCoachName"][style*="XX-Large"], .coach-name-large { font-size: 22px !important; font-weight: 600; color: #111827; } /* Container padding adjustment */ .container.body-content { padding-bottom: 40px; } /* Print styles (preserve for PDF output) */ @media print { .navbar, footer, .modal { display: none !important; } .body-content { padding-top: 0; } body { background: white; } } /* ---------- Section header pills (used in evaluation forms) ---------- */ .label.label-default { background: transparent; color: #2563eb; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; padding: 0 0 4px 0; border-bottom: 2px solid #2563eb; border-radius: 0; display: inline-block; } .label.label-info { background: #eff6ff; color: #1e40af; font-weight: 500; border-radius: 4px; padding: 4px 10px; } /* ============================================================ ADDITIONAL TWEAKS — round 2 ============================================================ */ /* ---------- Responsive container width ---------- Bootstrap 3 caps .container at 1170px. We expand it to use more screen on bigger monitors, but only when the screen actually has room. Below 1400px the container fills the available space minus a comfortable margin, so nothing gets clipped on laptops. */ /* Small laptops (~1280-1366px) — fluid width with side padding */ @media (min-width: 1200px) and (max-width: 1399px) { .container, .navbar > .container, .container.body-content { width: auto !important; max-width: 100% !important; padding-left: 24px; padding-right: 24px; } } /* Big monitors (1400px+) — bump to 1400px with breathing room */ @media (min-width: 1400px) { .container, .navbar > .container, .container.body-content { width: 1360px; max-width: 1360px; } } /* Extra-wide monitors (1700px+) — go a bit larger */ @media (min-width: 1700px) { .container, .navbar > .container, .container.body-content { width: 1500px; max-width: 1500px; } } /* ---------- Logo + title alignment ---------- Pages use this pattern at the top:

    Title

    The inline-display causes baseline weirdness and a visible gap. We force flex layout on a parent wrapper, OR we catch the pattern directly. */ /* When the image is immediately followed by an h2, treat them as a unit */ img[id$="Logo_Image"] { display: inline-block !important; vertical-align: middle !important; margin: 0 16px 0 0 !important; padding: 0 !important; max-height: 100px !important; width: auto !important; } img[id$="Logo_Image"] + h2 { display: inline-block !important; vertical-align: middle !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } /* ---------- Warning / danger label pills ---------- The "Make sure all in-season evaluations..." red pill and similar Bootstrap 3 colored labels need to match the modern look. */ .label.label-warning { background: #fef3c7; color: #92400e; font-weight: 500; border-radius: 4px; padding: 6px 12px; font-size: 12px; display: inline-block; } .label.label-danger { background: #fee2e2; color: #991b1b; font-weight: 500; border-radius: 4px; padding: 6px 12px; font-size: 12px; display: inline-block; } .label.label-success { background: #d1fae5; color: #065f46; font-weight: 500; border-radius: 4px; padding: 6px 12px; font-size: 12px; display: inline-block; } /* ---------- Navbar tightening ---------- Items had wide padding; this is more proportionate. */ .navbar-nav { margin-left: 8px; } .navbar-nav > li { margin: 0 2px; } /* Better spacing for the right-aligned User Settings / Log off */ .navbar-default .navbar-nav.navbar-right > li > a { padding: 20px 12px !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; } .navbar-default .navbar-nav.navbar-right > li > a:hover { opacity: 1; } /* ---------- Grid action links (round 3) ---------- Modernize the link styling inside GridViews: - Remove underline by default - Bold weight makes them read as deliberate UI, not text - Hover adds underline back as affordance This applies to all tags inside any GridView. !important used because ASP.NET LinkButton or Bootstrap may add inline/higher-specificity styles. */ table[id*="GridView"] td a, table[id*="GridView"] td .btn-link, .GridView td a, table[id*="GridView"] td a:link, table[id*="GridView"] td a:visited { color: #2563eb !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.15s; } table[id*="GridView"] td a:hover, table[id*="GridView"] td .btn-link:hover, .GridView td a:hover, table[id*="GridView"] td a:focus { color: #1d4ed8 !important; text-decoration: underline !important; } /* Style the data cells (non-link cells) with stronger contrast */ table[id*="GridView"] td:not(:has(a)) { color: #111827; } /* ============================================================ ROUND 4 — Semantic action chips inside GridViews Replaces the round-3 plain text-link styling with colored chips that encode action priority: - PRIMARY (blue): View, Edit - WARNING (amber): Actions Needed - DANGER (red): Override, Close, Delete - NEUTRAL (gray): Request Meeting, secondary actions The chip class is applied by JavaScript at the bottom of the page (see eval-grid-chips.js) based on link text content. ============================================================ */ /* Override the round-3 plain text-link style for grid links that have been chip-tagged. Without a class, links keep round-3 look. */ table[id*="GridView"] td a.chip, .GridView td a.chip { display: inline-block !important; padding: 4px 10px !important; border-radius: 6px !important; text-decoration: none !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; transition: background-color 0.15s, color 0.15s !important; white-space: nowrap; } /* PRIMARY — main action (View, Edit) */ table[id*="GridView"] td a.chip-primary, .GridView td a.chip-primary { background: #eff6ff !important; color: #1d4ed8 !important; } table[id*="GridView"] td a.chip-primary:hover, .GridView td a.chip-primary:hover { background: #dbeafe !important; color: #1e40af !important; text-decoration: none !important; } /* WARNING — needs attention (Actions Needed) */ table[id*="GridView"] td a.chip-warning, .GridView td a.chip-warning { background: #fef3c7 !important; color: #92400e !important; } table[id*="GridView"] td a.chip-warning:hover, .GridView td a.chip-warning:hover { background: #fde68a !important; color: #78350f !important; text-decoration: none !important; } /* DANGER — destructive or override (Delete, Override) */ table[id*="GridView"] td a.chip-danger, .GridView td a.chip-danger { background: #fee2e2 !important; color: #991b1b !important; } table[id*="GridView"] td a.chip-danger:hover, .GridView td a.chip-danger:hover { background: #fecaca !important; color: #7f1d1d !important; text-decoration: none !important; } /* NEUTRAL — secondary actions (Request Meeting) */ table[id*="GridView"] td a.chip-neutral, .GridView td a.chip-neutral { background: #f3f4f6 !important; color: #4b5563 !important; } table[id*="GridView"] td a.chip-neutral:hover, .GridView td a.chip-neutral:hover { background: #e5e7eb !important; color: #1f2937 !important; text-decoration: none !important; } /* Make wrapped chip text break naturally with line-height */ table[id*="GridView"] td a.chip { white-space: normal; } /* ============================================================ ROUND 5 — Logo polish ============================================================ */ /* Hide the
    tags that sit between the logo image and the page

    title. Many .aspx pages have markup like:

    ...

    This collapses that gap without touching individual pages. */ img[id$="Logo_Image"] + br, img[id$="Logo_Image"] + br + br { display: none !important; } /* Make white logo backgrounds blend into the off-white page bg. Pure white pixels become invisible because white * anything = nothing. Schools whose logos look weird with this can opt out by adding data-no-blend="true" to their tag. */ img[id$="Logo_Image"] { mix-blend-mode: multiply; } img[id$="Logo_Image"][data-no-blend="true"] { mix-blend-mode: normal; } /* ============================================================ ROUND 6 — EvaluationDetails user control This user control renders on every evaluation page across all 250 schools. Restyling it here propagates everywhere. The control uses an asp:Panel with GroupingText. ASP.NET may render this as either a
    with , OR a
    with the GroupingText as the first child. We catch both. ============================================================ */ /* Match BOTH possible renderings: fieldset OR div */ fieldset[id$="EvalDetails"], div[id$="EvalDetails"] { border: none !important; padding: 20px 24px 16px 24px !important; margin: 20px 0 8px 0 !important; background: white !important; border: 1px solid #e5e7eb !important; border-left: 3px solid #2563eb !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important; } /* The "Evaluation Information" GroupingText becomes a proper section header. When rendered as fieldset → it's a . When rendered as div → it's typically the first text node or first child. */ fieldset[id$="EvalDetails"] > legend, div[id$="EvalDetails"] > p:first-child, div[id$="EvalDetails"] > b:first-child, div[id$="EvalDetails"] > span:first-child { font-size: 18px !important; color: #111827 !important; font-weight: 600 !important; border: none !important; border-bottom: 1px solid #e5e7eb !important; padding: 0 0 10px 0 !important; margin: 0 0 16px 0 !important; width: 100% !important; background: transparent !important; display: block !important; } /* Tighten / breathe the label-value rows */ fieldset[id$="EvalDetails"] > .row, div[id$="EvalDetails"] > .row { padding-top: 10px !important; padding-bottom: 0 !important; margin-bottom: 4px; } /* Labels become muted small-caps style — supporting info, not the focus */ fieldset[id$="EvalDetails"] > .row label, div[id$="EvalDetails"] > .row label { font-size: 13px !important; color: #6b7280 !important; font-weight: 500 !important; margin-bottom: 0 !important; line-height: 1.5; } /* Values become the dominant text — dark and slightly heavier */ fieldset[id$="EvalDetails"] > .row span, fieldset[id$="EvalDetails"] > .row [id$="_Label"], fieldset[id$="EvalDetails"] > .row [id$="_label"], fieldset[id$="EvalDetails"] > .row [id$="_Lbl"], div[id$="EvalDetails"] > .row span, div[id$="EvalDetails"] > .row [id$="_Label"], div[id$="EvalDetails"] > .row [id$="_label"], div[id$="EvalDetails"] > .row [id$="_Lbl"] { font-size: 14px !important; color: #111827 !important; font-weight: 500 !important; line-height: 1.5; } /* Values that are links (like the PCA "More Info" link) keep link styling */ fieldset[id$="EvalDetails"] > .row a, div[id$="EvalDetails"] > .row a { color: #2563eb !important; font-weight: 500 !important; text-decoration: none !important; } fieldset[id$="EvalDetails"] > .row a:hover, div[id$="EvalDetails"] > .row a:hover { text-decoration: underline !important; } /* Empty-value placeholder styling — applied by eval-grid-chips.js when it finds empty asp:Label spans inside the EvalDetails card. */ .empty-placeholder { color: #d1d5db !important; font-weight: 400 !important; } /* ============================================================ ROUND 7 — Horizontal scroll for wide GridViews Pages like Evaluation History have 14+ columns. Even at 1400px container width, columns get squeezed and content wraps awkwardly. The fix: let the GridView's wrapping panel scroll horizontally when content overflows. Page stays at its natural width; table scrolls inside its container. Targets the asp:Panel wrappers (e.g. GridViewPanel) that schools commonly use around their GridView controls. ============================================================ */ [id$="GridViewPanel"], [id*="GridViewPanel"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Subtle scroll-shadow indicator so users know there's more to the right. Uses a CSS background-attachment trick: a faint right-side gradient that's visible only when content overflows. */ [id$="GridViewPanel"], [id*="GridViewPanel"] { background-image: linear-gradient(to right, white 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } /* ============================================================ ROUND 8 — Login page redesign These styles support the rewritten Login.aspx (centered card layout). They only apply to the login page because the .login-page-wrapper class only exists there. ============================================================ */ .login-page-wrapper { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 60px 20px 40px 20px; } .login-card { width: 100%; max-width: 420px; background: white; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); padding: 40px 36px; } .login-card-header { text-align: center; margin-bottom: 28px; } .login-card-title { font-size: 22px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 0 8px 0 !important; letter-spacing: -0.01em; } .login-card-subtitle { font-size: 14px; color: #6b7280; margin: 0; } .login-field { margin-bottom: 16px; } .login-label { font-size: 13px !important; font-weight: 500 !important; color: #374151 !important; display: block !important; margin-bottom: 6px !important; text-align: left !important; width: auto !important; } .login-input.form-control { width: 100% !important; height: 42px !important; padding: 10px 12px !important; font-size: 14px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; background: white !important; color: #111827 !important; box-shadow: none !important; transition: border-color 0.15s, box-shadow 0.15s !important; } .login-input.form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; outline: none !important; } .login-validator { color: #dc2626; font-size: 12px; margin-top: 4px; display: block; } .login-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; } .login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 13px; } .login-checkbox { display: flex; align-items: center; gap: 6px; color: #4b5563; cursor: pointer; font-weight: 400; margin: 0; } .login-checkbox input[type="checkbox"] { margin: 0 !important; } .login-checkbox span { margin-left: 2px; } .login-forgot-link { color: #2563eb !important; text-decoration: none !important; font-weight: 500; } .login-forgot-link:hover { text-decoration: underline !important; } .login-submit.btn { width: 100% !important; background-color: #2563eb !important; border-color: #2563eb !important; color: white !important; padding: 11px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 6px !important; height: auto !important; margin-top: 4px; } .login-submit.btn:hover, .login-submit.btn:focus { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; } .login-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; font-size: 13px; color: #6b7280; } .login-footer a { color: #2563eb; text-decoration: none; font-weight: 500; margin-left: 4px; } .login-footer a:hover { text-decoration: underline; } /* Remove any extra footer padding from body-content on the login page */ .login-page-wrapper + footer, body:has(.login-page-wrapper) footer { margin-top: 0; } /* ============================================================ ROUND 9 — Login page navbar fix On the login page, no school context is set, but the navbar may still receive an inline white/transparent background from the master page code-behind, causing: - Invisible "Coach Evaluator" brand text (white on white) - Content bleed-through when scrolling Fix: a small JS snippet on the login page adds class "login-mode" to . We then force a dark navbar regardless of any inline style applied by code-behind. ============================================================ */ body.login-mode .navbar-default, body.login-mode .navbar-fixed-top { background: #1f2937 !important; background-color: #1f2937 !important; border-bottom: 1px solid rgba(0,0,0,0.2) !important; } body.login-mode .navbar-default .navbar-brand, body.login-mode .navbar-default .navbar-brand * { color: #ffffff !important; text-shadow: none !important; } body.login-mode .navbar-default .navbar-nav > li > a, body.login-mode .navbar-default .navbar-nav > li > a * { color: #d1d5db !important; } body.login-mode .navbar-default .navbar-nav > li > a:hover, body.login-mode .navbar-default .navbar-nav > li > a:hover * { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; } /* ============================================================ ROUND 10 — Forgot password success state ============================================================ */ .login-success-icon { display: flex; justify-content: center; margin-bottom: 16px; } /* ============================================================ ROUND 11 — Manage Users page (AD/Principal user registration) ============================================================ */ .manage-users-page { max-width: 900px; margin: 0 auto; } .manage-users-header { margin-bottom: 24px; } .manage-users-header h2 { font-size: 24px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 0 6px 0 !important; } .manage-users-subtitle { font-size: 14px; color: #6b7280; margin: 0; } .manage-users-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px 28px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .manage-users-section-title { font-size: 17px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 0 16px 0 !important; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; } .manage-users-helper { font-size: 13px; color: #6b7280; margin: -8px 0 16px 0; } .manage-users-validator { color: #dc2626; font-size: 13px; margin-bottom: 12px; } .manage-users-empty { padding: 24px; text-align: center; color: #6b7280; font-size: 14px; background: #f9fafb; border-radius: 6px; } .manage-users-delete-link { color: #dc2626 !important; font-weight: 500 !important; text-decoration: none !important; font-size: 13px; } .manage-users-delete-link:hover { color: #991b1b !important; text-decoration: underline !important; } /* Override the login-submit width since it's not full-width-on-card here */ .manage-users-card .login-submit.btn { width: auto !important; min-width: 140px; margin-top: 8px; } /* ============================================================ ROUND 12 — Evaluations page: audit popover + prominent New Eval button ============================================================ */ /* Audit popover content rows — stacked label-above-value layout for readability */ .audit-popover-content .audit-row, .popover-content .audit-row { padding: 8px 0; font-size: 13px; line-height: 1.5; border-bottom: 1px solid #f3f4f6; } .audit-popover-content .audit-row:last-child, .popover-content .audit-row:last-child { border-bottom: none; } .audit-popover-content .audit-label, .popover-content .audit-label { display: block; font-weight: 600; color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; margin-right: 0; } /* The actual value (anything after the label inside the row) */ .popover-content .audit-row { color: #111827; font-size: 14px; } /* Style the popover itself when active. Use .popover.in to outrank Bootstrap's own .popover { max-width: 276px } selector. */ .popover, .popover.in { max-width: 560px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); border: 1px solid #e5e7eb; border-radius: 10px; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; } .popover-content { padding: 14px 18px; min-width: 380px; } /* The View Audit button itself */ .audit-popover-trigger { border-radius: 6px; font-size: 12px; padding: 4px 10px; } .audit-popover-trigger .glyphicon { margin-right: 4px; font-size: 11px; } /* Prominent "+ Open New Coach Evaluation" button */ .eval-new-btn { padding: 8px 18px !important; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25); transition: transform 0.1s, box-shadow 0.1s; } .eval-new-btn:hover, .eval-new-btn:focus { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35); } /* Repeater audit-status section spacing */ .audit-status-section { margin-top: 8px; margin-bottom: 8px; } .audit-additional-info-inline { display: inline; } /* Filter button compactness inside the filter row */ .eval-filter-bar .btn-primary { width: 100%; padding: 6px 10px; } /* Vertical alignment of the filter row — ensure the Filter button lines up with the dropdowns */ .eval-filter-bar { display: flex; align-items: center; flex-wrap: wrap; } .eval-filter-bar > [class*="col-"] { padding-top: 0; padding-bottom: 0; } /* ============================================================ ROUND 13 — View style toggle in action bar ============================================================ */ .view-style-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .view-style-label { color: #6b7280; font-weight: 500; } .view-style-current { background: #eff6ff; color: #1e40af; padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; } .view-style-switch { text-decoration: none !important; font-size: 12px !important; } .view-style-switch:hover { text-decoration: none !important; } /* ============================================================ ROUND 14 — Modern form modals (New Evaluation + Edit Evaluation) Approach: keep the existing markup structure (3-col Bootstrap rows), but use CSS to transform it into a clean single-column-feel modal. Server-side control IDs and event hooks all preserved. ============================================================ */ /* Modal width - wider so 4-column rows have breathing room without wrapping labels */ .modern-form-modal-dialog { width: 950px !important; max-width: 95% !important; margin: 30px auto !important; } /* Modal frame */ .modern-form-modal .modal-content { border-radius: 12px; border: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); } .modern-form-modal .modal-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; border-radius: 12px 12px 0 0; padding: 16px 24px; } .modern-form-modal .modal-title { font-size: 18px; font-weight: 600; color: #111827; font-family: 'Poppins', sans-serif; } .modern-form-modal .modal-body { padding: 20px 24px; background: #ffffff; } .modern-form-modal .modal-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; border-radius: 0 0 12px 12px; padding: 12px 24px; } /* Each form row gets tighter spacing */ .modern-form-modal .modal-body .row { padding-top: 8px !important; padding-bottom: 4px !important; margin-bottom: 4px; } /* Labels in the modal — stacked above field, modern caption style */ .modern-form-modal .modal-body label { font-weight: 500; color: #374151; font-size: 13px; margin-bottom: 4px; display: block; } /* Form controls - inputs, selects, textareas */ .modern-form-modal .modal-body .form-control { height: 38px; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; } .modern-form-modal .modal-body .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* Coach Email field that's auto-populated and disabled — make it look like a clean read-only display rather than a broken input box */ .modern-form-modal .modal-body input[disabled].form-control, .modern-form-modal .modal-body input[readonly].form-control { background: #f3f4f6; color: #111827; border-color: #e5e7eb; cursor: default; } /* When CoachEmail is empty (no coach selected yet), don't draw attention */ .modern-form-modal .modal-body input[disabled][value=""] { background: #f9fafb; color: #9ca3af; } /* Inline radio button lists — Male/Female/Co-ed and Yes/No ASP.NET RadioButtonList renders as a by default. Force horizontal. */ .modern-form-modal .modal-body input[type="radio"] { margin-right: 6px; margin-left: 0; vertical-align: middle; } .modern-form-modal .modal-body table[id*="RadioButtonList"], .modern-form-modal .modal-body table[id*="_RBL"], .modern-form-modal .modal-body table[id*="_DDL"]:not(.form-control) { border-collapse: collapse; margin-top: 2px; } .modern-form-modal .modal-body table[id*="RadioButtonList"] td, .modern-form-modal .modal-body table[id*="_RBL"] td, .modern-form-modal .modal-body table[id*="MaleFemale"] td, .modern-form-modal .modal-body table[id*="EditEvalSex"] td, .modern-form-modal .modal-body table[id*="PCATraining"] td, .modern-form-modal .modal-body table[id*="EditPCATraning"] td, .modern-form-modal .modal-body table[id*="CopyPreviousYears"] td { padding: 4px 16px 4px 0 !important; border: none !important; display: inline-block !important; vertical-align: middle; font-size: 14px; color: #374151; } .modern-form-modal .modal-body table[id*="RadioButtonList"] label, .modern-form-modal .modal-body table[id*="_RBL"] label { font-weight: 400; font-size: 14px; color: #374151; margin: 0; display: inline; } /* Italic note after radio buttons — turn into subtle hint text */ .modern-form-modal .modal-body i, .modern-form-modal .modal-body em { font-size: 12px; color: #6b7280; font-style: normal; display: inline-block; margin-top: 4px; } /* The "Don't see the coach you need? Manage users →" link — make it subtle */ .modern-form-modal .modal-body p[style*="font-size: small"] { font-size: 12px !important; color: #6b7280 !important; margin-top: 4px; margin-bottom: 0; } /* Save button placement — pull it down to feel like a footer action */ .modern-form-modal .modal-body .btn-primary { padding: 8px 20px; font-weight: 500; border-radius: 6px; background: #2563eb; border-color: #2563eb; } .modern-form-modal .modal-body .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; } /* Cancel/Close button in footer */ .modern-form-modal .modal-footer .btn-default, .modern-form-modal .modal-footer .btn-info { padding: 8px 20px; font-weight: 500; border-radius: 6px; } /* Display labels (read-only values like Coach Name "Mike Coach" in Edit modal) The control renders as a span. Style as prominent value text. */ .modern-form-modal .modal-body span[id$="_Lbl"]:not([class]), .modern-form-modal .modal-body span[id$="Name_Lbl"], .modern-form-modal .modal-body span[id$="Email_Lbl"] { font-size: 14px; color: #111827; font-weight: 500; display: inline-block; padding-top: 8px; } /* ============================================================ ROUND 14 — eliminate gap between grid and bottom fallback ============================================================ */ .eval-bottom-fallback { margin-top: 8px !important; margin-bottom: 16px !important; padding: 24px 0 !important; text-align: center; background: #f9fafb; border-radius: 8px; } /* Form help note — replaces inline italic+steelblue notes with subtle hint text */ .modern-form-modal .modal-body .form-help-note { font-size: 12px; color: #6b7280; font-style: normal; line-height: 1.4; margin-top: 4px; margin-bottom: 0; max-width: 600px; } /* ============================================================ ROUND 14b — Make inline Save button row look like a proper footer The form's Save button lives in a separate row inside the modal-body (not in modal-footer). Style that row as a full-width footer bar so Save sits at the visual bottom-right of the modal where users expect primary actions. The original modal-footer (containing only Cancel) gets visually merged. Markup gets a `.modal-form-footer` class on the Save row. We avoid :has() for older browser compatibility. ============================================================ */ .modern-form-modal .modal-body .modal-form-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; margin: 16px -24px -20px -24px; /* extend to modal edges, eat the body padding */ padding: 12px 24px !important; border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end; /* push the button column to the right */ align-items: center; } /* The Save button column - let it size naturally and sit at the right */ .modern-form-modal .modal-body .modal-form-footer .col-md-3 { text-align: right; width: auto; float: none; padding-right: 0; } /* Hide the empty col-md-9 spacer (no longer needed since we use flex) */ .modern-form-modal .modal-body .modal-form-footer .col-md-9 { display: none; } /* Hide the original modal-footer (Cancel button only). The X in the header handles dismissal, and we don't need a separate Cancel sitting under our new footer-styled Save row. */ .modern-form-modal .modal-footer { display: none; } /* ============================================================ ROUND 14c — Actions Needed modal: compact summary + clean list ============================================================ */ .actions-modal-dialog { width: 720px !important; } /* Actions Needed footer - sits OUTSIDE modal-body so styled directly */ .modern-form-modal .actions-modal-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 14px 24px; text-align: right; border-radius: 0 0 12px 12px; } .modern-form-modal .actions-modal-footer .btn { padding: 8px 22px; font-weight: 500; border-radius: 6px; } /* Coach summary card at top of Actions Needed modal */ .actions-coach-summary { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; } .actions-coach-summary .actions-coach-name span { font-size: 18px; font-weight: 600; color: #111827; font-family: 'Poppins', sans-serif; } .actions-coach-summary .actions-coach-meta { margin-top: 6px; font-size: 13px; color: #4b5563; } .actions-coach-summary .actions-coach-meta .meta-sep { margin: 0 4px; color: #9ca3af; } .actions-coach-summary .actions-coach-email { margin-top: 4px; font-size: 13px; color: #6b7280; } .actions-coach-summary .actions-coach-email span { color: #2563eb; } /* Actions Needed list section */ .actions-needed-section { margin-top: 8px; } .actions-needed-heading { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 8px; } /* The readonly textarea styled as a clean info panel rather than an input */ .actions-needed-content, textarea.actions-needed-content { width: 100% !important; min-height: 220px; background: #fffbeb !important; /* warm pale yellow — it's a "needs attention" panel */ border: 1px solid #fde68a !important; border-radius: 8px !important; padding: 14px 18px !important; font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important; font-size: 13.5px !important; line-height: 1.7 !important; color: #78350f !important; resize: none !important; cursor: default !important; box-shadow: none !important; } .actions-needed-content:focus, textarea.actions-needed-content:focus { outline: none !important; border-color: #fde68a !important; box-shadow: none !important; } /* ============================================================ ROUND 14d — Copy/Edit/Override/Delete modal: action list + PCA row ============================================================ */ /* PCA training row inside coach summary card */ .actions-coach-summary .actions-coach-pca { margin-top: 6px; font-size: 13px; color: #4b5563; } .actions-coach-summary .actions-coach-pca .pca-label { font-weight: 500; color: #6b7280; margin-right: 4px; } /* Action list — each action is a button + hint text below */ .actions-list { margin-top: 4px; } .actions-list .action-item { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; } .actions-list .action-item:last-child { border-bottom: none; margin-bottom: 0; } .actions-list .action-btn { display: inline-block; padding: 10px 18px !important; font-weight: 500 !important; border-radius: 6px !important; font-size: 14px !important; border: none !important; margin-bottom: 4px; text-align: left; transition: opacity 0.15s, transform 0.05s; } .actions-list .action-btn:active { transform: translateY(1px); } .actions-list .action-btn:hover { opacity: 0.9; } /* Primary actions - blue */ .actions-list .btn-primary.action-btn { background: #2563eb !important; color: white !important; } /* Override/Close - amber warning */ .actions-list .btn-warning.action-btn { background: #d97706 !important; color: white !important; } /* Delete - red destructive */ .actions-list .btn-danger.action-btn { background: #dc2626 !important; color: white !important; } .actions-list .action-hint { font-size: 12px; color: #6b7280; font-style: normal; line-height: 1.5; margin: 4px 0 0 0; padding-left: 2px; } /* Subtle distinction for the destructive section */ .actions-list .action-danger { margin-top: 8px; padding-top: 12px; border-top: 1px solid #f3f4f6; } /* ============================================================ ROUND 15 — GridView consolidated View/Actions dropdowns ============================================================ */ .grid-action-dropdown { display: inline-block; } .grid-action-dropdown .dropdown-toggle { border-radius: 6px; font-size: 12px; padding: 5px 10px; background: white; border: 1px solid #d1d5db; color: #374151; font-weight: 500; transition: background 0.15s, border-color 0.15s; } .grid-action-dropdown .dropdown-toggle:hover, .grid-action-dropdown .dropdown-toggle:focus, .grid-action-dropdown .dropdown-toggle:active { background: #f3f4f6; border-color: #9ca3af; color: #111827; } /* Distinguish View vs Actions visually */ .grid-view-btn { color: #1d4ed8 !important; border-color: #93c5fd !important; background: #eff6ff !important; } .grid-view-btn:hover, .grid-view-btn:focus { background: #dbeafe !important; border-color: #60a5fa !important; } .grid-actions-btn { color: #92400e !important; border-color: #fcd34d !important; background: #fef3c7 !important; } .grid-actions-btn:hover, .grid-actions-btn:focus { background: #fde68a !important; border-color: #fbbf24 !important; } /* The dropdown menu itself */ .grid-action-dropdown .dropdown-menu { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 6px 0; min-width: 240px; font-size: 13px; } .grid-action-dropdown .dropdown-menu li > a { padding: 8px 16px; color: #374151; transition: background 0.1s; } .grid-action-dropdown .dropdown-menu li > a:hover, .grid-action-dropdown .dropdown-menu li > a:focus { background: #f3f4f6; color: #111827; } .grid-action-dropdown .dropdown-menu .divider { margin: 4px 0; background-color: #e5e7eb; } /* ============================================================ Detached dropdown menu styling — when grid-action-dropdown menus get moved to by initRowActionDropdowns(), they lose their parent context. These rules apply directly to the detached menu so styling stays consistent. ============================================================ */ .dropdown-menu.grid-action-menu-detached { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 6px 0; min-width: 240px; font-size: 13px; background: white; } .dropdown-menu.grid-action-menu-detached li > a { padding: 8px 16px; color: #374151; transition: background 0.1s; display: block; text-decoration: none; line-height: 1.4; white-space: nowrap; } .dropdown-menu.grid-action-menu-detached li > a:hover, .dropdown-menu.grid-action-menu-detached li > a:focus { background: #f3f4f6; color: #111827; text-decoration: none; } .dropdown-menu.grid-action-menu-detached .divider { margin: 4px 0; background-color: #e5e7eb; height: 1px; overflow: hidden; } /* Action-specific menu item colors carried over to detached menu */ .dropdown-menu.grid-action-menu-detached .action-primary, .grid-action-dropdown .dropdown-menu .action-primary { color: #1d4ed8 !important; } .dropdown-menu.grid-action-menu-detached .action-warning, .grid-action-dropdown .dropdown-menu .action-warning { color: #b45309 !important; } .dropdown-menu.grid-action-menu-detached .action-danger, .grid-action-dropdown .dropdown-menu .action-danger { color: #b91c1c !important; } .dropdown-menu.grid-action-menu-detached .action-neutral, .grid-action-dropdown .dropdown-menu .action-neutral { color: #4b5563 !important; } /* Hover states preserve color but darken slightly */ .dropdown-menu.grid-action-menu-detached .action-primary:hover, .grid-action-dropdown .dropdown-menu .action-primary:hover { color: #1e3a8a !important; background: #eff6ff !important; } .dropdown-menu.grid-action-menu-detached .action-warning:hover, .grid-action-dropdown .dropdown-menu .action-warning:hover { color: #78350f !important; background: #fffbeb !important; } .dropdown-menu.grid-action-menu-detached .action-danger:hover, .grid-action-dropdown .dropdown-menu .action-danger:hover { color: #7f1d1d !important; background: #fef2f2 !important; } .dropdown-menu.grid-action-menu-detached .action-neutral:hover, .grid-action-dropdown .dropdown-menu .action-neutral:hover { color: #1f2937 !important; background: #f9fafb !important; } /* ============================================================ BULK SELECT (Override/Close) styling ============================================================ */ .bulk-action-bar { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 16px; margin-top: 10px; margin-bottom: 8px; margin-left: 0; margin-right: 0; display: flex; align-items: center; flex-wrap: wrap; } .bulk-action-btn { margin-right: 12px; padding: 5px 12px !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 5px !important; } .bulk-action-btn[disabled], .bulk-action-btn.disabled { opacity: 0.5; cursor: not-allowed; } .bulk-action-btn .glyphicon { margin-right: 5px; font-size: 11px; } .bulk-action-hint { color: #92400e; font-size: 13px; } .bulk-count { font-weight: 700; } /* Checkbox column header + cells - tight, centered, narrow */ .bulk-select-col { width: 36px !important; text-align: center !important; vertical-align: middle !important; padding: 8px 4px !important; } .bulk-select-row, .bulk-select-all { cursor: pointer; width: 16px; height: 16px; margin: 0; } /* Notify-coach toggle inside Copy/Edit/Override/Delete modal action items */ .action-email-toggle { display: block; margin-top: 8px; padding: 6px 10px; background: #f9fafb; border-radius: 4px; font-size: 13px; font-weight: normal; color: #4b5563; cursor: pointer; } .action-email-toggle input[type="checkbox"] { margin-right: 6px; margin-top: 0; vertical-align: middle; } .action-email-toggle span { vertical-align: middle; } /* ============================================================ SUPPORT PAGE Modernized contact form, replacing the old PDF/webinar layout ============================================================ */ .support-page { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; } .support-header { text-align: center; margin-bottom: 32px; } .support-header h1 { font-family: 'Bebas Neue', sans-serif; font-size: 42px; letter-spacing: 1px; color: #1f2937; margin: 0 0 12px; } .support-subhead { font-size: 16px; color: #6b7280; line-height: 1.6; margin: 0; max-width: 540px; margin: 0 auto; } /* EMAIL CALLOUT CARD */ .support-email-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #fcd34d; border-radius: 12px; padding: 18px 24px; margin-bottom: 24px; } .support-email-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .support-email-icon .glyphicon { color: #b45309; font-size: 20px; } .support-email-text { flex: 1 1 auto; line-height: 1.4; } .support-email-label { font-size: 13px; color: #92400e; font-weight: 500; margin-bottom: 2px; } .support-email-link { font-size: 18px; color: #1f2937; font-weight: 600; text-decoration: none; border-bottom: 1px dashed transparent; transition: border-color 0.15s; } .support-email-link:hover, .support-email-link:focus { color: #1f2937; border-bottom-color: #1f2937; text-decoration: none; } /* CONTACT FORM CARD */ .support-form-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); overflow: hidden; } .support-form-header { padding: 24px 28px 16px; border-bottom: 1px solid #f3f4f6; } .support-form-header h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.5px; color: #1f2937; margin: 0 0 6px; } .support-form-header p { color: #6b7280; font-size: 14px; margin: 0; } .support-form-body { padding: 24px 28px 28px; } .support-form-row { display: flex; gap: 16px; margin-bottom: 16px; } .support-form-row-full { flex-direction: column; } .support-form-field { flex: 1 1 50%; display: flex; flex-direction: column; } .support-form-field label { font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; } .support-form-optional { color: #9ca3af; font-weight: normal; font-size: 12px; } .support-form-field .form-control { border: 1px solid #d1d5db; border-radius: 6px; padding: 10px 12px; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: none; } .support-form-field .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); outline: none; } .support-form-textarea { min-height: 160px !important; resize: vertical; font-family: inherit !important; } .support-form-field .label-danger { margin-top: 6px; align-self: flex-start; font-size: 11px; padding: 3px 8px; } .support-form-footer { margin-top: 8px; text-align: right; } .support-submit-btn { padding: 10px 28px !important; font-weight: 600 !important; font-size: 15px !important; border-radius: 8px !important; background: #1f2937 !important; border-color: #1f2937 !important; transition: background 0.15s !important; } .support-submit-btn:hover, .support-submit-btn:focus { background: #374151 !important; border-color: #374151 !important; } /* Responsive: stack form fields on small screens */ @media (max-width: 600px) { .support-form-row { flex-direction: column; gap: 0; } .support-form-field { margin-bottom: 14px; } .support-page { padding: 20px 12px 32px; } .support-header h1 { font-size: 32px; } .support-form-header, .support-form-body { padding-left: 18px; padding-right: 18px; } .support-email-card { padding: 14px 16px; } .support-submit-btn { width: 100%; } .support-form-footer { text-align: stretch; } } /* ============================================================ PERFORMANCE REPORT PAGE Modernized form layout, sticky first column, trends chart panel ============================================================ */ .perf-report-page { padding-top: 8px; padding-bottom: 32px; } /* INTRO CARD */ .perf-intro-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .perf-intro-lead { font-style: italic; color: #6b7280; margin: 0 0 12px; font-size: 14px; } .perf-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .perf-intro-item { display: flex; gap: 12px; align-items: flex-start; } .perf-intro-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: white; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; } .perf-intro-item strong { display: block; color: #1f2937; font-size: 14px; margin-bottom: 4px; } .perf-intro-item p { color: #6b7280; font-size: 13px; line-height: 1.5; margin: 0; } @media (max-width: 700px) { .perf-intro-grid { grid-template-columns: 1fr; } } /* FORM CARDS */ .perf-form-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .perf-form-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; } .perf-form-header h3 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.5px; color: #1f2937; margin: 0 0 4px; } .perf-form-header p { color: #6b7280; font-size: 13px; margin: 0; line-height: 1.5; } .perf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } .perf-form-row { display: flex; flex-direction: column; gap: 4px; } .perf-form-label { font-size: 13px; font-weight: 500; color: #374151; margin: 0; } .perf-form-control { border: 1px solid #d1d5db !important; border-radius: 6px !important; padding: 8px 10px !important; font-size: 14px !important; height: auto !important; box-shadow: none !important; transition: border-color 0.15s, box-shadow 0.15s; } .perf-form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important; outline: none !important; } .perf-form-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f3f4f6; text-align: right; } .perf-form-submit { padding: 9px 22px !important; font-weight: 600 !important; border-radius: 6px !important; background: #2563eb !important; border-color: #2563eb !important; } .perf-form-submit:hover, .perf-form-submit:focus { background: #1d4ed8 !important; border-color: #1d4ed8 !important; } @media (max-width: 700px) { .perf-form-grid { grid-template-columns: 1fr; } .perf-form-submit { width: 100%; } .perf-form-footer { text-align: stretch; } } /* RESULTS CARD */ .perf-results-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 22px 22px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .perf-results-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #f3f4f6; } .perf-results-header h3 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.5px; color: #1f2937; margin: 0; } .perf-export-btn { padding: 6px 14px !important; font-size: 13px !important; border-radius: 6px !important; } /* GRID WITH STICKY FIRST COLUMN */ .perf-grid-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #e5e7eb; } .perf-grid { margin-bottom: 0 !important; border: none !important; } /* Make first column sticky so criteria labels stay visible while scrolling. Position:sticky requires no transform/filter on ancestors and the parent must have overflow-x:auto (which .perf-grid-wrap provides). */ .perf-grid > thead > tr > th:first-child, .perf-grid > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 2; background: white; box-shadow: 1px 0 0 #e5e7eb; font-weight: 500; min-width: 180px; max-width: 280px; } .perf-grid > thead > tr > th:first-child { background: #f9fafb; z-index: 3; /* header stays above body cells when scrolling */ } .perf-grid > tbody > tr:nth-child(odd) > td:first-child { background: #fafafa; /* match the table-striped odd row color */ } .perf-grid > tbody > tr:hover > td:first-child { background: #f3f4f6; } /* EMPTY STATE */ .perf-empty-state { text-align: center; padding: 48px 24px; color: #9ca3af; } .perf-empty-state .glyphicon { font-size: 48px; margin-bottom: 12px; color: #d1d5db; } .perf-empty-state p { margin: 0; font-size: 14px; } /* TRENDS CHART PANEL */ .perf-trends-container { margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; } .perf-trends-header { margin-bottom: 14px; } .perf-trends-header h4 { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.5px; color: #1f2937; margin: 0 0 4px; } .perf-trends-header p { color: #6b7280; font-size: 13px; margin: 0; } .perf-chart-wrap { position: relative; height: 360px; width: 100%; } @media (max-width: 700px) { .perf-chart-wrap { height: 280px; } } /* MODERN PROGRESS OVERLAY (replaces full-screen black takeover) */ .perf-progress-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999; background: rgba(17, 24, 39, 0.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .perf-progress-card { background: white; padding: 24px 32px; border-radius: 12px; display: flex; align-items: center; gap: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); font-size: 15px; color: #1f2937; font-weight: 500; } .perf-progress-spinner { width: 22px; height: 22px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: perf-spin 0.7s linear infinite; } @keyframes perf-spin { to { transform: rotate(360deg); } } /* ============================================================ STUDENT/PARENT EVALUATION CHARTS + LIST VIEW Modernizes the per-question results display when a user toggles "View as Chart/Graph" or "View as List". Markup is emitted by Helper.ToggleStudentParentView (shared across all schools — one helper change, every school benefits). ============================================================ */ /* CHART GRID */ .sp-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 16px; margin-bottom: 16px; } .sp-chart-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); height: 320px; position: relative; } .sp-chart-card canvas { max-height: 100%; } .sp-charts-empty { background: white; border: 1px dashed #d1d5db; border-radius: 10px; padding: 32px 24px; margin: 16px 0; text-align: center; color: #6b7280; font-size: 14px; } @media (max-width: 600px) { .sp-charts-grid { grid-template-columns: 1fr; gap: 12px; } .sp-chart-card { height: 280px; padding: 12px; } } /* LIST VIEW */ .sp-list-container { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; margin-bottom: 16px; } .sp-list-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .sp-list-question { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6; line-height: 1.4; } .sp-list-answers { margin: 0; padding-left: 0; list-style: none; counter-reset: respondent-count; } .sp-list-answer { padding: 8px 0; border-bottom: 1px solid #f9fafb; font-size: 13px; color: #374151; line-height: 1.5; } .sp-list-answer:last-child { border-bottom: none; } .sp-list-respondent { display: inline-block; min-width: 110px; color: #6b7280; font-size: 12px; font-weight: 500; } .sp-list-answer-text { color: #1f2937; } .sp-list-answer-empty .sp-list-answer-text { color: #9ca3af; font-style: italic; } /* Style the toggle radio button list (which is server-rendered as
    ). The RBL has RepeatDirection="Vertical" by default so it renders as a 3-row table. We flatten the table layout so all 3 pills sit on one horizontal row. */ [id$="ToggleViewRBL"] { display: inline-block; margin: 12px 12px 12px 0; border: 1px solid #e5e7eb; border-radius: 8px; background: white; padding: 4px; vertical-align: middle; } /* Flatten the table - make all rows/cells render inline so pills sit horizontally */ [id$="ToggleViewRBL"] tbody, [id$="ToggleViewRBL"] tr { display: inline; } [id$="ToggleViewRBL"] td { display: inline-block; padding: 0 !important; border: none !important; } [id$="ToggleViewRBL"] label { display: inline-block; padding: 8px 16px; font-size: 13px !important; font-weight: 500; color: #374151; cursor: pointer; border-radius: 6px; margin: 0 !important; transition: background 0.15s; } [id$="ToggleViewRBL"] input[type="radio"] { margin-right: 6px; vertical-align: middle; } [id$="ToggleViewRBL"] label:hover { background: #f3f4f6; } [id$="ToggleViewRBL"] input[type="radio"]:checked + label, [id$="ToggleViewRBL"] input[type="radio"]:checked ~ label { background: #eff6ff; color: #1d4ed8; } /* Export button on the student/parent eval pages — sit cleanly next to the toggle. The button is a sibling of the RBL inside StudentEvalPanel/ParentEvalPanel. */ [id$="ToggleViewRBL"] + [id$="ExportToExcelBtn"] { vertical-align: middle; margin-left: 4px; padding: 7px 14px !important; font-size: 13px !important; border-radius: 6px !important; } /* ============================================================ APPROVAL MODALS Used by 4 user controls that all share the same #myModal pattern: - ADApprovalsOfCoachSelfEvaluationDetails.ascx - CoachApprovalsOfEvaluationDetails.ascx - ADApprovalsOfCoachSelfEvaluationDetailsAsst.ascx - CoachApprovalsOfEvaluationAsstDetails.ascx These render an "Approve" trigger button + a small disclaimer + a Bootstrap modal with a textarea for an optional reply/response. ============================================================ */ /* The trigger button + disclaimer block above the modal. Constrains layout so the disclaimer reads as a caption beneath the button, not a wall of text wrapping next to it. */ .approval-action-panel { margin: 16px 0; max-width: 720px; } .approval-action-panel .btn-primary { margin-bottom: 8px; } .approval-disclaimer { margin: 8px 0 0; padding: 10px 14px; background: #f9fafb; border-left: 3px solid #d1d5db; border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.5; color: #4b5563; } .approval-disclaimer .glyphicon { margin-right: 6px; color: #6b7280; font-size: 13px; } /* ----- Modal styling ----- */ .approval-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); overflow: hidden; } .approval-modal .modal-header { background: white; border-bottom: 1px solid #e5e7eb; padding: 18px 24px 14px; } .approval-modal .modal-header .close { margin-top: -2px; font-size: 24px; font-weight: 400; color: #6b7280; opacity: 0.8; text-shadow: none; } .approval-modal .modal-header .close:hover, .approval-modal .modal-header .close:focus { color: #111827; opacity: 1; } .approval-modal .modal-title { font-size: 18px; font-weight: 600; color: #111827; line-height: 1.4; display: flex; align-items: center; gap: 10px; } .approval-modal .modal-title .glyphicon { color: #2563eb; font-size: 20px; } .approval-modal .modal-body { padding: 20px 24px 18px; background: white; } .approval-modal .modal-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 14px 24px; display: flex; justify-content: flex-end; gap: 10px; } .approval-modal .modal-footer .btn { margin: 0; } /* ----- Field group inside the modal ----- */ .approval-field { margin: 0; } .approval-field-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px; } /* "Optional" chip next to the label */ .approval-optional-chip { display: inline-block; padding: 2px 8px; background: #f3f4f6; color: #6b7280; border-radius: 10px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } /* The textarea — replaces the inline 200px style with a clean default. Keep height generous since it's the main affordance in this modal. */ .approval-textarea.form-control { width: 100% !important; height: 180px !important; min-height: 140px; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #1f2937; background: white; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: none; } .approval-textarea.form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); outline: none; } .approval-textarea.form-control::placeholder { color: #9ca3af; font-style: italic; } /* Help text under the textarea */ .approval-help-text { margin: 8px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.5; } /* ----- Footer buttons ----- */ .approval-modal .approval-cancel-btn, .approval-modal .btn-default.approval-cancel-btn { background: white !important; color: #374151 !important; border: 1px solid #d1d5db !important; padding: 8px 18px; font-weight: 500; border-radius: 6px; } .approval-modal .approval-cancel-btn:hover, .approval-modal .btn-default.approval-cancel-btn:hover { background: #f9fafb !important; border-color: #9ca3af !important; color: #111827 !important; } .approval-modal .approval-confirm-btn, .approval-modal .btn-primary.approval-confirm-btn { background: #2563eb !important; border-color: #2563eb !important; color: white !important; padding: 8px 22px; font-weight: 600; border-radius: 6px; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25); } .approval-modal .approval-confirm-btn:hover, .approval-modal .btn-primary.approval-confirm-btn:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; } /* Mobile: stack the buttons full-width and pad the modal less. */ @media (max-width: 600px) { .approval-modal .modal-dialog { margin: 10px; } .approval-modal .modal-header, .approval-modal .modal-body, .approval-modal .modal-footer { padding-left: 16px; padding-right: 16px; } .approval-modal .modal-footer { flex-direction: column-reverse; } .approval-modal .modal-footer .btn { width: 100%; } } /* ============================================================ SETUP & CONFIGURATION SECTION (Support page) Card grid for setup-related actions like Template Library. Visible only to AD/Principal users (controlled in code-behind). Designed to scale: drop additional .support-setup-card siblings into .support-setup-grid as new setup features are added. ============================================================ */ .support-setup-section { margin-bottom: 32px; } .support-setup-header { margin-bottom: 16px; } .support-setup-header h2 { font-size: 22px; font-weight: 600; color: #111827; margin: 0 0 4px; line-height: 1.3; } .support-setup-header p { font-size: 14px; color: #6b7280; margin: 0; line-height: 1.5; } .support-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .support-setup-card { display: flex; gap: 16px; background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .support-setup-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .support-setup-card-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: #eff6ff; display: flex; align-items: center; justify-content: center; } .support-setup-card-icon .glyphicon { color: #2563eb; font-size: 20px; } .support-setup-card-body { flex: 1 1 auto; min-width: 0; } .support-setup-card-body h3 { font-size: 16px; font-weight: 600; color: #111827; margin: 0 0 6px; line-height: 1.3; } .support-setup-card-body p { font-size: 13.5px; color: #4b5563; margin: 0 0 12px; line-height: 1.5; } .support-setup-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #2563eb; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; } .support-setup-card-link:hover, .support-setup-card-link:focus { color: #1d4ed8; border-bottom-color: #1d4ed8; text-decoration: none; } .support-setup-card-link .glyphicon { font-size: 11px; margin-left: 2px; } @media (max-width: 600px) { .support-setup-grid { grid-template-columns: 1fr; } .support-setup-header h2 { font-size: 18px; } } /* ============================================================ MEETING REQUEST / SEND REMINDER MODAL (Evaluations.aspx) The "✉ Request Meeting / Send Reminder" action opens a modal with: recipient pill, when (date+time), template selector, and a message body textarea. Modernized to match the approval modals. Scoped via .meeting-modal class so it doesn't affect other modals on the page (new eval, edit eval, edit/close/delete summary, etc.). ============================================================ */ /* Slightly wider dialog — this modal is content-heavy */ .meeting-modal .meeting-modal-dialog { width: 640px; max-width: 95%; } .meeting-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); overflow: hidden; } .meeting-modal .modal-header { background: white; border-bottom: 1px solid #e5e7eb; padding: 18px 24px 14px; } .meeting-modal .modal-header .close { margin-top: -2px; font-size: 24px; font-weight: 400; color: #6b7280; opacity: 0.8; text-shadow: none; } .meeting-modal .modal-header .close:hover, .meeting-modal .modal-header .close:focus { color: #111827; opacity: 1; } .meeting-modal .modal-title { font-size: 17px; font-weight: 600; color: #111827; line-height: 1.4; display: flex; align-items: center; gap: 10px; } .meeting-modal .modal-title .glyphicon { color: #2563eb; font-size: 18px; } .meeting-modal .modal-body { padding: 20px 24px; background: white; } .meeting-modal .modal-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 14px 24px; display: flex; justify-content: flex-end; gap: 10px; } .meeting-modal .modal-footer .btn { margin: 0; } /* ----- Recipient pill at top of the modal body ----- */ .meeting-recipient { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 20px; } .meeting-recipient-label { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; } .meeting-recipient-value { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #111827; word-break: break-all; } .meeting-recipient-value .glyphicon { color: #6b7280; font-size: 12px; } /* ----- Sectioned form groups ----- */ .meeting-section { margin-bottom: 22px; } .meeting-section:last-child { margin-bottom: 0; } .meeting-section-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .meeting-field-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; } /* "Optional" chip — same as approval modal */ .meeting-optional-chip { display: inline-block; padding: 2px 8px; background: #f3f4f6; color: #6b7280; border-radius: 10px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } /* ----- Date + Time side-by-side ----- */ .meeting-when-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .meeting-when-field label { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 4px; } /* ----- Inputs ----- */ .meeting-modal .meeting-input.form-control { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: #1f2937; background: white; box-shadow: none; height: auto; transition: border-color 0.15s, box-shadow 0.15s; } .meeting-modal .meeting-input.form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); outline: none; } /* ----- Template row ----- */ .meeting-template-row { margin-bottom: 16px; } /* ----- Body textarea ----- */ .meeting-body-row { margin-top: 4px; } .meeting-modal .meeting-textarea.form-control { width: 100% !important; height: 220px !important; min-height: 160px; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #1f2937; background: white; box-shadow: none; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; } .meeting-modal .meeting-textarea.form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); outline: none; } .meeting-modal .meeting-textarea.form-control::placeholder { color: #9ca3af; font-style: italic; } /* ----- Help text ----- */ .meeting-modal .meeting-help-text { margin: 6px 0 0; font-size: 12px; color: #6b7280; line-height: 1.5; } /* ----- Footer buttons ----- */ .meeting-modal .meeting-cancel-btn, .meeting-modal .btn-default.meeting-cancel-btn { background: white !important; color: #374151 !important; border: 1px solid #d1d5db !important; padding: 8px 18px; font-weight: 500; border-radius: 6px; } .meeting-modal .meeting-cancel-btn:hover, .meeting-modal .btn-default.meeting-cancel-btn:hover { background: #f9fafb !important; border-color: #9ca3af !important; color: #111827 !important; } .meeting-modal .meeting-send-btn, .meeting-modal .btn-primary.meeting-send-btn { background: #2563eb !important; border-color: #2563eb !important; color: white !important; padding: 8px 22px; font-weight: 600; border-radius: 6px; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25); } .meeting-modal .meeting-send-btn:hover, .meeting-modal .btn-primary.meeting-send-btn:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; } /* ----- Mobile responsive ----- */ @media (max-width: 600px) { .meeting-modal .meeting-modal-dialog { margin: 10px; width: auto; } .meeting-modal .modal-header, .meeting-modal .modal-body, .meeting-modal .modal-footer { padding-left: 16px; padding-right: 16px; } .meeting-when-row { grid-template-columns: 1fr; } .meeting-modal .modal-footer { flex-direction: column-reverse; } .meeting-modal .modal-footer .btn { width: 100%; } .meeting-modal .meeting-textarea.form-control { height: 180px !important; } } /* ============================================================ ROUND 16 — Helper note inside View dropdown + repeater panel Small italic grey hint added to the bottom of: - The GridView "View" dropdown menu (Evaluations.aspx) - The repeater's "Evaluation Template Detail Links" panel Tells the AD that the Coach Self Eval./Report link only becomes active once the coach has completed it. ============================================================ */ /* Variant 1: lives inside the dropdown
      as a non-clickable
    • */ .dropdown-helper-note { padding: 6px 16px 8px; font-size: 11px; font-style: italic; color: #6b7280; line-height: 1.3; cursor: default; } .dropdown-helper-note span { display: block; } /* Suppress the default dropdown hover highlight on this non-clickable note */ .dropdown-helper-note:hover { background-color: transparent; } /* Variant 2: lives inside the repeater panel below the link list */ .repeater-helper-note { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e5e7eb; font-size: 11px; font-style: italic; color: #6b7280; line-height: 1.3; }