:root{
    --navy:#061a31;--navy2:#0b3159;--blue:#0878c8;--cyan:#08b6d5;--yellow:#ffd400;
    --bg:#eef3f7;--card:#fff;--text:#172236;--muted:#6f7e92;--line:#e3eaf0;
    --green:#16a36d;--orange:#f59a21;--red:#e34d51;--shadow:0 12px 30px rgba(15,40,68,.13)
   }
   *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#dce6ec;color:var(--text)}
   button,input,select,textarea{font:inherit}.app-shell{width:100%;min-height:100vh;display:grid;place-items:center;padding:24px}
   .phone{width:420px;height:880px;background:var(--bg);border:10px solid #112235;border-radius:44px;box-shadow:0 38px 100px rgba(10,31,50,.32);overflow:hidden;position:relative}
   .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:138px;height:28px;background:#112235;border-radius:0 0 17px 17px;z-index:50}
   .screen{display:none;height:100%;overflow:hidden}.screen.active{display:block}.scroll{height:100%;overflow-y:auto;scrollbar-width:none;padding-bottom:84px}.scroll::-webkit-scrollbar{display:none}
   .login-screen{background:linear-gradient(150deg,#06182e,#0a5b8f);color:#fff;padding:48px 24px 28px;position:relative;overflow:hidden}
   .login-screen:after{content:"";position:absolute;width:290px;height:290px;border:55px solid rgba(255,212,0,.10);border-radius:50%;right:-140px;top:-105px}
   .login-logo{width:190px;position:relative;z-index:2}.login-copy{margin-top:90px;position:relative;z-index:2}.login-copy h1{font-size:29px;line-height:1.18;margin:0 0 12px}.login-copy p{font-size:11px;color:#c5d8e7;line-height:1.6}.login-card{position:absolute;left:18px;right:18px;bottom:22px;background:#fff;color:var(--text);padding:19px;border-radius:19px;box-shadow:0 18px 45px rgba(0,0,0,.28);z-index:3}.login-card h3{font-size:16px;margin:0 0 5px}.login-card>p{font-size:10px;color:var(--muted);margin:0 0 14px}.field{margin-bottom:10px}.field label{display:block;font-size:8px;color:var(--muted);font-weight:900;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);padding:10px;border-radius:10px;outline:none;font-size:10px;background:#fff}.field textarea{height:70px;resize:none}
   .btn{border:0;padding:11px 13px;border-radius:11px;font-size:10px;font-weight:900;cursor:pointer}.btn-primary{width:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff}.btn-yellow{background:var(--yellow);color:#172236}.btn-light{background:#edf3f7;color:#35506c}.btn-blue{background:var(--blue);color:#fff}
   .header{background:linear-gradient(135deg,#071e39,#0a6095);color:#fff;padding:38px 16px 16px;position:relative;overflow:hidden}.header:after{content:"";position:absolute;width:160px;height:160px;border:34px solid rgba(255,212,0,.12);border-radius:50%;right:-65px;top:-82px}.header-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.head-logo{height:24px;max-width:135px}.head-icons{display:flex;gap:7px}.icon-btn{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}.welcome{position:relative;z-index:2;margin-top:16px}.welcome small{font-size:9px;color:#bdd4e4}.welcome h2{font-size:19px;margin:4px 0}.welcome p{font-size:9px;color:#c2d8e7;margin:0}
   .content{padding:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 7px;text-align:center;box-shadow:0 6px 18px rgba(20,45,70,.055)}.stat b{font-size:18px;display:block}.stat span{font-size:8px;color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:center;margin:17px 2px 8px}.section-head h3{font-size:12px;margin:0}.section-head button{border:0;background:none;color:var(--blue);font-size:9px;font-weight:900;cursor:pointer}
   .grid-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.menu-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 5px;text-align:center;cursor:pointer;min-height:78px;box-shadow:0 6px 18px rgba(20,45,70,.045)}.menu-card i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf5fc;margin:0 auto 6px;font-style:normal;font-size:17px}.menu-card span{font-size:8px;font-weight:800;line-height:1.25;display:block}
   .card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px;margin-bottom:9px;box-shadow:0 6px 18px rgba(20,45,70,.045)}.card-top{display:flex;justify-content:space-between;gap:8px}.task-id{font-size:8px;color:var(--blue);font-weight:900}.badge{display:inline-block;padding:5px 7px;border-radius:14px;font-size:8px;font-weight:900}.red{background:#ffe8e8;color:#c1393e}.orange{background:#fff0dc;color:#ad6805}.green{background:#e5f7ee;color:#11805a}.blue{background:#e7f3fb;color:#116da8}.card h4{font-size:11px;margin:7px 0 4px}.card p{font-size:9px;color:var(--muted);line-height:1.45;margin:0 0 8px}.meta{display:flex;gap:5px;flex-wrap:wrap}.meta span{font-size:8px;background:#f2f5f8;padding:5px 6px;border-radius:7px;color:#526276}.progress{height:6px;background:#edf1f5;border-radius:8px;overflow:hidden;margin-top:9px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan))}
   .page-head{display:flex;align-items:center;gap:10px;padding:38px 14px 13px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.back{display: flex;align-items: center;justify-content: center;width:32px;height:32px;border:0;border-radius:9px;background:#edf3f7;cursor:pointer;font-weight:900}.page-head h2{font-size:14px;margin:0}.page-head p{font-size:8px;color:var(--muted);margin:3px 0 0}.search{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;outline:none;font-size:10px;margin-bottom:8px}.filters{display:flex;gap:6px;overflow:auto;margin-bottom:9px}.filters button{border:1px solid var(--line);background:#fff;padding:7px 9px;border-radius:14px;font-size:8px;white-space:nowrap;cursor:pointer}.filters button.on{background:var(--navy2);border-color:var(--navy2);color:#fff}
   .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.detail{background:#f5f8fa;border:1px solid var(--line);padding:9px;border-radius:9px}.detail label{display:block;font-size:7px;color:var(--muted);margin-bottom:4px}.detail b{font-size:9px}.timeline{display:grid;gap:9px}.step{display:flex;gap:8px}.step-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eaf5fc;color:var(--blue);font-size:9px;font-weight:900;flex:none}.step b{font-size:9px}.step small{display:block;font-size:8px;color:var(--muted);margin-top:2px}
   .upload{height:92px;border:2px dashed #cbd7e1;border-radius:11px;background:#fafcfd;display:grid;place-items:center;text-align:center;color:#74869a;font-size:9px;cursor:pointer}.upload strong{font-size:20px;display:block}
   .map{height:460px;background:#dce7eb;border-radius:14px;position:relative;overflow:hidden}.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(78,115,136,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(78,115,136,.13) 1px,transparent 1px);background-size:35px 35px}.road{position:absolute;height:10px;background:#fff;border:1px solid #c5d2d8;border-radius:15px;transform-origin:left}.marker{position:absolute;width:17px;height:17px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25);cursor:pointer}.marker.crit{background:var(--red)}.marker.warn{background:var(--orange)}.map-info{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;padding:10px;border-radius:11px;box-shadow:var(--shadow);font-size:9px}.map-info h4{font-size:10px;margin:0 0 5px}
   .chart-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:9px}.bars{display:flex;align-items:end;gap:7px;height:160px;padding-top:16px}.bar-col{flex:1;text-align:center}.bar{background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:7px 7px 2px 2px;position:relative}.bar b{position:absolute;top:-16px;left:0;right:0;font-size:7px}.bar-col label{display:block;font-size:7px;color:var(--muted);margin-top:5px}.report{display:flex;justify-content:space-between;gap:8px;align-items:center}.report b{font-size:9px}.report small{display:block;font-size:8px;color:var(--muted);margin-top:3px}.export{border:0;background:#e9f4fb;color:var(--blue);padding:7px;border-radius:8px;font-size:8px;font-weight:900;cursor:pointer}
   .bottom-nav{position:absolute;left:0;right:0;bottom:0;height:70px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:40}.nav-btn{border:0;background:#fff;color:#7b8b9e;font-size:7px;cursor:pointer}.nav-btn span{display:block;font-size:18px;margin-bottom:3px}.nav-btn.active{color:var(--blue);font-weight:900}.toast{display:none;position:absolute;left:15px;right:15px;bottom:80px;background:#06192f;color:#fff;padding:11px;border-radius:11px;text-align:center;font-size:9px;z-index:80;box-shadow:var(--shadow)}
   @media(max-width:600px){.app-shell{padding:0}.phone{width:100vw;height:100vh;border:0;border-radius:0}.notch{display:none}.login-screen{padding-top:30px}.page-head{padding-top:13px}}
   
   /* Laravel separated-view adjustments */
   html,body{width:100%;min-height:100%;}
   body{overflow-x:hidden}
   a{text-decoration:none;color:inherit}
   .app-shell{min-height:100vh;width:100%;padding:24px;display:grid;place-items:center}
   .phone{width:420px;height:880px;}
   .screen{display:block;height:100%;overflow:hidden}
   .static-link{display:block}
   .bottom-nav{display:grid!important}
   .login-page .bottom-nav{display:none!important}
   .menu-card{color:var(--text)}
   @media(max-width:600px){.app-shell{padding:0}.phone{width:100vw;height:100vh;max-height:none;border:0;border-radius:0}.notch{display:none}}
   
   /* Authentication and Yantek dashboard additions */
   .material-symbols-rounded{
       font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
       line-height:1;
   }
   
   .head-icons form{margin:0}
   .icon-btn .material-symbols-rounded{font-size:19px}
   
   .form-alert{
       margin:0 0 12px;
       padding:9px 10px;
       border:1px solid #ffc9cc;
       border-radius:9px;
       background:#fff0f1;
       color:#b32f36;
       font-size:9px;
       line-height:1.45;
   }
   
   .remember-row{
       display:flex;
       align-items:center;
       gap:7px;
       margin:2px 0 12px;
       color:var(--muted);
       font-size:9px;
       cursor:pointer;
   }
   .remember-row input{width:14px;height:14px;margin:0;accent-color:var(--blue)}
   
   .login-card .btn-primary{
       display:flex;
       align-items:center;
       justify-content:center;
       text-decoration:none;
   }
   
   .yantek-menu{grid-template-columns:repeat(3,1fr)}
   .menu-card i .material-symbols-rounded{font-size:20px}
   
   .section-count{
       color:var(--muted);
       font-size:8px;
       font-weight:700;
   }
   
   .empty-state{
       margin-bottom:9px;
       padding:20px 14px;
       border:1px dashed #ccd8e2;
       border-radius:14px;
       background:#f9fbfc;
       text-align:center;
       color:var(--muted);
   }
   .empty-state .material-symbols-rounded{display:block;margin-bottom:7px;font-size:28px;color:var(--blue)}
   .empty-state b{display:block;font-size:10px;color:var(--text)}
   .empty-state p{margin:4px 0 0;font-size:8px}
   
   .bottom-nav .nav-btn{
       display:flex;
       flex-direction:column;
       align-items:center;
       justify-content:center;
       gap:4px;
       text-decoration:none;
   }
   .bottom-nav .nav-btn > .material-symbols-rounded{
       display:block;
       margin:0;
       font-size:21px;
       font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
   }
   .bottom-nav .nav-btn small{font-size:7px}
   .bottom-nav .nav-btn.active > .material-symbols-rounded{
       font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
   }
   
   /* Daily task and delegation functional pages */
   .flash{margin-bottom:10px;padding:10px 11px;border-radius:10px;font-size:9px;font-weight:700;line-height:1.45}
   .flash.success{background:#e7f8ef;border:1px solid #b8ead0;color:#11724f}
   .flash.error{background:#fff0f1;border:1px solid #ffc9cc;color:#b32f36}
   .filter-form{margin-top:12px}.filter-form .search{margin-bottom:9px}
   .action-form{margin:10px 0}.action-form .btn{width:100%}
   .form-card{margin-top:10px}.form-card h4{margin-top:0;margin-bottom:12px}
   .form-card .btn{width:100%}
   .coordinate-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
   .status-panel{display:flex;align-items:center;gap:10px;margin:10px 0;padding:12px;border:1px solid #f3d2a1;border-radius:13px;background:#fff7e9;color:#9a5d05}
   .status-panel .material-symbols-rounded{font-size:24px}.status-panel b{display:block;font-size:10px}.status-panel p{margin:3px 0 0;font-size:8px}
   .success-panel{border-color:#b8ead0;background:#e7f8ef;color:#11724f}
   .member-list{display:grid;gap:8px;margin-top:9px}.member-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:#f5f8fa}.member-row .material-symbols-rounded{font-size:19px;color:var(--blue)}.member-row b{display:block;font-size:9px}.member-row small{display:block;margin-top:2px;font-size:7px;color:var(--muted)}
   .timeline p{font-size:8px;color:var(--muted)}
   .pager{margin:12px 0 4px;font-size:8px}.pager nav{display:flex;justify-content:center}.pager svg{width:14px}.pager p{font-size:8px}.pager a,.pager span{font-size:8px}
   .daily-task-index-page {
    padding-bottom: 110px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #172033;
}

.page-header p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #7b8498;
}

.page-header__action {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5c518;
    color: #172033;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(245, 197, 24, 0.25);
}

.daily-task-filter {
    margin-bottom: 16px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    background: #ffffff;
    border: 1px solid #e9edf4;
    border-radius: 16px;
    padding: 0 15px;
    box-shadow: 0 5px 18px rgba(25, 34, 52, 0.05);
}

.search-box > i {
    margin-right: 10px;
    color: #8b94a7;
}

.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: #172033;
}

.search-box__clear {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8b94a7;
    text-decoration: none;
}

.filter-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 10px;
}

.filter-row .form-control {
    min-height: 44px;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    padding: 0 12px;
    background: #ffffff;
    color: #172033;
}

.btn-filter {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: #172033;
    color: #ffffff;
    font-weight: 700;
}

.daily-task-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.summary-card {
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    box-shadow: 0 5px 16px rgba(25, 34, 52, 0.04);
}

.summary-card span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #7f899b;
}

.summary-card strong {
    font-size: 22px;
    color: #172033;
}

.daily-task-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.daily-task-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(25, 34, 52, 0.06);
}

.daily-task-card__image {
    position: relative;
    min-height: 170px;
    background: #f1f3f7;
}

.daily-task-card__image img {
    width: 100%;
    height: 100%;
    min-height: 170px;
    object-fit: cover;
}

.daily-task-card__placeholder {
    width: 100%;
    height: 100%;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6adba;
    font-size: 30px;
}

.daily-task-card__progress {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border-radius: 9px;
    background: rgba(23, 32, 51, 0.88);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.daily-task-card__content {
    min-width: 0;
    padding: 14px;
}

.daily-task-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.daily-task-card__number {
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    color: #8a93a5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-task-card h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 9px 0 10px;
    font-size: 16px;
    line-height: 1.35;
    color: #172033;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.daily-task-card__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #6f788b;
}

.daily-task-card__meta div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.daily-task-card__meta i {
    width: 13px;
    color: #f0b900;
}

.daily-task-card__description {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #7a8394;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.daily-task-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eff1f5;
    font-size: 11px;
    color: #7b8496;
}

.daily-task-card__footer span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.daily-task-card__detail {
    color: #172033 !important;
    font-weight: 700;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.status-draft {
    background: #eef1f5;
    color: #687386;
}

.status-submitted {
    background: #fff4cf;
    color: #9a6a00;
}

.status-verified {
    background: #ddf7e8;
    color: #16764a;
}

.status-rejected {
    background: #ffe3e3;
    color: #bc3030;
}

.empty-state {
    padding: 42px 22px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 20px;
}

.empty-state__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7d6;
    color: #e3ad00;
    font-size: 27px;
}

.empty-state h2 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 18px;
}

.empty-state p {
    margin: 0 0 20px;
    color: #7c8596;
    font-size: 13px;
    line-height: 1.6;
}

.floating-add-button {
    position: absolute;
    right: 20px;
    bottom: 88px;
    width: 56px;
    height: 56px;
    z-index: 30;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5c518;
    color: #172033;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0 12px 28px rgba(245, 197, 24, 0.35);
}

.pagination-wrapper {
    margin-top: 20px;
}

@media (max-width: 420px) {
    .daily-task-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .daily-task-card__image,
    .daily-task-card__image img,
    .daily-task-card__placeholder {
        min-height: 180px;
    }

    .daily-task-card__content {
        padding: 12px;
    }
}

/* =========================================================
   DAILY TASK CREATE
========================================================= */

.daily-task-create-page {
    padding: 22px 18px 120px;
}

.daily-task-create-page .page-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.daily-task-create-page .page-header__back {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    color: #15243b;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(21, 36, 59, 0.07);
}

.daily-task-create-page .page-header h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    color: #15243b;
}

.daily-task-create-page .page-header p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #7c879b;
}

/* Card */

.form-card {
    margin-bottom: 16px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(20, 35, 58, 0.06);
}

.form-section-title {
    margin: 0 0 17px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
    color: #15243b;
}

/* Input */

.form-group {
    margin-bottom: 17px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group > label,
.photo-upload-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #344258;
}

.required {
    color: #d93c3c;
}

.form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dfe5ed;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #15243b;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

textarea.form-control {
    min-height: 118px;
    resize: vertical;
}

.form-control::placeholder {
    color: #9aa3b2;
}

.form-control:focus {
    border-color: #efbd16;
    box-shadow: 0 0 0 4px rgba(239, 189, 22, 0.13);
}

.form-control-readonly {
    background: #f5f7fa;
    color: #647087;
    cursor: not-allowed;
}

.form-control.is-invalid {
    border-color: #db3f3f;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(219, 63, 63, 0.1);
}

.invalid-feedback {
    display: block;
    margin-top: 6px;
    color: #cf3636;
    font-size: 12px;
    line-height: 1.4;
}

/* Photo upload */

.photo-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.photo-upload-field {
    min-width: 0;
}

.photo-upload-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 1.5px dashed #cbd3df;
    border-radius: 17px;
    background: #f8fafc;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.daily-task-create-page .photo-upload-box:hover {
    border-color: #efbd16;
    background: #fffaf0;
}

.daily-task-create-page .photo-upload-box:active {
    transform: scale(0.98);
}

.daily-task-create-page .photo-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px;
    text-align: center;
    color: #7d8899;
}

.daily-task-create-page .photo-upload-placeholder i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #fff3c6;
    color: #dda900;
    font-size: 20px;
}

.daily-task-create-page .photo-upload-placeholder span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.daily-task-create-page .photo-preview {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.daily-task-create-page .photo-preview[hidden],
.daily-task-create-page .photo-upload-placeholder[hidden] {
    display: none !important;
}

/* Location */

.daily-task-create-page .btn-location {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 16px;
    border: 1px solid #e1e6ed;
    border-radius: 15px;
    background: #f7f9fc;
    color: #25344b;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.daily-task-create-page .btn-location i {
    color: #e2ad00;
    font-size: 17px;
}

.daily-task-create-page .btn-location:hover {
    border-color: #efbd16;
    background: #fff9e9;
}

.daily-task-create-page .btn-location:active {
    transform: scale(0.99);
}

.daily-task-create-page .btn-location:disabled {
    opacity: 0.7;
    cursor: wait;
}

.daily-task-create-page .location-result {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid #ccebd9;
    border-radius: 14px;
    background: #edf9f2;
    color: #207147;
}

.daily-task-create-page .location-result[hidden] {
    display: none !important;
}

.daily-task-create-page .location-result > i {
    flex: 0 0 auto;
    font-size: 20px;
}

.daily-task-create-page .location-result div {
    min-width: 0;
}

.daily-task-create-page .location-result strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.daily-task-create-page .location-result span {
    display: block;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.daily-task-create-page .location-error {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #f0caca;
    border-radius: 14px;
    background: #fff0f0;
    color: #b83232;
    font-size: 12px;
    line-height: 1.5;
}

.daily-task-create-page .location-error[hidden] {
    display: none !important;
}

/* Submit */

.daily-task-create-page .btn-primary-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, #f7c928 0%, #e7ad00 100%);
    color: #15243b;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(231, 173, 0, 0.27);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.daily-task-create-page .btn-primary-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 28px rgba(231, 173, 0, 0.32);
}

.daily-task-create-page .btn-primary-submit:active {
    transform: translateY(0);
}

.daily-task-create-page .btn-primary-submit:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* Alert */

.daily-task-create-page .alert {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.daily-task-create-page .alert-danger {
    border: 1px solid #f0caca;
    background: #fff0f0;
    color: #b83232;
}

.daily-task-create-page .alert-success {
    border: 1px solid #cae9d8;
    background: #edf9f2;
    color: #207147;
}

/* Mobile */

@media (max-width: 380px) {
    .daily-task-create-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .daily-task-create-page .form-card {
        padding: 15px;
        border-radius: 17px;
    }

    .daily-task-create-page .photo-input-grid {
        gap: 9px;
    }

    .daily-task-create-page .photo-upload-placeholder {
        padding: 10px;
    }

    .daily-task-create-page .photo-upload-placeholder i {
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   DAILY TASK SHOW
========================================================= */

.daily-task-show-page {
    padding: 22px 18px 120px;
}

.daily-task-show-page .page-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.daily-task-show-page .page-header__back {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    color: #15243b;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(21, 36, 59, 0.07);
}

.daily-task-show-page .page-header h1 {
    margin: 0;
    color: #15243b;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
}

.daily-task-show-page .page-header p {
    margin: 5px 0 0;
    color: #7c879b;
    font-size: 13px;
    line-height: 1.4;
}

.daily-task-show-page .form-card {
    margin-bottom: 16px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(20, 35, 58, 0.06);
}

.daily-task-show-page .form-section-title {
    margin: 0 0 16px;
    color: #15243b;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.daily-task-show-page .detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.daily-task-show-page .detail-title-row > div {
    min-width: 0;
}

.daily-task-show-page .detail-title-row h2 {
    margin: 5px 0 0;
    color: #15243b;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.daily-task-show-page .detail-label {
    display: block;
    margin-bottom: 4px;
    color: #8791a3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.daily-task-show-page .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.daily-task-show-page .detail-grid > div {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #edf0f4;
    border-radius: 14px;
    background: #f8fafc;
}

.daily-task-show-page .detail-grid strong {
    display: block;
    color: #25344b;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.daily-task-show-page .detail-description {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;
}

.daily-task-show-page .detail-description p {
    margin: 7px 0 0;
    color: #526075;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-line;
}

.daily-task-show-page .status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.daily-task-show-page .status-draft {
    background: #eef1f5;
    color: #687386;
}

.daily-task-show-page .status-submitted {
    background: #fff4cf;
    color: #9a6a00;
}

.daily-task-show-page .status-verified {
    background: #ddf7e8;
    color: #16764a;
}

.daily-task-show-page .status-rejected {
    background: #ffe3e3;
    color: #bc3030;
}

/* Dokumentasi */

.daily-task-show-page .comparison-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.daily-task-show-page .comparison-photo-card {
    min-width: 0;
}

.daily-task-show-page .comparison-photo-card > span {
    display: block;
    margin-bottom: 8px;
    color: #344258;
    font-size: 13px;
    font-weight: 800;
}

.daily-task-show-page .comparison-photo-card a {
    display: block;
    text-decoration: none;
}

.daily-task-show-page .comparison-photo-card img,
.daily-task-show-page .empty-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 16px;
}

.daily-task-show-page .comparison-photo-card img {
    display: block;
    object-fit: cover;
    border: 1px solid #e5e9ef;
    background: #f2f4f7;
}

.daily-task-show-page .empty-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 1.5px dashed #ccd4df;
    background: #f8fafc;
    color: #8b95a5;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

/* Lokasi */

.daily-task-show-page .location-detail-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5eaf0;
    border-radius: 15px;
    background: #f8fafc;
}

.daily-task-show-page .location-detail-card > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff3c6;
    color: #dda900;
    font-size: 18px;
}

.daily-task-show-page .location-detail-card > div {
    min-width: 0;
}

.daily-task-show-page .location-detail-card strong {
    display: block;
    margin-bottom: 4px;
    color: #25344b;
    font-size: 13px;
}

.daily-task-show-page .location-detail-card span {
    display: block;
    color: #6f7a8e;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.daily-task-show-page .btn-map {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 15px;
    background: #15243b;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(21, 36, 59, 0.16);
}

.daily-task-show-page .btn-map:hover {
    color: #ffffff;
}

/* Alert */

.daily-task-show-page .alert {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.daily-task-show-page .alert-success {
    border: 1px solid #cae9d8;
    background: #edf9f2;
    color: #207147;
}

.daily-task-show-page .alert-danger {
    border: 1px solid #f0caca;
    background: #fff0f0;
    color: #b83232;
}

/* Responsive */

@media (max-width: 380px) {
    .daily-task-show-page {
        padding-right: 14px;
        padding-left: 14px;
    }

    .daily-task-show-page .form-card {
        padding: 15px;
        border-radius: 17px;
    }

    .daily-task-show-page .detail-grid {
        grid-template-columns: 1fr;
    }

    .daily-task-show-page .comparison-photo-grid {
        gap: 9px;
    }

    .daily-task-show-page .detail-title-row {
        flex-direction: column;
    }
}