/* Ported from the original OpportunityMgmt_V2 _Layout.cshtml inline styles,
   to keep the same visual identity (navy navbar, button color classes,
   Arabic font) while running on Bootstrap 5 instead of Bootstrap 3. */

.cssFormModal, .cssXsModal {
    width: 95%;
    max-width: 95%;
}

@media screen and (min-width: 801px) {
    .cssFormModal {
        width: 80%;
        max-width: 1100px;
    }

    .cssXsModal {
        width: 40%;
        max-width: 600px;
    }
}

#FormModal .modal-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* font-display: swap avoids the browser default "block" period, where any
   RTL text (the whole app - see body[dir="rtl"] below) renders fully
   invisible until this font finishes loading. On a slow connection this
   showed up as dialogs (e.g. the delete confirm) appearing with buttons but
   no visible message text. */
@font-face {
    font-family: NotoKufiArabic;
    src: url("/assets/fonts/NotoKufiArabic-Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: NotoKufiArabic;
    font-weight: bold;
    src: url("/assets/fonts/NotoKufiArabic-Bold.ttf");
    font-display: swap;
}

body {
    background-color: #dddee0;
}

/* _Layout.cshtml uses .container-fluid (edge-to-edge) instead of Bootstrap's
   default .container so pages aren't boxed into its ~1320px cap, leaving
   large gray margins on wide screens. Full edge-to-edge read as too wide
   though, so cap it here at a wider-but-still-centered width instead. */
.page-content {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bootstrap 5 dropped the .panel component entirely (Bootstrap 3), but every migrated
   view still uses panel/panel-heading/panel-body as its content card wrapper. Without
   this, those divs have no background/border and the whole page reads as flat gray. */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-heading {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-body {
    padding: 15px;
}

.panel-default > .panel-heading {
    color: #333;
}

body[dir="rtl"] {
    font-family: NotoKufiArabic, sans-serif;
}

/* Navbar: navy theme matching the original app's ".tab" navbar class */
.navbar.tab {
    background-color: #16315c;
    border: none;
}

.navbar.tab .navbar-brand,
.navbar.tab .nav-link {
    color: #ffffff !important;
}

.navbar.tab .nav-link:hover,
.navbar.tab .navbar-brand:hover {
    color: #d9d9d9 !important;
}

.navbar.tab .navbar-toggler {
    border-color: rgba(255,255,255,.4);
}

.navbar.tab .navbar-toggler-icon {
    filter: invert(1);
}

.dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
}

/* Details table styling, ported from .details-Table/.details-FieldName/.details-FieldValue */
.details-Table {
    font-weight: 500;
}

.details-FieldName {
    color: #999999;
    font-size: 14px;
}

.details-FieldValue {
    color: #333;
}

footer.footer {
    background-color: #555;
    color: white;
    padding: 15px;
}

/* Bootstrap 5 dropped the .btn-xs size utility (only .btn-sm/.btn-lg remain),
   so the small per-row Edit/Delete icon buttons fell back to full-size
   default buttons. Restore Bootstrap 3's original .btn-xs sizing. */
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Action button color classes, ported as-is from the original app */
.cssNew, .cssAdd, .cssFind {
    background: #0094ff;
    color: #ffffff;
}

/* Ghost icon style (no background pill, like the Activities/sub-list row
   actions), but colored at rest instead of the muted gray .sublist-action
   uses - the icon's own color signals its action instead of waiting for
   hover. */
.cssEdit {
    background: transparent;
    color: #2b6cb0;
}

.cssEdit:hover {
    background: transparent;
    color: #1f5083;
}

/* The top toolbar "New" button reuses .cssEdit but should read as the dark
   navy primary action (matching the legacy Index toolbar), distinct from the
   ghost style used for the small per-row edit icons that also use .cssEdit. */
.newEntity {
    background: #16315c;
    color: #ffffff;
}

/* Needed so :hover wins over .cssEdit:hover's ghost style above - both are
   single-pseudo-class selectors, so without this the New button would go
   transparent on hover instead of darkening. */
.newEntity:hover {
    background: #0f2340;
    color: #ffffff;
}

/* Bootstrap 5 changed the default .btn-info palette (bright cyan) away from
   Bootstrap 3's muted sky blue that the legacy Index toolbars (Refresh,
   Import, Delete, Assign, Export) were built around. Restore the old colors
   so ported Index pages keep the same look - repointed to the app's steel-blue
   accent (#2b6cb0) so every .btn-info matches .btn-primary below. */
.btn-info {
    color: #ffffff;
    background-color: #2b6cb0;
    border-color: #2b6cb0;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    color: #ffffff;
    background-color: #235a94;
    border-color: #1f5083;
}

.btn-info.disabled,
.btn-info:disabled {
    color: #ffffff;
    background-color: #2b6cb0;
    border-color: #2b6cb0;
    opacity: .65;
}

/* Repoint Bootstrap 5's default .btn-primary (#0d6efd) to the app's steel-blue
   accent everywhere - the same color chosen for the redesigned Generics
   toolbar's "New" button. */
.btn-primary {
    color: #ffffff;
    background-color: #2b6cb0;
    border-color: #2b6cb0;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff;
    background-color: #235a94;
    border-color: #1f5083;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #ffffff;
    background-color: #2b6cb0;
    border-color: #2b6cb0;
    opacity: .65;
}

/* Checkboxes (row selection, etc.) render with the browser's default blue
   accent - repoint to the app's steel-blue accent for consistency. */
input[type="checkbox"] {
    accent-color: #2b6cb0;
}

/* Bootstrap 5 dropped .btn-default (Bootstrap 3), so every scaffolded Details
   page's header actions (Edit/Delete/Assign/Share/Print - class "btn btn-default")
   render with no background or border at all. Give them the same navy-outline
   look as the Generics Index toolbar. */
.btn-default {
    color: #16315c;
    background-color: #fff;
    border-color: #16315c;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #16315c;
    background-color: #eef2f7;
    border-color: #16315c;
}

.btn-default.disabled,
.btn-default:disabled {
    color: #16315c;
    background-color: #fff;
    border-color: #16315c;
    opacity: .65;
}

/* Compound .btn.cssX selectors (rather than plain .cssX) so these beat the
   Razor CSS-isolation bundle's scoped `a[b-xxxx] { color: #0077cc }` rule,
   which has higher specificity than a single class and otherwise leaves
   these anchor-styled buttons with blue link text instead of white. */
.btn.cssDownload, .btn.cssPreview, .btn.cssBack, .btn.cssSave, .btn.cssSend {
    background: #16315c;
    color: #ffffff;
}

/* Ghost icon style, matching the Activities/sub-list row actions (see the
   .cssEdit comment above). */
.cssDelete {
    background: transparent;
    color: #c0392b;
}

.cssDelete:hover {
    background: transparent;
    color: #a5301f;
}

.btn.cssCancel {
    background: #c6c5c5;
    color: #ffffff;
}

.cssPermission, .cssChangePassword {
    background: #60c38e;
    color: #ffffff;
}

/* The Edit/Delete row-action column has no reliable width in table-layout:
   auto, so the browser was shrinking it below what the two inline-block
   buttons need and wrapping Delete onto its own line. Keep them side by
   side on one line instead. */
#IndexDataForm {
    white-space: nowrap;
}

/* Content links (item name -> Details) and column sort links inside Index
   tables should read as plain hyperlinks, matching the legacy Bootstrap 3
   look, not as buttons. Row action icons (Edit/Delete) are untouched here -
   they keep their own .cssEdit/.cssDelete button styling, which wins on
   specificity. */
table td a,
table th a {
    color: #337ab7;
    text-decoration: none;
}

/* Assign modal (Views/Shared/_Layout.cshtml #AssignModal) - matches the
   navy/white "card" look used by the Generics Index toolbar's filter panel. */
.cssAssignModalTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 0;
}

.cssAssignModalTitle i {
    color: #16315c;
    font-size: 18px;
}

.cssAssignModalLabel {
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.cssAssignModalFooter {
    justify-content: center;
}

.cssAssignModalFooter .btn {
    min-width: 100px;
}

/* Delete confirmation modal (Views/Shared/_Layout.cshtml #DeleteConfirmModal,
   used by the Index toolbar/row delete) - same card layout as #AssignModal
   (.cssAssignModalTitle/.cssAssignModalFooter above), just with the danger
   red accent instead of navy, so the two dialogs read as one design. */
.cssDeleteModalTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 0;
}

.cssDeleteModalTitle i {
    color: #c0392b;
    font-size: 18px;
}

#DeleteConfirmBody {
    font-size: 16px;
    color: #555;
}

.btn.cssDeleteConfirm {
    background: #c0392b;
    color: #ffffff;
}

.btn.cssDeleteConfirm:hover {
    background: #a5301f;
    color: #ffffff;
}

table td a:hover,
table th a:hover {
    color: #23527c;
    text-decoration: underline;
}

main > p > a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3px;
    background: #16315c;
    color: #ffffff !important;
    text-decoration: none;
}

main > p > a:hover {
    background: #468499;
    color: #ffffff !important;
}

main h1 {
    color: #16315c;
    border-bottom: 2px solid #16315c;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

/* Shared "detail page" card design (header + section cards), used by Accounts/Details.cshtml
   and the bulk-generated scaffolded Details.cshtml pages for every other entity. */
.detail-header {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.detail-header-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #16315c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.detail-header-info {
    flex: 1;
    min-width: 200px;
}

.detail-header-type {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

.detail-header-name {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.detail-header-actions {
    display: flex;
    gap: 8px;
}

.detail-header-actions .btn {
    border-radius: 6px;
}

.form-section {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    margin-bottom: 20px;
}

/* Rounds the header's own top corners instead of relying on the parent's
   overflow:hidden (which used to clip anything that overflowed the card -
   including dropdown menus like the Activities "Create" menu, cutting off
   its last item near the bottom of a short card). */
.form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #16315c;
    color: #fff;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}

.form-section-body {
    padding: 18px 16px 6px;
}

.detail-row {
    margin-bottom: 14px;
}

.detail-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 2px;
}

.detail-value {
    color: #333;
    min-height: 20px;
}

.side-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    margin-bottom: 20px;
}

/* Rounds the tab bar's own top corners instead of relying on the parent's
   overflow:hidden (which used to clip anything that overflowed the card -
   including dropdown menus like the Activities "Create" menu, cutting off
   its last item whenever the tab content was short). */
.side-panel .nav-tabs {
    background: #16315c;
    border-bottom: none;
    padding: 0 8px;
    border-radius: 10px 10px 0 0;
}

.side-panel .nav-tabs .nav-link {
    color: rgba(255,255,255,.75);
    border: none;
    border-radius: 0;
    font-weight: 600;
    padding: 12px 14px;
}

.side-panel .nav-tabs .nav-link.active {
    color: #fff;
    background: transparent;
    border-bottom: 3px solid #fff;
}

.side-panel .tab-content {
    padding: 16px;
}

/* ---------- Admin control panel ---------- */
.admin-hero {
    background: linear-gradient(135deg, #16315c, #1f4788);
    color: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
}

.admin-hero h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #fff !important;
}

.admin-hero h1 i {
    color: #fff !important;
}

.admin-hero .admin-stat {
    text-align: center;
    min-width: 90px;
}

.admin-hero .admin-stat .num {
    font-size: 24px;
    font-weight: 700;
    display: block;
    line-height: 1.1;
}

.admin-hero .admin-stat .lbl {
    font-size: 12px;
    opacity: .85;
}

.admin-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.admin-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
}

.admin-card > .admin-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #16315c;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.admin-card > .admin-card-body {
    padding: 8px 6px;
}

.admin-card a.admin-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: #2b3a55;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
}

.admin-card a.admin-link:hover {
    background: #eef2f9;
    color: #16315c;
}

.admin-card a.admin-link i {
    width: 18px;
    text-align: center;
    color: #5b6b8c;
}

.admin-settings-actions {
    text-align: center;
    padding-top: 10px;
}

.admin-settings-actions .btn {
    min-width: 96px;
    margin: 0 4px;
}

/* ---------- Opportunity sales-pipeline path bar ----------
   Every step is the SAME chevron shape (like the legacy "Closed" step): a point on
   the leading edge and a matching notch on the trailing edge, drawn with clip-path.
   Steps overlap by the arrow depth (negative margin), leaving a 2px separator. */
.sales-path {
    --d: 19px;           /* arrow / notch depth */
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 12px;
    margin-bottom: 20px;
}

.sales-path-track {
    display: flex;
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.sales-path-step {
    flex: 1 1 0;
    min-width: 124px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #e7ebf0;
    color: #5a6b82;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    cursor: default;
    margin-inline-start: calc(var(--d) * -1 + 2px);
    padding: 0 calc(var(--d) + 10px);
    /* LTR: point on the right, notch on the left */
    clip-path: polygon(0 0, calc(100% - var(--d)) 0, 100% 50%, calc(100% - var(--d)) 100%, 0 100%, var(--d) 50%);
}
.sales-path-track > .sales-path-step:first-child { margin-inline-start: 0; }

/* RTL: point on the left, notch on the right */
[dir="rtl"] .sales-path-step {
    clip-path: polygon(100% 0, var(--d) 0, 0 50%, var(--d) 100%, 100% 100%, calc(100% - var(--d)) 50%);
}

.sales-path-step .sales-path-check { display: none; font-size: 14px; }

.sales-path[data-canedit="true"] .sales-path-step:not(.is-current) { cursor: pointer; }
.sales-path[data-canedit="true"] .sales-path-step:not(.is-current):hover { filter: brightness(0.96); }

/* completed - green, shows a check (label on hover) */
.sales-path-step.is-completed { background: #4bca81; color: #fff; }
.sales-path-step.is-completed .sales-path-check { display: inline-flex; }
.sales-path-step.is-completed .sales-path-label { display: none; }
.sales-path-step.is-completed:hover .sales-path-check { display: none; }
.sales-path-step.is-completed:hover .sales-path-label { display: inline; }

/* current - blue */
.sales-path-step.is-current { background: #005fb2; color: #fff; }

/* closed slot */
.sales-path-step.is-closed-slot { cursor: pointer; }
.sales-path-step.is-closed-slot.is-won { background: #2e844a; color: #fff; }
.sales-path-step.is-closed-slot.is-won .sales-path-check { display: inline-flex; }
.sales-path-step.is-closed-slot.is-lost { background: #c23934; color: #fff; }

.sales-path .sales-path-btn {
    flex: 0 0 auto;
    align-self: center;
    background: #005fb2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    white-space: nowrap;
}
.sales-path .sales-path-btn:hover { background: #004f95; }
.sales-path .sales-path-btn-ghost {
    background: #fff;
    color: #005fb2;
    border: 1px solid #005fb2;
}
.sales-path .sales-path-btn-ghost:hover { background: #eef4fb; }