/* ProperResponse — Main Application CSS */
/* Professional Legal Case Management Theme */
:root {
    --pr-primary:       #0f2440;
    --pr-primary-hover: #091a30;
    --pr-primary-light: #1a3558;
    --pr-accent:        #c5a044;
    --pr-accent-hover:  #a8872e;
    --pr-accent-light:  #f5edd4;
    --pr-success:       #1a7a4a;
    --pr-danger:        #c0392b;
    --pr-warning:       #e6a817;
    --pr-info:          #2980b9;
    --pr-light-bg:      #f4f6f9;
    --pr-border:        #d5dce6;
    --pr-text:          #1e2a3a;
    --pr-text-muted:    #5a6a7e;
    --pr-sidebar-w:     0px;
    --pr-navbar-h:      68px;
}

body.pr-app {
    font-family: 'Inter', sans-serif;
    background: var(--pr-light-bg);
    color: var(--pr-text);
}

/* ═════════════════════════════════════════════════════════════════════
   NAVBAR — clean white, with depth from typography + shadow + gold rule.
   Linear / Notion / Stripe aesthetic — restrained, professional.
   ═════════════════════════════════════════════════════════════════════ */
.pr-navbar {
    background: #ffffff !important;
    height: var(--pr-navbar-h);
    border-bottom: 1px solid #e3e8f0;
    box-shadow: 0 1px 0 rgba(200,146,42,.18), 0 4px 16px rgba(15,36,64,.06);
    padding: 0;
    position: fixed;
    z-index: 1030;
}
.pr-navbar .container-fluid { padding: 0 1.5rem; height: 100%; align-items: stretch; }
.pr-navbar .navbar-brand {
    padding: 0 1.5rem 0 0;
    margin: 0 1.5rem 0 0;
    border-right: 1px solid #eef1f5;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pr-navbar .navbar-brand img {
    height: 50px !important;
    width: auto !important;
    max-width: 220px !important;
    display: block;
}
@media (max-width: 991px) {
    :root { --pr-navbar-h: 60px; }
    .pr-navbar .navbar-brand img { height: 42px !important; }
    .pr-navbar .navbar-brand { padding-right: 1rem; margin-right: 1rem; }
}

/* Primary nav links — tight, consistent, organized */
.pr-navbar .navbar-collapse { height: 100%; }
.pr-navbar .navbar-nav { height: 100%; align-items: center; }
.pr-navbar .nav-item { height: 100%; display: flex; align-items: stretch; }
.pr-navbar .nav-link {
    color: #4a5868 !important;
    font-size: .85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: .005em;
    transition: color .15s, background .15s, border-color .15s;
    padding: 0 1rem !important;
    margin: 0 .1rem;
    height: 100%;
    display: inline-flex !important;
    align-items: center;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
}
.pr-navbar .nav-link i {
    color: #8893a0;
    transition: color .15s;
    margin-right: .45rem;
    font-size: .8rem;
    width: 14px;
    text-align: center;
}
.pr-navbar .nav-link:hover {
    color: var(--pr-primary) !important;
    background: #fafbfc;
}
.pr-navbar .nav-link:hover i { color: var(--pr-accent); }
.pr-navbar .nav-link.active {
    color: var(--pr-primary) !important;
    border-bottom-color: var(--pr-accent);
    background: rgba(200,146,42,.05);
    font-weight: 700;
}
.pr-navbar .nav-link.active i { color: var(--pr-accent); }
.pr-navbar .dropdown-toggle { color: #4a5868 !important; }
.pr-navbar .dropdown-toggle:hover { color: var(--pr-primary) !important; }
.pr-navbar .dropdown-toggle::after { margin-left: .4rem; opacity: .55; vertical-align: middle; }

/* Right-side utility area divider */
.pr-navbar .nav-utility-divider {
    width: 1px;
    background: #eef1f5;
    margin: .9rem .75rem;
    align-self: stretch;
}

/* Floating dropdown menus */
.pr-navbar .dropdown-menu {
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15,36,64,.12);
    margin-top: .25rem;
    padding: .4rem 0;
    min-width: 220px;
}
.pr-navbar .dropdown-item {
    font-size: .87rem;
    color: #4a5868;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.pr-navbar .dropdown-item i { color: #8893a0; width: 16px; text-align: center; font-size: .82rem; }
.pr-navbar .dropdown-item:hover,
.pr-navbar .dropdown-item.active {
    background: rgba(200,146,42,.08);
    color: var(--pr-primary);
}
.pr-navbar .dropdown-item.active i,
.pr-navbar .dropdown-item:hover i { color: var(--pr-accent); }
.pr-navbar .dropdown-divider { margin: .35rem 0; }

/* Hamburger toggler (mobile) */
.pr-navbar .navbar-toggler {
    border-color: #cdd5df;
    padding: .35rem .55rem;
}
.pr-navbar .navbar-toggler-icon {
    filter: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%231a3a5c' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Notification bell — flush with nav items */
#prNotifBell { color: #4a5868 !important; font-size: 1rem; padding: 0 .85rem !important; }
#prNotifBell:hover { color: var(--pr-primary) !important; background: #fafbfc; }
#prNotifBell .badge { font-size: .58rem !important; }

/* ─── Flat top nav — every section visible, no More dropdown ───
   With 13–14 items + brand + search + bell + user, full labels only fit on
   ultra-wide screens (~1900px+). On typical laptops we go icon-only with a
   native hover tooltip (title attr). Below md, Bootstrap collapses the navbar
   into its own column, so we restore labels + tap targets. */
.pr-navbar .pr-nav-flat .nav-link {
    padding: 0 .55rem !important;
    font-size: .78rem;
    margin: 0;
}
.pr-navbar .pr-nav-flat .nav-link i {
    margin-right: .35rem;
    font-size: .78rem;
}
/* Below 1700px viewports: drop the text labels (keep icons + tooltip) */
@media (max-width: 1699.98px) {
    .pr-navbar .pr-nav-flat .nav-link { padding: 0 .6rem !important; }
    .pr-navbar .pr-nav-flat .nav-link .nav-lbl { display: none; }
    .pr-navbar .pr-nav-flat .nav-link i { margin-right: 0; font-size: 1.05rem; }
}
/* Below 991px (mobile collapse): the navbar-collapse expands to its own column,
   so restore labels + ample spacing for tap targets. */
@media (max-width: 991.98px) {
    .pr-navbar .pr-nav-flat .nav-link { padding: .55rem 1rem !important; font-size: .9rem; }
    .pr-navbar .pr-nav-flat .nav-link .nav-lbl { display: inline; }
    .pr-navbar .pr-nav-flat .nav-link i { margin-right: .6rem; font-size: .9rem; }
}
/* Tighten the global search box at moderate widths so it doesn't crowd the nav */
@media (max-width: 1399.98px) {
    .pr-nav-search { min-width: 160px; max-width: 200px; }
}

/* Global navbar search — flush with nav, white inset */
.pr-nav-search {
    position: relative;
    min-width: 220px;
    max-width: 280px;
    display: flex;
    align-items: center;
}
.pr-nav-search input {
    border: 1px solid #d8e1ee;
    border-radius: 6px;
    padding: .42rem .7rem .42rem 2rem;
    font-size: .82rem;
    width: 100%;
    background: #f8f9fc;
    color: #1e2a3a;
    transition: background .15s, border-color .15s, box-shadow .15s;
    height: 36px;
}
.pr-nav-search input::placeholder { color: #8893a0; }
.pr-nav-search input:focus {
    background: #fff;
    border-color: var(--pr-accent);
    box-shadow: 0 0 0 3px rgba(200,146,42,.12);
    outline: 0;
}
.pr-nav-search .si {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8893a0;
    font-size: .78rem;
    pointer-events: none;
}
.pr-nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,36,64,.18);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1060;
    min-width: 360px;
    max-width: 480px;
}
.pr-nav-search-results a {
    display: flex; flex-direction: column;
    padding: .55rem .85rem;
    border-bottom: 1px solid #f3f5f8;
    color: #1a3a5c; text-decoration: none;
    font-size: .85rem;
}
.pr-nav-search-results a:last-child { border-bottom: 0; }
.pr-nav-search-results a:hover { background: #f8f9fc; }
.pr-nav-search-results .r-label { font-weight: 700; }
.pr-nav-search-results .r-sub { font-size: .74rem; color: #5a6a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-nav-search-results .r-detail { font-size: .7rem; color: #8893a0; margin-top: .1rem; }
.pr-nav-search-results .r-kind {
    display: inline-block;
    font-size: .6rem; font-weight: 700;
    padding: .1rem .35rem; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .04em;
    margin-right: .35rem;
}
.pr-nav-search-results .r-kind.party { background: #e8f0fa; color: var(--pr-primary); }
.pr-nav-search-results .r-kind.lead  { background: #d1fae5; color: #065f46; }
.pr-nav-search-results .r-kind.case  { background: #fff3e0; color: #b56b00; }
.pr-nav-search-empty { padding: 1rem; text-align: center; color: #8893a0; font-size: .85rem; }

/* ===== Page Wrapper ===== */
.pr-page-wrapper {
    margin-top: var(--pr-navbar-h);
    min-height: calc(100vh - var(--pr-navbar-h) - 50px);
    padding: 1.75rem;
}

/* ===== Cards ===== */
.pr-card {
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(15,36,64,.06);
    transition: box-shadow .2s;
}
.pr-card:hover { box-shadow: 0 4px 16px rgba(15,36,64,.1); }
.pr-card-header {
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-light));
    color: #fff;
    border-radius: 8px 8px 0 0 !important;
    padding: .85rem 1.25rem;
    font-weight: 600;
    letter-spacing: .2px;
}

/* ===== Stat Cards ===== */
.pr-stat-card {
    background: #fff;
    border-left: 4px solid var(--pr-primary);
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: 0 1px 6px rgba(15,36,64,.08);
    transition: transform .15s, box-shadow .15s;
}
.pr-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,36,64,.12);
}
.pr-stat-card.accent  { border-left-color: var(--pr-accent); }
.pr-stat-card.success { border-left-color: var(--pr-success); }
.pr-stat-card.danger  { border-left-color: var(--pr-danger); }
.pr-stat-number { font-size: 2rem; font-weight: 700; color: var(--pr-primary); line-height: 1.2; }
.pr-stat-label  { font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--pr-text-muted); font-weight: 500; }

/* ===== Status Badges ===== */
.badge-open        { background: var(--pr-info); }
.badge-active      { background: var(--pr-info); }
.badge-pending     { background: var(--pr-warning); color: #212529; }
.badge-closed      { background: #6c757d; }
.badge-settled     { background: var(--pr-success); }
.badge-won         { background: var(--pr-success); }
.badge-lost        { background: var(--pr-danger); }
.badge-critical    { background: #c0392b; }
.badge-urgent      { background: #d35400; }
.badge-high        { background: var(--pr-warning); color: #212529; }
.badge-normal      { background: #8e99a4; color: #fff; }

/* ===== Tables — override Bootstrap 5.3 .table > :not(caption) > * > * ===== */
.pr-table { font-size: .88rem; }
.pr-table > thead > tr > th,
table.pr-table > thead > tr > th {
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-light)) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .3px;
    border: none !important;
}
.pr-table > tbody > tr { transition: background .15s; }
.pr-table > tbody > tr:nth-child(odd) > td,
table.pr-table > tbody > tr:nth-child(odd) > td { background-color: #fff !important; }
.pr-table > tbody > tr:nth-child(even) > td,
table.pr-table > tbody > tr:nth-child(even) > td { background-color: #e8edf4 !important; }
.pr-table > tbody > tr:hover > td,
table.pr-table > tbody > tr:hover > td { background-color: #e4ecf5 !important; cursor: pointer; }

/* ===== Forms ===== */
.pr-form-section {
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.pr-form-section-title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pr-primary);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--pr-accent);
}

/* ===== Buttons ===== */
.btn-pr-primary {
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-light));
    color: #fff;
    border: none;
    font-weight: 500;
}
.btn-pr-primary:hover {
    background: linear-gradient(135deg, var(--pr-primary-hover), var(--pr-primary));
    color: #fff;
}
.btn-pr-accent {
    background: linear-gradient(135deg, var(--pr-accent), #d4b04e);
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-pr-accent:hover {
    background: linear-gradient(135deg, var(--pr-accent-hover), var(--pr-accent));
    color: #fff;
}

/* ===== Page Header ===== */
.pr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--pr-border);
}
.pr-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pr-primary);
    margin: 0;
}
.pr-breadcrumb { font-size: .8rem; color: var(--pr-text-muted); margin-top: .25rem; }

/* ===== Deadline Urgency ===== */
.deadline-overdue  { color: var(--pr-danger); font-weight: 600; }
.deadline-critical { color: #d35400; font-weight: 600; }
.deadline-upcoming { color: var(--pr-warning); }
.deadline-ok       { color: var(--pr-success); }

/* ===== Empty State ===== */
.pr-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #8e99a4;
}
.pr-empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }

/* ===== Footer ===== */
.pr-footer {
    background: #fff;
    border-top: 2px solid var(--pr-border);
    font-size: .82rem;
}

/* ===== CTA Banner ===== */
.pr-cta-banner {
    background: linear-gradient(135deg, var(--pr-primary), #1a3a5c, var(--pr-primary-light));
    color: #fff;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pr-cta-banner a { color: var(--pr-accent); font-weight: 600; }

/* ===== Dashboard Search ===== */
.pr-search-bar {
    position: relative;
    max-width: 420px;
}
.pr-search-bar .form-control {
    border: 2px solid var(--pr-border);
    border-radius: 6px;
    padding-left: 2.5rem;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
}
.pr-search-bar .form-control:focus {
    border-color: var(--pr-accent);
    box-shadow: 0 0 0 3px rgba(197,160,68,.15);
}
.pr-search-bar .search-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pr-text-muted);
    font-size: .85rem;
    pointer-events: none;
}
.pr-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 320px;
    overflow-y: auto;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 20px rgba(15,36,64,.15);
    border: 1px solid var(--pr-border);
    border-top: none;
}
.pr-search-results .list-group-item {
    border-left: 3px solid transparent;
    transition: border-color .15s, background .15s;
}
.pr-search-results .list-group-item:hover {
    border-left-color: var(--pr-accent);
    background: #f8f9fc;
}

/* ===== Inline select (case view) ===== */
.pr-inline-select {
    border: 1px solid var(--pr-border);
    font-size: .82rem;
    border-radius: 4px;
}
.pr-inline-select:focus {
    border-color: var(--pr-accent);
    box-shadow: 0 0 0 2px rgba(197,160,68,.15);
}

/* ===== Loading Spinner ===== */
.pr-spinner {
    width: 2rem; height: 2rem;
    border: 3px solid var(--pr-border);
    border-top-color: var(--pr-primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .pr-page-wrapper { padding: 1rem; }
    .pr-page-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .pr-stat-number { font-size: 1.5rem; }
    .pr-search-bar { max-width: 100%; }
}