/*
  Site theme: "Clean and light". Loaded last by _Layout so it overrides the template.
  Logged-in app pages get body.app-page (set by _LayoutPortfolios).
*/
:root {
    --irc-blue: #3697d9;
    --irc-blue-dark: #2b7fbb;
    --irc-blue-wash: #eef6fc;
    --irc-text: #1f2937;
    --irc-sub: #6b7280;
    --irc-line: #e5e7eb;
    --irc-input-line: #d1d5db;
    --irc-page: #f6f8fa;
    --irc-radius: 10px;
}

/* ---------- Type ---------- */
body {
    font-family: 'Inter', Arial, sans-serif;
    color: var(--irc-text);
}
h1, h2, h3, h4, h5, h6, .navbar-nav, .btn, button, input, select, textarea {
    font-family: 'Inter', Arial, sans-serif;
}
a { color: var(--irc-blue); }
a:hover, a:focus { color: var(--irc-blue-dark); }

/* ---------- Header and menu ---------- */
.header-container .header {
    background: #fff;
    border-bottom: 1px solid var(--irc-line);
}
.header-container .navbar-nav > li > a {
    color: var(--irc-text);
    font-weight: 500;
    font-size: 15px;
    text-transform: none;
}
.header-container .navbar-nav > li > a:hover,
.header-container .navbar-nav > li > a:focus {
    color: var(--irc-blue);
    background: transparent;
}
.header-container .navbar-nav > li.active > a,
.header-container .navbar-nav > li.active > a:hover {
    color: var(--irc-blue);
    background: transparent;
    /* Underline just below the word (the link's own bottom padding is large). */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
/* Login link and Logout button */
.header-container .navbar-right .navbar-link,
.header-container #logoutForm button.navbar-link {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--irc-text);
    background: #fff;
    border: 1px solid var(--irc-input-line);
    border-radius: 8px;
    padding: 6px 14px;
    line-height: 1.4;
}
@media (min-width: 768px) {
    /* Center the Login / Logout button on the 76px-tall menu row. */
    .header-container ul.navbar-right { margin-top: 21px; }
    /* The Logout form would add its own 20px margin on top of that. */
    .header-container #logoutForm { margin-top: 0; margin-bottom: 0; }
    /* Room for all seven signed-in links plus Logout on one row: drop the template's 120px
       reserved for header buttons the site doesn't use, and tighten the link spacing. */
    .header-container .with-dropdown-buttons .navbar-default .navbar-collapse { padding-right: 15px; }
    .header-container .navbar-default .navbar-nav:not(.navbar-right) > li > a { padding-left: 12px; padding-right: 12px; }
}
/* Signed-in links (Reports ... Subscription): one tinted pill on the menu row; a labelled section on phones. */
.header-container .navbar-nav > li.nav-account-label { display: none; }
@media (min-width: 768px) {
    .header-container .navbar-nav > li.nav-account { background: var(--irc-blue-wash); margin: 18px 0; }
    .header-container .navbar-default .navbar-nav > li.nav-account > a { padding-top: 10px; padding-bottom: 10px; }
    .header-container .navbar-nav > li.nav-account-first { border-radius: 999px 0 0 999px; padding-left: 6px; margin-left: 8px; }
    .header-container .navbar-nav > li.nav-account-last { border-radius: 0 999px 999px 0; padding-right: 6px; }
    .header-container .navbar-nav > li.nav-account-first.nav-account-last { border-radius: 999px; } /* Subscribe alone */
}
@media (max-width: 767px) {
    .header-container .navbar-nav > li.nav-account-label {
        display: block; margin-top: 6px; padding: 10px 16px 4px; border-top: 1px solid var(--irc-line);
        font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--irc-sub);
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* Eight signed-in links plus Logout in the 970px container. */
    .header-container .navbar-default .navbar-nav:not(.navbar-right) > li > a { padding-left: 8px; padding-right: 8px; font-size: 14px; }
}
/* Subscribers' nine links plus Logout (_MainMenu marks the list nav-crowded): a little tighter still. */
@media (min-width: 1200px) {
    .header-container .navbar-default .navbar-nav.nav-crowded:not(.navbar-right) > li > a { padding-left: 9px; padding-right: 9px; font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .header-container .navbar-default .navbar-nav.nav-crowded:not(.navbar-right) > li > a { padding-left: 4px; padding-right: 4px; font-size: 13px; }
    .header-container .navbar-nav.nav-crowded > li.nav-account-first { margin-left: 4px; padding-left: 4px; }
    .header-container .navbar-nav.nav-crowded > li.nav-account-last { padding-right: 4px; }
    .header-container .navbar-nav.nav-crowded ~ #logoutForm button.navbar-link { padding-left: 10px; padding-right: 10px; }
}
/* Tablets (768-991px): a small logo on the menu row instead of a row of its own, so the logo, every link
   and Login/Logout fit on one line (subscribers' nine links a little tighter still). */
@media (min-width: 768px) and (max-width: 991px) {
    .header-container .header > .container > .row { display: flex; align-items: center; flex-wrap: nowrap; }
    .header-container .header > .container > .row > .col-md-2 { flex: 0 0 auto; width: auto; padding-right: 0; }
    .header-container .header > .container > .row > .col-md-10 { flex: 1 1 auto; width: auto; min-width: 0; padding-left: 8px; }
    .header-container #logo_img { width: 64px; height: auto; transition: none; }
    .header-container .header-left, .header-container .logo { margin: 0; padding: 0; }
    .header-container .with-dropdown-buttons .navbar-default .navbar-collapse { padding-left: 0; padding-right: 0; }
    .header-container .navbar-default .navbar-nav:not(.navbar-right) > li > a { padding-left: 7px; padding-right: 7px; font-size: 14px; }
    .header-container .navbar-default .navbar-nav.nav-crowded:not(.navbar-right) > li > a { padding-left: 3px; padding-right: 3px; font-size: 12px; }
    .header-container .navbar-nav.nav-crowded > li.nav-account-first { margin-left: 3px; padding-left: 3px; }
    .header-container .navbar-nav.nav-crowded > li.nav-account-last { padding-right: 3px; }
    .header-container .navbar-nav.nav-crowded ~ #logoutForm button.navbar-link { padding-left: 8px; padding-right: 8px; font-size: 12px; }
}
.header-container #logoutForm button.navbar-link:hover,
.header-container .navbar-right a.navbar-link:hover {
    color: var(--irc-blue);
    border-color: var(--irc-blue);
    text-decoration: none;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-default,
.btn-primary-apm,
input[type="submit"].btn-primary {
    background-color: var(--irc-blue);
    border: 1px solid var(--irc-blue);
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    text-transform: none;
}
.btn-primary:hover, .btn-primary:focus,
.btn-default:hover, .btn-default:focus,
.btn-primary-apm:hover,
input[type="submit"].btn-primary:hover {
    background-color: var(--irc-blue-dark);
    border-color: var(--irc-blue-dark);
    color: #fff;
}
.btn-secondary-apm {
    background-color: #fff;
    border: 1px solid var(--irc-input-line);
    color: var(--irc-text);
    border-radius: 8px;
}
.btn-secondary-apm:hover {
    background-color: var(--irc-page);
    border-color: var(--irc-blue);
    color: var(--irc-blue);
}

/* ---------- Logged-in app pages ---------- */
body.app-page { background: var(--irc-page); }
body.app-page .page-wrapper,
body.app-page .section { background: transparent; }
body.app-page .section { padding-top: 24px; }
body.app-page h1, body.app-page h2 {
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
    color: var(--irc-text);
    margin: 0 0 12px;
}

/* Two-column app page: controls in a card on the left, the main content on the right; stacked on narrow screens. */
.app-split { display: flex; align-items: flex-start; gap: 24px; }
.app-split-side { flex: 0 0 280px; }
.app-split-main { flex: 1 1 auto; min-width: 0; }
.app-card { background: #fff; border: 1px solid var(--irc-line); border-radius: var(--irc-radius); padding: 16px; margin-bottom: 16px; }
.app-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--irc-text); text-transform: none; }

/* Information pages (About, Contact), laid out like Pricing and How it works: centered column,
   plain heading, grey lead line, white cards. */
.info-page { max-width: 900px; margin: 0 auto; padding: 32px 16px 48px; }
.info-page h1 { font-size: 28px; font-weight: 600; text-transform: none; margin: 0 0 6px; }
.info-page .info-lead { color: var(--irc-sub); font-size: 16px; margin: 0 0 24px; }
.info-page .app-card { padding: 20px 24px; }
.info-page .app-card p:last-child { margin-bottom: 0; }
.app-field { margin-bottom: 12px; }
.app-field > label { display: block; font-size: 12px; font-weight: 500; color: var(--irc-sub); margin-bottom: 4px; }
.app-field select, .app-field input[type="date"], .app-field input[type="number"] { width: 100%; }
.app-field.app-radios > label { display: inline; font-size: 14px; font-weight: 400; color: var(--irc-text); margin: 0 0 0 6px; line-height: 28px; }
.app-split-main .d-flex.justify-content-center { justify-content: flex-start !important; }
@media (max-width: 991px) {
    .app-split { flex-direction: column; align-items: stretch; }
    .app-split-side { flex: 1 1 auto; }
}

/* Forms: the wizard and transaction pages hard-code colors and sizes inline; bring them into the theme. */
body.app-page fieldset.fieldSetFrame,
body.app-page fieldset[style*="lightskyblue"] {
    background: #fff !important;
    border: 1px solid var(--irc-line);
    border-radius: var(--irc-radius);
    padding: 12px 16px !important;
}
body.app-page [style*="lightskyblue"] { background-color: #fff !important; }
body.app-page input[type="text"],
body.app-page input[type="date"],
body.app-page input[type="number"],
body.app-page input[type="email"],
body.app-page input[type="password"],
body.app-page select {
    height: 36px !important;
    border: 1px solid var(--irc-input-line);
    border-radius: 8px;
    padding: 4px 10px;
    background: #fff;
    color: var(--irc-text);
}
body.app-page input:focus, body.app-page select:focus {
    border-color: var(--irc-blue);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(54, 151, 217, .2);
}
body.app-page input[type="submit"],
body.app-page input[type="button"].btn-primary-apm {
    background-color: var(--irc-blue) !important;
    border: 1px solid var(--irc-blue) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 6px 18px;
    font-weight: 500;
}
body.app-page input[type="submit"]:hover { background-color: var(--irc-blue-dark) !important; }
/* Red delete buttons stay red. */
body.app-page input[type="submit"][style*="red"] {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Data grid (Views/Shared/Components/DataGrid) */
body.app-page .table-wrapper {
    padding: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.app-page #t01 {
    background: #fff;
    border: 1px solid var(--irc-line);
    border-radius: var(--irc-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 13px;
    margin: 0;
}
body.app-page #t01 > thead > tr > th,
body.app-page #t01 tr.grid-header > td {
    background: #f3f4f6;
    color: var(--irc-sub);
    font-weight: 600;
    font-size: 12px;
    border: 0;
    border-bottom: 1px solid var(--irc-line);
    padding: 8px 10px !important; /* the grid sets 0/2px padding inline */
}
body.app-page #t01 .grid-header-links { color: var(--irc-sub); }
body.app-page #t01 > tbody > tr > td {
    border: 0;
    border-top: 1px solid var(--irc-line);
    padding: 8px 10px !important; /* the grid sets 0/2px padding inline */
    vertical-align: middle;
    color: var(--irc-text);
}
body.app-page #t01 > tbody > tr:first-child > td { border-top: 0; }
body.app-page .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
body.app-page #t01 > tbody > tr:hover > td { background: #f9fafb; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
    .header-container .navbar-collapse { border-top: 1px solid var(--irc-line); }
    .header-container .navbar-nav > li > a { padding: 12px 16px; font-size: 16px; }
    .header-container .navbar-nav > li.active > a { box-shadow: inset 3px 0 0 var(--irc-blue); text-decoration: none; }
    .header-container .navbar-right { margin: 8px 16px 12px; }

    body.app-page .section { padding-top: 12px; }
    body.app-page input[type="submit"],
    body.app-page .btn { min-height: 44px; }
    body.app-page fieldset.fieldSetFrame { width: auto !important; margin-left: 0 !important; }
}