@import url("./typography.css?v=1.0.0");

/* =========================================================
   PhotoDrive Global Theme v1
   Áp dụng cho Landing, Studio Workspace, Studio Auth.
   Album khách hàng giữ bảng màu riêng nhưng dùng chung state/JS.
   ========================================================= */

/* ---------- Global toggle ---------- */
.pd-global-theme-toggle{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:inline-grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:#111315;
    color:#a9afb8;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.pd-global-theme-toggle:hover{
    border-color:rgba(255,255,255,.22);
    background:#181a1c;
    color:#f2f2ee;
    transform:translateY(-1px);
}

.pd-global-theme-toggle svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

html[data-theme="dark"] .pd-theme-icon--moon,
html[data-theme="light"] .pd-theme-icon--sun{
    display:none;
}

/* =========================================================
   LANDING PAGE - LIGHT
   ========================================================= */
html[data-theme="light"] body:not(.pd-dashboard-page):not(.studio-auth-page):not(.pd-public-album){
    background:#f6f3ee;
    color:#24211e;
}

html[data-theme="light"] .header{
    background:rgba(250,248,244,.94);
    border-bottom-color:rgba(31,27,23,.09);
    box-shadow:0 8px 30px rgba(58,48,39,.055);
}

html[data-theme="light"] .logo-icon{
    background:#fff;
    border-color:rgba(31,27,23,.10);
    box-shadow:0 8px 24px rgba(58,48,39,.06);
}

html[data-theme="light"] .logo-text h2{
    background:linear-gradient(90deg,#211f1c,#d34f69);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

html[data-theme="light"] .logo-text span,
html[data-theme="light"] .menu a,
html[data-theme="light"] .login-btn{
    color:#5e5953;
}

html[data-theme="light"] .menu a:hover,
html[data-theme="light"] .login-btn:hover{
    color:#171513;
}

html[data-theme="light"] .header .pd-global-theme-toggle{
    border-color:rgba(31,27,23,.12);
    background:#fff;
    color:#57514b;
}

html[data-theme="light"] .header .pd-global-theme-toggle:hover{
    border-color:rgba(31,27,23,.22);
    background:#f0ebe4;
    color:#191613;
}

/* Hero vẫn giữ ảnh tối để chữ/CTA có độ tương phản cao */
html[data-theme="light"] .hero{
    background:
        linear-gradient(rgba(0,0,0,.47),rgba(0,0,0,.64)),
        url("../images/hero.jpg");
    background-size:cover;
    background-position:center;
}

html[data-theme="light"] .quick-stats-box{
    border-color:rgba(31,27,23,.10);
    background:rgba(255,253,249,.97);
    box-shadow:0 22px 55px rgba(58,48,39,.12);
}

html[data-theme="light"] .quick-stat-value{
    color:#211e1b;
}

html[data-theme="light"] .quick-stat-item span{
    color:#777169;
}

html[data-theme="light"] .quick-stat-item:not(:last-child)::after,
html[data-theme="light"] .quick-stat-item:nth-child(-n+2){
    border-color:rgba(31,27,23,.08);
    background-color:rgba(31,27,23,.08);
}

html[data-theme="light"] .gallery-showcase,
html[data-theme="light"] .process,
html[data-theme="light"] .features,
html[data-theme="light"] .reviews,
html[data-theme="light"] .faq,
html[data-theme="light"] .home-cta,
html[data-theme="light"] .footer{
    background:#f6f3ee !important;
}

html[data-theme="light"] .gallery-showcase::before{
    background:radial-gradient(circle,rgba(217,76,102,.075),transparent 68%);
}

html[data-theme="light"] .gallery-heading h2,
html[data-theme="light"] .home-section-heading h2,
html[data-theme="light"] .feature-heading h2,
html[data-theme="light"] .review-heading h2,
html[data-theme="light"] .faq-heading h2,
html[data-theme="light"] .cta-content h2{
    color:#201d1a !important;
}

html[data-theme="light"] .gallery-heading p,
html[data-theme="light"] .home-section-heading p,
html[data-theme="light"] .feature-heading p,
html[data-theme="light"] .review-heading p,
html[data-theme="light"] .faq-heading p,
html[data-theme="light"] .cta-content p{
    color:#716b64 !important;
}

html[data-theme="light"] .demo-album-panel,
html[data-theme="light"] .process-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .cta-panel{
    border-color:rgba(31,27,23,.10) !important;
    background:#fffdf9 !important;
    box-shadow:0 18px 55px rgba(58,48,39,.08) !important;
}

html[data-theme="light"] .demo-album-meta h3,
html[data-theme="light"] .process-card h3,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .review-card blockquote,
html[data-theme="light"] .review-author strong,
html[data-theme="light"] .faq-item summary,
html[data-theme="light"] .footer-brandline strong{
    color:#25211e !important;
}

html[data-theme="light"] .demo-album-meta p,
html[data-theme="light"] .process-card p,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .review-author span,
html[data-theme="light"] .faq-answer p,
html[data-theme="light"] .footer-copy{
    color:#746e67 !important;
}

html[data-theme="light"] .gallery-full-demo-btn,
html[data-theme="light"] .gallery-register-btn,
html[data-theme="light"] .gallery-slider-edge{
    border-color:rgba(31,27,23,.13) !important;
    background:#fff !important;
    color:#25211e !important;
}

html[data-theme="light"] .gallery-full-demo-btn strong{
    color:#25211e !important;
}

html[data-theme="light"] .gallery-full-demo-btn > i{
    background:#f5efe8 !important;
}

html[data-theme="light"] .demo-photo-media{
    background:#eee8e0 !important;
}

html[data-theme="light"] .demo-photo-viewport::before{
    background:linear-gradient(90deg,#fffdf9 0%,rgba(255,253,249,.78) 34%,transparent 100%) !important;
}

html[data-theme="light"] .demo-photo-viewport::after{
    background:linear-gradient(270deg,#fffdf9 0%,rgba(255,253,249,.78) 34%,transparent 100%) !important;
}

html[data-theme="light"] .cta-login{
    color:#5d5750 !important;
}

html[data-theme="light"] .footer{
    border-top:1px solid rgba(31,27,23,.08);
}

/* =========================================================
   STUDIO WORKSPACE - LIGHT
   ========================================================= */
html[data-theme="light"]{
    --pd-bg:#f2f4f3;
    --pd-sidebar:#f7f8f6;
    --pd-surface:#ffffff;
    --pd-surface-2:#f4f5f3;
    --pd-surface-3:#eceeeb;
    --pd-line:rgba(31,37,34,.09);
    --pd-line-strong:rgba(31,37,34,.15);
    --pd-text:#1d211f;
    --pd-muted:#6d756f;
    --pd-muted-2:#929994;
    --pd-shadow:0 18px 50px rgba(40,48,43,.09);
}

html[data-theme="light"] body.pd-dashboard-page{
    background:
        radial-gradient(circle at 76% 0%,rgba(255,91,120,.045),transparent 25%),
        #f2f4f3 !important;
    color:var(--pd-text);
}

html[data-theme="light"] .pd-sidebar{
    background:
        linear-gradient(180deg,rgba(255,255,255,.62),transparent 30%),
        var(--pd-sidebar) !important;
    border-right-color:var(--pd-line);
}

html[data-theme="light"] .pd-brand__copy strong,
html[data-theme="light"] .pd-page-context strong,
html[data-theme="light"] .pd-welcome h1,
html[data-theme="light"] .pd-panel__header h2,
html[data-theme="light"] .pd-album-card__title h3{
    color:#1c211e !important;
}

html[data-theme="light"] .pd-brand__copy small,
html[data-theme="light"] .pd-nav__label,
html[data-theme="light"] .pd-page-context small{
    color:#969c97 !important;
}

html[data-theme="light"] .pd-nav__item{
    color:#707872;
}

html[data-theme="light"] .pd-nav__item:hover{
    background:#eff1ee;
    color:#2b312d;
}

html[data-theme="light"] .pd-nav__item.is-active{
    border-color:rgba(217,75,101,.15);
    background:rgba(217,75,101,.065);
    color:#292b29;
}

html[data-theme="light"] .pd-create-btn,
html[data-theme="light"] .pd-primary-action{
    border-color:rgba(31,37,34,.14) !important;
    background:#fff !important;
    color:#222724 !important;
    box-shadow:0 10px 28px rgba(40,48,43,.07) !important;
}

html[data-theme="light"] .pd-plan-card,
html[data-theme="light"] .pd-summary-card,
html[data-theme="light"] .pd-panel,
html[data-theme="light"] .pd-album-card,
html[data-theme="light"] .pd-notification-popover{
    border-color:var(--pd-line) !important;
    background:#fff !important;
    box-shadow:0 14px 38px rgba(40,48,43,.055);
}

html[data-theme="light"] .pd-topbar{
    border-bottom-color:var(--pd-line) !important;
    background:rgba(248,249,247,.93) !important;
    backdrop-filter:blur(16px);
}

html[data-theme="light"] .pd-search,
html[data-theme="light"] .pd-topbar-icon,
html[data-theme="light"] .pd-user{
    border-color:var(--pd-line) !important;
    background:#fff !important;
    color:#666e68 !important;
}

html[data-theme="light"] .pd-search input{
    color:#242a26 !important;
}

html[data-theme="light"] .pd-search input::placeholder{
    color:#9ca29e !important;
}

html[data-theme="light"] .pd-user__copy strong{
    color:#262c28 !important;
}

html[data-theme="light"] .pd-user__copy small{
    color:#929994 !important;
}

html[data-theme="light"] .pd-topbar .pd-global-theme-toggle{
    border-color:var(--pd-line);
    background:#fff;
    color:#666e68;
}

/* Album của tôi */
html[data-theme="light"] .pd-albums-heading h1,
html[data-theme="light"] .pd-create-heading h1,
html[data-theme="light"] .pd-selected-heading h1,
html[data-theme="light"] .pd-filter-heading h1{
    color:#1c211e !important;
}

html[data-theme="light"] .pd-albums-heading p,
html[data-theme="light"] .pd-create-heading p,
html[data-theme="light"] .pd-selected-heading p,
html[data-theme="light"] .pd-filter-heading p{
    color:#737b75 !important;
}

html[data-theme="light"] .pd-album-toolbar,
html[data-theme="light"] .pd-create-panel,
html[data-theme="light"] .pd-selected-summary article,
html[data-theme="light"] .pd-filter-card,
html[data-theme="light"] .pd-filter-safety,
html[data-theme="light"] .pd-filter-progress,
html[data-theme="light"] .pd-filter-result{
    border-color:var(--pd-line) !important;
    background:#fff !important;
}

html[data-theme="light"] .pd-album-toolbar__search,
html[data-theme="light"] .pd-toolbar-btn,
html[data-theme="light"] .pd-drive-input-box,
html[data-theme="light"] .pd-filter-codes-input,
html[data-theme="light"] .pd-filter-match-mode label > div,
html[data-theme="light"] .pd-filter-extensions span,
html[data-theme="light"] .pd-filter-folder-picker,
html[data-theme="light"] .pd-filter-run-summary > div,
html[data-theme="light"] .pd-filter-browser-status,
html[data-theme="light"] .pd-filter-output-path,
html[data-theme="light"] .pd-filter-result details{
    border-color:var(--pd-line) !important;
    background:#f7f8f6 !important;
}

html[data-theme="light"] .pd-album-toolbar__search input,
html[data-theme="light"] .pd-filter-codes-input{
    color:#262c28 !important;
}

html[data-theme="light"] .pd-filter-card__head h2,
html[data-theme="light"] .pd-filter-safety strong,
html[data-theme="light"] .pd-filter-match-mode strong,
html[data-theme="light"] .pd-filter-option strong,
html[data-theme="light"] .pd-filter-run-summary strong,
html[data-theme="light"] .pd-filter-progress__head h2,
html[data-theme="light"] .pd-filter-result h2,
html[data-theme="light"] .pd-filter-output-path strong{
    color:#29302b !important;
}

html[data-theme="light"] .pd-filter-step,
html[data-theme="light"] .pd-selected-summary__icon{
    border-color:var(--pd-line) !important;
    background:#f1f3f0 !important;
    color:#6e7770 !important;
}

html[data-theme="light"] .pd-selected-tool-btn,
html[data-theme="light"] .pd-filter-code-actions button,
html[data-theme="light"] .pd-filter-extension-toolbar button,
html[data-theme="light"] .pd-filter-cancel-button{
    border-color:var(--pd-line) !important;
    background:#f7f8f6 !important;
    color:#626b64 !important;
}

/* Create album form - inputs/cards */
html[data-theme="light"] .pd-create-panel__heading h2{
    color:#232925 !important;
}

html[data-theme="light"] .pd-create-panel__heading p,
html[data-theme="light"] .pd-create-panel__heading p strong{
    color:#747c76 !important;
}

html[data-theme="light"] .pd-create-main input,
html[data-theme="light"] .pd-create-main textarea,
html[data-theme="light"] .pd-create-main select{
    border-color:var(--pd-line) !important;
    background:#f8f9f7 !important;
    color:#262c28 !important;
}

html[data-theme="light"] .pd-create-main input::placeholder,
html[data-theme="light"] .pd-create-main textarea::placeholder{
    color:#a0a6a2 !important;
}

/* Selected photos inbox */
html[data-theme="light"] [class*="pd-selected-"] input,
html[data-theme="light"] [class*="pd-selected-"] select{
    color:#29302b;
}

html[data-theme="light"] .pd-selected-heading p b{
    color:#343a36 !important;
}

/* MagiMir: light mode keeps AI visual identity but chuyển surface sáng */
html[data-theme="light"] .pd-magimir-hero{
    border-color:rgba(31,37,34,.10) !important;
    background:
        radial-gradient(circle at 22% 16%,rgba(76,185,255,.15),transparent 30%),
        radial-gradient(circle at 58% 82%,rgba(102,84,255,.09),transparent 34%),
        #eef4f7 !important;
}

html[data-theme="light"] .pd-magimir-mark{
    border-color:rgba(31,37,34,.11) !important;
    background:rgba(255,255,255,.62) !important;
    color:#303b43 !important;
}

html[data-theme="light"] .pd-magimir-hero__brand strong,
html[data-theme="light"] .pd-magimir-hero__copy h1,
html[data-theme="light"] .pd-magimir-section-head h2,
html[data-theme="light"] .pd-magimir-feature__copy h2,
html[data-theme="light"] .pd-magimir-purchase__intro h2,
html[data-theme="light"] .pd-magimir-payment-card__head h3{
    color:#1f272c !important;
}

html[data-theme="light"] .pd-magimir-hero__copy p,
html[data-theme="light"] .pd-magimir-section-head p,
html[data-theme="light"] .pd-magimir-feature__copy p,
html[data-theme="light"] .pd-magimir-purchase__intro > p{
    color:#69757d !important;
}

html[data-theme="light"] .pd-magimir-editor-frame,
html[data-theme="light"] .pd-magimir-beauty__visual,
html[data-theme="light"] .pd-magimir-purchase__intro,
html[data-theme="light"] .pd-magimir-payment-card,
html[data-theme="light"] .pd-magimir-price-option__card,
html[data-theme="light"] .pd-magimir-email-box input,
html[data-theme="light"] .pd-magimir-support-hours,
html[data-theme="light"] .pd-magimir-selected-payment,
html[data-theme="light"] .pd-magimir-qr-placeholder{
    border-color:rgba(31,37,34,.10) !important;
    background:#fff !important;
    box-shadow:0 16px 46px rgba(40,48,43,.065);
}

html[data-theme="light"] .pd-magimir-price-option strong,
html[data-theme="light"] .pd-magimir-selected-payment strong{
    color:#242b27;
}

html[data-theme="light"] .pd-magimir-price-option.is-member strong{
    color:#dc842f !important;
}

html[data-theme="light"] .pd-magimir-btn,
html[data-theme="light"] .pd-magimir-email-box button,
html[data-theme="light"] .pd-magimir-confirm-btn,
html[data-theme="light"] .pd-magimir-chat-btn{
    border-color:rgba(31,37,34,.13) !important;
    background:#fff !important;
    color:#303733 !important;
}

/* =========================================================
   STUDIO AUTH - DARK
   Auth hiện vốn là giao diện sáng, nên bổ sung chiều ngược lại.
   ========================================================= */
html[data-theme="dark"]{
    --auth-bg:#090a0a;
    --auth-surface:#0e1011;
    --auth-text:#f3f3ef;
    --auth-muted:#8b9097;
    --auth-line:rgba(255,255,255,.12);
    --auth-line-soft:rgba(255,255,255,.075);
}

html[data-theme="dark"] body.studio-auth-page{
    background:
        radial-gradient(circle at 18% 12%,rgba(238,71,101,.075),transparent 28%),
        radial-gradient(circle at 82% 84%,rgba(243,163,27,.05),transparent 26%),
        var(--auth-bg) !important;
}

html[data-theme="dark"] .studio-auth-header{
    border-bottom-color:rgba(255,255,255,.07);
}

html[data-theme="dark"] .studio-auth-brand__text small,
html[data-theme="dark"] .studio-auth-home{
    color:#898f96 !important;
}

html[data-theme="dark"] .studio-auth-card__intro p,
html[data-theme="dark"] .studio-auth-captcha__note,
html[data-theme="dark"] .studio-auth-trial p,
html[data-theme="dark"] .studio-auth-register,
html[data-theme="dark"] .studio-auth-footer{
    color:#8a9097 !important;
}

html[data-theme="dark"] .studio-auth-captcha,
html[data-theme="dark"] .studio-auth-google,
html[data-theme="dark"] .studio-auth-trial{
    border-color:rgba(255,255,255,.10) !important;
    background:#101213 !important;
    color:#ecece8 !important;
}

html[data-theme="dark"] .studio-auth-divider span{
    background:var(--auth-bg) !important;
    color:#70767e !important;
}

html[data-theme="dark"] .studio-auth-divider::before,
html[data-theme="dark"] .studio-auth-divider::after{
    background:rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .studio-auth-header .pd-global-theme-toggle{
    border-color:rgba(255,255,255,.11);
    background:#111315;
    color:#a9afb8;
}

/* ---------- Light toggle defaults outside Studio ---------- */
html[data-theme="light"] .pd-global-theme-toggle{
    border-color:rgba(31,37,34,.11);
    background:#fff;
    color:#626963;
}

@media (max-width:760px){
    .pd-global-theme-toggle{
        width:36px;
        height:36px;
    }
}

/* =========================================================
   PhotoDrive Global Font v1.1 — system UI / macOS-like
   Không nhúng hoặc phân phối file font bên ngoài.
   ========================================================= */
:root{
    --pd-system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea{
    font-family:var(--pd-system-font) !important;
}

body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

button,
input,
select,
textarea{
    font-synthesis:none;
}


/* =========================================================
   v1.5.0 — Light mode empty-state restore
   Trang chủ Studio + Album của tôi
   ========================================================= */

/* Trang chủ Studio: khung "Chưa có album nào" */
html[data-theme="light"] body.pd-dashboard-page .pd-dashboard-empty{
    border-color:rgba(31,37,34,.10) !important;
    background:
        radial-gradient(circle at 50% 0%,rgba(216,80,105,.03),transparent 34%),
        #f9faf8 !important;
    box-shadow:0 10px 32px rgba(40,48,43,.03) !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-dashboard-empty__icon{
    border-color:rgba(31,37,34,.09) !important;
    background:#fff !important;
    color:#818983 !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-dashboard-empty strong{
    color:#303632 !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-dashboard-empty p{
    color:#7b837d !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-dashboard-empty > a{
    border-color:rgba(31,37,34,.11) !important;
    background:#fff !important;
    color:#343a36 !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-dashboard-empty > a:hover{
    border-color:rgba(216,80,105,.20) !important;
    background:#fff7f8 !important;
}

/* Album của tôi: khung empty-state lớn */
html[data-theme="light"] body.pd-dashboard-page .pd-albums-empty{
    border-color:rgba(31,37,34,.10) !important;
    background:
        radial-gradient(circle at 50% 0%,rgba(216,80,105,.035),transparent 32%),
        #fff !important;
    box-shadow:0 10px 32px rgba(40,48,43,.03) !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-albums-empty__icon{
    border-color:rgba(31,37,34,.09) !important;
    background:#f3f5f2 !important;
    color:#818983 !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-albums-empty h2{
    color:#2d332f !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-albums-empty p{
    color:#7b837d !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-empty-create-btn{
    border-color:rgba(31,37,34,.12) !important;
    background:#fff !important;
    color:#333a35 !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-empty-create-btn .pd-icon{
    color:#d75e74 !important;
}

html[data-theme="light"] body.pd-dashboard-page .pd-empty-create-btn:hover{
    border-color:rgba(216,80,105,.22) !important;
    background:#fff7f8 !important;
}

/* Khi quay lại Dark, giữ đúng surface tối. */
html[data-theme="dark"] body.pd-dashboard-page .pd-dashboard-empty,
html[data-theme="dark"] body.pd-dashboard-page .pd-albums-empty{
    border-color:rgba(255,255,255,.10) !important;
    background:#0b0d0e !important;
    box-shadow:none !important;
}