/* EduCRM site-wide stylesheet (docs/ASSUMPTIONS.md #46, 2026-08-19).
   Replaces the handful of scattered inline <style> blocks that used to live
   directly in Site.Master/Calendar.aspx -- this project never had a real
   CSS framework, everything up to this point was plain per-page inline
   rules. Kept as one plain hand-written stylesheet rather than pulling in a
   framework (Bootstrap etc.), consistent with this scaffold not otherwise
   depending on a client-side framework or a package manager for front-end
   assets (see Site.Master's own doc comment on the SignalR/jQuery CDN
   scripts for the same "no build step yet" reasoning). */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 15px;
    color: #1f2933;
    background: #f4f6f8;
}

h1, h2, h3, h4 { color: #102a43; font-weight: 600; }
h2 { margin-top: 0; }

a { color: #1d5fc2; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Shell layout: fixed left sidebar + topbar + scrollable content
   (docs/ASSUMPTIONS.md #46 -- "put the Menu on the left fixed"). Site.
   Master always renders this same shell regardless of role; only the
   nav links inside .sidebar-nav vary, since a Web Forms master page can
   only declare a single <asp:ContentPlaceHolder> and can't conditionally
   swap in a whole second layout around it.
   --------------------------------------------------------------------- */

.site-shell { display: flex; min-height: 100%; }

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    background: #102a43;
    color: #d9e2ec;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-brand {
    padding: 1.25em 1em;
    font-size: 1.15em;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* docs/ASSUMPTIONS.md #145: licensee name on top, product line under it */
.sidebar-brand { overflow-wrap: anywhere; line-height: 1.25; }
.sidebar-brand-sub { font-size: 0.72em; font-weight: 400; opacity: 0.75; margin-top: 2px; }

.sidebar-cta { padding: 1em; }
.sidebar-cta a.btn { display: block; text-align: center; }

.sidebar-nav { flex: 1 1 auto; padding: 0.5em 0; }
.sidebar-nav a {
    display: block;
    padding: 0.6em 1em;
    color: #d9e2ec;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}
.sidebar-nav a.active {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: #4fb3ff;
    color: #fff;
}
.sidebar-nav .sidebar-section-label {
    padding: 1em 1em 0.25em;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #829ab1;
}

.sidebar-footer {
    padding: 1em;
    font-size: 0.85em;
    color: #829ab1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.main-column {
    flex: 1 1 auto;
    margin-left: 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.6em 1.5em;
    background: #fff;
    border-bottom: 1px solid #d9e2ec;
}

.main-content { padding: 1.5em; flex: 1 1 auto; }

/* No signed-in nav yet (unauthenticated / pending user) -- same page body
   still needs somewhere sane to sit rather than under a 240px sidebar
   gutter that isn't there. */
.site-shell.no-sidebar .main-column { margin-left: 0; }
/* docs/ASSUMPTIONS.md #120: a page shown inside a pop-up (?embed=1) */
.site-shell.embedded .main-content { padding: 4px 8px; }

/* ---------------------------------------------------------------------
   Notification bell (moved here from Site.Master's own inline <style>,
   docs/ASSUMPTIONS.md #41/#46)
   --------------------------------------------------------------------- */

.notification-bell { position: relative; display: inline-block; }
.notification-bell button {
    cursor: pointer;
    background: #f0f4f8;
    border: 1px solid #d9e2ec;
    border-radius: 4px;
    padding: 0.4em 0.8em;
}
.notification-badge { display: none; background: #c0392b; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 0.75em; margin-left: 4px; }
.notification-panel { display: none; position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #ccc; min-width: 260px; max-height: 320px; overflow-y: auto; z-index: 1000; padding: 0.5em; margin: 0.25em 0 0; }
.notification-item { list-style: none; padding: 0.4em 0; border-bottom: 1px solid #eee; font-size: 0.9em; }
.notification-toast { position: fixed; bottom: 1em; right: 1em; background: #333; color: #fff; padding: 0.75em 1em; border-radius: 4px; z-index: 1000; max-width: 320px; }

/* ---------------------------------------------------------------------
   Generic tables -- covers every GridView/plain <table> in the app,
   since none of them set an explicit CssClass today.
   --------------------------------------------------------------------- */

table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}

table th, table td {
    padding: 0.55em 0.7em;
    text-align: left;
    border-bottom: 1px solid #e4e9f0;
    vertical-align: top;
}

table th {
    background: #f0f4f8;
    color: #334e68;
    font-weight: 600;
    font-size: 0.9em;
}

table tr:hover td { background: #f8fafc; }

/* Calendar week-grid table (moved here from Calendar.aspx's own inline
   <style>, docs/ASSUMPTIONS.md #45/#46). */
table.week-grid td.week-grid-day { border: 1px solid #ccc; padding: 0.5em; width: 14.28%; font-size: 0.9em; vertical-align: top; }
table.week-grid tr:hover td { background: transparent; }

/* Form-table: the plain label/input two-column layout used by
   Admin/NewLead.aspx and the new-task mini-form on Admin/MyTasks.aspx
   (docs/ASSUMPTIONS.md #46) -- distinct from a data GridView, so it's
   given its own class rather than styled like one. */
table.form-table { width: auto; background: transparent; }
table.form-table td { border: none; padding: 0.4em 0.6em 0.4em 0; }
table.form-table td:first-child { font-weight: 600; color: #334e68; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Forms and buttons
   --------------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="number"], textarea, select {
    font-family: inherit;
    font-size: 1em;
    padding: 0.4em 0.5em;
    border: 1px solid #bcccdc;
    border-radius: 4px;
    background: #fff;
}
input[type="text"]:focus, textarea:focus, select:focus { outline: 2px solid #bcd8ff; border-color: #4fb3ff; }

.btn, input[type="submit"], input[type="button"], button {
    display: inline-block;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0.5em 1.1em;
    border-radius: 4px;
    border: 1px solid #bcccdc;
    background: #f0f4f8;
    color: #102a43;
    cursor: pointer;
}
.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: #e4e9f0; text-decoration: none; }

.btn-primary, input[type="submit"].btn-primary {
    background: #1d5fc2;
    border-color: #1d5fc2;
    color: #fff;
}
.btn-primary:hover { background: #164a9a; }

/* ---------------------------------------------------------------------
   Status/alert banners (existing class names, several already set via
   CssClass= in code-behind across the app -- kept unchanged so no C#
   changes were needed to pick this stylesheet up).
   --------------------------------------------------------------------- */

.status-message {
    display: block;
    padding: 0.6em 0.9em;
    border-radius: 4px;
    margin: 0.75em 0;
    background: #eef4ff;
    border: 1px solid #bcd8ff;
    color: #1a3f7a;
}
.status-message.success { background: #e6f6ec; border-color: #a9dfbf; color: #1e5e34; }
/* .error is used standalone (Web Forms asp:Label -> <span>) as well as
   combined with .status-message ("status-message error") -- every current
   usage across the app is a one-line validation/failure message, so both
   get the same red banner treatment rather than two different looks. */
.status-message.error, .error { display: block; padding: 0.6em 0.9em; border-radius: 4px; margin: 0.75em 0; background: #fdeceb; border: 1px solid #f3b6b0; color: #942a25; }

.license-warning {
    display: block;
    padding: 0.75em 1em;
    margin: 0.75em 0;
    background: #fff6e0;
    border: 1px solid #f0d78c;
    color: #7a5b00;
    border-radius: 4px;
}

.new-key-banner {
    display: block;
    padding: 0.9em 1em;
    margin: 0.75em 0;
    background: #eef4ff;
    border: 1px solid #bcd8ff;
    border-radius: 4px;
}

/* Sign-in pages (docs/ASSUMPTIONS.md #72) */
.login-card { max-width: 26rem; margin: 3rem auto; padding: 1.75rem 2rem; background: #fff; border: 1px solid #d9e2ec; border-radius: 8px; }
.login-card h2 { margin-top: 0; }
.login-card label { display: block; font-weight: 600; color: #334e68; margin: 0.9em 0 0.3em; }
.login-card input[type="text"], .login-card input[type="password"] { width: 100%; box-sizing: border-box; padding: 0.55em 0.6em; }
.login-card .login-actions { margin-top: 1.25em; }
.login-card .login-hint { color: #627d98; font-size: 0.85em; margin-top: 1.25em; }
.readonly-banner { display: block; padding: 0.6em 0.9em; border-radius: 4px; margin: 0.75em 0; background: #fff8e1; border: 1px solid #f0d58a; color: #6b4e00; }
.change-type { font-size: 0.8em; font-weight: 600; padding: 0.1em 0.45em; border-radius: 3px; background: #e4e9f0; color: #334e68; }

/* Top bar user + sign out, idle sign-out warning (docs/ASSUMPTIONS.md #76) */
.topbar-user { margin-right: 1.25em; color: #334e68; }
.topbar-user a { white-space: nowrap; }
.topbar-signout { font-weight: 600; }
.idle-warning { position: fixed; inset: 0; background: rgba(16, 42, 67, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.idle-warning[hidden] { display: none; }
.idle-warning-box { background: #fff; border-radius: 8px; padding: 1.5rem 1.75rem; max-width: 26rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.idle-warning-box h3 { margin-top: 0; }

/* Leads list filters + mass actions (docs/ASSUMPTIONS.md #77/#78) */
.lead-filters { background: #fff; border: 1px solid #d9e2ec; border-radius: 6px; padding: 0.5em 1em; margin-bottom: 1em; }
.lead-filters p { margin: 0.45em 0; }
.lead-filters input[type="date"] { width: auto; }
.mass-actions { background: #f0f4f8; border: 1px solid #d9e2ec; border-radius: 6px; padding: 0.5em 1em; margin: 0.75em 0; }
.first-call-waiting { color: #8d2b0b; }

/* Workflow rules editor (docs/ASSUMPTIONS.md #80) */
.workflow-action { background: #fff; border: 1px solid #d9e2ec; border-radius: 6px; padding: 0.5em 0.75em; margin: 0.5em 0; }
.workflow-action-fields { display: flex; flex-wrap: wrap; gap: 0.4em 1.25em; margin-top: 0.4em; color: #334e68; font-size: 0.92em; }