/* Fluent 2 Brand Design Tokens Override for Norse Admin Shell - NorsePlatform Portal */
:root {
    /* Brand Accent Colors */
    --ad-azure:             #2E8FD6;
    --ad-azure-deep:        #1B6FA8;
    --ad-azure-strong:      #0E4B73;
    --ad-azure-tint:        rgba(46, 143, 214, 0.13);

    /* Map Admin Shell variables to the Fluent 2 palette */
    --ns-color-accent:      var(--ad-azure);
    --ns-color-accent-bg:   var(--ad-azure-tint);
    --ns-color-link:        var(--ad-azure);

    /* Fonts & Typography */
    --ns-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    
    /* Card BG default for light mode */
    --bs-card-bg:           #ffffff;
}

/* Light Native Theme Enforced */
:root {
    --ns-color-bg:          #ffffff;
    --ns-color-bg-nav:      #f8fafc;
    --ns-color-bg-header:   #ffffff;
    --ns-color-bg-canvas:   #f1f5f9;
    --ns-color-border:      #e2e8f0;
    --ns-color-text:        #0f172a;
    --ns-color-text-muted:  #64748b;
    --ns-color-divider:     #cbd5e1;
    
    --bs-card-bg:           #ffffff;
}

body {
    background-color: var(--ns-color-bg-canvas) !important;
    color: var(--ns-color-text) !important;
}

/* Override default Bootstrap primary buttons to use brand azure */
.btn-primary, .btn-success, a.btn-primary, a.btn-success {
    background-color: var(--ad-azure) !important;
    border-color: var(--ad-azure) !important;
    color: #ffffff !important;
}

.btn-primary *, .btn-success *, a.btn-primary *, a.btn-success * {
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
    background-color: var(--ad-azure-deep) !important;
    border-color: var(--ad-azure-deep) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: var(--ad-azure) !important;
    border-color: var(--ad-azure) !important;
}

.btn-outline-primary:hover {
    background-color: var(--ad-azure) !important;
    color: #ffffff !important;
}

/* Typography styles: Calmer, native feel, sentence case */
body {
    font-family: var(--ns-font);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* Force overrides on legacy card styles across views to enforce Fluent 2 UI */
.card {
    background-color: var(--bs-card-bg) !important;
    border: 1px solid var(--ns-color-border) !important;
    color: var(--ns-color-text) !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.card-body {
    color: var(--ns-color-text) !important;
}

.card-title {
    color: var(--ns-color-text) !important;
    font-family: var(--ns-font) !important;
}

.card-img-top, .card i, .card .fa, .card .fas {
    color: var(--ns-color-accent) !important;
}

span.final-price {
    color: var(--ns-color-text) !important;
}

.Card-body-description-p, .description p {
    color: var(--ns-color-text-muted) !important;
}

.card-action-icon {
    background-color: var(--ns-color-bg) !important;
    color: var(--ns-color-text-muted) !important;
    border: 1px solid var(--ns-color-border) !important;
    border-radius: 50% !important;
    padding: 7px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 0.15s ease !important;
}

.card-action-icon:hover {
    background-color: var(--ns-color-accent-bg) !important;
    color: var(--ns-color-accent) !important;
    border-color: var(--ns-color-accent) !important;
}

.IndexCardActionDiv a {
    text-decoration: none !important;
}

.table-light {
    --bs-table-bg: var(--ns-color-bg-nav) !important;
    color: var(--ns-color-text) !important;
}

/* Text selections & links */
a {
    color: var(--ns-color-link);
}
a:hover {
    color: var(--ad-azure-deep);
}

/* Overrides for Development Company and Application card buttons & hover glow */
.card-button {
    background-color: var(--ns-color-bg-nav) !important;
    border: 1px solid var(--ns-color-border) !important;
    border-radius: 20px !important;
    color: var(--ns-color-text) !important;
}

.card:hover {
    border-color: var(--ns-color-accent) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.owner-title, .shared-title {
    color: var(--ns-color-text) !important;
    font-family: var(--ns-font) !important;
    font-weight: 600 !important;
}

/* Specific overrides for Resource Application Microservice card styles */
.card, 
div.card, 
.container-fluid .card {
    background-color: var(--bs-card-bg) !important;
    background: var(--bs-card-bg) !important;
    border: 1px solid var(--ns-color-border) !important;
    color: var(--ns-color-text) !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.Card-body-description-p, 
.Card-body-action-btn, 
.Card-body-h1, 
.card-title,
.card-body,
.card h5,
.card p {
    color: var(--ns-color-text) !important;
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
}

.Card-body-description-p {
    border: 1px solid var(--ns-color-border) !important;
    background-color: var(--ns-color-bg-nav) !important;
    color: var(--ns-color-text-muted) !important;
    border-radius: 4px !important;
}

.Card-body-action-btn {
    background-color: var(--ns-color-accent-bg) !important;
    color: var(--ns-color-accent) !important;
    border-radius: 50% !important;
}

/* Top Navbar & Sidebar overrides to follow Fluent 2 */
.topbar, .navbar, .top-navbar, .navbar-header, .navbar-collapse {
    background-color: var(--ns-color-bg-header) !important;
    background: var(--ns-color-bg-header) !important;
    border-bottom: 1px solid var(--ns-color-border) !important;
    color: var(--ns-color-text) !important;
    box-shadow: none !important;
}

.topbar * {
    color: var(--ns-color-text) !important;
}

.topbar .nav-link, .topbar i, .topbar a, .topbar span {
    color: var(--ns-color-text) !important;
}

.topbar .nav-link:hover {
    background-color: var(--ns-color-bg-nav) !important;
}

.left-sidebar, .scroll-sidebar, .sidebar-nav {
    background-color: var(--ns-color-bg-nav) !important;
    background: var(--ns-color-bg-nav) !important;
    border-right: 1px solid var(--ns-color-border) !important;
}

.sidebar-link {
    color: var(--ns-color-text) !important;
    font-family: var(--ns-font) !important;
    font-size: 13px !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
}

.sidebar-link i {
    color: var(--ns-color-text-muted) !important;
}

.sidebar-link:hover {
    background-color: var(--ns-color-bg) !important;
    color: var(--ns-color-text) !important;
}

.sidebar-item.selected > .sidebar-link,
.sidebar-item.active > .sidebar-link,
.sidebar-link.active {
    background-color: var(--ns-color-accent-bg) !important;
    border-left-color: var(--ns-color-accent) !important;
    color: var(--ns-color-accent) !important;
    font-weight: 600 !important;
}

.sidebar-item.selected > .sidebar-link i,
.sidebar-item.active > .sidebar-link i,
.sidebar-link.active i {
    color: var(--ns-color-accent) !important;
}

.page-title {
    color: var(--ns-color-text) !important;
    font-family: var(--ns-font) !important;
    font-weight: 600 !important;
}

.breadcrumb-item a, .breadcrumb-item span, .breadcrumbBold {
    text-decoration: none !important;
}

.breadcrumb-item.active, .breadcrumbLighter {
    color: var(--ns-color-text) !important;
    font-weight: 600 !important;
}

/* Fluent 2 Button enhancements */
.btn {
    border-radius: 4px !important;
    font-size: 13px !important;
    padding: 6px 16px !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-primary, .btn-success {
    background-color: var(--ad-azure) !important;
    border: 1px solid var(--ad-azure) !important;
    color: #ffffff !important;
}

.btn-primary:hover, .btn-success:hover {
    background-color: var(--ad-azure-deep) !important;
    border-color: var(--ad-azure-deep) !important;
    color: #ffffff !important;
}

.btn-secondary, .btn-outline-secondary {
    background-color: var(--ns-color-bg) !important;
    border: 1px solid var(--ns-color-border) !important;
    color: var(--ns-color-text) !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: var(--ns-color-bg-nav) !important;
    border-color: var(--ns-color-divider) !important;
    color: var(--ns-color-text) !important;
}

/* User profile dropdown Fluent 2 overrides */
.user-dd {
    border: 1px solid var(--ns-color-border) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.user-dd .bg-primary {
    background-color: var(--ns-color-bg-nav) !important;
    background: var(--ns-color-bg-nav) !important;
}

.user-dd .text-white, .user-dd h4, .user-dd p {
    color: var(--ns-color-text) !important;
}

.user-dd .headingfont {
    color: var(--ns-color-text-muted) !important;
}

.user-dd .with-arrow span {
    background-color: var(--ns-color-bg-nav) !important;
    border-left: 1px solid var(--ns-color-border) !important;
    border-top: 1px solid var(--ns-color-border) !important;
}

.user-dd .dropdown-item {
    color: var(--ns-color-text) !important;
    font-size: 13px !important;
}

.user-dd .dropdown-item:hover {
    background-color: var(--ns-color-bg-canvas) !important;
}

.user-dd .dropdown-item i {
    color: var(--ns-color-text-muted) !important;
}

/* Card header icon container styling for Fluent 2 */
.btn-bg-rad {
    background: var(--ns-color-accent-bg) !important;
    background-color: var(--ns-color-accent-bg) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.subscription-card-anchor, .card-header-icon i {
    color: var(--ns-color-accent) !important;
    font-size: 18px !important;
}

/* If a btn-bg-rad is used as a text button, make it a primary button */
a.btn-bg-rad.text-white, 
button.btn-bg-rad.text-white,
a.btn-bg-rad:not(.card-header-icon),
button.btn-bg-rad:not(.card-header-icon) {
    background-color: var(--ad-azure) !important;
    background: var(--ad-azure) !important;
    color: #ffffff !important;
    border: 1px solid var(--ad-azure) !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 16px !important;
}

a.btn-bg-rad.text-white:hover, 
button.btn-bg-rad.text-white:hover,
a.btn-bg-rad:not(.card-header-icon):hover,
button.btn-bg-rad:not(.card-header-icon):hover {
    background-color: var(--ad-azure-deep) !important;
    background: var(--ad-azure-deep) !important;
    color: #ffffff !important;
    border-color: var(--ad-azure-deep) !important;
}

a.btn-bg-rad.text-white *,
button.btn-bg-rad.text-white *,
a.btn-bg-rad:not(.card-header-icon) *,
button.btn-bg-rad:not(.card-header-icon) * {
    color: #ffffff !important;
}