/* =====================================================================
   Auztoeaze — modern enhancement layer (Phase 1)
   Layered AFTER the base Zoho-style theme (zoho-theme.css / __css.cshtml).
   Purely additive: brighter accents, depth, graphics and animation. No
   markup or logic depends on this file; removing it reverts to the base look.
   ===================================================================== */

:root {
    /* Brand gradient (Auztoeaze) + a bright, colourful module accent set used
       for stat tiles, badges and icons across the app. */
    --az-primary: #1A73C0;
    --az-primary-2: #2E9BE6;
    --az-accent: #0E8C6B;
    --az-brand-grad: linear-gradient(135deg, #1A73C0 0%, #2E9BE6 55%, #16C2A3 100%);
    --az-brand-grad-soft: linear-gradient(135deg, rgba(26,115,192,.10), rgba(22,194,163,.10));

    --az-indigo: #5B5BD6;
    --az-teal:   #0FB5A6;
    --az-amber:  #F5A623;
    --az-rose:   #F05A7E;
    --az-violet: #8B5CF6;
    --az-cyan:   #1EA7D6;
    --az-green:  #22A06B;

    --az-shadow-sm: 0 1px 2px rgba(20,30,50,.06), 0 1px 4px rgba(20,30,50,.05);
    --az-shadow-md: 0 4px 14px rgba(20,30,50,.10);
    --az-shadow-lg: 0 14px 40px rgba(20,30,50,.16);
    --az-radius-lg: 14px;
    --az-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------
   Motion: page + section entrance, used app-wide for a lively feel.
   --------------------------------------------------------------------- */
@keyframes azFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes azFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes azPop      { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes azShimmer  { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes azFloat    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.content-wrapper > .content,
.login-card,
.modal.show .modal-dialog {
    animation: azFadeInUp .32s var(--az-ease) both;
}

/* Stagger the first few cards on a page for a polished reveal. */
.content-wrapper > .content .card { animation: azFadeInUp .36s var(--az-ease) both; }
.content-wrapper > .content .card:nth-child(2) { animation-delay: .04s; }
.content-wrapper > .content .card:nth-child(3) { animation-delay: .08s; }
.content-wrapper > .content .card:nth-child(4) { animation-delay: .12s; }

/* ---------------------------------------------------------------------
   Surfaces: softer depth + a lift-on-hover that reads as interactive.
   --------------------------------------------------------------------- */
.card,
.small-box,
.info-box {
    box-shadow: var(--az-shadow-sm);
    transition: box-shadow .2s var(--az-ease), transform .2s var(--az-ease);
}
.card:hover {
    box-shadow: var(--az-shadow-md);
}
.card.az-interactive:hover,
.small-box:hover,
.pv-widget:hover {
    transform: translateY(-3px);
    box-shadow: var(--az-shadow-md);
}

/* ---------------------------------------------------------------------
   Buttons: tactile micro-interactions + a gradient primary CTA.
   --------------------------------------------------------------------- */
.btn {
    transition: transform .08s var(--az-ease), box-shadow .2s var(--az-ease), background-color .2s var(--az-ease), filter .2s var(--az-ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
    background-image: var(--az-brand-grad);
    border: none;
    box-shadow: 0 2px 8px rgba(26,115,192,.28);
}
.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.04);
    box-shadow: 0 4px 16px rgba(26,115,192,.38);
}

/* ---------------------------------------------------------------------
   Top navbar: clean white with a thin brand accent underline.
   --------------------------------------------------------------------- */
.main-header.navbar {
    background: #fff;
    box-shadow: var(--az-shadow-sm);
    border-bottom: none;
    position: relative;
}
.main-header.navbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--az-brand-grad);
    opacity: .9;
}

/* ---------------------------------------------------------------------
   Sidebar: gradient brand header + animated active module indicator.
   --------------------------------------------------------------------- */
.main-sidebar .brand-link {
    background: var(--az-brand-grad);
    border-bottom: none;
    color: #fff !important;
}
.main-sidebar .brand-link .brand-text,
.main-sidebar .brand-link .brand-image { color: #fff !important; }

.nav-sidebar .nav-item > .nav-link {
    border-radius: 10px;
    margin: 2px 10px;
    transition: background-color .18s var(--az-ease), color .18s var(--az-ease), padding-left .18s var(--az-ease);
}
.nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255,255,255,.08);
    padding-left: 1.1rem;
}
.nav-sidebar .nav-item > .nav-link.active {
    background-image: var(--az-brand-grad);
    box-shadow: 0 4px 14px rgba(26,115,192,.35);
    color: #fff;
}
.nav-sidebar .nav-link .nav-icon { transition: transform .18s var(--az-ease); }
.nav-sidebar .nav-item > .nav-link:hover .nav-icon { transform: scale(1.12); }

/* ---------------------------------------------------------------------
   Stat / small boxes: a bright, colourful dashboard palette.
   --------------------------------------------------------------------- */
.small-box > .inner h3 { font-weight: 700; }
.small-box .icon > i { opacity: .25; transition: transform .25s var(--az-ease); }
.small-box:hover .icon > i { transform: scale(1.08) rotate(-4deg); }

.small-box.bg-info,    .bg-gradient-info    { background-image: linear-gradient(135deg,#1EA7D6,#36C6EB) !important; }
.small-box.bg-success, .bg-gradient-success { background-image: linear-gradient(135deg,#0E8C6B,#22C38E) !important; }
.small-box.bg-warning, .bg-gradient-warning { background-image: linear-gradient(135deg,#F5A623,#FFC861) !important; color:#fff !important; }
.small-box.bg-danger,  .bg-gradient-danger  { background-image: linear-gradient(135deg,#F05A7E,#FF8AA6) !important; }
.small-box.bg-primary, .bg-gradient-primary { background-image: var(--az-brand-grad) !important; }

/* Colourful left accent for module/record cards when opted in. */
.card.az-accent-indigo { border-top: 3px solid var(--az-indigo); }
.card.az-accent-teal   { border-top: 3px solid var(--az-teal); }
.card.az-accent-amber  { border-top: 3px solid var(--az-amber); }
.card.az-accent-rose   { border-top: 3px solid var(--az-rose); }

/* ---------------------------------------------------------------------
   Tabs: animated underline for the active tab.
   --------------------------------------------------------------------- */
.nav-tabs .nav-link { position: relative; }
.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--az-brand-grad);
    animation: azFadeIn .25s var(--az-ease) both;
}

/* ---------------------------------------------------------------------
   Inputs: calmer, rounder focus consistent with the brand.
   --------------------------------------------------------------------- */
.form-control, .form-select { transition: border-color .15s var(--az-ease), box-shadow .15s var(--az-ease); }
.form-control:focus, .form-select:focus {
    border-color: var(--az-primary-2);
    box-shadow: 0 0 0 .2rem rgba(46,155,230,.18);
}

/* Reusable loading shimmer (skeletons). Add class="az-skeleton". */
.az-skeleton {
    background: #eef1f5 linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: azShimmer 1.2s infinite linear;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Data tables & Syncfusion grids: cleaner headers, zebra rows, hover.
   --------------------------------------------------------------------- */
.table > thead > tr > th,
.e-grid .e-headercell,
.e-grid .e-columnheader .e-headercelldiv {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: #5b6470;
}
.table > tbody > tr { transition: background-color .12s var(--az-ease); }
.table-hover > tbody > tr:hover,
.e-grid .e-row:hover .e-rowcell { background-color: rgba(26,115,192,.06) !important; }
.e-grid .e-headercontent { border-bottom: 2px solid var(--az-primary, #1A73C0) !important; }
.e-grid .e-gridheader { border-top: none; }

/* ---------------------------------------------------------------------
   Badges / pills: softer, tinted status chips.
   --------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .34em .7em; }
.badge.bg-success { background-color: rgba(14,140,107,.12) !important; color: #0E8C6B !important; }
.badge.bg-danger  { background-color: rgba(240,90,126,.12) !important; color: #D63A60 !important; }
.badge.bg-warning { background-color: rgba(245,166,35,.15) !important; color: #B9770E !important; }
.badge.bg-info    { background-color: rgba(30,167,214,.12) !important; color: #1286AD !important; }
.badge.bg-secondary { background-color: #eef1f5 !important; color: #5b6470 !important; }

/* ---------------------------------------------------------------------
   Pagination & modals: brand-consistent accents.
   --------------------------------------------------------------------- */
.page-item.active .page-link { background: var(--az-brand-grad); border-color: transparent; }
.page-link { color: var(--az-primary, #1A73C0); border-radius: 8px; margin: 0 2px; border-color: #e3e8ef; }
.modal-content { border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,30,60,.22); }
.modal-header { background: #fafbfd; border-bottom: 1px solid #eef1f5; }
.modal-header .modal-title { font-weight: 700; }

/* ---------------------------------------------------------------------
   Page headings: a subtle brand underline accent for section titles.
   --------------------------------------------------------------------- */
.content-header h1, .content-header .h1 { font-weight: 700; letter-spacing: -.01em; }

/* ---------------------------------------------------------------------
   Accessibility: honour reduced-motion.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Login / auth animations (kept here, not inline in Login.cshtml, so the Razor
   @@keyframes escaping does not trip the design-time CSS analyzer). */
@keyframes azUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes azFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-16px); }
    100% { transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Top-ribbon quick-access icons (Zoho-style apps + settings).
   --------------------------------------------------------------------- */
.az-ribbon-item { display: flex; align-items: center; }
.az-ribbon-icon {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: #5b6470;
    font-size: 1.02rem;
    transition: background .15s var(--az-ease), color .15s var(--az-ease), transform .12s var(--az-ease);
}
.az-ribbon-icon:hover {
    background: #eef5ff;
    color: var(--az-primary, #1A73C0);
    transform: translateY(-1px);
}
.az-spin-hover { transition: transform .5s var(--az-ease); }
.az-ribbon-icon:hover .az-spin-hover { transform: rotate(90deg); }
.az-ribbon-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(15, 30, 60, .18);
    padding: .4rem;
    min-width: 230px;
    animation: azFadeInUp .18s var(--az-ease) both;
}
.az-ribbon-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .7rem;
    font-size: .9rem;
    transition: background .12s var(--az-ease);
}
.az-ribbon-menu .dropdown-item:hover { background: #eef5ff; color: var(--az-primary, #1A73C0); }
.az-ribbon-menu .dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }

/* Styled tooltips (Bootstrap) to match the brand. */
.tooltip-inner { background: #1f2a37; border-radius: 7px; font-size: .78rem; padding: .35rem .6rem; }
.tooltip.bs-tooltip-top .arrow::before, .tooltip .arrow::before { border-top-color: #1f2a37; }

/* ---------------------------------------------------------------------
   Theme switcher: accent themes selected from the top ribbon (persisted
   per browser via localStorage, applied as html[data-az-theme]). Each theme
   re-points the brand tokens used across the modern layer + base theme.
   Default (no attribute / "blue") keeps the original Auztoeaze blue.
   --------------------------------------------------------------------- */
html[data-az-theme="emerald"] {
    --az-primary: #0E8C6B; --az-primary-2: #16C2A3;
    --az-brand-grad: linear-gradient(135deg, #0E8C6B 0%, #16C2A3 55%, #4ADE80 100%);
    --az-brand-grad-soft: linear-gradient(135deg, rgba(14,140,107,.10), rgba(74,222,128,.10));
    --zoho-primary: #0E8C6B; --primary: #0E8C6B;
}
html[data-az-theme="violet"] {
    --az-primary: #6D28D9; --az-primary-2: #8B5CF6;
    --az-brand-grad: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 55%, #C4B5FD 100%);
    --az-brand-grad-soft: linear-gradient(135deg, rgba(109,40,217,.10), rgba(196,181,253,.10));
    --zoho-primary: #6D28D9; --primary: #6D28D9;
}
html[data-az-theme="sunset"] {
    --az-primary: #E0592A; --az-primary-2: #F5A623;
    --az-brand-grad: linear-gradient(135deg, #E0592A 0%, #F5A623 60%, #FFD166 100%);
    --az-brand-grad-soft: linear-gradient(135deg, rgba(224,89,42,.10), rgba(245,166,35,.10));
    --zoho-primary: #E0592A; --primary: #E0592A;
}
html[data-az-theme="graphite"] {
    --az-primary: #334155; --az-primary-2: #64748B;
    --az-brand-grad: linear-gradient(135deg, #1f2937 0%, #334155 55%, #64748B 100%);
    --az-brand-grad-soft: linear-gradient(135deg, rgba(51,65,85,.10), rgba(100,116,139,.10));
    --zoho-primary: #334155; --primary: #334155;
}

/* Theme picker swatches in the ribbon dropdown. */
.az-theme-swatches { display: flex; gap: .5rem; padding: .5rem .7rem .2rem; flex-wrap: wrap; }
.az-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform .12s var(--az-ease), border-color .12s var(--az-ease);
    position: relative;
}
.az-swatch:hover { transform: scale(1.12); }
.az-swatch.active { border-color: #0f172a; }
.az-swatch.active::after {
    content: "\2713"; color: #fff; font-size: .7rem; font-weight: 700;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.az-sw-blue     { background: linear-gradient(135deg,#1A73C0,#2E9BE6); }
.az-sw-emerald  { background: linear-gradient(135deg,#0E8C6B,#16C2A3); }
.az-sw-violet   { background: linear-gradient(135deg,#6D28D9,#8B5CF6); }
.az-sw-sunset   { background: linear-gradient(135deg,#E0592A,#F5A623); }
.az-sw-graphite { background: linear-gradient(135deg,#334155,#64748B); }

/* ---------------------------------------------------------------------
   Syncfusion grid / list polish (Zoho-style lists), applied app-wide.
   --------------------------------------------------------------------- */
.e-grid { border: none !important; border-radius: 12px; overflow: hidden; box-shadow: var(--az-shadow-sm); }
.e-grid .e-toolbar { border-radius: 12px 12px 0 0; border: none; background: var(--surface, #fff); }
.e-grid .e-toolbar .e-tbar-btn { border-radius: 8px; }
.e-grid .e-gridheader .e-headercell { background: #f7f9fc; }
.e-grid .e-rowcell { border-color: #eef1f5 !important; }
.e-grid .e-altrow { background: #fbfcfe; }
.e-grid .e-row.e-active .e-rowcell,
.e-grid td.e-active { background: color-mix(in srgb, var(--az-primary, #1A73C0) 10%, transparent) !important; }
.e-grid .e-pager { border: none; border-radius: 0 0 12px 12px; }
.e-grid .e-pager .e-currentitem { background: var(--az-brand-grad); border-radius: 8px; }
.e-grid .e-pager .e-numericitem { border-radius: 8px; }

/* Reusable record avatar (coloured initials) + list toolbar + empty state. */
.az-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-grid; place-items: center;
    color: #fff; font-size: .74rem; font-weight: 700; flex: none;
}
.az-av-1 { background: linear-gradient(135deg,#1A73C0,#2E9BE6); }
.az-av-2 { background: linear-gradient(135deg,#0E8C6B,#16C2A3); }
.az-av-3 { background: linear-gradient(135deg,#8B5CF6,#C4B5FD); }
.az-av-4 { background: linear-gradient(135deg,#F5A623,#FFD166); }
.az-av-5 { background: linear-gradient(135deg,#F05A7E,#FF8AA6); }
.az-av-6 { background: linear-gradient(135deg,#334155,#64748B); }
.az-list-toolbar {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: var(--surface, #fff); border: 1px solid var(--zoho-border, #e3e8ef);
    border-radius: 12px; padding: .6rem .8rem; margin-bottom: .8rem; box-shadow: var(--az-shadow-sm);
}
.az-empty-state { text-align: center; color: #94a3b8; padding: 2.4rem 1rem; }
.az-empty-state .az-empty-icon { font-size: 2.2rem; opacity: .4; margin-bottom: .5rem; }