/* ============================================================
   FLAVOUR FOLIO — Design Tokens
   ============================================================ */
:root {
    --ff-dark:      #2b1206;
    --ff-darker:    #1a0a00;
    --ff-copper:    #b5651d;
    --ff-amber:     #d4920a;
    --ff-cream:     #f5f0e8;
    --ff-cream-mid: #ede5d8;
    --ff-text:      #2b1206;
    --ff-muted:     #7a5c46;
    --ff-white:     #ffffff;
    --ff-radius:    8px;
}

/* ============================================================
   LOGIN PAGE — Animations
   ============================================================ */

@keyframes ff-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ff-logo-glow {
    0%, 100% { filter: drop-shadow(0 6px 24px rgba(181,101,29,0.55)); }
    50%       { filter: drop-shadow(0 6px 40px rgba(212,146,10,0.9)); }
}

@keyframes ff-divider-grow {
    from { width: 0; opacity: 0; }
    to   { width: 48px; opacity: 1; }
}

@keyframes ff-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes ff-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

@keyframes ff-particle {
    0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
    50%  { opacity: 0.2; }
    100% { transform: translateY(-120px) translateX(var(--dx, 20px)) scale(0); opacity: 0; }
}

@keyframes ff-bg-pan {
    0%   { background-position: center 40%; }
    50%  { background-position: center 55%; }
    100% { background-position: center 40%; }
}

@keyframes ff-right-slide {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   LOGIN PAGE — Split Panel
   ============================================================ */
body.ff-login-page {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    background: var(--ff-darker);
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

/* ── Left panel — dark branding ── */
.ff-login-left {
    flex: 0 0 60%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ff-login-left-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(212,146,10,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(181,101,29,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 30%, rgba(120,50,10,0.3) 0%, transparent 45%),
        linear-gradient(160deg, #0e0500 0%, #1a0800 40%, #2b1000 70%, #0a0300 100%);
    z-index: 0;
    animation: ff-bg-pan 18s ease-in-out infinite;
}

/* Animated noise texture overlay */
.ff-login-left-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.4;
    pointer-events: none;
}

.ff-login-left-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.2) 0%, rgba(181,101,29,0.08) 100%);
    z-index: 1;
}

.ff-login-brand {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 48px 40px;
}

/* Floating particles container */
.ff-login-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.ff-login-particles span {
    position: absolute;
    bottom: 10%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ff-amber);
    animation: ff-particle 6s ease-in infinite;
}
.ff-login-particles span:nth-child(1)  { left: 15%; animation-delay: 0s;    --dx: 15px;  width: 3px; height: 3px; }
.ff-login-particles span:nth-child(2)  { left: 30%; animation-delay: 1.2s;  --dx: -20px; width: 5px; height: 5px; background: var(--ff-copper); }
.ff-login-particles span:nth-child(3)  { left: 50%; animation-delay: 2.4s;  --dx: 10px; }
.ff-login-particles span:nth-child(4)  { left: 68%; animation-delay: 0.8s;  --dx: -12px; width: 3px; height: 3px; background: var(--ff-copper); }
.ff-login-particles span:nth-child(5)  { left: 82%; animation-delay: 3.1s;  --dx: 18px;  width: 5px; height: 5px; }
.ff-login-particles span:nth-child(6)  { left: 22%; animation-delay: 4.2s;  --dx: -8px;  width: 3px; height: 3px; }
.ff-login-particles span:nth-child(7)  { left: 58%; animation-delay: 5s;    --dx: 22px;  background: var(--ff-copper); }
.ff-login-particles span:nth-child(8)  { left: 75%; animation-delay: 1.8s;  --dx: -16px; width: 3px; height: 3px; }

.ff-login-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 24px;
    animation: ff-logo-glow 3s ease-in-out infinite, ff-float 6s ease-in-out infinite, ff-fade-up 0.7s ease both;
    animation-delay: 0s, 0s, 0s;
}

.ff-login-title {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    background: linear-gradient(90deg, #fff 0%, var(--ff-amber) 50%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ff-shimmer 4s linear infinite, ff-fade-up 0.7s 0.15s ease both;
}

.ff-login-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ff-amber), transparent);
    margin: 14px auto;
    border-radius: 2px;
    animation: ff-divider-grow 0.8s 0.35s ease both;
}

.ff-login-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    font-style: italic;
    animation: ff-fade-up 0.7s 0.45s ease both;
    opacity: 0;
    animation-fill-mode: both;
}

.ff-login-smac {
    color: rgba(255,255,255,0.28);
    font-size: 0.68rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
    animation: ff-fade-up 0.7s 0.55s ease both;
    opacity: 0;
    animation-fill-mode: both;
}

.ff-login-tagline {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
    animation: ff-fade-up 0.7s 0.7s ease both;
    opacity: 0;
    animation-fill-mode: both;
}

.ff-login-tagline p {
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    margin: 0;
    line-height: 1.7;
}

/* ── Right panel — white form ── */
.ff-login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf8f5;
    position: relative;
}

.ff-login-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--ff-copper), var(--ff-amber), var(--ff-copper));
}

.ff-login-form-wrap {
    width: 100%;
    max-width: 400px;
    padding: 48px 40px;
    animation: ff-right-slide 0.6s 0.2s ease both;
}

.ff-form-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ff-darker);
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

.ff-form-sub {
    color: #9a8070;
    font-size: 0.9rem;
    margin-bottom: 32px;
}

.ff-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ff-darker);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    display: block;
}

.ff-input {
    border: 1.5px solid #e5ddd4;
    border-radius: 6px;
    background: #ffffff;
    color: var(--ff-darker);
    padding: 11px 15px;
    font-size: 0.97rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto;
}

.ff-input:focus {
    border-color: var(--ff-copper);
    box-shadow: 0 0 0 3px rgba(181,101,29,0.12);
    outline: none;
    background: #ffffff;
}

.ff-input-group {
    position: relative;
}

.ff-input-group .ff-input {
    width: 100%;
    padding-right: 44px;
}

.ff-eye-toggle {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #b0927e;
    font-size: 0.88rem;
    line-height: 1;
    z-index: 2;
}

.ff-eye-toggle:hover { color: var(--ff-copper); }

.ff-remember {
    font-size: 0.88rem;
    color: #6b5040;
    margin-bottom: 0;
    cursor: pointer;
}

.ff-forgot {
    font-size: 0.85rem;
    color: var(--ff-copper);
    text-decoration: none;
    font-weight: 600;
}

.ff-forgot:hover {
    color: var(--ff-amber);
    text-decoration: none;
}

.ff-btn-signin {
    background: linear-gradient(135deg, var(--ff-copper) 0%, #7a3b10 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 13px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 10px;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(181,101,29,0.35);
}

.ff-btn-signin:hover {
    opacity: 0.9;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(181,101,29,0.5);
}

.ff-btn-signin:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(181,101,29,0.3);
}

/* ── Responsive — stack on mobile ── */
@media (max-width: 768px) {
    body.ff-login-page { flex-direction: column; align-items: stretch; }
    .ff-login-left  { flex: 0 0 auto; min-height: 220px; }
    .ff-login-right { flex: 1; }
    .ff-login-right::before { width: 100%; height: 4px; top: 0; left: 0; }
    .ff-login-brand { padding: 32px 24px; }
    .ff-login-logo  { width: 64px; height: 64px; margin-bottom: 16px; }
    .ff-login-title { font-size: 1.5rem; }
    .ff-login-tagline { display: none; }
    .ff-login-form-wrap { padding: 32px 24px; }
}

/* Confirm password avatar */
.ff-confirm-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ff-copper);
    color: var(--ff-white);
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.ff-confirm-name {
    text-align: center;
    font-weight: 600;
    color: var(--ff-dark);
    font-size: 1rem;
}

/* ============================================================
   EXISTING DATATABLE / EDITOR STYLES (unchanged below)
   ============================================================ */
.ck-editor__editable,
textarea {
    min-height: 150px;
}

.datatable {
    width: 100% !important;
}

table.dataTable tbody td.select-checkbox::before,
table.dataTable tbody td.select-checkbox::after,
table.dataTable tbody th.select-checkbox::before,
table.dataTable tbody th.select-checkbox::after {
    top: 50%;
}

.dataTables_length,
.dataTables_filter,
.dt-buttons {
    margin-bottom: 0.333em;
}

.dt-buttons .btn {
    margin-left: 0.333em;
    border-radius: 0;
}

.table.datatable {
    box-sizing: border-box;
    border-collapse: collapse;
}

table.dataTable thead th {
    border-bottom: 2px solid #dee2e6;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #dee2e6;
}

.select2 {
    max-width: 100%;
    width: 100%;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none;
}

.btn-group-xs > .btn,
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.searchable-title {
    font-weight: bold;
}
.select2-container--open {
    z-index: 9999;
}
.searchable-fields {
    padding-left:5px;
}
.searchable-link {
    padding:0 5px 0 5px;
}
.searchable-link:hover   {
    cursor: pointer;
    background: #eaeaea;
}
.select2-results__option {
    padding-left: 0px;
    padding-right: 0px;
}

.form-group .required::after {
    content: " *";
    color: red;
}

.form-check.is-invalid ~ .invalid-feedback {
    display: block;
}

.dataTables_length label select {
    width: 65px!important;
}

div.dt-button-collection {
    padding: 0;
}

.buttons-columnVisibility {
    display: block;
}

.buttons-columnVisibility.active {
    background-color: rgba(128, 128, 128, 0.1);
    font-weight: bolder;
}