@import 'ng-zorro-antd/ng-zorro-antd.min.css';

/* You can add global styles to this file, and also import other style files */
:root {
    --mauve: #8b7b8b;
    --ugly-yellow: #d4a574;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Be Vietnam Pro', sans-serif;
}
:root {
  --primary-color: #605DC8;
  --secondary-color: #8B89E6;
  --accent-color: #e8e7fa;
  --shadow-color: #E8E8E8;
}

button.primary {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

/* ─── Date picker dropdown (Pyrofetes theme) ──────────────── */
.pyro-datepicker-dropdown .ant-picker-panel-container {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 2px solid var(--ugly-yellow) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.25) !important;
    min-width: 320px !important;
}

.pyro-datepicker-dropdown .ant-picker-date-panel {
    min-width: 250px !important;
}

.pyro-datepicker-dropdown .ant-picker-cell {
    min-width: 32px !important;
    padding: 2px !important;
}

.pyro-datepicker-dropdown .ant-picker-header {
    border-bottom: 2px solid #f5ede3 !important;
}

.pyro-datepicker-dropdown .ant-picker-header-view button {
    color: var(--ugly-yellow) !important;
    font-weight: 700 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

.pyro-datepicker-dropdown .ant-picker-header button {
    color: var(--ugly-yellow) !important;
}

.pyro-datepicker-dropdown .ant-picker-content th {
    color: #a08060 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.pyro-datepicker-dropdown .ant-picker-cell {
    padding: 2px 1px !important;
}

.pyro-datepicker-dropdown .ant-picker-cell-inner {
    width: 100% !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #ccc !important;
    transition: all 0.15s ease !important;
    display: block !important;
    text-align: center !important;
}

.pyro-datepicker-dropdown .ant-picker-cell-in-view .ant-picker-cell-inner {
    color: var(--ugly-yellow) !important;
}

.pyro-datepicker-dropdown .ant-picker-cell:hover .ant-picker-cell-inner {
    background: rgba(212, 165, 116, 0.12) !important;
}

.pyro-datepicker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
    background: linear-gradient(135deg, var(--ugly-yellow) 0%, #c49563 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.35) !important;
}

.pyro-datepicker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
    border: 2px solid var(--ugly-yellow) !important;
    border-radius: 6px !important;
}

.pyro-datepicker-dropdown .ant-picker-now-btn {
    color: var(--ugly-yellow) !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

.pyro-datepicker-dropdown .ant-picker-ok button:not(:disabled) {
    background: linear-gradient(135deg, var(--ugly-yellow) 0%, #c49563 100%) !important;
    border-color: var(--ugly-yellow) !important;
    color: white !important;
    border-radius: 8px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

.pyro-datepicker-dropdown .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
    background: rgba(212, 165, 116, 0.15) !important;
    color: var(--ugly-yellow) !important;
    font-weight: 700 !important;
}

/* ─── Modale création spectacle ──────────────────────────── */
.create-show-modal .ant-modal-content {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1.5px solid #ede8e0 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14) !important;
    padding: 0 !important;
}

.create-show-modal .ant-modal-body {
    padding: 28px !important;
}

.create-show-modal .ant-modal-close {
    top: 14px !important;
    right: 14px !important;
}

.create-show-modal .ant-modal-close-x {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 8px !important;
    color: #bbb !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.create-show-modal .ant-modal-close-x:hover {
    background: #f5f4f0 !important;
    color: #666 !important;
}