/* Dashboard, client pipeline and premium Bootstrap refresh.
   Extracted from main.css to keep domain styling isolated. */

    /* Bootstrap Inkly refresh */
    :root {
      --inkly-purple: #7c3aed;
      --inkly-purple-dark: #4c1d95;
      --inkly-purple-soft: #f3e8ff;
      --inkly-black: #050507;
      --inkly-page: #f7f5fb;
      --inkly-border: rgba(17, 24, 39, .08);
      --inkly-shadow: 0 18px 50px rgba(17, 24, 39, .08);
    }

    body {
      background: var(--inkly-page) !important;
      color: #171421;
    }

    .app {
      background: var(--inkly-page);
    }

    .sidebar {
      background:
        radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .25), transparent 34%),
        linear-gradient(180deg, #050507 0%, #12071f 52%, #050507 100%) !important;
      border-right: 1px solid rgba(255, 255, 255, .08);
      color: #f9fafb;
    }

    .brand-lockup {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    }

    .brand,
    .sidebar h3,
    .sidebar strong {
      color: #fff;
    }

    .tagline,
    .sidebar .muted {
      color: rgba(255, 255, 255, .68) !important;
    }

    .nav button,
    .nav a {
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .85);
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .nav button:hover,
    .nav a:hover,
    .nav button.active {
      background: linear-gradient(135deg, var(--inkly-purple), #a855f7);
      border-color: rgba(255, 255, 255, .22);
      color: #fff;
      transform: translateX(3px);
    }

    main,
    .content {
      background: var(--inkly-page) !important;
    }

    .content {
      max-width: none;
      padding: 32px;
    }

    .page-heading,
    .site-header {
      background: rgba(255, 255, 255, .92);
      border-color: var(--inkly-border);
      box-shadow: 0 12px 36px rgba(17, 24, 39, .06);
    }

    .panel,
    .request-card,
    .mini-card,
    .stat,
    .inkly-panel,
    .inkly-kpi-card {
      background: #fff !important;
      color: #171421 !important;
      border: 1px solid var(--inkly-border) !important;
      border-radius: 24px !important;
      box-shadow: var(--inkly-shadow) !important;
    }

    .inkly-dashboard {
      color: #171421;
    }

    .inkly-dashboard-hero {
      overflow: hidden;
      background:
        radial-gradient(circle at 92% 10%, rgba(124, 58, 237, .18), transparent 28%),
        linear-gradient(135deg, #fff 0%, #faf7ff 60%, #f3e8ff 100%) !important;
      border: 1px solid rgba(124, 58, 237, .12) !important;
    }

    .inkly-soft-badge {
      background: var(--inkly-purple-soft);
      color: var(--inkly-purple-dark);
      border: 1px solid rgba(124, 58, 237, .18);
      font-weight: 800;
    }

    .inkly-purple-btn,
    .btn-primary,
    .btn:not(.secondary):not(.btn-outline-dark):not(.btn-outline-danger):not(.btn-outline-light):not(.btn-sm) {
      background: linear-gradient(135deg, var(--inkly-purple), #a855f7) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 14px 28px rgba(124, 58, 237, .24);
    }

    .btn-outline-dark {
      border-color: rgba(17, 24, 39, .16);
      color: #171421;
      background: #fff;
    }

    .btn-outline-dark:hover {
      background: #171421;
      color: #fff;
    }

    .dashboard-search,
    .form-control,
    .form-select {
      border-color: rgba(17, 24, 39, .12);
      box-shadow: none !important;
    }

    .dashboard-search:focus,
    .form-control:focus,
    .form-select:focus {
      border-color: rgba(124, 58, 237, .55);
      box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .12) !important;
    }

    .inkly-kpi-card {
      min-height: 158px;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .inkly-kpi-card:hover,
    .pipeline-project-card:hover,
    .inkly-shortcut-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 24px 60px rgba(17, 24, 39, .12) !important;
    }

    .inkly-kpi-icon {
      display: inline-grid;
      place-items: center;
      min-width: 44px;
      height: 44px;
      padding: 0 10px;
      border-radius: 14px;
      background: #111827;
      color: #fff;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0;
      margin-bottom: 16px;
    }

    .inkly-kpi-value {
      display: block;
      color: #111827;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .inkly-shortcut-card {
      position: relative;
      min-height: 176px;
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, #fff, #fbfaff);
      border: 1px solid var(--inkly-border);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .inkly-shortcut-card h4 {
      margin: 22px 0 8px;
      color: #171421;
      font-size: 17px;
      font-weight: 900;
    }

    .inkly-shortcut-card p,
    .inkly-agenda-item p,
    .inkly-activity-item p {
      margin: 0;
      color: #6b6476;
    }

    .inkly-shortcut-dot {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--inkly-purple);
      box-shadow: 0 0 0 6px rgba(124, 58, 237, .12);
    }

    .inkly-agenda-item,
    .inkly-activity-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 14px;
      border: 1px solid var(--inkly-border);
      border-radius: 18px;
      background: #fff;
    }

    .inkly-agenda-time {
      min-width: 62px;
      padding: 8px 10px;
      border-radius: 999px;
      background: var(--inkly-purple-soft);
      color: var(--inkly-purple-dark);
      text-align: center;
      font-weight: 900;
    }

    .inkly-activity-item > span {
      width: 12px;
      height: 12px;
      margin-top: 5px;
      border-radius: 50%;
      background: var(--inkly-purple);
      box-shadow: 0 0 0 6px rgba(124, 58, 237, .11);
      flex: 0 0 auto;
    }

    .inkly-activity-item small {
      color: #8b8495;
      font-weight: 700;
    }

    .dashboard-pipeline-board {
      display: grid;
      grid-template-columns: repeat(4, minmax(240px, 1fr));
      gap: 18px;
      align-items: start;
    }

    .pipeline-column {
      min-width: 0;
      padding: 14px;
      border-radius: 22px;
      background: #f9f7fd;
      border: 1px solid rgba(124, 58, 237, .1);
    }

    .pipeline-column > header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }

    .pipeline-column h4,
    .pipeline-project-card h4 {
      margin: 0;
      color: #171421;
      font-size: 16px;
      font-weight: 950;
    }

    .pipeline-column > header span {
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: #111827;
      color: #fff;
      font-weight: 900;
      font-size: 13px;
    }

    .pipeline-project-card {
      padding: 16px;
      border: 1px solid rgba(17, 24, 39, .08);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(17, 24, 39, .07);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .pipeline-project-title {
      color: #2b2438;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .dashboard-project-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 12px 0;
    }

    .dashboard-pipeline-action {
      width: 100%;
      min-height: 72px;
      padding: 12px;
      border: 1px solid rgba(124, 58, 237, .12);
      border-radius: 16px;
      background: #faf8ff;
      color: #171421;
      text-align: left;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .dashboard-pipeline-action:hover {
      transform: translateY(-2px);
      border-color: rgba(124, 58, 237, .34);
      background: var(--inkly-purple-soft);
    }

    .pipeline-card-footer {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin: 10px 0 12px;
      color: #6b6476;
      font-size: 12px;
      font-weight: 800;
    }

    .dashboard-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .dashboard-card-actions .form-select {
      width: auto;
      min-width: 150px;
      max-width: 100%;
      font-weight: 800;
    }

    .inkly-empty-state {
      padding: 18px;
      border: 1px dashed rgba(124, 58, 237, .22);
      border-radius: 18px;
      background: #fff;
      color: #7a7285;
      font-weight: 700;
    }

    @media (max-width: 1400px) {
      .dashboard-pipeline-board {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
      }
    }

    @media (max-width: 900px) {
      .content {
        padding: 18px;
      }

      .dashboard-pipeline-board {
        grid-template-columns: 1fr;
      }

      .dashboard-project-meta {
        grid-template-columns: 1fr;
      }

      .dashboard-card-actions .form-select,
      .dashboard-card-actions .btn {
        width: 100%;
      }
    }

    /* Global readable black typography */
    body,
    body *,
    main,
    main *,
    .content,
    .content *,
    .page,
    .page *,
    .panel,
    .panel *,
    .card,
    .card *,
    .request-card,
    .request-card *,
    .mini-card,
    .mini-card *,
    .stat,
    .stat *,
    .inkly-panel,
    .inkly-panel *,
    .inkly-kpi-card,
    .inkly-kpi-card *,
    .pipeline-project-card,
    .pipeline-project-card *,
    .pipeline-column,
    .pipeline-column *,
    .inkly-shortcut-card,
    .inkly-shortcut-card *,
    .followup-box,
    .followup-box *,
    .followup-item,
    .followup-item *,
    .dashboard-pipeline-action,
    .dashboard-pipeline-action *,
    input,
    select,
    textarea,
    label,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    span,
    small,
    td,
    th,
    li {
      color: #050507 !important;
      -webkit-text-fill-color: #050507 !important;
    }

    .text-muted,
    .muted,
    .hint {
      color: #2b2b31 !important;
    }

    .sidebar,
    .sidebar *,
    .site-header .btn-primary,
    .inkly-purple-btn,
    .btn-primary,
    .btn-primary *,
    .nav button.active,
    .nav button.active *,
    .nav button:hover,
    .nav button:hover *,
    .nav a:hover,
    .nav a:hover *,
    .pipeline-column > header span,
    .pipeline-column > header span *,
    .inkly-kpi-icon,
    .inkly-kpi-icon * {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    html::selection,
    body::selection,
    *::selection {
      color: #050507 !important;
      -webkit-text-fill-color: #050507 !important;
      background: rgba(124, 58, 237, .22) !important;
      text-shadow: none !important;
    }

    html::-moz-selection,
    body::-moz-selection,
    *::-moz-selection {
      color: #050507 !important;
      background: rgba(124, 58, 237, .22) !important;
      text-shadow: none !important;
    }

    .btn-outline-light,
    a.btn-outline-light,
    button.btn-outline-light,
    .site-header .btn-outline-light,
    .home-section .btn-outline-light {
      background: linear-gradient(135deg, var(--inkly-purple), #a855f7) !important;
      border-color: transparent !important;
      color: #050507 !important;
      -webkit-text-fill-color: #050507 !important;
      box-shadow: 0 14px 32px rgba(124, 58, 237, .28) !important;
    }

    .btn-outline-light:hover,
    a.btn-outline-light:hover,
    button.btn-outline-light:hover,
    .site-header .btn-outline-light:hover,
    .home-section .btn-outline-light:hover {
      background: linear-gradient(135deg, #6d28d9, #9333ea) !important;
      border-color: transparent !important;
      color: #050507 !important;
      -webkit-text-fill-color: #050507 !important;
      transform: translateY(-1px);
    }

    /* Inkly simple booking UI refresh
       Inspired by practical tattoo booking tools: fewer decorative effects,
       clearer cards, direct actions and Bootstrap-friendly spacing. */
    :root {
      --inkly-simple-bg: #f5f6fa;
      --inkly-simple-surface: #ffffff;
      --inkly-simple-text: #111827;
      --inkly-simple-muted: #4b5563;
      --inkly-simple-border: #e5e7eb;
      --inkly-simple-purple: #7c3aed;
      --inkly-simple-purple-dark: #5b21b6;
      --inkly-simple-shadow: 0 10px 30px rgba(17, 24, 39, .07);
    }

    body,
    .app,
    main,
    .content {
      background: var(--inkly-simple-bg) !important;
    }

    .content {
      padding: 24px !important;
    }

    .site-header,
    .page-heading {
      background: var(--inkly-simple-surface) !important;
      border-bottom: 1px solid var(--inkly-simple-border) !important;
      box-shadow: none !important;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 16px 24px !important;
    }

    .page-heading {
      padding: 18px 24px !important;
      margin: 0 !important;
    }

    .page-heading h1,
    .page-heading p,
    .navbar-brand strong,
    .navbar-brand small {
      color: var(--inkly-simple-text) !important;
      -webkit-text-fill-color: var(--inkly-simple-text) !important;
    }

    .sidebar {
      width: 288px;
      background: #111827 !important;
      border-right: 1px solid #1f2937 !important;
      box-shadow: none !important;
    }

    .brand-lockup {
      border-radius: 18px !important;
      background: #1f2937 !important;
      border: 1px solid rgba(255, 255, 255, .08) !important;
      box-shadow: none !important;
    }

    .brand-logo,
    .site-header-logo {
      border-radius: 14px !important;
    }

    .nav {
      gap: 8px !important;
    }

    .nav button,
    .nav a {
      min-height: 48px;
      border-radius: 14px !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      color: #e5e7eb !important;
      -webkit-text-fill-color: #e5e7eb !important;
      box-shadow: none !important;
      justify-content: flex-start;
    }

    .nav button:hover,
    .nav a:hover,
    .nav button.active {
      background: #7c3aed !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      transform: none !important;
    }

    .panel,
    .card,
    .request-card,
    .mini-card,
    .stat,
    .inkly-panel,
    .inkly-kpi-card,
    .pipeline-project-card,
    .inkly-shortcut-card,
    .followup-box,
    .followup-item {
      background: var(--inkly-simple-surface) !important;
      border: 1px solid var(--inkly-simple-border) !important;
      border-radius: 16px !important;
      box-shadow: var(--inkly-simple-shadow) !important;
    }

    .panel:hover,
    .card:hover,
    .inkly-kpi-card:hover,
    .pipeline-project-card:hover,
    .inkly-shortcut-card:hover {
      transform: none !important;
      box-shadow: 0 12px 34px rgba(17, 24, 39, .09) !important;
    }

    .inkly-dashboard-hero {
      background: var(--inkly-simple-surface) !important;
      border-top: 4px solid var(--inkly-simple-purple) !important;
    }

    .home-hero,
    .home-section,
    .client-band {
      background: var(--inkly-simple-surface) !important;
      border: 1px solid var(--inkly-simple-border) !important;
      border-radius: 18px !important;
      box-shadow: var(--inkly-simple-shadow) !important;
      overflow: hidden;
    }

    .home-hero {
      padding: 32px !important;
    }

    .home-hero-media {
      background: #111827 !important;
      border-radius: 18px !important;
      display: grid;
      place-items: center;
      min-height: 360px;
    }

    .golden-grid,
    .dashboard-pipeline-board {
      gap: 16px !important;
    }

    .dashboard-pipeline-board {
      grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    }

    .pipeline-column {
      background: #f9fafb !important;
      border: 1px solid var(--inkly-simple-border) !important;
      border-radius: 16px !important;
      padding: 12px !important;
    }

    .pipeline-column > header span,
    .inkly-kpi-icon {
      background: var(--inkly-simple-purple) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    .dashboard-pipeline-action {
      background: #f9fafb !important;
      border: 1px solid var(--inkly-simple-border) !important;
      border-radius: 12px !important;
      min-height: 62px !important;
    }

    .dashboard-pipeline-action:hover {
      background: #f3efff !important;
      border-color: rgba(124, 58, 237, .32) !important;
      transform: none !important;
    }

    .btn,
    button,
    .link-button {
      border-radius: 12px !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }

    .btn-primary,
    .btn-warning,
    .btn-light,
    .inkly-purple-btn,
    button:not(.secondary),
    .link-button:not(.secondary),
    .site-header .btn-light,
    .site-header .btn-warning,
    .site-header .btn-outline-light,
    .home-section .btn-outline-light,
    .btn-outline-light {
      background: var(--inkly-simple-purple) !important;
      border-color: var(--inkly-simple-purple) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    .btn-primary:hover,
    .btn-warning:hover,
    .btn-light:hover,
    .inkly-purple-btn:hover,
    button:not(.secondary):hover,
    .link-button:not(.secondary):hover,
    .site-header .btn-light:hover,
    .site-header .btn-warning:hover,
    .site-header .btn-outline-light:hover,
    .home-section .btn-outline-light:hover,
    .btn-outline-light:hover {
      background: var(--inkly-simple-purple-dark) !important;
      border-color: var(--inkly-simple-purple-dark) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      transform: none !important;
    }

    .btn.secondary,
    button.secondary,
    .link-button.secondary,
    .btn-outline-dark {
      background: #fff !important;
      border: 1px solid var(--inkly-simple-border) !important;
      color: var(--inkly-simple-text) !important;
      -webkit-text-fill-color: var(--inkly-simple-text) !important;
    }

    .badge,
    .pill,
    .inkly-soft-badge {
      border-radius: 999px !important;
      font-weight: 800 !important;
    }

    .text-muted,
    .muted,
    .hint {
      color: var(--inkly-simple-muted) !important;
      -webkit-text-fill-color: var(--inkly-simple-muted) !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
      border-radius: 12px !important;
      border-color: var(--inkly-simple-border) !important;
      background: #fff !important;
    }

    .quick-toolbar {
      border-radius: 18px !important;
      background: #111827 !important;
      box-shadow: 0 10px 32px rgba(17, 24, 39, .18) !important;
    }

    @media (max-width: 1400px) {
      .dashboard-pipeline-board {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
      }
    }

    @media (max-width: 900px) {
      .content {
        padding: 14px !important;
      }

      .site-header,
      .page-heading {
        padding: 12px 14px !important;
      }

      .home-hero {
        padding: 18px !important;
      }

      .home-hero-media {
        min-height: 260px;
      }

      .dashboard-pipeline-board {
        grid-template-columns: 1fr !important;
      }
    }

    /* Messages readability: artist dashboard */
    #messages,
    #messages *,
    #messages .panel,
    #messages .card,
    #messages .request-card,
    #messages .message-thread,
    #messages .message-thread *,
    #messages [id*="Message"],
    #messages [id*="Message"] *,
    #messages [class*="message"],
    #messages [class*="message"] * {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }

    #messages,
    #messages .panel,
    #messages .card,
    #messages .request-card,
    #messages .message-thread,
    #messages [class*="message"] {
      background-color: #fff !important;
    }

    #messages input,
    #messages select,
    #messages textarea,
    #messages option {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      background: #fff !important;
    }

    #messages button:not(.secondary),
    #messages .btn-primary,
    #messages .link-button:not(.secondary),
    #messages button:not(.secondary) *,
    #messages .btn-primary *,
    #messages .link-button:not(.secondary) * {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    #messages .muted,
    #messages .text-muted,
    #messages .hint {
      color: #4b5563 !important;
      -webkit-text-fill-color: #4b5563 !important;
    }

    /* Global tab readability: dark content uses white text */
    .content .page,
    .content .panel,
    .content .card,
    .content .request-card,
    .content .mini-card,
    .content .followup-box,
    .content .followup-item,
    .content .table-wrap,
    .content table,
    .content thead,
    .content tbody,
    .content tr,
    .content td,
    .content th,
    .content .crm-tab-panel,
    .content .quote-preview,
    .content .document-card,
    .content .message-thread,
    .content .client-doc-card {
      background: #111827 !important;
      color: #f9fafb !important;
      -webkit-text-fill-color: #f9fafb !important;
      border-color: rgba(255, 255, 255, .14) !important;
    }

    .content .page *,
    .content .panel *,
    .content .card *,
    .content .request-card *,
    .content .mini-card *,
    .content .followup-box *,
    .content .followup-item *,
    .content table *,
    .content .crm-tab-panel *,
    .content .quote-preview *,
    .content .document-card *,
    .content .message-thread * {
      color: #f9fafb !important;
      -webkit-text-fill-color: #f9fafb !important;
    }

    .content .muted,
    .content .text-muted,
    .content .hint,
    .content small {
      color: #cbd5e1 !important;
      -webkit-text-fill-color: #cbd5e1 !important;
    }

    .content input,
    .content select,
    .content textarea,
    .content option,
    .content .form-control,
    .content .form-select {
      background: #fff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      border-color: #e5e7eb !important;
    }

    .content input *,
    .content select *,
    .content textarea *,
    .content option * {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }

    .content .btn.secondary,
    .content button.secondary,
    .content .link-button.secondary,
    .content .btn-outline-dark,
    .content .btn-light {
      background: #fff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      border-color: #e5e7eb !important;
    }

    .content .btn.secondary *,
    .content button.secondary *,
    .content .link-button.secondary *,
    .content .btn-outline-dark *,
    .content .btn-light * {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }

    .content .btn-primary,
    .content .btn-warning,
    .content .inkly-purple-btn,
    .content button:not(.secondary),
    .content .link-button:not(.secondary),
    .content .badge.text-bg-primary,
    .content .badge.text-bg-success,
    .content .badge.text-bg-dark {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    .site-header,
    .site-header *,
    .page-heading,
    .page-heading * {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }

    .site-header .btn,
    .site-header .btn *,
    .page-heading .btn,
    .page-heading .btn * {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    /* Final contrast guard for the whole artist app.
       Dark surfaces stay readable in white; explicit light controls stay readable in black. */
    #main-content,
    #main-content .content,
    #main-content .page,
    #main-content .panel,
    #main-content .card,
    #main-content .request-card,
    #main-content .mini-card,
    #main-content .stat,
    #main-content .table-wrap,
    #main-content table,
    #main-content tr,
    #main-content td,
    #main-content th,
    #main-content .followup-box,
    #main-content .followup-item,
    #main-content .quote-preview,
    #main-content .message-thread,
    #main-content .crm-tab-panel {
      background-color: #111827 !important;
      color: #f9fafb !important;
      -webkit-text-fill-color: #f9fafb !important;
    }

    #main-content .page *,
    #main-content .panel *,
    #main-content .card *,
    #main-content .request-card *,
    #main-content .mini-card *,
    #main-content .stat *,
    #main-content .table-wrap *,
    #main-content table *,
    #main-content .followup-box *,
    #main-content .followup-item *,
    #main-content .quote-preview *,
    #main-content .message-thread *,
    #main-content .crm-tab-panel * {
      color: #f9fafb !important;
      -webkit-text-fill-color: #f9fafb !important;
    }

    #main-content .bg-white,
    #main-content .bg-light,
    #main-content .text-bg-light,
    #main-content .btn-light,
    #main-content .btn.secondary,
    #main-content button.secondary,
    #main-content .link-button.secondary,
    #main-content input,
    #main-content select,
    #main-content textarea,
    #main-content option,
    #main-content .form-control,
    #main-content .form-select,
    #main-content .dropdown-menu,
    #main-content .modal-content,
    #main-content .inkly-empty-state {
      background-color: #ffffff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }

    #main-content .bg-white *,
    #main-content .bg-light *,
    #main-content .text-bg-light *,
    #main-content .btn-light *,
    #main-content .btn.secondary *,
    #main-content button.secondary *,
    #main-content .link-button.secondary *,
    #main-content input *,
    #main-content select *,
    #main-content textarea *,
    #main-content option *,
    #main-content .form-control *,
    #main-content .form-select *,
    #main-content .dropdown-menu *,
    #main-content .modal-content *,
    #main-content .inkly-empty-state * {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }

    #main-content .btn-primary,
    #main-content .btn-warning,
    #main-content .inkly-purple-btn,
    #main-content button:not(.secondary):not(.btn-light),
    #main-content .link-button:not(.secondary),
    #main-content .badge.text-bg-primary,
    #main-content .badge.text-bg-success,
    #main-content .badge.text-bg-dark,
    #main-content .pill.good,
    #main-content .pill.bad {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    /* Absolute readability mode - artist app.
       Final layer: no hidden text, every content surface is light and text is dark. */
    html,
    body,
    .app,
    main,
    #main-content,
    #main-content .content,
    #main-content .page,
    #main-content .panel,
    #main-content .card,
    #main-content .request-card,
    #main-content .mini-card,
    #main-content .stat,
    #main-content .table-wrap,
    #main-content table,
    #main-content thead,
    #main-content tbody,
    #main-content tr,
    #main-content td,
    #main-content th,
    #main-content .followup-box,
    #main-content .followup-item,
    #main-content .quote-preview,
    #main-content .message-thread,
    #main-content .crm-tab-panel,
    #main-content .dashboard-pipeline-board,
    #main-content .pipeline-column,
    #main-content .pipeline-project-card,
    #main-content .dashboard-pipeline-action,
    #main-content .inkly-panel,
    #main-content .inkly-kpi-card,
    #main-content .inkly-shortcut-card,
    #main-content .home-hero,
    #main-content .home-section,
    #main-content .client-band,
    #main-content .empty,
    #main-content .inkly-empty-state {
      background: #ffffff !important;
      background-color: #ffffff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      text-shadow: none !important;
      border-color: #e5e7eb !important;
    }

    body *,
    #main-content *,
    #main-content .content *,
    #main-content .page *,
    #main-content .panel *,
    #main-content .card *,
    #main-content .request-card *,
    #main-content .mini-card *,
    #main-content .stat *,
    #main-content .table-wrap *,
    #main-content table *,
    #main-content .followup-box *,
    #main-content .followup-item *,
    #main-content .quote-preview *,
    #main-content .message-thread *,
    #main-content .crm-tab-panel *,
    #main-content .pipeline-column *,
    #main-content .pipeline-project-card *,
    #main-content .dashboard-pipeline-action *,
    #main-content .home-hero *,
    #main-content .home-section *,
    #main-content .client-band * {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      text-shadow: none !important;
    }

    .sidebar,
    .sidebar *,
    .nav,
    .nav *,
    .brand-lockup,
    .brand-lockup *,
    .site-header,
    .site-header *,
    .page-heading,
    .page-heading *,
    .quick-toolbar,
    .quick-toolbar * {
      background-color: #ffffff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      text-shadow: none !important;
      border-color: #e5e7eb !important;
    }

    input,
    select,
    textarea,
    option,
    button,
    a,
    label,
    p,
    span,
    small,
    strong,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li,
    td,
    th,
    .muted,
    .text-muted,
    .hint,
    .pill,
    .badge {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      text-shadow: none !important;
    }

    .btn-primary,
    .btn-warning,
    .inkly-purple-btn,
    button:not(.secondary):not(.btn-light),
    .link-button:not(.secondary),
    .nav button.active,
    .nav button:hover,
    .nav a:hover {
      background: #6d28d9 !important;
      border-color: #6d28d9 !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    .btn-primary *,
    .btn-warning *,
    .inkly-purple-btn *,
    button:not(.secondary):not(.btn-light) *,
    .link-button:not(.secondary) *,
    .nav button.active *,
    .nav button:hover *,
    .nav a:hover * {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

/* Dashboard activity dropdown: keep the client pipeline fully visible */
.inkly-dashboard .row.g-4:last-child {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.inkly-dashboard .row.g-4:last-child > .col-12,
.inkly-dashboard .row.g-4:last-child > .col-xxl-8,
.inkly-dashboard .row.g-4:last-child > .col-xxl-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.dashboard-activity-dropdown {
  order: -1;
  margin-bottom: 0 !important;
}

.dashboard-activity-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  border-radius: 16px;
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid #e5e7eb;
}

.dashboard-activity-summary::-webkit-details-marker {
  display: none;
}

.dashboard-activity-summary::after {
  content: "Ouvrir";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #6d28d9;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.dashboard-activity-dropdown[open] .dashboard-activity-summary::after {
  content: "Fermer";
}

.dashboard-activity-dropdown .card-body {
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid #e5e7eb;
}

.dashboard-activity-dropdown:not([open]) .card-body {
  display: none !important;
}

.inkly-dashboard .dashboard-pipeline-board {
  grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
  overflow-x: auto;
  padding-bottom: 8px;
}

@media (max-width: 1400px) {
  .inkly-dashboard .dashboard-pipeline-board {
    grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .inkly-dashboard .dashboard-pipeline-board {
    grid-template-columns: 1fr !important;
    overflow-x: visible;
  }
}

/* INKLY FINAL READABILITY LOCK - ARTIST SITE
   Highest-priority layer: every rubrique, table, form, quote, invoice,
   reminder, message and CRM data must remain readable. */
html,
body,
body *,
.app,
.app *,
#main-content,
#main-content *,
.content,
.content *,
.page,
.page *,
.panel,
.panel *,
.card,
.card *,
.request-card,
.request-card *,
.mini-card,
.mini-card *,
.stat,
.stat *,
.table-wrap,
.table-wrap *,
table,
table *,
thead,
tbody,
tr,
td,
th,
form,
form *,
.field,
.field *,
.actions,
.actions *,
.quote-preview,
.quote-preview *,
.followup-box,
.followup-box *,
.followup-item,
.followup-item *,
.crm-tab-panel,
.crm-tab-panel *,
.message-thread,
.message-thread *,
.request-list,
.request-list *,
.pipeline-column,
.pipeline-column *,
.pipeline-project-card,
.pipeline-project-card *,
.dashboard-pipeline-action,
.dashboard-pipeline-action *,
.inkly-panel,
.inkly-panel *,
.inkly-kpi-card,
.inkly-kpi-card *,
.inkly-shortcut-card,
.inkly-shortcut-card *,
.home-hero,
.home-hero *,
.home-section,
.home-section *,
.client-band,
.client-band *,
.site-header,
.site-header *,
.page-heading,
.page-heading *,
.sidebar,
.sidebar *,
.nav,
.nav *,
.quick-toolbar,
.quick-toolbar *,
.modal,
.modal *,
.modal-content,
.modal-content *,
.dropdown-menu,
.dropdown-menu *,
.toast,
.toast *,
.empty,
.empty *,
.inkly-empty-state,
.inkly-empty-state *,
.muted,
.text-muted,
.hint,
.pill,
.badge,
label,
p,
span,
small,
strong,
em,
b,
i,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a,
button,
input,
select,
textarea,
option {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
}

html,
body,
.app,
#main-content,
.content,
.page,
.panel,
.card,
.request-card,
.mini-card,
.stat,
.table-wrap,
table,
thead,
tbody,
tr,
td,
th,
form,
.field,
.quote-preview,
.followup-box,
.followup-item,
.crm-tab-panel,
.message-thread,
.request-list,
.pipeline-column,
.pipeline-project-card,
.dashboard-pipeline-action,
.inkly-panel,
.inkly-kpi-card,
.inkly-shortcut-card,
.home-hero,
.home-section,
.client-band,
.site-header,
.page-heading,
.sidebar,
.nav,
.quick-toolbar,
.modal-content,
.dropdown-menu,
.toast,
.empty,
.inkly-empty-state,
input,
select,
textarea,
option,
button,
.btn,
.link-button,
.badge,
.pill {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d1d5db !important;
}

input::placeholder,
textarea::placeholder {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  opacity: 1 !important;
}

input[type="file"]::file-selector-button {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid #d1d5db !important;
}

::selection,
*::selection {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ddd6fe !important;
}

/* Public homepage simplified interface and diagrams */
.inkly-public-hero,
.inkly-public-section {
  margin-bottom: 24px !important;
  padding: clamp(20px, 4vw, 44px) !important;
  border-radius: 18px !important;
}

.inkly-public-hero h2,
.inkly-public-section h2 {
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.05 !important;
  max-width: 980px;
}

.inkly-public-hero p,
.inkly-public-section p,
.inkly-service-card p,
.inkly-step-diagram p,
.inkly-info-panel p {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.55 !important;
}

.inkly-hero-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  background: #fff !important;
}

.inkly-hero-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
}

.inkly-service-card,
.inkly-step-diagram article,
.inkly-info-panel,
.inkly-device-grid span {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 16px !important;
  padding: 20px !important;
  min-height: 100%;
}

.inkly-service-card span,
.inkly-step-diagram span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #6d28d9 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 900;
}

.inkly-service-card h3,
.inkly-step-diagram h3,
.inkly-info-panel h2 {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.15 !important;
}

.inkly-step-diagram {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 14px;
  position: relative;
}

.inkly-step-diagram article {
  position: relative;
}

.inkly-step-diagram article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  right: -14px;
  width: 14px;
  height: 3px;
  background: #6d28d9;
}

.inkly-check-list {
  display: grid;
  gap: 12px;
}

.inkly-check-list p {
  margin: 0;
  padding-left: 18px;
  border-left: 4px solid #6d28d9;
}

.inkly-device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.inkly-device-grid span {
  display: grid;
  place-items: center;
  min-height: 110px;
  font-size: 20px !important;
  font-weight: 900;
}

/* Sidebar navigation readability override */
.sidebar .nav button,
.sidebar .nav a,
.sidebar .nav .link-button,
.sidebar .nav-group a,
.sidebar .nav-group button,
.sidebar .nav-secondary-group a,
.sidebar .nav-secondary-group button {
  background: #8b3ff2 !important;
  background-color: #8b3ff2 !important;
  background-image: none !important;
  border-color: #8b3ff2 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sidebar .nav button *,
.sidebar .nav a *,
.sidebar .nav .link-button *,
.sidebar .nav-group a *,
.sidebar .nav-group button *,
.sidebar .nav-secondary-group a *,
.sidebar .nav-secondary-group button * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

.sidebar .nav button:hover,
.sidebar .nav a:hover,
.sidebar .nav button.active {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.sidebar .nav-group-title {
  background: transparent !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

@media (max-width: 1100px) {
  .inkly-step-diagram {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .inkly-step-diagram article:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .inkly-public-hero,
  .inkly-public-section {
    padding: 18px !important;
    margin-bottom: 16px !important;
  }

  .inkly-hero-card {
    grid-template-columns: 1fr;
  }

  .inkly-step-diagram,
  .inkly-device-grid {
    grid-template-columns: 1fr;
  }

  .inkly-public-hero .btn,
  .inkly-public-section .btn {
    width: 100%;
  }
}

/* CRM invoice/document table readability: remove dark selected rows. */
#crm .table-wrap,
#crm .table-wrap table,
#crm .table-wrap thead,
#crm .table-wrap tbody,
#crm .table-wrap tr,
#crm .table-wrap th,
#crm .table-wrap td,
#documents .table-wrap,
#documents .table-wrap table,
#documents .table-wrap thead,
#documents .table-wrap tbody,
#documents .table-wrap tr,
#documents .table-wrap th,
#documents .table-wrap td,
#crmInvoiceRows,
#crmInvoiceRows tr,
#crmInvoiceRows td,
#crmFollowRows,
#crmFollowRows tr,
#crmFollowRows td,
#crmClientRows,
#crmClientRows tr,
#crmClientRows td,
#documentRows,
#documentRows tr,
#documentRows td {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
}

#crm .table-wrap tr:hover,
#crm .table-wrap tr:focus,
#crm .table-wrap tr:focus-within,
#crm .table-wrap tr.active,
#crm .table-wrap tr.selected,
#crm .table-wrap tr[aria-selected="true"],
#documents .table-wrap tr:hover,
#documents .table-wrap tr:focus,
#documents .table-wrap tr:focus-within,
#documents .table-wrap tr.active,
#documents .table-wrap tr.selected,
#documents .table-wrap tr[aria-selected="true"] {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#crm .table-wrap tr:hover td,
#crm .table-wrap tr:focus td,
#crm .table-wrap tr:focus-within td,
#crm .table-wrap tr.active td,
#crm .table-wrap tr.selected td,
#crm .table-wrap tr[aria-selected="true"] td,
#documents .table-wrap tr:hover td,
#documents .table-wrap tr:focus td,
#documents .table-wrap tr:focus-within td,
#documents .table-wrap tr.active td,
#documents .table-wrap tr.selected td,
#documents .table-wrap tr[aria-selected="true"] td {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#crm .table-wrap th,
#documents .table-wrap th {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #d1d5db !important;
}

/* Site-wide readability guard: no dark selected data blocks. */
#main-content :is(.table-wrap, table, thead, tbody, tr, td, th, .panel, .card, .request-card, .mini-card, .stat, .crm-tab-panel, .quote-preview, .followup-box, .followup-item, .message-thread, .request-list, .pipeline-column, .pipeline-project-card, .dashboard-pipeline-action, .inkly-panel, .inkly-kpi-card, .inkly-shortcut-card, .empty, .inkly-empty-state, form, .field, input, select, textarea, option),
.content :is(.table-wrap, table, thead, tbody, tr, td, th, .panel, .card, .request-card, .mini-card, .stat, .crm-tab-panel, .quote-preview, .followup-box, .followup-item, .message-thread, .request-list, .pipeline-column, .pipeline-project-card, .dashboard-pipeline-action, .inkly-panel, .inkly-kpi-card, .inkly-shortcut-card, .empty, .inkly-empty-state, form, .field, input, select, textarea, option) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
}

#main-content :is(.table-wrap, table, thead, tbody, tr, td, th, .panel, .card, .request-card, .mini-card, .stat, .crm-tab-panel, .quote-preview, .followup-box, .followup-item, .message-thread, .request-list, .pipeline-column, .pipeline-project-card, .dashboard-pipeline-action, .inkly-panel, .inkly-kpi-card, .inkly-shortcut-card, .empty, .inkly-empty-state, form, .field, input, select, textarea, option),
.content :is(.table-wrap, table, thead, tbody, tr, td, th, .panel, .card, .request-card, .mini-card, .stat, .crm-tab-panel, .quote-preview, .followup-box, .followup-item, .message-thread, .request-list, .pipeline-column, .pipeline-project-card, .dashboard-pipeline-action, .inkly-panel, .inkly-kpi-card, .inkly-shortcut-card, .empty, .inkly-empty-state, form, .field, input, select, textarea, option) {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d1d5db !important;
}

#main-content :is(tr, td, th, .request-card, .mini-card, .followup-item, .pipeline-project-card, .dashboard-pipeline-action, .inkly-shortcut-card, .message-thread, .quote-preview):is(:hover, :focus, :focus-within, .active, .selected, [aria-selected="true"]),
.content :is(tr, td, th, .request-card, .mini-card, .followup-item, .pipeline-project-card, .dashboard-pipeline-action, .inkly-shortcut-card, .message-thread, .quote-preview):is(:hover, :focus, :focus-within, .active, .selected, [aria-selected="true"]) {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#main-content :is(tr, td, th, .request-card, .mini-card, .followup-item, .pipeline-project-card, .dashboard-pipeline-action, .inkly-shortcut-card, .message-thread, .quote-preview):is(:hover, :focus, :focus-within, .active, .selected, [aria-selected="true"]) *,
.content :is(tr, td, th, .request-card, .mini-card, .followup-item, .pipeline-project-card, .dashboard-pipeline-action, .inkly-shortcut-card, .message-thread, .quote-preview):is(:hover, :focus, :focus-within, .active, .selected, [aria-selected="true"]) * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#main-content :is(a, button, input, select, textarea, [tabindex]):focus,
#main-content :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.content :is(a, button, input, select, textarea, [tabindex]):focus,
.content :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(109, 40, 217, 0.45) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.14) !important;
}

#main-content :is(.btn:not(.secondary), .btn-primary, button:not(.secondary):not(.btn-outline-dark):not(.btn-outline-danger):not(.btn-light)),
.content :is(.btn:not(.secondary), .btn-primary, button:not(.secondary):not(.btn-outline-dark):not(.btn-outline-danger):not(.btn-light)) {
  background: #8b3ff2 !important;
  background-color: #8b3ff2 !important;
  border-color: #8b3ff2 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#main-content :is(.btn:not(.secondary), .btn-primary, button:not(.secondary):not(.btn-outline-dark):not(.btn-outline-danger):not(.btn-light)) *,
.content :is(.btn:not(.secondary), .btn-primary, button:not(.secondary):not(.btn-outline-dark):not(.btn-outline-danger):not(.btn-light)) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Ultimate dashboard readability override for all rubriques and sub-rubriques. */
#main-content table,
#main-content thead,
#main-content tbody,
#main-content tfoot,
#main-content tr,
#main-content th,
#main-content td,
#main-content .table,
#main-content .table > :not(caption) > * > *,
#main-content .table-wrap,
#main-content .table-wrap table,
#main-content .table-wrap thead,
#main-content .table-wrap tbody,
#main-content .table-wrap tfoot,
#main-content .table-wrap tr,
#main-content .table-wrap th,
#main-content .table-wrap td,
.content table,
.content thead,
.content tbody,
.content tfoot,
.content tr,
.content th,
.content td,
.content .table,
.content .table > :not(caption) > * > *,
.content .table-wrap,
.content .table-wrap table,
.content .table-wrap thead,
.content .table-wrap tbody,
.content .table-wrap tfoot,
.content .table-wrap tr,
.content .table-wrap th,
.content .table-wrap td {
  --bs-table-color: #111827 !important;
  --bs-table-bg: #ffffff !important;
  --bs-table-striped-color: #111827 !important;
  --bs-table-striped-bg: #f8fafc !important;
  --bs-table-hover-color: #111827 !important;
  --bs-table-hover-bg: #f8fafc !important;
  --bs-table-active-color: #111827 !important;
  --bs-table-active-bg: #f8fafc !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
}

#main-content tbody tr,
#main-content tbody tr:nth-child(odd),
#main-content tbody tr:nth-child(even),
#main-content tbody tr:hover,
#main-content tbody tr:focus,
#main-content tbody tr:focus-within,
#main-content tbody tr.active,
#main-content tbody tr.selected,
#main-content tbody tr[aria-selected="true"],
.content tbody tr,
.content tbody tr:nth-child(odd),
.content tbody tr:nth-child(even),
.content tbody tr:hover,
.content tbody tr:focus,
.content tbody tr:focus-within,
.content tbody tr.active,
.content tbody tr.selected,
.content tbody tr[aria-selected="true"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#main-content tbody tr:hover td,
#main-content tbody tr:focus td,
#main-content tbody tr:focus-within td,
#main-content tbody tr.active td,
#main-content tbody tr.selected td,
#main-content tbody tr[aria-selected="true"] td,
.content tbody tr:hover td,
.content tbody tr:focus td,
.content tbody tr:focus-within td,
.content tbody tr.active td,
.content tbody tr.selected td,
.content tbody tr[aria-selected="true"] td {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#main-content th,
#main-content thead th,
.content th,
.content thead th {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

#main-content input,
#main-content select,
#main-content textarea,
#main-content option,
.content input,
.content select,
.content textarea,
.content option {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: #d1d5db !important;
}

/* Inkly modern workspace layer */
:root {
  --inkly-premium-bg: #f4f6fb;
  --inkly-premium-surface: #ffffff;
  --inkly-premium-ink: #111827;
  --inkly-premium-muted: #5b6472;
  --inkly-premium-line: #dce2ea;
  --inkly-premium-soft: #f8fafc;
  --inkly-premium-purple: #6d28d9;
  --inkly-premium-purple-soft: #ede9fe;
  --inkly-premium-gold: #f59e0b;
  --inkly-premium-shadow: 0 16px 44px rgba(17, 24, 39, .08);
}

body,
.app,
main,
.content {
  background: var(--inkly-premium-bg) !important;
}

.sidebar {
  width: 292px;
  padding: 18px !important;
  background: #101827 !important;
}

.brand-lockup {
  margin-bottom: 16px !important;
}

.inkly-nav {
  max-height: calc(100vh - 150px);
  gap: 10px !important;
  overflow-y: auto;
}

.inkly-nav .nav-group {
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .04) !important;
}

.sidebar .nav-group-title {
  margin: 0 2px 3px;
  color: rgba(255, 255, 255, .72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .72) !important;
  font-size: 11px;
  letter-spacing: .08em;
}

.sidebar .nav button,
.sidebar .nav a {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
}

.sidebar .nav button:hover,
.sidebar .nav a:hover,
.sidebar .nav button.active {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.site-header,
.page-heading {
  border-bottom: 1px solid var(--inkly-premium-line) !important;
}

.site-header .btn,
.inkly-toolbar .btn,
.inkly-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.inkly-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--inkly-premium-line);
  border-radius: 16px;
  background: var(--inkly-premium-surface) !important;
  box-shadow: var(--inkly-premium-shadow);
}

.inkly-global-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 18px;
}

.inkly-toolbar-search {
  position: relative;
  flex: 1 1 360px;
  max-width: 560px;
}

.inkly-toolbar-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--inkly-premium-muted) !important;
  -webkit-text-fill-color: var(--inkly-premium-muted) !important;
}

.inkly-toolbar-search input {
  min-height: 44px;
  padding-left: 42px !important;
}

.inkly-toolbar-actions,
.inkly-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.inkly-card {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--inkly-premium-line) !important;
  border-radius: 18px !important;
  background: var(--inkly-premium-surface) !important;
  box-shadow: var(--inkly-premium-shadow) !important;
}

.inkly-artist-space {
  gap: 18px !important;
}

.inkly-artist-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  border-top: 4px solid var(--inkly-premium-purple) !important;
}

.inkly-artist-hero h2 {
  max-width: 900px;
  margin: 0 0 8px;
  color: var(--inkly-premium-ink) !important;
  -webkit-text-fill-color: var(--inkly-premium-ink) !important;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.05;
}

.inkly-artist-toolbar {
  justify-content: flex-start;
  overflow-x: auto;
  box-shadow: none;
}

.inkly-artist-toolbar .btn {
  flex: 0 0 auto;
  min-height: 42px;
}

.inkly-dashboard-grid {
  display: grid;
  gap: 14px;
}

.inkly-stats-grid {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.inkly-stat-card {
  min-height: 168px;
  padding: 18px;
  border: 1px solid var(--inkly-premium-line) !important;
  border-radius: 18px;
  background: var(--inkly-premium-surface) !important;
  box-shadow: var(--inkly-premium-shadow);
}

.inkly-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--inkly-premium-purple) !important;
}

.inkly-stat-icon,
.inkly-stat-icon * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.inkly-stat-card small,
.inkly-stat-card em {
  display: block;
  color: var(--inkly-premium-muted) !important;
  -webkit-text-fill-color: var(--inkly-premium-muted) !important;
  font-style: normal;
  font-weight: 700;
}

.inkly-stat-card strong {
  display: block;
  margin: 5px 0;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1;
  color: var(--inkly-premium-ink) !important;
  -webkit-text-fill-color: var(--inkly-premium-ink) !important;
}

.inkly-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.inkly-section-header h2 {
  margin: 7px 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--inkly-premium-ink) !important;
  -webkit-text-fill-color: var(--inkly-premium-ink) !important;
}

.inkly-chart-grid {
  grid-template-columns: 1.2fr .9fr .9fr;
}

.inkly-chart-card {
  display: grid;
  gap: 16px;
  min-height: 320px;
  padding: 18px;
  border: 1px solid var(--inkly-premium-line) !important;
  border-radius: 16px;
  background: var(--inkly-premium-soft) !important;
}

.inkly-chart-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.inkly-chart-card canvas {
  width: 100% !important;
  max-height: 230px;
}

.inkly-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.inkly-action-card {
  display: grid;
  gap: 8px;
  min-height: 142px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--inkly-premium-line) !important;
  border-radius: 16px !important;
  background: var(--inkly-premium-soft) !important;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.inkly-action-card:hover,
.inkly-action-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(109, 40, 217, .38) !important;
  background: var(--inkly-premium-purple-soft) !important;
}

.inkly-action-card i {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--inkly-premium-purple) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 18px;
}

.inkly-action-card strong {
  font-size: 16px;
}

.inkly-action-card span {
  color: var(--inkly-premium-muted) !important;
  -webkit-text-fill-color: var(--inkly-premium-muted) !important;
  font-size: 13px;
  font-weight: 700;
}

.inkly-pipeline-board {
  grid-template-columns: repeat(5, minmax(220px, 1fr)) !important;
  gap: 12px;
}

.inkly-pipeline-board .lane {
  background: #f8fafc !important;
  border-color: var(--inkly-premium-line) !important;
  border-radius: 16px !important;
}

.inkly-pipeline-board .mini-card {
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, .06) !important;
}

.inkly-soft-badge {
  background: var(--inkly-premium-purple-soft) !important;
  color: #4c1d95 !important;
  -webkit-text-fill-color: #4c1d95 !important;
  border: 1px solid rgba(109, 40, 217, .14) !important;
}

.dropdown-menu,
.dropdown-item {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

@media (max-width: 1400px) {
  .inkly-stats-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .inkly-chart-grid,
  .inkly-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inkly-pipeline-board {
    grid-template-columns: repeat(5, minmax(240px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: 100%;
  }

  .inkly-nav {
    max-height: none;
  }

  .inkly-global-toolbar {
    position: static;
  }

  .inkly-toolbar,
  .inkly-artist-hero,
  .inkly-section-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .inkly-toolbar-actions,
  .inkly-hero-actions {
    justify-content: stretch;
  }

  .inkly-toolbar-actions .btn,
  .inkly-hero-actions .btn {
    flex: 1 1 180px;
  }

  .inkly-stats-grid,
  .inkly-chart-grid,
  .inkly-action-grid {
    grid-template-columns: 1fr;
  }

  .inkly-pipeline-board {
    grid-template-columns: 1fr !important;
    overflow-x: visible;
  }
}

/* Final site-wide typography pass */
:root {
  --inkly-readable-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --inkly-readable-text: #111827;
  --inkly-readable-muted: #4b5563;
}

html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body,
body *,
.app,
.app *,
#main-content,
#main-content *,
.content,
.content *,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.toast {
  font-family: var(--inkly-readable-font) !important;
  letter-spacing: 0 !important;
}

body {
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 450;
  color: var(--inkly-readable-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main-content :is(p, li, td, th, label, input, select, textarea, button, .btn, .muted, .text-muted, .hint, .request-card, .mini-card, .inkly-card, .panel, .card),
.content :is(p, li, td, th, label, input, select, textarea, button, .btn, .muted, .text-muted, .hint, .request-card, .mini-card, .inkly-card, .panel, .card) {
  line-height: 1.55 !important;
}

#main-content :is(p, li, td, .request-card, .mini-card, .panel, .card),
.content :is(p, li, td, .request-card, .mini-card, .panel, .card) {
  font-size: 1rem !important;
}

#main-content :is(.muted, .text-muted, .hint, small, .badge, .pill),
.content :is(.muted, .text-muted, .hint, small, .badge, .pill),
.sidebar .nav-group-title {
  font-size: .875rem !important;
  line-height: 1.45 !important;
}

#main-content :is(label, th, .btn),
.content :is(label, th, .btn),
.sidebar .nav button,
.sidebar .nav a,
.footer-link {
  font-size: .95rem !important;
  font-weight: 750 !important;
}

#main-content :is(input, select, textarea, .form-control, .form-select),
.content :is(input, select, textarea, .form-control, .form-select) {
  min-height: 46px;
  font-size: 1rem !important;
}

#main-content :is(h1, h2, h3, h4, h5, h6),
.content :is(h1, h2, h3, h4, h5, h6),
.brand,
.navbar-brand strong {
  font-family: var(--inkly-readable-font) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

#main-content h1,
.page-heading h1 {
  font-size: clamp(1.85rem, 3vw, 2.8rem) !important;
}

#main-content h2,
.content h2 {
  font-size: clamp(1.55rem, 2.3vw, 2.35rem) !important;
}

#main-content h3,
.content h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.55rem) !important;
}

@media (max-width: 560px) {
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  #main-content :is(.muted, .text-muted, .hint, small, .badge, .pill),
  .content :is(.muted, .text-muted, .hint, small, .badge, .pill) {
    font-size: .86rem !important;
  }

  #main-content :is(.btn, button, input, select, textarea),
  .content :is(.btn, button, input, select, textarea) {
    font-size: 1rem !important;
  }
}

/* Sidebar menu contrast lock */
.sidebar,
aside.sidebar {
  background: #101827 !important;
  background-color: #101827 !important;
  background-image: none !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  border-right: 1px solid #253044 !important;
}

.sidebar .brand-lockup {
  background: #182234 !important;
  background-color: #182234 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

.sidebar .brand,
.sidebar .brand *,
.sidebar .tagline,
.sidebar strong,
.sidebar p {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.sidebar .tagline {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

.sidebar .nav,
.sidebar .inkly-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.sidebar .nav-group,
.sidebar .inkly-nav .nav-group {
  background: #162033 !important;
  background-color: #162033 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 16px !important;
}

.sidebar .nav-group-title,
.sidebar .inkly-nav .nav-group-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 4px 6px !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
}

.sidebar .nav-group-title::after,
.sidebar .inkly-nav .nav-group-title::after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .24) !important;
}

.sidebar .nav button,
.sidebar .nav a,
.sidebar .inkly-nav button,
.sidebar .inkly-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #7c3aed !important;
  background-color: #7c3aed !important;
  background-image: none !important;
  border: 1px solid #8b5cf6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
}

.sidebar .nav button *,
.sidebar .nav a *,
.sidebar .inkly-nav button *,
.sidebar .inkly-nav a * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.sidebar .nav button::before,
.sidebar .nav a::before,
.sidebar .inkly-nav button::before,
.sidebar .inkly-nav a::before {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
}

.sidebar .nav button:hover,
.sidebar .nav a:hover,
.sidebar .nav button.active,
.sidebar .inkly-nav button:hover,
.sidebar .inkly-nav a:hover,
.sidebar .inkly-nav button.active {
  background: #5b21b6 !important;
  background-color: #5b21b6 !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: none !important;
}

.sidebar .nav button.locked,
.sidebar .inkly-nav button.locked {
  background: #334155 !important;
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  opacity: 1 !important;
}

.sidebar .mobile-menu-toggle {
  background: #7c3aed !important;
  background-color: #7c3aed !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #8b5cf6 !important;
}

.sidebar::-webkit-scrollbar,
.sidebar .nav::-webkit-scrollbar,
.sidebar .inkly-nav::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar .nav::-webkit-scrollbar-thumb,
.sidebar .inkly-nav::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .sidebar .nav button,
  .sidebar .nav a,
  .sidebar .inkly-nav button,
  .sidebar .inkly-nav a {
    justify-content: flex-start !important;
    white-space: normal !important;
    text-align: left !important;
  }
}

/* Logo-only sidebar header */
.sidebar > .brand-lockup {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  grid-template-columns: none !important;
  min-height: auto !important;
  padding: 16px !important;
}

.sidebar > .brand-lockup .brand-logo {
  width: min(170px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 18px !important;
  object-fit: cover;
}

.sidebar > .brand-lockup .brand,
.sidebar > .brand-lockup .tagline,
.sidebar > .brand-lockup > div {
  display: none !important;
}

.sidebar .inkly-nav {
  max-height: none !important;
}

.sidebar .inkly-nav .nav-group {
  padding: 12px !important;
}

/* Editable invoice model inside CRM */
.invoice-template-preview {
  white-space: normal !important;
  overflow: auto;
  background: #f2f2f2 !important;
  padding: 18px !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.inkly-invoice-page,
.inkly-invoice-page * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}

.inkly-invoice-page {
  width: min(100%, 900px);
  margin: 8px auto;
  padding: clamp(20px, 4vw, 48px);
  background: #ffffff !important;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  line-height: 1.45;
}

.inkly-invoice-topbar {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-start;
  padding-bottom: 32px;
  border-bottom: 2px solid #111111;
}

.inkly-invoice-brand h1 {
  margin: 0;
  font-size: 34px !important;
  text-transform: uppercase;
  font-weight: 900;
}

.inkly-invoice-brand p {
  margin: 8px 0 0;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  max-width: 380px;
}

.inkly-invoice-title {
  text-align: right;
  min-width: 230px;
}

.inkly-invoice-title .label,
.inkly-invoice-card h2 {
  font-size: 13px !important;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  text-transform: uppercase;
  letter-spacing: .08em !important;
}

.inkly-invoice-title .number {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 800;
}

.inkly-invoice-grid,
.inkly-invoice-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.inkly-invoice-notes {
  grid-template-columns: 1.2fr .8fr;
}

.inkly-invoice-card {
  border: 1px solid #e6e6e6 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.inkly-invoice-card h2 {
  margin: 0 0 14px;
}

.inkly-invoice-card .field {
  margin: 5px 0;
}

.inkly-invoice-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.inkly-invoice-meta .box {
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px;
  background: #f7f7f7 !important;
}

.inkly-invoice-meta .box span {
  display: block;
  font-size: 12px !important;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  margin-bottom: 6px;
}

.inkly-invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  background: #ffffff !important;
}

.inkly-invoice-table th {
  padding: 14px 12px;
  text-align: left;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .06em !important;
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.inkly-invoice-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
  background: #ffffff !important;
}

.inkly-invoice-table .qty,
.inkly-invoice-table .price,
.inkly-invoice-table .vat,
.inkly-invoice-table .total {
  text-align: right;
  white-space: nowrap;
}

.inkly-invoice-totals {
  width: min(100%, 380px);
  margin: 28px 0 0 auto;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
}

.inkly-invoice-totals .row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px;
  border-bottom: 1px solid #e6e6e6;
}

.inkly-invoice-totals .grand {
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px;
  font-weight: 800;
}

.inkly-invoice-totals .grand * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.inkly-invoice-totals .grand [contenteditable="true"],
.inkly-invoice-totals .grand [contenteditable="true"]:focus {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  outline-color: rgba(255, 255, 255, 0.75) !important;
}

.inkly-invoice-totals .grand ::selection,
.inkly-invoice-totals .grand [contenteditable="true"]::selection {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.inkly-invoice-page .small,
.inkly-invoice-footer {
  font-size: 12px !important;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
}

.inkly-invoice-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  text-align: center;
}

.inkly-invoice-page [contenteditable="true"] {
  outline: 1px dashed transparent;
  border-radius: 4px;
  cursor: text;
}

.inkly-invoice-page [contenteditable="true"]:focus {
  outline-color: #999999;
  background: #fffbe6 !important;
}

.inkly-invoice-page .inkly-invoice-totals .row.grand,
.inkly-invoice-page .inkly-invoice-totals .row.grand *,
.inkly-invoice-page .inkly-invoice-totals .row.grand span,
.inkly-invoice-page .inkly-invoice-totals .row.grand strong,
.inkly-invoice-page .inkly-invoice-totals .invoice-total-due,
.inkly-invoice-page .inkly-invoice-totals .invoice-total-due-label,
.inkly-invoice-page .inkly-invoice-totals .invoice-total-due-value {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

.inkly-invoice-page .inkly-invoice-totals .row.grand [contenteditable="true"],
.inkly-invoice-page .inkly-invoice-totals .row.grand [contenteditable="true"]:focus,
.inkly-invoice-page .inkly-invoice-totals .invoice-total-due-value,
.inkly-invoice-page .inkly-invoice-totals .invoice-total-due-value:focus {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  outline-color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 760px) {
  .inkly-invoice-topbar,
  .inkly-invoice-grid,
  .inkly-invoice-notes {
    display: grid;
    grid-template-columns: 1fr;
  }

  .inkly-invoice-title {
    text-align: left;
  }

  .inkly-invoice-meta {
    grid-template-columns: 1fr 1fr;
  }
}