import { cn } from "@/lib/utils"

/** Google Drive–style palette — dark grays instead of pure black. */

export const DRIVE_DIALOG_OVERLAY =
  "bg-[#3c4043]/40 backdrop-blur-[2px] dark:bg-[#202124]/60"

export const DRIVE_DIALOG_CONTENT = cn(
  "drive-dialog gap-0 overflow-hidden border-[#e8eaed] bg-white p-0 shadow-xl dark:border-[#3c4043] dark:bg-[#292a2d]"
)

export const DRIVE_DIALOG_HEADER = cn(
  "space-y-1 border-b border-[#e8eaed] px-6 py-5 text-left dark:border-[#3c4043]"
)

export const DRIVE_DIALOG_BODY = "px-6 py-5"

export const DRIVE_DIALOG_FOOTER = cn(
  "flex-row justify-end gap-2 border-t border-[#e8eaed] bg-[#f8f9fa] px-6 py-4 dark:border-[#3c4043] dark:bg-[#252628]"
)

export const DRIVE_DIALOG_DIVIDER = "border-[#e8eaed] dark:border-[#3c4043]"

export const DRIVE_FIELD_CLASS =
  "h-10 rounded-lg border border-[#dadce0] bg-[#f1f3f4] text-sm text-[#3c4043] shadow-none placeholder:text-[#80868b] focus-visible:border-[#1a73e8] focus-visible:ring-2 focus-visible:ring-[#1a73e8]/20 dark:border-[#5f6368]/40 dark:bg-[#35363a] dark:text-[#e8eaed] dark:placeholder:text-[#9aa0a6] dark:focus-visible:border-[#8ab4f8] dark:focus-visible:ring-[#8ab4f8]/25"

export const DRIVE_TEXTAREA_CLASS =
  "min-h-[72px] resize-none rounded-lg border border-[#dadce0] bg-[#f1f3f4] text-sm text-[#3c4043] shadow-none placeholder:text-[#80868b] focus-visible:border-[#1a73e8] focus-visible:ring-2 focus-visible:ring-[#1a73e8]/20 dark:border-[#5f6368]/40 dark:bg-[#35363a] dark:text-[#e8eaed] dark:placeholder:text-[#9aa0a6] dark:focus-visible:border-[#8ab4f8] dark:focus-visible:ring-[#8ab4f8]/25"

export const DRIVE_LABEL_CLASS = "text-sm font-medium text-[#5f6368] dark:text-[#9aa0a6]"

export const DRIVE_TEXT_PRIMARY = "text-[#3c4043] dark:text-[#e8eaed]"
export const DRIVE_TEXT_SECONDARY = "text-[#5f6368] dark:text-[#9aa0a6]"
export const DRIVE_TEXT_TITLE = "text-[#202124] dark:text-[#e8eaed]"

export const DRIVE_PANEL_MUTED = cn(
  "rounded-xl border border-[#e8eaed] bg-[#f8f9fa] dark:border-[#3c4043] dark:bg-[#35363a]"
)

export const DRIVE_CARD_IDLE = cn(
  "border-[#e8eaed] bg-[#f8f9fa] hover:bg-[#f1f3f4] dark:border-[#5f6368]/30 dark:bg-[#35363a]/50 dark:hover:bg-[#3c4043]/45"
)

export const DRIVE_CARD_ACTIVE = cn(
  "border-[#1a73e8] bg-[#e8f0fe] ring-1 ring-[#1a73e8]/20 dark:border-[#8ab4f8]/60 dark:bg-[#1a377a]/35 dark:ring-[#8ab4f8]/20"
)

export const DRIVE_BTN_GHOST = cn(
  DRIVE_TEXT_SECONDARY,
  "hover:bg-[#e8eaed]/80 hover:text-[#3c4043] dark:hover:bg-[#3c4043]/50 dark:hover:text-[#e8eaed]"
)

export const DRIVE_BTN_PRIMARY =
  "bg-[#1a73e8] text-white hover:bg-[#1765cc] dark:bg-[#8ab4f8] dark:text-[#202124] dark:hover:bg-[#aecbfa]"

/** Above graphic context menus (z-100) and floating toolbars (z-200). */
export const DOCS_GRAPHIC_DRAW_DIALOG_OVERLAY = "z-[300]"

export const DOCS_GRAPHIC_DRAW_DIALOG_CONTENT = "z-[301]"

export const DRIVE_SHEET_OVERLAY = "z-[100] bg-[#3c4043]/40 backdrop-blur-[2px] dark:bg-[#202124]/60"

export const DRIVE_SHEET_CONTENT = cn(
  "drive-dialog z-[100] rounded-t-2xl border-t border-[#e8eaed] bg-white p-0 pb-[env(safe-area-inset-bottom)] dark:border-[#3c4043] dark:bg-[#292a2d]"
)