:root {
  --b-radius-lg: 18px;


  --border-color: #c9c9c9;
  --mui-mainColorChannels-light: 10 10 10;
  --mui-palette-background-default: #fbfcff;
}

.ts-menu-root .ts-menu-button:hover,
.ts-menu-root .ts-menu-button {

  border-radius: 100px !important;
}



.survey-result-card {
  background-color: var(--mui-palette-info-lightOpacity);
  border: 0 !important;
}

.big-number {
  letter-spacing: -2px;
  font-weight: 900;
}


.MuiCard-root {
  border: 1px solid var(--border-color);
  border-radius: var(--b-radius-lg);
}

.source-btn button {
  margin-block-start: 5px;

}

/* Base text color only - font-size intentionally NOT set here anymore (see
   the note on the typography scale below): a blanket `.MuiTypography-root`
   or `body` font-size override applies to EVERY variant at once (h1 through
   caption), which doesn't shrink small text so much as it flattens the
   whole hierarchy - headings collapse to the same size as body text. MUI
   doesn't cascade a single font-size the way Bootstrap's `--bs-body-font-size`
   does; each Typography variant carries its own explicit rem value. The
   actual "text looks too small" complaint (see
   [[project-invensekolah-nextjs-port]]) turned out to be `body2`/`caption`/
   `subtitle2` sitting at 13px against Bootstrap's flat ~15px scale (Bootstrap
   only greys out secondary text via `.text-muted`, it never shrinks it) -
   fixed at the source in @core/theme/typography.ts instead, the one place
   that's actually stable to edit (see the note further down on why
   `.mui-xxxxxx`-prefixed selectors don't belong in this file at all). */
body {
  color: var(--mui-palette-text-primary);
}

.ts-menu-button {
  font-weight: 500;
}

.ts-vertical-layout-header-fixed.ts-vertical-layout-header-blur.scrolled.ts-vertical-layout-header-attached,
.ts-vertical-layout-header-fixed.ts-vertical-layout-header-blur.scrolled.ts-vertical-layout-header-detached .ts-vertical-layout-navbar,
.ts-vertical-layout-header-fixed.ts-vertical-layout-header-blur.ts-vertical-layout-header-floating .ts-vertical-layout-navbar {
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background-color: rgb(var(--background-color-rgb) / 0.85);
  inset-block-start: 5px;
  border-radius: 100px;
}

.MuiFormLabel-asterisk {
  color: var(--mui-palette-error-main);
}

/* Every MuiButton's own left/right padding was too tight, most visible on
   the rounded (borderRadius:999) pill CTAs (Kirim Survey, Unduh, ...) -
   applied to all buttons, not just the rounded ones, for consistency.
   A plain CSS-only bump here rather than a @core/theme/overrides change,
   since MUI's own size-variant classes (.MuiButton-sizeSmall etc.) would
   need touching there for the same result. */
.MuiButton-root {
  padding-inline: 22px;
}

/* File drop input - mirrors _partials/file-input.blade.php's
   dashed-border trigger box. isDragging-dependent border/background colors
   stay inline since they can't be static. */
.file-drop-box {
  padding: 1.25rem;
  border: 2px dashed var(--mui-palette-divider);
  border-radius: var(--mui-shape-borderRadius, 14px);
  color: var(--mui-palette-text-secondary);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

/* PhotoGpsCapture.tsx - "Buka Kamera" trigger before a location has been
   captured yet (camera mode requires one first, matching Laravel's own
   camera-capture-disabled state). */
.file-drop-box.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.file-drop-preview-wrap {
  position: relative;
  display: inline-flex;
}

.file-drop-preview-img {
  max-block-size: 80px;
  max-inline-size: 100%;
  object-fit: contain;
}

/* FileUpload.tsx thumbnail - a uniform 64x64 cover crop so every file box
   (image or icon) lines up. */
.fu-thumb-img {
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--mui-palette-divider);
}

.file-drop-icon {
  font-size: 42px;
}

/* Real, clickable remove/clear button - a single-mode preview's own corner
   badge, or one thumbnail's corner badge in a multi-file grid (below). Every
   file input (single or multiple) uses this same button so the "clear this
   photo" affordance always looks identical. stopPropagation on click is the
   caller's job (the box itself is click-to-pick, this button sits on top of
   it). */
.file-drop-remove-btn {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: -8px;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mui-palette-error-main);
  color: var(--mui-palette-error-contrastText, #fff);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  box-shadow: var(--mui-customShadows-sm, 0 1px 3px rgba(0, 0, 0, 0.3));
}

.file-drop-remove-btn:hover {
  filter: brightness(1.1);
}

/* Multi-file mode (FileDropInput multiple=true) - newly-picked files render
   as a thumbnail grid below the "add more" drop box, each removable on its
   own before submit, mirroring the Laravel app's Dropzone
   (addRemoveLinks: true) widget instead of the old text-only "N file
   dipilih" summary. */
.file-drop-thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  inline-size: 100%;
}

.file-drop-thumb {
  position: relative;
  inline-size: 72px;
  block-size: 72px;
  flex-shrink: 0;
}

.file-drop-thumb-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--mui-palette-divider);
}

.file-drop-thumb-file {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid var(--mui-palette-divider);
  padding: 4px;
  overflow: hidden;
  text-align: center;
}

.file-drop-thumb-filename {
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  inline-size: 100%;
}

/* Per-file upload progress (SinglePhotoUpload/MultiPhotoUpload) - a dark
   overlay + percentage over one thumbnail while its own auto-upload is in
   flight, matching the same corner-badge visual language as
   .file-drop-remove-btn above. */
.file-drop-thumb-progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.file-drop-thumb-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgb(var(--mui-palette-error-mainChannel) / 0.7);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

/* MuiTablePagination alignment fix - the toolbar's label/select/actions
   parts don't share a common baseline out of the box (the select's own
   line-height and the label's default margins push them out of line with
   the prev/next icon buttons). Flexbox + reset margins puts everything on
   one visual line, top and bottom TablePagination alike - see
   [[project_invensekolah_nextjs_port]]. */
.MuiTablePagination-root .MuiTablePagination-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.MuiTablePagination-root .MuiTablePagination-selectLabel,
.MuiTablePagination-root .MuiTablePagination-displayedRows {
  margin-block: 0;
  line-height: 1.43;
  display: flex;
  align-items: center;
}

.MuiTablePagination-root .MuiTablePagination-select {
  display: flex;
  align-items: center;
}

.MuiTablePagination-root .MuiTablePagination-actions {
  display: flex;
  align-items: center;
}

/* QuillEditor.tsx - Quill's own Snow theme (quill/dist/quill.snow.css,
   imported by the component) ships light-mode-only hardcoded colors
   (#444 icon strokes, #ccc borders, white background) with no dark-mode
   awareness at all, and doesn't read this theme's own border/radius
   tokens either - all overridden here so a Quill editor reads as just
   another input on this theme (same border color/radius as every Select/
   TextField - see input.ts's own customColors-inputBorder /
   customBorderRadius-md - not a foreign-looking widget bolted on), in
   both light and dark mode alike. One shared block, since every usage
   renders the exact same toolbar (QuillEditor.tsx's own TOOLBAR const). */
.quill-editor-wrapper {
  border: 1px solid var(--mui-palette-customColors-inputBorder);
  border-radius: var(--mui-shape-customBorderRadius-md);
  padding: .5rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.quill-editor-wrapper:hover:not(.is-disabled) {
  border-color: var(--mui-palette-action-active);
}

.quill-editor-wrapper:focus-within {
  border-color: var(--mui-palette-primary-main);
  border-width: 2px;
  margin: -1px;
}

.quill-editor-wrapper.is-error {
  border-color: var(--mui-palette-error-main);
}

.quill-editor-wrapper.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Corner-clipping moved down from the wrapper (which used to be
   `overflow: hidden`) onto the toolbar/container individually - the
   wrapper's overflow was clipping the header/font-size picker's dropdown
   along with the square corners, since a Quill picker's `.ql-picker-options`
   opens as an absolutely-positioned child that extends past the toolbar's
   own box. Each half now rounds only its own corners, so the outer shape
   still looks like one rounded box but nothing inside gets cut off. */
.quill-editor-wrapper .ql-toolbar.ql-snow {
  border: none;
  border-block-end: 1px solid var(--mui-palette-divider);
  border-start-start-radius: var(--mui-shape-customBorderRadius-md);
  border-start-end-radius: var(--mui-shape-customBorderRadius-md);
  background: var(--mui-palette-action-hover);
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
}

.quill-editor-wrapper .ql-container.ql-snow {
  border: none;
  border-end-start-radius: var(--mui-shape-customBorderRadius-md);
  border-end-end-radius: var(--mui-shape-customBorderRadius-md);
  overflow: hidden;
  background: var(--mui-palette-background-paper);
  font-family: inherit;
  font-size: 0.9375rem;
}

.quill-editor-wrapper .ql-editor {
  min-block-size: var(--quill-min-height, 160px);
  max-block-size: var(--quill-max-height, 400px);
  overflow-y: auto;
  padding: 1rem;
  color: var(--mui-palette-text-primary);
}

.quill-editor-wrapper .ql-editor.ql-blank::before {
  color: var(--mui-palette-text-disabled);
  font-style: normal;
  inset-inline-start: 1rem;
}

/* Toolbar icon strokes/fills + picker labels - Quill's own SVGs use
   `currentColor` in most places already, but the base stylesheet still
   pins that color to a fixed light-mode gray via .ql-stroke/.ql-fill's
   own `stroke`/`fill`, so it has to be overridden explicitly rather than
   just relying on inheritance. */
.quill-editor-wrapper .ql-snow .ql-stroke {
  stroke: var(--mui-palette-text-secondary);
}

.quill-editor-wrapper .ql-snow .ql-fill,
.quill-editor-wrapper .ql-snow .ql-stroke.ql-fill {
  fill: var(--mui-palette-text-secondary);
}

.quill-editor-wrapper .ql-picker {
  color: var(--mui-palette-text-secondary);
}

.quill-editor-wrapper .ql-snow.ql-toolbar button:hover,
.quill-editor-wrapper .ql-snow .ql-toolbar button:hover,
.quill-editor-wrapper .ql-snow.ql-toolbar button.ql-active,
.quill-editor-wrapper .ql-snow .ql-toolbar button.ql-active,
.quill-editor-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover,
.quill-editor-wrapper .ql-snow .ql-picker-label.ql-active {
  color: var(--mui-palette-primary-main);
}

.quill-editor-wrapper .ql-snow.ql-toolbar button:hover .ql-stroke,
.quill-editor-wrapper .ql-snow .ql-toolbar button:hover .ql-stroke,
.quill-editor-wrapper .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.quill-editor-wrapper .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.quill-editor-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke {
  stroke: var(--mui-palette-primary-main);
}

.quill-editor-wrapper .ql-snow.ql-toolbar button:hover .ql-fill,
.quill-editor-wrapper .ql-snow .ql-toolbar button:hover .ql-fill,
.quill-editor-wrapper .ql-snow.ql-toolbar button.ql-active .ql-fill,
.quill-editor-wrapper .ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: var(--mui-palette-primary-main);
}

/* z-index is the other half of the "dropdown gets covered" fix: Quill's
   `.ql-container` (the text area, painted AFTER the toolbar in DOM order)
   has its own `position: relative` with no z-index, so at the same
   (default) stacking level it was painting OVER the toolbar's open picker
   dropdown/link tooltip whenever they overlapped, regardless of the
   overflow fix above. */
.quill-editor-wrapper .ql-snow .ql-picker-options {
  background: var(--mui-palette-background-paper);
  border-color: var(--mui-palette-divider);
  box-shadow: var(--mui-customShadows-lg);
  border-radius: var(--mui-shape-borderRadius);
  z-index: 20;
}

.quill-editor-wrapper .ql-snow .ql-tooltip {
  background: var(--mui-palette-background-paper);
  border-color: var(--mui-palette-divider);
  box-shadow: var(--mui-customShadows-lg);
  color: var(--mui-palette-text-primary);
  z-index: 20;
}

.quill-editor-wrapper .ql-snow .ql-tooltip input[type='text'] {
  background: var(--mui-palette-background-default);
  color: var(--mui-palette-text-primary);
  border-color: var(--mui-palette-customColors-inputBorder);
}

/* DashboardPhList.tsx + PopularList.tsx - the running "01/02/…" watermark
   number, big and faint, peeking out from behind the title/meta text
   (.ph-index-content's own margin-inline-start is what leaves only ~1/3 of
   the number visible - shrink it to reveal more of the number, grow it to
   hide more). Edit these two rules to restyle the number everywhere at
   once - both list renderers share them, no per-usage overrides. */
.ph-index-number {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mui-palette-action-hover);
  pointer-events: none;
  user-select: none;
}

.ph-index-content {
  position: relative;
  z-index: 1;
  margin-inline-start: 1.5rem;
}

/* HtmlContent.tsx - renders QuillEditor.tsx's saved output back out.
   font-size/line-height matches MUI Typography's own body2, since this
   always sits inline with other body2 text (BoxDetailsItem, Timeline). */
.html-content {
  font-size: 0.875rem;
  line-height: 1.5715;
  color: var(--mui-palette-text-primary);
  word-break: break-word;
}

.html-content>*:first-child {
  margin-block-start: 0;
}

.html-content>*:last-child {
  margin-block-end: 0;
}

.html-content p {
  margin-block: 0.5em;
}

.html-content h1,
.html-content h2 {
  font-weight: 600;
  margin-block: 0.5em;
}

.html-content h1 {
  font-size: 1.25em;
}

.html-content h2 {
  font-size: 1.125em;
}

.html-content ul,
.html-content ol {
  margin-block: 0.5em;
  padding-inline-start: 1.5em;
}

.html-content blockquote {
  margin-block: 0.5em;
  margin-inline: 0;
  padding-inline-start: 1em;
  border-inline-start: 3px solid var(--mui-palette-divider);
  color: var(--mui-palette-text-secondary);
}

.html-content a {
  color: var(--mui-palette-primary-main);
}

/* An admin can paste/insert an oversized image or a wide <table> into any
   Quill field - without this, that content pokes past its card on a narrow
   (mobile) viewport and forces the whole page to scroll sideways, since
   nothing here was clamping it. */
.html-content img {
  max-inline-size: 100%;
  block-size: auto;
}

.html-content table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}