@import url('/shared/cc-fonts.css');

:root {
    /* Popup sizing — applies to all modal/popup components */
    --popup-height: 75vh;

    /* Brand: Gold */
    --gold: #C9A84C;
    --gold-light: #F5EDD3;
    --gold-dark: #8B6914;
    --gold-alpha-08: rgba(201,168,76,.08);
    --gold-alpha-10: rgba(201,168,76,.10);
    --gold-alpha-15: rgba(201,168,76,.15);
    --gold-alpha-18: rgba(201,168,76,.18);
    --gold-alpha-20: rgba(201,168,76,.20);
    --gold-alpha-25: rgba(201,168,76,.25);
    --gold-alpha-30: rgba(201,168,76,.30);
    --gold-alpha-40: rgba(201,168,76,.40);
    --gold-light-alpha-55: rgba(245,237,211,.55);

    /* Brand: Navy */
    --navy: #1A2744;
    --navy-mid: #253660;
    --navy-deep: #1E2E52;
    --navy-hover: #2A3A60;
    --navy-light: #E8ECFA;

    /* Neutral: Slate */
    --slate: #4A5568;
    --slate-mid: #9AA5B4;
    --slate-light: #F7F9FC;

    /* Semantic: Green */
    --green: #1A6B3C;
    --green-light: #E6F4ED;
    --green-dark: #14532D;
    --green-bright:#54ee92;

    /* Semantic: Red */
    --red: #B91C1C;
    --red-light: #FEE2E2;
    --red-dark: #A93226;

    /* Semantic: Amber */
    --amber: #92400E;
    --amber-light: #FEF3C7;
    --amber-dark: rgba(139,105,20,.4);
    --amber-alpha-20: rgba(139,105,20,.2);

    /* Semantic: Blue */
    --blue: #1E40AF;
    --blue-light: #DBEAFE;

    /* Semantic: Purple */
    --purple: #5B21B6;
    --purple-light: #EDE9FE;

    /* Base */
    --white: #FFFFFF;

    /* White alpha variants */
    --white-alpha-06: rgba(255,255,255,.06);
    --white-alpha-07: rgba(255,255,255,.07);
    --white-alpha-08: rgba(255,255,255,.08);
    --white-alpha-10: rgba(255,255,255,.10);
    --white-alpha-12: rgba(255,255,255,.12);
    --white-alpha-18: rgba(255,255,255,.18);
    --white-alpha-20: rgba(255,255,255,.20);
    --white-alpha-22: rgba(255,255,255,.22);
    --white-alpha-30: rgba(255,255,255,.30);
    --white-alpha-40: rgba(255,255,255,.40);
    --white-alpha-50: rgba(255,255,255,.50);
    --white-alpha-55: rgba(255,255,255,.55);
    --white-alpha-60: rgba(255,255,255,.60);
    --white-alpha-65: rgba(255,255,255,.65);
    --white-alpha-70: rgba(255,255,255,.70);
    --white-alpha-75: rgba(255,255,255,.75);
    --white-alpha-78: rgba(255,255,255,.78);
    --white-alpha-80: rgba(255,255,255,.80);
    --white-alpha-85: rgba(255,255,255,.85);
    --white-alpha-90: rgba(255,255,255,.90);

    /* Navy alpha variants */
    --navy-alpha-06: rgba(26,39,68,.06);
    --navy-alpha-08: rgba(26,39,68,.08);
    --navy-alpha-22: rgba(26,39,68,.22);
    --navy-alpha-25: rgba(26,39,68,.25);
    --navy-alpha-35: rgba(26,39,68,.35);
    --navy-alpha-45: rgba(26,39,68,.45);
    --navy-alpha-55: rgba(26,39,68,.55);

    /* Black / red alpha variants (shadows) */
    --red-pink-alpha-20: rgba(255,80,80,.20);
    --black-alpha-18: rgba(0,0,0,.18);
    --black-alpha-22: rgba(0,0,0,.22);
    --black-alpha-45: rgba(0,0,0,.45);
    --black-alpha-50: rgba(0,0,0,.50);
    --black-alpha-70: rgba(0,0,0,.70);

    /* Overlay / Shadow */
    --overlay-modal: rgba(10,18,40,.55);
    --shadow-modal: rgba(10,18,40,.28);

    /* Dark theme overrides (applied via body.theme-dark) */
    --dark-bg: #0F172A;
    --dark-surface: #1E293B;
    --dark-navy: #E2E8F0;
    --dark-navy-mid: #CBD5E1;
    --dark-slate: #94A3B8;
    --dark-gold: #F59E0B;
    --dark-gold-light: #292400;
    --dark-gold-dark: #FCD34D;
    --dark-blue-light: #1E3A5F;
    --dark-green-light: #0D3320;
    --dark-red-light: #3B0D0D;
    --dark-amber-light: #3B2000;
    --dark-purple-light: #2D1B5E;

    /* Extended UI colors */
    --teal: #0369A1;
    --teal-light: #E0F2FE;
    --emerald: #065F46;
    --emerald-light: #D1FAE5;
    --gray-cool: #374151;
    --gray-cool-light: #F3F4F6;
    --red-deeper: #991B1B;
    --red-bright: #FF6060;

    /* Structure */
    --border: rgba(26,39,68,0.12);
    --border-light: rgba(255,255,255,0.12);
    --radius: 12px;

    /* Typography */
    --font-heading: 'DM Serif Display', serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --font-mono-jetbrains: 'JetBrains Mono', monospace;

    /* Theme tokens */
    --xbg: #1A2744;
    --bg: aliceblue; /* placeholder — replace with production value */
    --surface: #253660;
    --surface2: #1E2E52;
    --accent: #C9A84C;
    --accent2: #F5EDD3;
    --accent-dark: #8B6914;
    --text: #F5EDD3;
    --text-dim: rgba(245,237,211,0.55);
}

/* Style the main button */
.like-btn {
    position: relative;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    overflow: visible; /* Allows the thumbs-up to float outside the button boundaries */
    transition: transform 0.1s ease;
}

.like-btn:active {
    transform: scale(0.95);
}

/* Style the floating thumbs-up */
.floating-thumbs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    pointer-events: none; /* Prevents the floating icon from interfering with clicks */
    animation: floatUpAndFade 2s ease-out forwards;
}

.anchor-badge {
  /* Dimensions & Background */
  width: 26px;
  height: 26px;
  background-color: #C9A84C;
  border-radius: 6px; /* Matches rx="6" */
  
  /* Text / Emoji Styling */
  color: #1A2744;
  font-family: serif;
  font-size: 15px;
  font-weight: ;
  
  /* Perfect Centering */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Optional: Ensures the emoji scales nicely and stays crisp */
  line-height: 1; 
}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid var(--border);background:lightgoldenrodyellow;flex-shrink:0;overflow-x:auto}
.tab-btn{padding:0 1.2rem;height:50px;font-family:var(--font-body);font-size:.75rem;font-weight:600;color:var(--navy);background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:all .2s;white-space:nowrap}
.tab-btn:hover{color:var(--navy);opacity:.7}.tab-btn.active{color:var(--navy);border-bottom-color:var(--gold)}
.tab-content{display:none;flex:1;overflow-y:auto;overflow-x:hidden;padding:1.25rem 1.75rem}
.tab-content.active{display:block}
.tab-content.tab-iframe{padding:0;overflow:hidden}
.tab-content.tab-iframe.active{display:flex;flex-direction:column}
.tab-content.tab-iframe iframe{flex:1;width:100%;height:100%;border:none}

/* The animation that moves the thumb up/down slightly while floating upwards */
@keyframes floatUpAndFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }

    25% {
        /* Slight wobble/wave effect on the way up */
        transform: translate(-50%, -50%) translateY(-30px) translateX(5px) rotate(10deg);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-60px) translateX(-5px) rotate(-10deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-120px) scale(1.2);
    }
}


/* ── Voice Intake: highlight the phone field that will be dialed ──────────
   Applied by cc-voice-intake.js when an intake is started, so the reviewer
   can see exactly which number the call will use before confirming. */
.cc-vi-dial-highlight {
    animation: ccViDialPulse 1s ease-in-out 0s 3;
    border-radius: 6px;
    outline: 2px solid var(--gold, #C9A84C);
    outline-offset: 2px;
    background-color: var(--gold-alpha-15, rgba(201, 168, 76, .15)) !important;
}
@keyframes ccViDialPulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 168, 76, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(201, 168, 76, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}

/* ── Click-to-call (cc-click-to-call.js): 📞 button beside phone fields ──────
   The host keeps the input + button on one line; the input flexes to fill so
   field widths are unchanged, and the button sits flush to its right. */
.c2c-host {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.c2c-host > input {
    flex: 1 1 auto;
    min-width: 0;
}
.c2c-btn {
    flex: 0 0 auto;
    cursor: pointer;
    border: 1.5px solid var(--gold, #C9A84C);
    background: var(--gold-light, #F5EDD3);
    color: var(--gold-dark, #8B6914);
    border-radius: 8px;
    padding: 0 10px;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, box-shadow .15s;
}
.c2c-btn:hover {
    background: var(--gold, #C9A84C);
    color: var(--navy, #1A2744);
}
.c2c-btn:active {
    box-shadow: 0 0 0 3px var(--gold-alpha-25, rgba(201,168,76,.25));
}

/* CalBar (State Bar lookup) button. Icon-only, sized like the gold phone
   button but in a navy/indigo palette so the two never read as the same
   control. By default it sits directly under the input it decorates; when its
   input is wrapped in a .calbar-input-row (the uniform Opposing Counsel /
   Co-Counsel layout) it instead sits to the RIGHT of the field, matching the
   dataset_wc Filing/Court reference layout. */
.calbar-input-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.calbar-input-row .fi {
    flex: 1 1 auto;
    min-width: 0;
}
.calbar-lookup-btn {
    margin-top: 6px;
    flex: 0 0 auto;
    cursor: pointer;
    width: 34px;
    height: 32px;
    border: 1.5px solid var(--navy, #1A2744);
    background: var(--navy-light, #E8ECF4);
    color: var(--navy, #1A2744);
    border-radius: 8px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, box-shadow .15s;
}
/* Inside a flex row (to the right of the input), drop the top margin and let it
   stretch to the input's height so it reads as a paired control. */
.calbar-input-row .calbar-lookup-btn {
    margin-top: 0;
    height: auto;
    align-self: stretch;
}
.calbar-lookup-btn:hover {
    background: var(--navy, #1A2744);
    color: #fff;
}
.calbar-lookup-btn:active {
    box-shadow: 0 0 0 3px rgba(26,39,68,.22);
}

/* ════════════════════════════════════════════════════════════════════════
   SMALL-SCREEN SUPPORT (phones, portrait). Tablets (≥ ~768px) are unchanged.
   Lives in the shared sheet so it reaches every dataset editor at once; the
   shell class names (.app-header/.hdr-*/.field-grid/.form-actions/.tabs) are
   identical across all law types.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Editor header: stop "Save and Continue" wrapping over the title ── */
  .hdr-top {
    height: auto;                 /* was a fixed 58px — let it grow */
    min-height: 50px;
    padding: 8px 0.85rem;         /* tighter side padding on a phone */
    gap: 8px;
    flex-wrap: wrap;              /* logo block + buttons stack if needed */
  }
  .logo {
    font-size: 0.95rem;
    gap: 7px;
    min-width: 0;                 /* allow the title to ellipsize, not push */
    flex: 1 1 auto;
  }
  .logo #title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .logo-badge {
    display: none;               /* the long "CA … System" badge eats the row */
  }
  .hdr-right {
    gap: 6px;
    flex-shrink: 0;
  }
  .hdr-btn {
    padding: 6px 9px;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  /* ── Tab bar: already horizontally scrollable; tighten for thumb use ── */
  .tabs { -webkit-overflow-scrolling: touch; }
  .tab-btn {
    padding: 0 0.8rem;
    height: 44px;
    font-size: 0.7rem;
  }

  /* ── Form body: more usable width, single column where it's still 2-up ── */
  .tab-content { padding: 0.9rem 0.85rem; }
  .field-grid {
    /* collapse any remaining multi-column rows to a single column on a phone */
    grid-template-columns: 1fr;
    gap: 11px;
  }
  /* Name groups (first/middle/last) keep their own inline grid — leave them. */

  /* ── Action rows: wrap instead of overflowing off the right edge ── */
  .form-actions { gap: 8px; }
  .form-actions .btn { flex: 1 1 auto; }

}

/* ── Utility modals (Notes, Activity, Documents, Templates, AI-Compose, etc.) ──
   On a phone these were clipped: cards used max-height:88–90vh (vh overshoots the
   visible viewport on mobile) and footers used display:flex with no wrap, so the
   action buttons ran off the bottom or off the right edge. On phones we let the
   overlay use the full *dynamic* viewport, drop its outer padding, let the card
   fill the height with a scrollable body, and wrap any footer button row.
   These IDs are the shared modal shells injected by cc-note.js / cc-activity.js /
   cc-document.js. */
@media (max-width: 640px) {
  #note-popup-overlay,
  #workitem-note-popup-overlay,
  #cc-doc-overlay,
  #cc-tpl-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #note-popup-card,
  #workitem-note-popup-card,
  #cc-doc-card,
  #cc-tpl-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  /* Footers / action rows inside any of these modals: wrap, never overflow. */
  #cc-doc-foot {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  #cc-doc-foot > button { flex: 1 1 auto; }
}

/* ── Small-screen "Essential only" Overview filter ─────────────────────────
   A floating pill toggles the Overview tab between ALL fields and just the
   REQUIRED + USEFUL tiers. Wrappers are tagged .fw-essential and sections
   .cc-section-has-essential by nx.util.applyEssentialFilter(). Everything here
   is gated to small screens (≤768px); on wider screens the pill is hidden and
   nothing is filtered, so desktop/tablet behavior is unchanged. */
#cc-essential-pill { display: none; }

@media (max-width: 768px) {
  /* The floating pill — bottom-right, above the desk's bottom bar / safe area.
     Only while the Overview tab (#tab-form) is the active one. */
  body:has(#tab-form.active) #cc-essential-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--gold, #C9A84C);
    background: var(--navy, #1A2744);
    color: #fff;
    font-family: var(--font-body, Arial, sans-serif);
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(10, 18, 40, .35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #cc-essential-pill[aria-pressed="true"] {
    background: var(--gold, #C9A84C);
    color: var(--navy, #1A2744);
  }

  /* Essential-only mode: hide non-essential field wrappers and any section that
     ends up with no essential field. Name-group / lookup wrappers are tagged
     essential by the walker, so client/opposing names always remain. */
  #formSections.show-essential-only .fw:not(.fw-essential) { display: none !important; }
  #formSections.show-essential-only .cc-form-section:not(.cc-section-has-essential) { display: none !important; }
}